Fix: Align forgot password screens (#3895)

packages/frontend-2/components/auth/LoginWithEmailBlock.vue

@@ -35,9 +35,9 @@
       Log in
     </FormButton>
     <div class="mt-1 text-center text-body-xs text-foreground-3 select-none">
-      Forgot password?
+      Forgot your password?
       <NuxtLink :to="forgottenPasswordRoute" class="text-foreground">
-        Recover password
+        Reset password
       </NuxtLink>
     </div>
   </form>

packages/frontend-2/components/auth/PasswordResetFinalizationPanel.vue

@@ -1,34 +1,28 @@
 <template>
   <form class="mx-auto w-full px-2" @submit="onSubmit">
-    <h1 class="text-heading-xl text-center inline-block mb-4">Reset your password</h1>
+    <h1 class="text-heading-xl text-center w-full inline-block mb-4">
+      Reset your password
+    </h1>
 
-    <div class="flex flex-col space-y-2 text-body-sm">
-      <div class="mb-4">One step closer to resetting your password</div>
+    <div class="flex flex-col space-y-4">
+      <p class="text-center text-body-xs text-foreground mb-2">
+        Choose a new password for your Speckle account
+      </p>
       <FormTextInput
+        v-model="password"
         type="password"
         name="password"
         label="Password"
         placeholder="New password"
         color="foundation"
         size="lg"
-        :rules="passwordRules"
+        :rules="[isRequired]"
         show-label
-        show-required
-      />
-      <FormTextInput
-        type="password"
-        name="password-repeat"
-        label="Password (confirmation)"
-        color="foundation"
-        size="lg"
-        :rules="passwordRepeatRules"
-        placeholder="Confirm new password"
-        show-label
-        show-required
       />
+      <AuthPasswordChecks :password="password" />
     </div>
 
-    <FormButton class="mt-4" submit full-width size="lg" :disabled="loading">
+    <FormButton class="mt-8" submit full-width size="lg" :disabled="loading">
       Reset password
     </FormButton>
   </form>
@@ -36,11 +30,10 @@
 <script setup lang="ts">
 import { useForm } from 'vee-validate'
 import { usePasswordReset } from '~~/lib/auth/composables/passwordReset'
-import { isRequired, isSameAs } from '~~/lib/common/helpers/validation'
+import { isRequired } from '~~/lib/common/helpers/validation'
 
 type FormValues = {
   password: string
-  repeatPassword: string
 }
 
 const props = defineProps<{
@@ -50,9 +43,8 @@ const props = defineProps<{
 const { handleSubmit } = useForm<FormValues>()
 const { finalize } = usePasswordReset()
 
-const passwordRules = [isRequired]
-const passwordRepeatRules = [...passwordRules, isSameAs('password')]
 const loading = ref(false)
+const password = ref('')
 
 const onSubmit = handleSubmit(
   async ({ password }) => await finalize(password, props.token)

packages/frontend-2/components/auth/PasswordResetPanel.vue

@@ -3,10 +3,9 @@
     <h1 class="text-heading-xl text-center inline-block mb-4 w-full">
       Reset your password
     </h1>
-    <div class="flex flex-col space-y-4 text-body-xs">
-      <div>
-        Type in the email address you used, so we can verify your account. We will send
-        you instructions on how to reset your password.
+    <div class="flex flex-col space-y-4">
+      <div class="text-body-xs text-foreground text-center mb-2">
+        Enter your email address and we'll send you the password reset instructions.
       </div>
       <div>
         <FormTextInput
@@ -20,7 +19,7 @@
       </div>
     </div>
 
-    <div class="flex flex-col gap-y-2 mt-4">
+    <div class="flex flex-col gap-y-2 mt-8">
       <FormButton submit full-width size="lg" :disabled="loading">
         Send reset email
       </FormButton>

packages/frontend-2/components/auth/RegisterPanel.vue

@@ -20,7 +20,7 @@
           class="flex gap-1 text-foregound-3 text-body-xs items-center justify-center"
         >
           <span>Already have an account?</span>
-          <CommonTextLink :to="loginRoute">Log in</CommonTextLink>
+          <NuxtLink class="text-foreground" :to="loginRoute">Log in</NuxtLink>
         </div>
       </template>
       <template v-else>

packages/frontend-2/components/auth/RegisterWithEmailBlock.vue

@@ -55,7 +55,7 @@
     <AuthRegisterTerms v-if="serverInfo.termsOfService" :server-info="serverInfo" />
     <div v-if="!inviteEmail" class="mt-2 sm:mt-4 text-center text-body-xs">
       <span class="mr-2 text-foreground-3">Already have an account?</span>
-      <CommonTextLink :to="finalLoginRoute">Log in</CommonTextLink>
+      <NuxtLink class="text-foreground" :to="finalLoginRoute">Log in</NuxtLink>
     </div>
   </form>
 </template>

packages/frontend-2/lib/auth/composables/passwordReset.ts

@@ -19,8 +19,8 @@ export function usePasswordReset() {
       await requestResetEmail({ email, apiOrigin })
       triggerNotification({
         type: ToastNotificationType.Info,
-        title: 'Password reset process initialized',
-        description: `We've sent you instructions on how to reset your password at ${email}`
+        title: 'Password reset email sent',
+        description: `We've sent the password reset instructions to ${email}`
       })
     } catch (e) {
       triggerNotification({

packages/frontend-2/lib/common/generated/gql/graphql.ts

@@ -3845,6 +3845,7 @@ export type UserEmailMutations = {
   delete: User;
   requestNewEmailVerification?: Maybe<Scalars['Boolean']['output']>;
   setPrimary: User;
+  verify?: Maybe<Scalars['Boolean']['output']>;
 };
 
 
@@ -3867,6 +3868,11 @@ export type UserEmailMutationsSetPrimaryArgs = {
   input: SetPrimaryUserEmailInput;
 };
 
+
+export type UserEmailMutationsVerifyArgs = {
+  input: VerifyUserEmailInput;
+};
+
 export type UserGendoAiCredits = {
   __typename?: 'UserGendoAICredits';
   limit: Scalars['Int']['output'];
@@ -3947,6 +3953,11 @@ export type UsersRetrievalInput = {
   query: Scalars['String']['input'];
 };
 
+export type VerifyUserEmailInput = {
+  code: Scalars['String']['input'];
+  email: Scalars['String']['input'];
+};
+
 export type Version = {
   __typename?: 'Version';
   authorUser?: Maybe<LimitedUser>;
@@ -8068,6 +8079,7 @@ export type UserEmailMutationsFieldArgs = {
   delete: UserEmailMutationsDeleteArgs,
   requestNewEmailVerification: UserEmailMutationsRequestNewEmailVerificationArgs,
   setPrimary: UserEmailMutationsSetPrimaryArgs,
+  verify: UserEmailMutationsVerifyArgs,
 }
 export type UserGendoAiCreditsFieldArgs = {
   limit: {},