add ui feedback on mismatched PWs (#949)

Author: NiloCK

packages/common-ui/src/components/auth/UserRegistration.vue

@@ -1,6 +1,6 @@
 <template>
   <v-card>
-    <v-card-title v-if="!registrationRoute" class="text-h5 bg-grey-lighten-2"> Create an Account </v-card-title>
+    <v-card-title class="text-h5 bg-grey-lighten-2"> Create an Account </v-card-title>
 
     <v-card-text>
       <v-form @submit.prevent="createUser">
@@ -44,7 +44,8 @@
           name="retypedPassword"
           hover="Show password"
           label="Retype your password"
-          hint=""
+          :disabled="password === '' || !!passwordError"
+          :hint="passwordRetypeError"
           min="4"
           :type="passwordVisible ? 'text' : 'password'"
         ></v-text-field>
@@ -58,7 +59,7 @@
           <v-btn color="pink" variant="text" @click="badLoginAttempt = false"> Close </v-btn>
         </v-snackbar>
         <v-btn
-          class="mr-2"
+          class="mr-2 my-2"
           type="submit"
           :loading="awaitingResponse"
           :color="buttonStatus.color"
@@ -135,6 +136,14 @@ export default defineComponent({
     passwordError(): string {
       return validatePassword(this.password);
     },
+    passwordRetypeError(): string {
+      console.log('[RTE]');
+      if (this.password !== this.retypedPassword) {
+        return 'Passwords must match.';
+      } else {
+        return '';
+      }
+    },
   },
 
   async created() {

packages/platform-ui/cypress/e2e/user-registration.cy.js

@@ -58,7 +58,7 @@ describe('User Registration', () => {
     cy.contains('button', 'Create Account').should('be.disabled');
 
     // Assert that an error message about password mismatch is displayed
-    cy.contains('Passwords do not match').should('be.visible');
+    cy.contains('Passwords must match').should('be.visible');
 
     // Assert that we're still on the registration page
     cy.url().should('not.include', `/u/${username}`);