added reset password link inside user drop down

cms/static/js/base.js

@@ -117,8 +117,18 @@ $(document).ready(function() {
     $('.edit-subsection-publish-settings').on('change', '.start-date, .start-time', function() {
         $('.edit-subsection-publish-settings').find('.save-button').show();
     });
+
+    $('.change-password-link').bind('click', changePassword);
 });
 
+function changePassword(e) {
+    e.preventDefault();
+
+    $modal = $('.password-modal').show();
+    $modal.find('.close-button').bind('click', hideModal);
+    $modalCover.show();
+}
+
 function editSectionPublishDate(e) {
     e.preventDefault();
     $modal = $('.edit-subsection-publish-settings').show();

cms/static/sass/_header.scss

@@ -38,10 +38,6 @@ body.no-header {
 		@include active;
 	}
 
-	#import-tab {
-		@include box-shadow(1px 0 0 #787981 inset, -1px 0 0 #3d3e44 inset, 1px 0 0 #787981, -1px 0 0 #3d3e44);
-	}
-
 	.left {
 		width: 700px;
 	}
@@ -56,15 +52,71 @@ body.no-header {
 		line-height: 18px;
 	}
 
+	.user-menu {
+		float: right;
+		position: relative;
+
+		&:hover {
+			.username {
+				background: #fff;
+				border: 1px solid #2c2e33;
+				border-bottom: none;
+				color: $extraDarkGrey;
+			}
+
+			.user-drop {
+				display: block;
+			}
+		}
+	}
+
+	.user-drop {
+		display: none;
+		position: absolute;
+		top: 36px;
+		right: 0;
+		z-index: 999;
+		width: 170px;
+		border: 1px solid #2c2e33;
+		@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(255, 255, 255, 0.05) inset);
+		background: #fff;
+
+		a {
+			display: block;
+			width: 100%;
+			height: 37px;
+			@include box-sizing(border-box);
+			@include box-shadow(none);
+			color: $blue;
+
+			&:hover {
+				color: $orange;
+			}
+		}
+	}
+
 	a,
 	.username {
+		position: relative;
 		float: left;
 		display: inline-block;
 		height: 29px;
-		padding: 7px 15px 0;
+		padding: 7px 15px 0;		
 		color: #e4e6ee;
 	}
 
+	.username {
+		z-index: 1000;
+		border: 1px solid transparent;
+
+		.drop-arrow {
+			margin-left: 3px;
+			vertical-align: top;
+			font-size: 11px;
+			line-height: 19px;
+		}
+	}
+
 	.class-nav,
 	.class-nav li {
 		float: left;
@@ -76,6 +128,30 @@ body.no-header {
 		&:hover {
 			background: rgba(255, 255, 255, .1);
 		}
+	}
+}
+
+.modal.password-modal {
+	width: 500px;
+	height: auto;
+	margin-left: -250px;
+	text-align: center;
+
+	h1 {
+		float: none;
+		margin: 0 0 30px;
+		font-size: 34px;
+		font-weight: 300;
+	}
+
+	.modal-body {
+		overflow: hidden;
+		height: auto;
+	}
 
+	.close-button {
+		position: absolute;
+		top: 5px;
+		right: 5px;
 	}
 }
\ No newline at end of file

cms/static/sass/_modal.scss

@@ -52,6 +52,14 @@
 
 	.close-button {
 		@include white-button;
-		margin-top: 13px;
+		position: absolute;
+		top: 0;
+		right: 15px;
+		width: 29px;
+		height: 29px;
+		padding: 0 !important;
+		border-radius: 17px !important;
+		line-height: 29px;
+		text-align: center;
 	}
 }
\ No newline at end of file

cms/templates/widgets/header.html

@@ -17,13 +17,32 @@
       </ul>
       % endif
     </div>
-    <div class="right">
-      <span class="username">${ user.username }</span>
-      % if user.is_authenticated():
-         <a href="${reverse('logout')}">Log out</a>
-      % else:
-         <a href="${reverse('login')}">Log in</a>
-      % endif
-    </ul>
+    <div class="user-menu">
+      <span class="username">${ user.username } <span class="drop-arrow">▾</span></span>
+      <div class="user-drop">
+        <ul class="user-drop-items">
+          <li>
+            <a href="#" class="change-password-link">Change Password</a>
+          </li>
+          <li>
+            % if user.is_authenticated():
+               <a href="${reverse('logout')}">Log out</a>
+            % else:
+               <a href="${reverse('login')}">Log in</a>
+            % endif
+          </li>
+        </ul>
+      </div>
+    </div>
   </nav>
 </header>
+
+<div class="password-modal modal">
+  <a href="#" class="close-button"><span class="close-icon"></span></a>
+  <div class="modal-body">
+    <h1>Change Password</h1>
+    <p>A link to reset your password has been sent to your email.</p>
+  </div>
+</div>
+
+<div class="modal-cover"></div>
\ No newline at end of file