blob: 365cf7fcef65ef61628e26da92d7fe452fbc0312 [file] [log] [blame]
Yoshie Muranaka4148f2e2020-01-29 13:21:12 -08001
2<div class="row column">
3 <div class="page-header">
4 <h1>Profile settings</h1>
5 </div>
6</div>
7<div class="row column">
8 <div class="column medium-12 large-5 xlarge-4">
9 <section class="section">
10 <div class="section-header">
11 <h2 class="section-title">Profile information</h2>
12 </div>
13 <dl>
14 <dt class="label">Username</dt>
15 <dd>{{username}}</dd>
16 </dl>
17 </section>
18 </div>
19</div>
20<div class="row column">
21 <div class="column medium-12 large-5 xlarge-4">
22 <section class="section">
23 <div class="section-header">
24 <h2 class="section-title">Change password</h2>
25 </div>
26 <form name="form">
27 <!-- Password -->
28 <div class="field-group-container">
29 <label for="password">New password</label>
30 <p class="label__helper-text">Password must between <span class="nowrap">{{minPasswordLength}} – {{maxPasswordLength}}</span> characters</p>
31 <input id="password"
32 name="password"
33 type="password"
34 required
35 ng-minlength="minPasswordLength"
36 ng-maxlength="maxPasswordLength"
37 autocomplete="new-password"
38 ng-model="password"
39 password-visibility-toggle/>
40 <div ng-if="form.password.$invalid && form.password.$dirty" class="form__validation-message">
41 <span ng-show="form.password.$error.required">
42 Field is required</span>
43 <span ng-show="form.password.$error.minlength || form.password.$error.maxlength">
44 Length must be between <span class="nowrap">{{minPasswordLength}} – {{maxPasswordLength}}</span> characters</span>
45 </div>
46 </div>
47 <!-- Password confirm -->
48 <div class="field-group-container">
49 <label for="passwordConfirm">Confirm new password</label>
50 <input id="passwordConfirm"
51 name="passwordConfirm"
52 type="password"
53 required
54 autocomplete="new-password"
55 ng-model="passwordConfirm"
56 password-visibility-toggle
57 password-confirm
58 first-password="form.password.$modelValue"/>
59 <div ng-if="form.passwordConfirm.$invalid && form.passwordConfirm.$dirty" class="form__validation-message">
60 <span ng-show="form.passwordConfirm.$error.required">
61 Field is required</span>
62 <span ng-show="form.passwordConfirm.$error.passwordConfirm"
63 ng-hide="form.passwordConfirm.$error.required">
64 Passwords do not match</span>
65 </div>
66 </div>
67 <!-- Form actions -->
68 <div class="field-group-container">
69 <button class="btn btn-primary" type="submit" ng-click="onSubmit(form)">
70 Change password
71 </button>
72 </div>
73 </form>
74 </section>
75 </div>
76</div>