summaryrefslogtreecommitdiffstats
path: root/app/profile-settings/controllers/profile-settings-controller.html
blob: 365cf7fcef65ef61628e26da92d7fe452fbc0312 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
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>
OpenPOWER on IntegriCloud