generator-jhipster 8.6.0 → 8.7.0

package/dist/generators/vue/templates/src/main/webapp/app/account/register/register.vue.ejs

@@ -1,155 +1,223 @@
 <template>
-    <div>
-        <div class="row justify-content-center">
-            <div class="col-md-8 toastify-container">
-                <h1 v-text="t$('register.title')" id="register-title" data-cy="registerTitle">Registration</h1>
+  <div>
+    <div class="row justify-content-center">
+      <div class="col-md-8 toastify-container">
+        <h1 v-text="t$('register.title')" id="register-title" data-cy="registerTitle">Registration</h1>
 
-                <div class="alert alert-success" role="alert" v-if="success" v-html="t$('register.messages.success')">
-                    <strong>Registration saved!</strong> Please check your email for confirmation.
-                </div>
-
-                <div class="alert alert-danger" role="alert" v-if="error" v-html="t$('register.messages.error.fail')">
-                    <strong>Registration failed!</strong> Please try again later.
-                </div>
+        <div class="alert alert-success" role="alert" v-if="success" v-html="t$('register.messages.success')">
+          <strong>Registration saved!</strong> Please check your email for confirmation.
+        </div>
 
-                <div class="alert alert-danger" role="alert" v-if="errorUserExists"
-                    v-html="t$('register.messages.error.userexists')">
-                    <strong>Login name already registered!</strong> Please choose another one.
-                </div>
+        <div class="alert alert-danger" role="alert" v-if="error" v-html="t$('register.messages.error.fail')">
+          <strong>Registration failed!</strong> Please try again later.
+        </div>
 
-                <div class="alert alert-danger" role="alert" v-if="errorEmailExists"
-                    v-html="t$('register.messages.error.emailexists')">
-                    <strong>Email is already in use!</strong> Please choose another one.
-                </div>
-            </div>
+        <div class="alert alert-danger" role="alert" v-if="errorUserExists" v-html="t$('register.messages.error.userexists')">
+          <strong>Login name already registered!</strong> Please choose another one.
         </div>
-        <div class="row justify-content-center">
-            <div class="col-md-8">
-                <form id="register-form" name="registerForm" v-on:submit.prevent="register()"
-                    v-if="!success" no-validate>
-                    <div class="form-group">
-                        <label class="form-control-label" for="username"
-                            v-text="t$('global.form[\'username.label\']')">Username</label>
-                        <input type="text" class="form-control" v-model="v$.registerAccount.login.$model" id="username"
-                            name="login"
-                            :class="{ valid: !v$.registerAccount.login.$invalid, invalid: v$.registerAccount.login.$invalid }"
-                            required minlength="1" maxlength="50"
-                            pattern="^[a-zA-Z0-9!#$&'*+=?^_`{|}~.-]+@?[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$"
-                            v-bind:placeholder="t$('global.form[\'username.placeholder\']')"
-                            data-cy="username" />
-                        <div v-if="v$.registerAccount.login.$anyDirty && v$.registerAccount.login.$invalid">
-                            <small class="form-text text-danger" v-if="!v$.registerAccount.login.required"
-                                v-text="t$('register.messages.validate.login.required')">
-                                Your username is required.
-                            </small>
-                            <small class="form-text text-danger" v-if="!v$.registerAccount.login.minLength"
-                                v-text="t$('register.messages.validate.login.minlength')">
-                                Your username is required to be at least 1 character.
-                            </small>
-                            <small class="form-text text-danger" v-if="!v$.registerAccount.login.maxLength"
-                                v-text="t$('register.messages.validate.login.maxlength')">
-                                Your username cannot be longer than 50 characters.
-                            </small>
-                            <small class="form-text text-danger" v-if="!v$.registerAccount.login.pattern"
-                                v-text="t$('register.messages.validate.login.pattern')">
-                                Your username can only contain letters and digits.
-                            </small>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label class="form-control-label" for="email"
-                            v-text="t$('global.form[\'email.label\']')">Email</label>
-                        <input type="email" class="form-control" id="email" name="email"
-                            :class="{ valid: !v$.registerAccount.email.$invalid, invalid: v$.registerAccount.email.$invalid }"
-                            v-model="v$.registerAccount.email.$model" minlength="5" maxlength="254" email required
-                            v-bind:placeholder="t$('global.form[\'email.placeholder\']')"
-                            data-cy="email" />
-                        <div v-if="v$.registerAccount.email.$anyDirty && v$.registerAccount.email.$invalid">
-                            <small class="form-text text-danger" v-if="!v$.registerAccount.email.required"
-                                v-text="t$('global.messages.validate.email.required')">
-                                Your email is required.
-                            </small>
-                            <small class="form-text text-danger" v-if="!v$.registerAccount.email.email"
-                                v-text="t$('global.messages.validate.email.invalid')">
-                                Your email is invalid.
-                            </small>
-                            <small class="form-text text-danger" v-if="!v$.registerAccount.email.minLength"
-                                v-text="t$('global.messages.validate.email.minlength')">
-                                Your email is required to be at least 5 characters.
-                            </small>
-                            <small class="form-text text-danger" v-if="!v$.registerAccount.email.maxLength"
-                                v-text="t$('global.messages.validate.email.maxlength')">
-                                Your email cannot be longer than 100 characters.
-                            </small>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label class="form-control-label" for="firstPassword"
-                            v-text="t$('global.form[\'newpassword.label\']')">New password</label>
-                        <input type="password" class="form-control" id="firstPassword" name="password"
-                            :class="{ valid: !v$.registerAccount.password.$invalid, invalid: v$.registerAccount.password.$invalid }"
-                            v-model="v$.registerAccount.password.$model" minlength="4" maxlength="50" required
-                            v-bind:placeholder="t$('global.form[\'newpassword.placeholder\']')"
-                            data-cy="firstPassword" />
-                        <div v-if="v$.registerAccount.password.$anyDirty && v$.registerAccount.password.$invalid">
-                            <small class="form-text text-danger" v-if="!v$.registerAccount.password.required"
-                                v-text="t$('global.messages.validate.newpassword.required')">
-                                Your password is required.
-                            </small>
-                            <small class="form-text text-danger" v-if="!v$.registerAccount.password.minLength"
-                                v-text="t$('global.messages.validate.newpassword.minlength')">
-                                Your password is required to be at least 4 characters.
-                            </small>
-                            <small class="form-text text-danger" v-if="!v$.registerAccount.password.maxLength"
-                                v-text="t$('global.messages.validate.newpassword.maxlength')">
-                                Your password cannot be longer than 50 characters.
-                            </small>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label class="form-control-label" for="secondPassword"
-                            v-text="t$('global.form[\'confirmpassword.label\']')">New password confirmation</label>
-                        <input type="password" class="form-control" id="secondPassword" name="confirmPasswordInput"
-                            :class="{ valid: !v$.confirmPassword.$invalid, invalid: v$.confirmPassword.$invalid }"
-                            v-model="v$.confirmPassword.$model" minlength="4" maxlength="50" required
-                            v-bind:placeholder="t$('global.form[\'confirmpassword.placeholder\']')"
-                            data-cy="secondPassword" />
-                        <div v-if="v$.confirmPassword.$dirty && v$.confirmPassword.$invalid">
-                            <small class="form-text text-danger" v-if="!v$.confirmPassword.required"
-                                v-text="t$('global.messages.validate.confirmpassword.required')">
-                                Your confirmation password is required.
-                            </small>
-                            <small class="form-text text-danger" v-if="!v$.confirmPassword.minLength"
-                                v-text="t$('global.messages.validate.confirmpassword.minlength')">
-                                Your confirmation password is required to be at least 4 characters.
-                            </small>
-                            <small class="form-text text-danger" v-if="!v$.confirmPassword.maxLength"
-                                v-text="t$('global.messages.validate.confirmpassword.maxlength')">
-                                Your confirmation password cannot be longer than 50 characters.
-                            </small>
-                            <small class="form-text text-danger" v-if="!v$.confirmPassword.sameAsPassword"
-                                v-text="t$('global.messages.error.dontmatch')">
-                                The password and its confirmation do not match!
-                            </small>
-                        </div>
-                    </div>
 
-                    <button type="submit" :disabled="v$.$invalid" class="btn btn-primary"
-                        v-text="t$('register.form.button')" data-cy="submit">Register</button>
-                </form>
-                <p></p>
-                <div class="alert alert-warning">
-                    <span v-text="t$('global.messages.info.authenticated.prefix')">If you want to </span>
-                    <a class="alert-link" v-on:click="openLogin()"
-                        v-text="t$('global.messages.info.authenticated.link')">sign in</a><span
-                        v-html="t$('global.messages.info.authenticated.suffix')">, you can try the default
-                        accounts:<br />- Administrator (login="admin" and password="admin") <br />- User (login="user"
-                        and
-                        password="user").</span>
-                </div>
+        <div class="alert alert-danger" role="alert" v-if="errorEmailExists" v-html="t$('register.messages.error.emailexists')">
+          <strong>Email is already in use!</strong> Please choose another one.
+        </div>
+      </div>
+    </div>
+    <div class="row justify-content-center">
+      <div class="col-md-8">
+        <form id="register-form" name="registerForm" @submit.prevent="register()" v-if="!success" no-validate>
+          <div class="form-group">
+            <label class="form-control-label" for="username" v-text="t$('global.form[\'username.label\']')">Username</label>
+            <input
+              type="text"
+              class="form-control"
+              v-model="v$.registerAccount.login.$model"
+              id="username"
+              name="login"
+              :class="{ valid: !v$.registerAccount.login.$invalid, invalid: v$.registerAccount.login.$invalid }"
+              required
+              minlength="1"
+              maxlength="50"
+              pattern="^[a-zA-Z0-9!#$&'*+=?^_`{|}~.-]+@?[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$"
+              :placeholder="t$('global.form[\'username.placeholder\']')"
+              data-cy="username"
+            />
+            <div v-if="v$.registerAccount.login.$anyDirty && v$.registerAccount.login.$invalid">
+              <small
+                class="form-text text-danger"
+                v-if="!v$.registerAccount.login.required"
+                v-text="t$('register.messages.validate.login.required')"
+              >
+                Your username is required.
+              </small>
+              <small
+                class="form-text text-danger"
+                v-if="!v$.registerAccount.login.minLength"
+                v-text="t$('register.messages.validate.login.minlength')"
+              >
+                Your username is required to be at least 1 character.
+              </small>
+              <small
+                class="form-text text-danger"
+                v-if="!v$.registerAccount.login.maxLength"
+                v-text="t$('register.messages.validate.login.maxlength')"
+              >
+                Your username cannot be longer than 50 characters.
+              </small>
+              <small
+                class="form-text text-danger"
+                v-if="!v$.registerAccount.login.pattern"
+                v-text="t$('register.messages.validate.login.pattern')"
+              >
+                Your username can only contain letters and digits.
+              </small>
+            </div>
+          </div>
+          <div class="form-group">
+            <label class="form-control-label" for="email" v-text="t$('global.form[\'email.label\']')">Email</label>
+            <input
+              type="email"
+              class="form-control"
+              id="email"
+              name="email"
+              :class="{ valid: !v$.registerAccount.email.$invalid, invalid: v$.registerAccount.email.$invalid }"
+              v-model="v$.registerAccount.email.$model"
+              minlength="5"
+              maxlength="254"
+              email
+              required
+              :placeholder="t$('global.form[\'email.placeholder\']')"
+              data-cy="email"
+            />
+            <div v-if="v$.registerAccount.email.$anyDirty && v$.registerAccount.email.$invalid">
+              <small
+                class="form-text text-danger"
+                v-if="!v$.registerAccount.email.required"
+                v-text="t$('global.messages.validate.email.required')"
+              >
+                Your email is required.
+              </small>
+              <small
+                class="form-text text-danger"
+                v-if="!v$.registerAccount.email.email"
+                v-text="t$('global.messages.validate.email.invalid')"
+              >
+                Your email is invalid.
+              </small>
+              <small
+                class="form-text text-danger"
+                v-if="!v$.registerAccount.email.minLength"
+                v-text="t$('global.messages.validate.email.minlength')"
+              >
+                Your email is required to be at least 5 characters.
+              </small>
+              <small
+                class="form-text text-danger"
+                v-if="!v$.registerAccount.email.maxLength"
+                v-text="t$('global.messages.validate.email.maxlength')"
+              >
+                Your email cannot be longer than 100 characters.
+              </small>
+            </div>
+          </div>
+          <div class="form-group">
+            <label class="form-control-label" for="firstPassword" v-text="t$('global.form[\'newpassword.label\']')">New password</label>
+            <input
+              type="password"
+              class="form-control"
+              id="firstPassword"
+              name="password"
+              :class="{ valid: !v$.registerAccount.password.$invalid, invalid: v$.registerAccount.password.$invalid }"
+              v-model="v$.registerAccount.password.$model"
+              minlength="4"
+              maxlength="50"
+              required
+              :placeholder="t$('global.form[\'newpassword.placeholder\']')"
+              data-cy="firstPassword"
+            />
+            <div v-if="v$.registerAccount.password.$anyDirty && v$.registerAccount.password.$invalid">
+              <small
+                class="form-text text-danger"
+                v-if="!v$.registerAccount.password.required"
+                v-text="t$('global.messages.validate.newpassword.required')"
+              >
+                Your password is required.
+              </small>
+              <small
+                class="form-text text-danger"
+                v-if="!v$.registerAccount.password.minLength"
+                v-text="t$('global.messages.validate.newpassword.minlength')"
+              >
+                Your password is required to be at least 4 characters.
+              </small>
+              <small
+                class="form-text text-danger"
+                v-if="!v$.registerAccount.password.maxLength"
+                v-text="t$('global.messages.validate.newpassword.maxlength')"
+              >
+                Your password cannot be longer than 50 characters.
+              </small>
             </div>
+          </div>
+          <div class="form-group">
+            <label class="form-control-label" for="secondPassword" v-text="t$('global.form[\'confirmpassword.label\']')"
+              >New password confirmation</label
+            >
+            <input
+              type="password"
+              class="form-control"
+              id="secondPassword"
+              name="confirmPasswordInput"
+              :class="{ valid: !v$.confirmPassword.$invalid, invalid: v$.confirmPassword.$invalid }"
+              v-model="v$.confirmPassword.$model"
+              minlength="4"
+              maxlength="50"
+              required
+              :placeholder="t$('global.form[\'confirmpassword.placeholder\']')"
+              data-cy="secondPassword"
+            />
+            <div v-if="v$.confirmPassword.$dirty && v$.confirmPassword.$invalid">
+              <small
+                class="form-text text-danger"
+                v-if="!v$.confirmPassword.required"
+                v-text="t$('global.messages.validate.confirmpassword.required')"
+              >
+                Your confirmation password is required.
+              </small>
+              <small
+                class="form-text text-danger"
+                v-if="!v$.confirmPassword.minLength"
+                v-text="t$('global.messages.validate.confirmpassword.minlength')"
+              >
+                Your confirmation password is required to be at least 4 characters.
+              </small>
+              <small
+                class="form-text text-danger"
+                v-if="!v$.confirmPassword.maxLength"
+                v-text="t$('global.messages.validate.confirmpassword.maxlength')"
+              >
+                Your confirmation password cannot be longer than 50 characters.
+              </small>
+              <small class="form-text text-danger" v-if="!v$.confirmPassword.sameAsPassword" v-text="t$('global.messages.error.dontmatch')">
+                The password and its confirmation do not match!
+              </small>
+            </div>
+          </div>
+
+          <button type="submit" :disabled="v$.$invalid" class="btn btn-primary" v-text="t$('register.form.button')" data-cy="submit">
+            Register
+          </button>
+        </form>
+        <p></p>
+        <div class="alert alert-warning">
+          <span v-text="t$('global.messages.info.authenticated.prefix')">If you want to </span>
+          <a class="alert-link" @click="openLogin()" v-text="t$('global.messages.info.authenticated.link')">sign in</a
+          ><span v-html="t$('global.messages.info.authenticated.suffix')"
+            >, you can try the default accounts:<br />- Administrator (login="admin" and password="admin") <br />- User (login="user" and
+            password="user").</span
+          >
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts" src="./register.component.ts"></script>

package/dist/generators/vue/templates/src/main/webapp/app/account/reset-password/finish/reset-password-finish.component.spec.ts.ejs

@@ -43,9 +43,9 @@ describe('Reset Component Finish', () => {
       response: {
         status: null,
         data: {
-          type: null
-        }
-      }
+          type: null,
+        },
+      },
     });
 
     // When

package/dist/generators/vue/templates/src/main/webapp/app/account/reset-password/finish/reset-password-finish.vue.ejs

@@ -1,84 +1,113 @@
 <template>
-    <div>
-        <div class="row justify-content-center">
-            <div class="col-md-8">
-                <h1 v-text="t$('reset.request.title')">Reset your password</h1>
+  <div>
+    <div class="row justify-content-center">
+      <div class="col-md-8">
+        <h1 v-text="t$('reset.request.title')">Reset your password</h1>
 
-                <div class="alert alert-danger" v-html="t$('reset.finish.messages.keymissing')" v-if="keyMissing">
-                    <strong>The password reset key is missing.</strong>
-                </div>
+        <div class="alert alert-danger" v-html="t$('reset.finish.messages.keymissing')" v-if="keyMissing">
+          <strong>The password reset key is missing.</strong>
+        </div>
 
-                <div class="alert alert-danger" v-if="error">
-                    <p v-text="t$('reset.finish.messages.error')">
-                        Your password couldn't be reset. Remember a password request is only valid for 24 hours.
-                    </p>
-                </div>
+        <div class="alert alert-danger" v-if="error">
+          <p v-text="t$('reset.finish.messages.error')">
+            Your password couldn't be reset. Remember a password request is only valid for 24 hours.
+          </p>
+        </div>
 
-                <div class="alert alert-success" v-if="success">
-                    <span v-html="t$('reset.finish.messages.success')"><strong>Your password had been reset.</strong>
-                        Please </span>
-                    <a class="alert-link" v-on:click="openLogin"
-                        v-text="t$('global.messages.info.authenticated.link')">sign in</a>
-                </div>
-                <div class="alert alert-danger" v-if="doNotMatch">
-                    <p v-text="t$('global.messages.error.dontmatch')">The password and its confirmation do not match!
-                    </p>
-                </div>
+        <div class="alert alert-success" v-if="success">
+          <span v-html="t$('reset.finish.messages.success')"><strong>Your password had been reset.</strong> Please </span>
+          <a class="alert-link" @click="openLogin" v-text="t$('global.messages.info.authenticated.link')">sign in</a>
+        </div>
+        <div class="alert alert-danger" v-if="doNotMatch">
+          <p v-text="t$('global.messages.error.dontmatch')">The password and its confirmation do not match!</p>
+        </div>
 
-                <div class="alert alert-warning" v-if="!success && !keyMissing">
-                    <p v-text="t$('reset.finish.messages.info')">Choose a new password.</p>
-                </div>
+        <div class="alert alert-warning" v-if="!success && !keyMissing">
+          <p v-text="t$('reset.finish.messages.info')">Choose a new password.</p>
+        </div>
 
-                <div v-if="!keyMissing">
-                    <form v-if="!success" name="form" v-on:submit.prevent="finishReset()">
-                        <div class="form-group">
-                            <label class="form-control-label" for="newPassword"
-                                v-text="t$('global.form[\'newpassword.label\']')">New password</label>
-                            <input type="password" class="form-control" id="newPassword" name="newPassword"
-                                v-bind:placeholder="t$('global.form[\'newpassword.placeholder\']')"
-                                :class="{ valid: !v$.resetAccount.newPassword.$invalid, invalid: v$.resetAccount.newPassword.$invalid }"
-                                v-model="v$.resetAccount.newPassword.$model" minlength="4" maxlength="50" required data-cy="resetPassword" />
-                            <div v-if="v$.resetAccount.newPassword.$anyDirty && v$.resetAccount.newPassword.$invalid">
-                                <small class="form-text text-danger" v-if="!v$.resetAccount.newPassword.required"
-                                    v-text="t$('global.messages.validate.newpassword.required')">
-                                    Your password is required.
-                                </small>
-                                <small class="form-text text-danger" v-if="!v$.resetAccount.newPassword.minLength"
-                                    v-text="t$('global.messages.validate.newpassword.minlength')">
-                                    Your password is required to be at least 4 characters.
-                                </small>
-                                <small class="form-text text-danger" v-if="!v$.resetAccount.newPassword.maxLength"
-                                    v-text="t$('global.messages.validate.newpassword.maxlength')">
-                                    Your password cannot be longer than 50 characters.
-                                </small>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <label class="form-control-label" for="confirmPassword"
-                                v-text="t$('global.form[\'confirmpassword.label\']')">New password confirmation</label>
-                            <input type="password" class="form-control" id="confirmPassword" name="confirmPassword"
-                                :class="{ valid: !v$.resetAccount.confirmPassword.$invalid, invalid: v$.resetAccount.confirmPassword.$invalid }"
-                                v-bind:placeholder="t$('global.form[\'confirmpassword.placeholder\']')"
-                                v-model="v$.resetAccount.confirmPassword.$model" minlength="4" maxlength="50"
-                                required data-cy="confirmResetPassword" />
-                            <div
-                                v-if="v$.resetAccount.confirmPassword.$anyDirty && v$.resetAccount.confirmPassword.$invalid">
-                                <small class="form-text text-danger"
-                                    v-if="!v$.resetAccount.confirmPassword.sameAsPassword"
-                                    v-text="t$('global.messages.error.dontmatch')">
-                                    The password and its confirmation do not match!
-                                </small>
-                            </div>
-                        </div>
-                        <button type="submit" :disabled="v$.resetAccount.$invalid" class="btn btn-primary"
-                            v-text="t$('password.form.button')" data-cy="submit">
-                            Save
-                        </button>
-                    </form>
-                </div>
+        <div v-if="!keyMissing">
+          <form v-if="!success" name="form" @submit.prevent="finishReset()">
+            <div class="form-group">
+              <label class="form-control-label" for="newPassword" v-text="t$('global.form[\'newpassword.label\']')">New password</label>
+              <input
+                type="password"
+                class="form-control"
+                id="newPassword"
+                name="newPassword"
+                :placeholder="t$('global.form[\'newpassword.placeholder\']')"
+                :class="{ valid: !v$.resetAccount.newPassword.$invalid, invalid: v$.resetAccount.newPassword.$invalid }"
+                v-model="v$.resetAccount.newPassword.$model"
+                minlength="4"
+                maxlength="50"
+                required
+                data-cy="resetPassword"
+              />
+              <div v-if="v$.resetAccount.newPassword.$anyDirty && v$.resetAccount.newPassword.$invalid">
+                <small
+                  class="form-text text-danger"
+                  v-if="!v$.resetAccount.newPassword.required"
+                  v-text="t$('global.messages.validate.newpassword.required')"
+                >
+                  Your password is required.
+                </small>
+                <small
+                  class="form-text text-danger"
+                  v-if="!v$.resetAccount.newPassword.minLength"
+                  v-text="t$('global.messages.validate.newpassword.minlength')"
+                >
+                  Your password is required to be at least 4 characters.
+                </small>
+                <small
+                  class="form-text text-danger"
+                  v-if="!v$.resetAccount.newPassword.maxLength"
+                  v-text="t$('global.messages.validate.newpassword.maxlength')"
+                >
+                  Your password cannot be longer than 50 characters.
+                </small>
+              </div>
+            </div>
+            <div class="form-group">
+              <label class="form-control-label" for="confirmPassword" v-text="t$('global.form[\'confirmpassword.label\']')"
+                >New password confirmation</label
+              >
+              <input
+                type="password"
+                class="form-control"
+                id="confirmPassword"
+                name="confirmPassword"
+                :class="{ valid: !v$.resetAccount.confirmPassword.$invalid, invalid: v$.resetAccount.confirmPassword.$invalid }"
+                :placeholder="t$('global.form[\'confirmpassword.placeholder\']')"
+                v-model="v$.resetAccount.confirmPassword.$model"
+                minlength="4"
+                maxlength="50"
+                required
+                data-cy="confirmResetPassword"
+              />
+              <div v-if="v$.resetAccount.confirmPassword.$anyDirty && v$.resetAccount.confirmPassword.$invalid">
+                <small
+                  class="form-text text-danger"
+                  v-if="!v$.resetAccount.confirmPassword.sameAsPassword"
+                  v-text="t$('global.messages.error.dontmatch')"
+                >
+                  The password and its confirmation do not match!
+                </small>
+              </div>
             </div>
+            <button
+              type="submit"
+              :disabled="v$.resetAccount.$invalid"
+              class="btn btn-primary"
+              v-text="t$('password.form.button')"
+              data-cy="submit"
+            >
+              Save
+            </button>
+          </form>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts" src="./reset-password-finish.component.ts"></script>