From 91cb011ded2a4d3b0dfe634cb79b10eaaa525f42 Mon Sep 17 00:00:00 2001 From: andrewwallacespeckle <139135120+andrewwallacespeckle@users.noreply.github.com> Date: Fri, 14 Feb 2025 10:20:14 +0000 Subject: [PATCH] feat(fe2): New user onboarding flow (#3932) * CodeInput. verify-email page * middleware * Loading toast * Countdown only for registration * Improve middleware * Fix middleware breaking auth flow * Remove old notifications * Remove old onboarding. New segmentation * Remove skip button * Block verify email when verified * useUserEmails composable. Cancel addition * Move user emails queries * Fix fragments etc * redirect updates * HeaderWithEmptyPage * Check env before enforcing * Join workspace * Updates * Fix console warnings on login * Fix register console warnings * Working cache updates * Verify secondary email * Force onboarding off * EMAIL WIP * useIsJustRegistered state * Improve isRequired * Uneeded change * Improved slots * Updates from CR * CR comments * Only show message if forced * Update onboarding middleware * Update loading bar * ref > computed to fix onboarding * Resend tooltip. Better errors * Add other to form. * Email changes * Updates to emails * Remove force email FF * Remove FF's * Hide header on embed * Update graphql.ts * Re-add FF * Update graphql.ts * GQL Fragments * Fix build --- .../components/auth/LoginWithEmailBlock.vue | 2 + .../components/auth/RegisterNewsletter.vue | 5 +- .../auth/RegisterWithEmailBlock.vue | 3 + .../auth/VerificationReminderMenuNotice.vue | 113 ----- .../components/auth/sso/Register.vue | 2 +- .../frontend-2/components/header/Empty.vue | 14 + .../components/header/LogoBlock.vue | 2 +- .../frontend-2/components/header/NavBar.vue | 8 - .../components/header/NavNotifications.vue | 51 -- .../components/header/WithEmptyPage.vue | 31 ++ .../components/onboarding/JoinTeammates.vue | 100 ++++ .../components/onboarding/checklist/v1.vue | 445 ------------------ .../components/onboarding/questions/Form.vue | 56 +++ .../onboarding/questions/PlanSelect.vue | 50 ++ .../onboarding/questions/RoleSelect.vue | 46 ++ .../onboarding/questions/SourceSelect.vue | 49 ++ .../settings/user/email/DeleteDialog.vue | 53 +-- .../components/settings/user/email/List.vue | 23 +- .../settings/user/email/ListItem.vue | 64 +-- .../frontend-2/components/tour/Comment.vue | 118 ----- .../frontend-2/components/tour/Onboarding.vue | 25 - .../components/tour/Segmentation.vue | 144 ------ .../frontend-2/components/tour/Slideshow.vue | 162 ------- .../tour/content/BasicViewerNavigation.vue | 78 --- .../components/tour/content/FirstTip.vue | 12 - .../components/tour/content/LastTip.vue | 13 - .../components/tour/content/OverlayModel.vue | 72 --- .../frontend-2/components/viewer/Controls.vue | 15 +- .../components/viewer/LoadingBar.vue | 5 +- .../components/viewer/PreSetupWrapper.vue | 17 +- .../components/workspace/CreatePage.vue | 43 +- packages/frontend-2/composables/globals.ts | 8 + packages/frontend-2/layouts/onboarding.vue | 7 - packages/frontend-2/layouts/viewer.vue | 39 +- .../lib/auth/composables/activeUser.ts | 4 + .../frontend-2/lib/auth/composables/auth.ts | 15 +- .../lib/auth/composables/onboarding.ts | 13 +- .../frontend-2/lib/auth/helpers/onboarding.ts | 75 ++- .../lib/common/generated/gql/gql.ts | 66 +-- .../lib/common/generated/gql/graphql.ts | 66 +-- .../frontend-2/lib/common/helpers/route.ts | 2 + .../lib/onboarding/graphql/queries.ts | 10 + .../lib/onboarding/helpers/types.ts | 4 + .../lib/settings/graphql/mutations.ts | 15 +- .../lib/settings/graphql/queries.ts | 8 - .../frontend-2/lib/user/composables/emails.ts | 191 ++++++++ .../frontend-2/lib/user/graphql/mutations.ts | 10 + .../frontend-2/lib/user/graphql/queries.ts | 23 + .../frontend-2/lib/viewer/composables/tour.ts | 41 -- .../frontend-2/lib/viewer/composables/ui.ts | 4 - .../004-emailVerification.global.ts | 36 ++ ...ing.global.ts => 005-onboarding.global.ts} | 8 + packages/frontend-2/pages/authn.vue | 4 +- .../verify/[appId]/[challenge]/index.vue | 2 +- .../frontend-2/pages/error-email-verify.vue | 2 +- packages/frontend-2/pages/onboarding.vue | 134 ++++-- .../frontend-2/pages/settings/user/emails.vue | 61 +-- packages/frontend-2/pages/verify-email.vue | 183 +++++++ .../emails/templates/components/footer.mjml | 2 +- .../templates/components/headerLogo.mjml | 9 +- .../assets/public/speckle-email-logo.png | Bin 0 -> 4771 bytes .../emails/services/verification/request.ts | 36 +- .../src/components/form/CodeInput.stories.ts | 90 ++++ .../src/components/form/CodeInput.vue | 151 ++++++ .../src/components/form/TextInput.vue | 6 - .../src/components/form/select/Multi.vue | 5 +- .../src/components/global/ToastRenderer.vue | 5 + .../src/composables/form/textInput.ts | 2 +- .../ui-components/src/helpers/global/toast.ts | 3 +- packages/ui-components/src/lib.ts | 2 + 70 files changed, 1419 insertions(+), 1744 deletions(-) delete mode 100644 packages/frontend-2/components/auth/VerificationReminderMenuNotice.vue create mode 100644 packages/frontend-2/components/header/Empty.vue delete mode 100644 packages/frontend-2/components/header/NavNotifications.vue create mode 100644 packages/frontend-2/components/header/WithEmptyPage.vue create mode 100644 packages/frontend-2/components/onboarding/JoinTeammates.vue delete mode 100644 packages/frontend-2/components/onboarding/checklist/v1.vue create mode 100644 packages/frontend-2/components/onboarding/questions/Form.vue create mode 100644 packages/frontend-2/components/onboarding/questions/PlanSelect.vue create mode 100644 packages/frontend-2/components/onboarding/questions/RoleSelect.vue create mode 100644 packages/frontend-2/components/onboarding/questions/SourceSelect.vue delete mode 100644 packages/frontend-2/components/tour/Comment.vue delete mode 100644 packages/frontend-2/components/tour/Onboarding.vue delete mode 100644 packages/frontend-2/components/tour/Segmentation.vue delete mode 100644 packages/frontend-2/components/tour/Slideshow.vue delete mode 100644 packages/frontend-2/components/tour/content/BasicViewerNavigation.vue delete mode 100644 packages/frontend-2/components/tour/content/FirstTip.vue delete mode 100644 packages/frontend-2/components/tour/content/LastTip.vue delete mode 100644 packages/frontend-2/components/tour/content/OverlayModel.vue delete mode 100644 packages/frontend-2/layouts/onboarding.vue create mode 100644 packages/frontend-2/lib/onboarding/graphql/queries.ts create mode 100644 packages/frontend-2/lib/onboarding/helpers/types.ts create mode 100644 packages/frontend-2/lib/user/composables/emails.ts create mode 100644 packages/frontend-2/lib/user/graphql/queries.ts delete mode 100644 packages/frontend-2/lib/viewer/composables/tour.ts create mode 100644 packages/frontend-2/middleware/004-emailVerification.global.ts rename packages/frontend-2/middleware/{004-onboarding.global.ts => 005-onboarding.global.ts} (82%) create mode 100644 packages/frontend-2/pages/verify-email.vue create mode 100644 packages/server/assets/public/speckle-email-logo.png create mode 100644 packages/ui-components/src/components/form/CodeInput.stories.ts create mode 100644 packages/ui-components/src/components/form/CodeInput.vue diff --git a/packages/frontend-2/components/auth/LoginWithEmailBlock.vue b/packages/frontend-2/components/auth/LoginWithEmailBlock.vue index 748743f83..9e2dbf8f8 100644 --- a/packages/frontend-2/components/auth/LoginWithEmailBlock.vue +++ b/packages/frontend-2/components/auth/LoginWithEmailBlock.vue @@ -12,6 +12,7 @@ show-label :disabled="!!(loading || shouldForceInviteEmail)" auto-focus + autocomplete="email" /> diff --git a/packages/frontend-2/components/auth/RegisterWithEmailBlock.vue b/packages/frontend-2/components/auth/RegisterWithEmailBlock.vue index 4949acc51..2b339b982 100644 --- a/packages/frontend-2/components/auth/RegisterWithEmailBlock.vue +++ b/packages/frontend-2/components/auth/RegisterWithEmailBlock.vue @@ -13,6 +13,7 @@ :rules="emailRules" show-label :disabled="isEmailDisabled" + autocomplete="email" /> diff --git a/packages/frontend-2/components/auth/VerificationReminderMenuNotice.vue b/packages/frontend-2/components/auth/VerificationReminderMenuNotice.vue deleted file mode 100644 index 3c0df1c75..000000000 --- a/packages/frontend-2/components/auth/VerificationReminderMenuNotice.vue +++ /dev/null @@ -1,113 +0,0 @@ - - diff --git a/packages/frontend-2/components/auth/sso/Register.vue b/packages/frontend-2/components/auth/sso/Register.vue index 14f3756b5..3c638ce2f 100644 --- a/packages/frontend-2/components/auth/sso/Register.vue +++ b/packages/frontend-2/components/auth/sso/Register.vue @@ -39,7 +39,7 @@ import { useQuery } from '@vue/apollo-composable' const route = useRoute() const loading = ref(false) -const newsletterConsent = ref(undefined) +const newsletterConsent = ref(false) const { challenge } = useLoginOrRegisterUtils() const { signInOrSignUpWithSso } = useAuthManager() diff --git a/packages/frontend-2/components/header/Empty.vue b/packages/frontend-2/components/header/Empty.vue new file mode 100644 index 000000000..8e34c5b93 --- /dev/null +++ b/packages/frontend-2/components/header/Empty.vue @@ -0,0 +1,14 @@ + diff --git a/packages/frontend-2/components/header/LogoBlock.vue b/packages/frontend-2/components/header/LogoBlock.vue index 8d19559cf..c9ddf3881 100644 --- a/packages/frontend-2/components/header/LogoBlock.vue +++ b/packages/frontend-2/components/header/LogoBlock.vue @@ -1,7 +1,7 @@ diff --git a/packages/frontend-2/pages/verify-email.vue b/packages/frontend-2/pages/verify-email.vue new file mode 100644 index 000000000..f8c6d63b3 --- /dev/null +++ b/packages/frontend-2/pages/verify-email.vue @@ -0,0 +1,183 @@ + + + diff --git a/packages/server/assets/emails/templates/components/footer.mjml b/packages/server/assets/emails/templates/components/footer.mjml index 40b35e764..efb333941 100644 --- a/packages/server/assets/emails/templates/components/footer.mjml +++ b/packages/server/assets/emails/templates/components/footer.mjml @@ -18,7 +18,7 @@ - + Brought to you by Speckle , the Open Source Data Platform for 3D Data. Follow Us diff --git a/packages/server/assets/emails/templates/components/headerLogo.mjml b/packages/server/assets/emails/templates/components/headerLogo.mjml index 0bf3640f5..383d1750f 100644 --- a/packages/server/assets/emails/templates/components/headerLogo.mjml +++ b/packages/server/assets/emails/templates/components/headerLogo.mjml @@ -1,13 +1,8 @@ - - - - - diff --git a/packages/server/assets/public/speckle-email-logo.png b/packages/server/assets/public/speckle-email-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..79aef8d1581177d9519675f3b0dd719cf661968c GIT binary patch literal 4771 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 bkGRsG%#`wHPkfWCDFL)K4AjdI4`2KTXn`4g literal 0 HcmV?d00001 diff --git a/packages/server/modules/emails/services/verification/request.ts b/packages/server/modules/emails/services/verification/request.ts index 87347ac28..5547b33cb 100644 --- a/packages/server/modules/emails/services/verification/request.ts +++ b/packages/server/modules/emails/services/verification/request.ts @@ -101,33 +101,17 @@ const createNewEmailVerificationFactory = } function buildMjmlBody(verificationCode: string) { - const bodyStart = `Hello,

You have just registered to the Speckle server, or initiated the email verification process manually. To finalize the verification process, use the code below.
` - const bodyEnd = `This code expires in 5 minutes:
-${verificationCode} -
- If the code does not work, please proceed by

- - Logging in with your e-mail address and password - Clicking on the Notification icon - Selecting "Send Verification" - Verifying your e-mail address by using the new code -
- - See you soon,
- Speckle -
- ` - - return { bodyStart, bodyEnd } + const bodyStart = `

You have just registered to the Speckle server, or initiated the email verification process manually. To finalize the verification process, use the code below.

+ ${verificationCode} +

This code will expire in 5 minutes. Please do not disclose this code to others.

+

If you did not make this request, please disregard this email.

+

See you soon,
Speckle

` + return { bodyStart } } -function buildTextBody(verificationCode: string) { - const bodyStart = `Hello,\n\nYou have just registered to the Speckle server, or initiated the email verification process manually. To finalize the verification process, use the code below:` - const bodyEnd = `This code expires in 5 minutes: -${verificationCode} -\r\n -If the code does not work, please proceed by logging in to your Speckle account with your e-mail address and password, clicking the Notification icon, selecting "Send Verification" and verifying your e-mail address by new code.\n\nSee you soon,\nSpeckle - ` +function buildTextBody() { + const bodyStart = `` + const bodyEnd = `` return { bodyStart, bodyEnd } } @@ -135,7 +119,7 @@ If the code does not work, please proceed by logging in to your Speckle account function buildEmailTemplateParams(verificationCode: string): EmailTemplateParams { return { mjml: buildMjmlBody(verificationCode), - text: buildTextBody(verificationCode) + text: buildTextBody() } } diff --git a/packages/ui-components/src/components/form/CodeInput.stories.ts b/packages/ui-components/src/components/form/CodeInput.stories.ts new file mode 100644 index 000000000..4ac6da267 --- /dev/null +++ b/packages/ui-components/src/components/form/CodeInput.stories.ts @@ -0,0 +1,90 @@ +import type { Meta, StoryObj } from '@storybook/vue3' +import FormCodeInput from '~~/src/components/form/CodeInput.vue' + +type StoryType = StoryObj< + Record & { + 'update:modelValue': (val: string) => void + complete: (val: string) => void + } +> + +export default { + component: FormCodeInput, + parameters: { + docs: { + description: { + component: + 'A verification code input component that handles digit-by-digit entry with auto-advance and paste support.' + } + } + }, + argTypes: { + 'update:modelValue': { + type: 'function', + action: 'v-model' + }, + complete: { + type: 'function', + action: 'complete' + }, + digitCount: { + control: { type: 'number' } + } + } +} as Meta + +export const Default: StoryType = { + render: (args, ctx) => ({ + components: { FormCodeInput }, + setup: () => ({ args }), + template: ` +
+ +
+ `, + methods: { + onModelUpdate(val: string) { + args['update:modelValue'](val) + ctx.updateArgs({ ...args, modelValue: val }) + } + } + }), + args: { + modelValue: '', + digitCount: 6, + disabled: false, + errorMessage: '', + error: false, + complete: (val: string) => console.log('Complete:', val) + } +} + +export const Disabled: StoryType = { + ...Default, + args: { + ...Default.args, + disabled: true, + modelValue: '123456' + } +} + +export const DifferentLength: StoryType = { + ...Default, + args: { + ...Default.args, + digitCount: 4 + } +} + +export const WithError: StoryType = { + ...Default, + args: { + ...Default.args, + error: true, + modelValue: '123456' + } +} diff --git a/packages/ui-components/src/components/form/CodeInput.vue b/packages/ui-components/src/components/form/CodeInput.vue new file mode 100644 index 000000000..517221745 --- /dev/null +++ b/packages/ui-components/src/components/form/CodeInput.vue @@ -0,0 +1,151 @@ + + + diff --git a/packages/ui-components/src/components/form/TextInput.vue b/packages/ui-components/src/components/form/TextInput.vue index 2eecce44e..99f215459 100644 --- a/packages/ui-components/src/components/form/TextInput.vue +++ b/packages/ui-components/src/components/form/TextInput.vue @@ -358,12 +358,6 @@ const leadingIconClasses = computed(() => { const iconClasses = computed((): string => { const classParts: string[] = [] - if (props.customIcon) { - classParts.push('pl-8') - } else { - classParts.push('pl-2') - } - if (!slots['input-right']) { if (props.rightIcon || errorMessage.value || shouldShowClear.value) { classParts.push('pr-8') diff --git a/packages/ui-components/src/components/form/select/Multi.vue b/packages/ui-components/src/components/form/select/Multi.vue index 0fd02da70..e1f3ba7fc 100644 --- a/packages/ui-components/src/components/form/select/Multi.vue +++ b/packages/ui-components/src/components/form/select/Multi.vue @@ -132,7 +132,9 @@ -
+
@@ -162,7 +164,6 @@

): void diff --git a/packages/ui-components/src/composables/form/textInput.ts b/packages/ui-components/src/composables/form/textInput.ts index e33be00e6..692e638e5 100644 --- a/packages/ui-components/src/composables/form/textInput.ts +++ b/packages/ui-components/src/composables/form/textInput.ts @@ -91,7 +91,7 @@ export function useTextInputCore(params: { const color = unref(props.color) if (color === 'foundation') { classParts.push( - 'bg-foundation !border border-outline-2 hover:border-outline-5 focus-visible:border-outline-4 !ring-0 focus-visible:!outline-0 !text-[13px]' + 'bg-foundation !border border-outline-2 hover:border-outline-5 focus-visible:border-outline-4 !ring-0 focus-visible:!outline-0' ) } else if (color === 'transparent') { classParts.push('bg-transparent') diff --git a/packages/ui-components/src/helpers/global/toast.ts b/packages/ui-components/src/helpers/global/toast.ts index 4c070cf69..ef7fead14 100644 --- a/packages/ui-components/src/helpers/global/toast.ts +++ b/packages/ui-components/src/helpers/global/toast.ts @@ -2,7 +2,8 @@ export enum ToastNotificationType { Success, Warning, Danger, - Info + Info, + Loading } export type ToastNotification = { diff --git a/packages/ui-components/src/lib.ts b/packages/ui-components/src/lib.ts index 5cf4c3fb2..2919200f4 100644 --- a/packages/ui-components/src/lib.ts +++ b/packages/ui-components/src/lib.ts @@ -35,6 +35,7 @@ import FormSelectBadges from '~~/src/components/form/select/Badges.vue' import FormSelectMulti from '~~/src/components/form/select/Multi.vue' import FormSwitch from '~~/src/components/form/Switch.vue' import FormClipboardInput from '~~/src/components/form/ClipboardInput.vue' +import FormCodeInput from '~~/src/components/form/CodeInput.vue' import CommonLoadingBar from '~~/src/components/common/loading/Bar.vue' import SourceAppBadge from '~~/src/components/SourceAppBadge.vue' import { onKeyboardShortcut, useFormCheckboxModel } from '~~/src/composables/form/input' @@ -130,6 +131,7 @@ export { FormTextInput, FormSwitch, FormClipboardInput, + FormCodeInput, ValidationHelpers, useWrappingContainerHiddenCount, useFormSelectChildInternals,