Making the "forgot password" dialog look a bit better.

03470d6d · Shane Tomlinson · e49501d1 · 03470d6d · 03470d6d · 03470d6d
Commit 03470d6d authored 13 years ago by Shane Tomlinson
--- a/browserid/static/dialog/controllers/forgotpassword_controller.js
+++ b/browserid/static/dialog/controllers/forgotpassword_controller.js
@@ -44,14 +44,14 @@
          bodyVars: options
        });
      
-        $('#formWrap').addClass("standardbg");
+        $("body").addClass("forgotpassword");
      },


      submit: function() {
-        $('#formWrap').removeClass("standardbg");
+        $("body").removeClass("forgotpassword");

-        var email = $('#email_input').val();
+        var email = $("#email_input").val();
        this.close("forgotpassword:reset", {
          email: email
        });

--- a/browserid/static/dialog/css/popup.css
+++ b/browserid/static/dialog/css/popup.css
@@ -18,12 +18,10 @@ body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 21px;
-}
-
-.standardbg {
    background-image: url('/i/bg.png');
 }

+
 .sans {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
@@ -100,6 +98,20 @@ h1 {
    background-color: rgba(0, 0, 0, 0.035);
 }

+.forgotpassword #formWrap {
+    background-color: rgba(0, 0, 0, 0.035);
+    background-image: url('/i/bg.png');
+    width: 325px;
+    margin: 0 auto;
+}
+
+.forgotpassword #formWrap > form {
+    height: 250px;
+    width: 325px;
+    display: table-cell;
+    vertical-align: middle;
+}
+
 #signIn,
 #favicon {
    display: inline-block;
@@ -440,7 +452,7 @@ html[xmlns] .cf {
 .add {
    font-size: 80%;
 }
-#inputs li:only-child input {
+#inputs li:only-child input[type=radio] {
    display: none;
 }
 #differentEmail {

--- a/browserid/static/dialog/views/forgotpassword.ejs
+++ b/browserid/static/dialog/views/forgotpassword.ejs
-    <div class="formRow">
-      <label for="email_input"> Email </label>
-      <input id="email_input" type="email" value="<%= email %>"/>
-    </div>
+    <strong>Reset Password</strong>
+
+    <ul id="inputs">
+      <li>
+        <label for="email_input"> Email </label>
+        <input id="email_input" type="email" value="<%= email %>"/>
+      </li>
+    </ul>

    <div class="submit cf">
        <button>Reset Password</button>

--- a/browserid/views/dialog.ejs
+++ b/browserid/views/dialog.ejs
@@ -9,7 +9,7 @@
  <link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
  <title>Browser ID</title>
 </head>
-  <body class="standardbg">
+  <body>
 	</body>
 </html>
 <script type='text/javascript' src='/vepbundle'></script>