1 files changed, 121 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-password-form/user-password-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-password-form/user-password-form.component.html
new file mode 100644
index 000000000..83eb40944
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-password-form/user-password-form.component.html
@@ -0,0 +1,121 @@
+<div class="cd-col-form">
+  <form #frm="ngForm"
+        [formGroup]="userForm"
+        novalidate>
+    <div class="card">
+      <div i18n="form title"
+           class="card-header">{{ action | titlecase }} {{ resource | upperFirst }}</div>
+
+      <div class="card-body">
+        <!-- Old password -->
+        <div class="form-group row">
+          <label class="cd-col-form-label required"
+                 for="oldpassword"
+                 i18n>Old password</label>
+          <div class="cd-col-form-input">
+            <div class="input-group">
+              <input class="form-control"
+                     type="password"
+                     placeholder="Old password..."
+                     id="oldpassword"
+                     formControlName="oldpassword"
+                     autocomplete="new-password"
+                     autofocus>
+              <span class="input-group-append">
+                <button class="btn btn-light"
+                        cdPasswordButton="oldpassword">
+                </button>
+              </span>
+            </div>
+            <span class="invalid-feedback"
+                  *ngIf="userForm.showError('oldpassword', frm, 'required')"
+                  i18n>This field is required.</span>
+            <span class="invalid-feedback"
+                  *ngIf="userForm.showError('oldpassword', frm, 'notmatch')"
+                  i18n>The old and new passwords must be different.</span>
+          </div>
+        </div>
+
+        <!-- New password -->
+        <div class="form-group row">
+          <label class="cd-col-form-label"
+                 for="newpassword">
+            <span class="required"
+                  i18n>New password</span>
+            <cd-helper *ngIf="passwordPolicyHelpText.length > 0"
+                       class="text-pre-wrap"
+                       html="{{ passwordPolicyHelpText }}">
+            </cd-helper>
+          </label>
+          <div class="cd-col-form-input">
+            <div class="input-group">
+              <input class="form-control"
+                     type="password"
+                     placeholder="Password..."
+                     id="newpassword"
+                     autocomplete="new-password"
+                     formControlName="newpassword">
+              <span class="input-group-append">
+                <button type="button"
+                        class="btn btn-light"
+                        cdPasswordButton="newpassword">
+                </button>
+              </span>
+            </div>
+            <div class="password-strength-level">
+              <div class="{{ passwordStrengthLevelClass }}"
+                   data-toggle="tooltip"
+                   title="{{ passwordValuation }}">
+              </div>
+            </div>
+            <span class="invalid-feedback"
+                  *ngIf="userForm.showError('newpassword', frm, 'required')"
+                  i18n>This field is required.</span>
+            <span class="invalid-feedback"
+                  *ngIf="userForm.showError('newpassword', frm, 'notmatch')"
+                  i18n>The old and new passwords must be different.</span>
+            <span class="invalid-feedback"
+                  *ngIf="userForm.showError('newpassword', frm, 'passwordPolicy')">
+              {{ passwordValuation }}
+            </span>
+          </div>
+        </div>
+
+        <!-- Confirm new password -->
+        <div class="form-group row">
+          <label class="cd-col-form-label required"
+                 for="confirmnewpassword"
+                 i18n>Confirm new password</label>
+          <div class="cd-col-form-input">
+            <div class="input-group">
+              <input class="form-control"
+                     type="password"
+                     autocomplete="new-password"
+                     placeholder="Confirm new password..."
+                     id="confirmnewpassword"
+                     formControlName="confirmnewpassword">
+              <span class="input-group-append">
+                <button class="btn btn-light"
+                        cdPasswordButton="confirmnewpassword">
+                </button>
+              </span>
+            </div>
+            <span class="invalid-feedback"
+                  *ngIf="userForm.showError('confirmnewpassword', frm, 'required')"
+                  i18n>This field is required.</span>
+            <span class="invalid-feedback"
+                  *ngIf="userForm.showError('confirmnewpassword', frm, 'match')"
+                  i18n>Password confirmation doesn't match the new password.</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="card-footer">
+        <cd-form-button-panel (submitActionEvent)="onSubmit()"
+                              [form]="userForm"
+                              [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
+                              wrappingClass="text-right"></cd-form-button-panel>
+      </div>
+    </div>
+  </form>
+</div>