From 4148f2eee6313068d3223871005160b2902abb18 Mon Sep 17 00:00:00 2001
From: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Date: Wed, 29 Jan 2020 13:21:12 -0800
Subject: Create profile settings page

Adding a profile settings page so readonly and operator
roles are able to change their own password.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Iee9536255ad47f4df4af8746c1e01da37c407f2b
---
 .../controllers/profile-settings-controller.html   | 76 ++++++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 app/profile-settings/controllers/profile-settings-controller.html

(limited to 'app/profile-settings/controllers/profile-settings-controller.html')

diff --git a/app/profile-settings/controllers/profile-settings-controller.html b/app/profile-settings/controllers/profile-settings-controller.html
new file mode 100644
index 0000000..365cf7f
--- /dev/null
+++ b/app/profile-settings/controllers/profile-settings-controller.html
@@ -0,0 +1,76 @@
+
+<div class="row column">
+  <div class="page-header">
+    <h1>Profile settings</h1>
+  </div>
+</div>
+<div class="row column">
+  <div class="column medium-12 large-5 xlarge-4">
+    <section class="section">
+      <div class="section-header">
+        <h2 class="section-title">Profile information</h2>
+      </div>
+      <dl>
+        <dt class="label">Username</dt>
+        <dd>{{username}}</dd>
+      </dl>
+    </section>
+  </div>
+</div>
+<div class="row column">
+  <div class="column medium-12 large-5 xlarge-4">
+    <section class="section">
+      <div class="section-header">
+        <h2 class="section-title">Change password</h2>
+      </div>
+      <form name="form">
+        <!-- Password -->
+        <div class="field-group-container">
+          <label for="password">New password</label>
+          <p class="label__helper-text">Password must between <span class="nowrap">{{minPasswordLength}} – {{maxPasswordLength}}</span> characters</p>
+          <input  id="password"
+                  name="password"
+                  type="password"
+                  required
+                  ng-minlength="minPasswordLength"
+                  ng-maxlength="maxPasswordLength"
+                  autocomplete="new-password"
+                  ng-model="password"
+                  password-visibility-toggle/>
+          <div ng-if="form.password.$invalid && form.password.$dirty" class="form__validation-message">
+            <span ng-show="form.password.$error.required">
+              Field is required</span>
+            <span ng-show="form.password.$error.minlength || form.password.$error.maxlength">
+              Length must be between <span class="nowrap">{{minPasswordLength}} – {{maxPasswordLength}}</span> characters</span>
+          </div>
+        </div>
+        <!-- Password confirm -->
+        <div class="field-group-container">
+          <label for="passwordConfirm">Confirm new password</label>
+          <input  id="passwordConfirm"
+                  name="passwordConfirm"
+                  type="password"
+                  required
+                  autocomplete="new-password"
+                  ng-model="passwordConfirm"
+                  password-visibility-toggle
+                  password-confirm
+                  first-password="form.password.$modelValue"/>
+          <div ng-if="form.passwordConfirm.$invalid && form.passwordConfirm.$dirty" class="form__validation-message">
+            <span ng-show="form.passwordConfirm.$error.required">
+              Field is required</span>
+            <span ng-show="form.passwordConfirm.$error.passwordConfirm"
+                  ng-hide="form.passwordConfirm.$error.required">
+              Passwords do not match</span>
+          </div>
+        </div>
+        <!-- Form actions -->
+        <div class="field-group-container">
+          <button class="btn btn-primary" type="submit" ng-click="onSubmit(form)">
+            Change password
+          </button>
+        </div>
+      </form>
+    </section>
+  </div>
+</div>
\ No newline at end of file
-- 
cgit v1.2.3