Create a password selection page (#568)

* password reset form * dont use initializer
google · Sep 18, 2020 · 51bf944 · 51bf944
1 parent aa95228
commit 51bf944
Show file tree

Hide file tree

Showing 3 changed files with 148 additions and 0 deletions.
diff --git a/cmd/server/assets/login/select-password.html b/cmd/server/assets/login/select-password.html
@@ -0,0 +1,115 @@
+{{define "login/select-password"}}
+<!doctype html>
+<html lang="en">
+
+<head>
+  {{template "floatingform" .}}
+  {{template "head" .}}
+  {{template "firebase" .}}
+</head>
+
+<body class="bg-light">
+  <main role="main" class="container">
+    {{template "flash" .}}
+
+    <div class="d-flex vh-100">
+      <div class="d-flex w-100 justify-content-center align-self-center">
+        <div class="col-sm-6">
+          <div class="card shadow-sm">
+            <div class="card-header">Select new password</div>
+            <div class="card-body">
+              <form id="loginForm" class="floating-form" action="/" method="POST">
+                <div class="form-label-group">
+                  <input type="email" id="email" name="email" class="form-control" placeholder="Email address" required
+                    autofocus />
+                  <label for="email">Email address</label>
+                </div>
+
+                <div class="form-label-group mb-2">
+                  <input type="password" id="password" name="password" class="form-control" placeholder="Password"
+                    autocomplete="new-password" required />
+                  <label for="password">Password</label>
+                </div>
+                <div class="form-label-group">
+                  <input type="password" id="retype" name="retype" class="form-control" placeholder="Retype password"
+                    autocomplete="new-password" required />
+                  <label for="retype">Retype password</label>
+                </div>
+
+                <button type="submit" id="submit" class="btn btn-primary btn-block">Set password</button>
+              </form>
+            </div>
+            <div class="card-body">
+              <a class="card-link" href="/">&larr; Login</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+
+  {{template "scripts" .}}
+  {{template "loginscripts" .}}
+
+  <script type="text/javascript">
+    $(function() {
+      let $form = $('#loginForm');
+      let $submit = $('#submit');
+      let $email = $('#email');
+      let $password = $('#password');
+      let $retype = $('#retype');
+
+      let urlVars = getUrlVars();
+      let code = urlVars["oobCode"];
+      if (!code) {
+        code = ""
+      }
+
+      firebase.auth().verifyPasswordResetCode(code)
+        .then(function(email) {
+          $email.val(email);
+        }).catch(function(error) {
+          flash.error("Invalid password reset code. "
+            + "The code may be malformed, expired, or has already been used.");
+          $submit.prop('disabled', true);
+        });
+
+      $form.on('submit', function(event) {
+        event.preventDefault();
+
+        let email = $email.val();
+        let pwd = $password.val();
+        if (pwd != $retype.val()) {
+          flash("Password and retyped passwords must match.", "danger");
+          return;
+        }
+
+        // Disable the submit button so we only attempt once.
+        $submit.prop('disabled', true);
+
+        firebase.auth().confirmPasswordReset(code, pwd)
+          .then(function() {
+            flash.alert("New password confirmed.");
+          }).catch(function(error) {
+            clearExistingFlash();
+            flash.error(error)
+            $submit.prop('disabled', false);
+          });
+      });
+    });
+
+    function getUrlVars() {
+      let vars = [], hash;
+      let queryParams = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
+      for (var i = 0; i < queryParams.length; i++) {
+        v = queryParams[i].split('=');
+        vars.push(v[0]);
+        vars[v[0]] = v[1];
+      }
+      return vars;
+    }
+  </script>
+</body>
+
+</html>
+{{end}}
diff --git a/cmd/server/main.go b/cmd/server/main.go
@@ -210,6 +210,7 @@ func realMain(ctx context.Context) error {
 
 			sub.Handle("/", loginController.HandleLogin()).Methods("GET")
 			sub.Handle("/login/reset-password", loginController.HandleResetPassword()).Methods("GET")
+			sub.Handle("/login/select-password", loginController.HandleSelectPassword()).Methods("GET")
 			sub.Handle("/session", loginController.HandleCreateSession()).Methods("POST")
 			sub.Handle("/signout", loginController.HandleSignOut()).Methods("GET")
 

diff --git a/pkg/controller/login/select_password.go b/pkg/controller/login/select_password.go
@@ -0,0 +1,32 @@
+// Copyright 2020 Google LLC
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+// Package login defines the controller for the login page.
+package login
+
+import (
+	"net/http"
+
+	"github.com/google/exposure-notifications-verification-server/pkg/controller"
+)
+
+func (c *Controller) HandleSelectPassword() http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		ctx := r.Context()
+
+		m := controller.TemplateMapFromContext(ctx)
+		m["firebase"] = c.config.Firebase
+		c.h.RenderHTML(w, "login/select-password", m)
+	})
+}