1
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>