From c3daeebe4d44cd6dcfa7d21008dd1c2402e0a890 Mon Sep 17 00:00:00 2001 From: Charles Zhao Date: Fri, 3 Mar 2023 14:26:34 +0800 Subject: [PATCH] feat(console): allow linking email via verification code in profile (#3275) --- packages/console/package.json | 1 + .../VerificationCodeInput/index.module.scss | 38 +++ .../VerificationCodeInput/index.tsx | 220 ++++++++++++++++++ packages/console/src/pages/Main/index.tsx | 4 + .../MainFlowLikeModal/index.module.scss | 4 + .../components/MainFlowLikeModal/index.tsx | 27 ++- .../containers/ChangePasswordModal/index.tsx | 15 +- .../containers/LinkEmailModal/index.tsx | 78 +++++++ .../VerificationCodeModal/index.module.scss | 8 + .../VerificationCodeModal/index.tsx | 135 +++++++++++ .../containers/VerifyPasswordModal/index.tsx | 23 +- packages/console/src/pages/Profile/index.tsx | 8 +- packages/console/src/pages/Profile/utils.ts | 13 ++ .../core/src/routes-me/verification-code.ts | 10 +- pnpm-lock.yaml | 2 + 15 files changed, 565 insertions(+), 21 deletions(-) create mode 100644 packages/console/src/components/VerificationCodeInput/index.module.scss create mode 100644 packages/console/src/components/VerificationCodeInput/index.tsx create mode 100644 packages/console/src/pages/Profile/containers/LinkEmailModal/index.tsx create mode 100644 packages/console/src/pages/Profile/containers/VerificationCodeModal/index.module.scss create mode 100644 packages/console/src/pages/Profile/containers/VerificationCodeModal/index.tsx create mode 100644 packages/console/src/pages/Profile/utils.ts diff --git a/packages/console/package.json b/packages/console/package.json index bd9a12b65..a591ef1b8 100644 --- a/packages/console/package.json +++ b/packages/console/package.json @@ -83,6 +83,7 @@ "react-paginate": "^8.1.3", "react-router-dom": "6.3.0", "react-syntax-highlighter": "^15.5.0", + "react-timer-hook": "^3.0.5", "recharts": "^2.1.13", "remark-gfm": "^3.0.1", "stylelint": "^15.0.0", diff --git a/packages/console/src/components/VerificationCodeInput/index.module.scss b/packages/console/src/components/VerificationCodeInput/index.module.scss new file mode 100644 index 000000000..acec145ea --- /dev/null +++ b/packages/console/src/components/VerificationCodeInput/index.module.scss @@ -0,0 +1,38 @@ +@use '@/scss/underscore' as _; + +.wrapper { + display: flex; + justify-content: space-between; +} + +.input { + width: 44px; + height: 44px; + border-radius: _.unit(2); + text-align: center; + color: var(--color-text-primary); + background: transparent; + border: 1px solid var(--color-border); + caret-color: var(--color-primary); + -moz-appearance: textfield; + appearance: textfield; + outline: 3px solid transparent; + + &:focus { + border-color: var(--color-primary); + outline-color: var(--color-focused-variant); + } + + &::-webkit-outer-spin-button, + &::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; + } +} + +.errorMessage { + font: var(--font-body-2); + color: var(--color-error); + margin-left: _.unit(0.5); + margin-top: _.unit(1); +} diff --git a/packages/console/src/components/VerificationCodeInput/index.tsx b/packages/console/src/components/VerificationCodeInput/index.tsx new file mode 100644 index 000000000..4eb1f0862 --- /dev/null +++ b/packages/console/src/components/VerificationCodeInput/index.tsx @@ -0,0 +1,220 @@ +import type { FormEventHandler, KeyboardEventHandler, ClipboardEventHandler } from 'react'; +import { useMemo, useRef, useCallback, useEffect } from 'react'; + +import * as styles from './index.module.scss'; + +export const defaultLength = 6; + +export type Props = { + name: string; + className?: string; + length?: number; + value: string[]; + error?: string; + onChange: (value: string[]) => void; +}; + +const isNumeric = (char: string) => /^\d+$/.test(char); + +const normalize = (value: string[], length: number): string[] => { + if (value.length > length) { + return value.slice(0, length); + } + + if (value.length < length) { + // Undefined will not overwrite the original input displays, need to pass in empty string instead + return value.concat(Array.from({ length: length - value.length }).fill('')); + } + + return value; +}; + +const VerificationCodeInput = ({ + name, + className, + value, + length = defaultLength, + error, + onChange, +}: Props) => { + /* eslint-disable @typescript-eslint/ban-types */ + const inputReferences = useRef>( + Array.from({ length }).fill(null) + ); + /* eslint-enable @typescript-eslint/ban-types */ + + const codes = useMemo(() => normalize(value, length), [length, value]); + + const updateValue = useCallback( + (data: string, targetId: number) => { + // Filter non-numeric input + if (!isNumeric(data)) { + return; + } + + const chars = data.split(''); + const trimmedChars = chars.slice(0, Math.min(chars.length, codes.length - targetId)); + + const value = [ + ...codes.slice(0, targetId), + ...trimmedChars, + ...codes.slice(targetId + trimmedChars.length, codes.length), + ]; + + onChange(value); + + // Move to the next target + const nextTarget = + inputReferences.current[Math.min(targetId + trimmedChars.length, codes.length - 1)]; + nextTarget?.focus(); + }, + [codes, onChange] + ); + + const onInputHandler: FormEventHandler = useCallback( + (event) => { + const { target } = event; + + if (!(target instanceof HTMLInputElement)) { + return; + } + + const { value, dataset } = target; + + // Unrecognized target input field + if (!dataset.id) { + return; + } + + event.preventDefault(); + updateValue(value, Number(dataset.id)); + }, + [updateValue] + ); + + const onPasteHandler: ClipboardEventHandler = useCallback( + (event) => { + if (!(event.target instanceof HTMLInputElement)) { + return; + } + + const { + target: { dataset }, + clipboardData, + } = event; + + const data = clipboardData.getData('text').match(/\d/g)?.join('') ?? ''; + + // Unrecognized target input field + if (!dataset.id) { + return; + } + + event.preventDefault(); + updateValue(data, Number(dataset.id)); + }, + [updateValue] + ); + + const onKeyDownHandler: KeyboardEventHandler = useCallback( + (event) => { + const { key, target } = event; + + if (!(target instanceof HTMLInputElement)) { + return; + } + + const { value, dataset } = target; + + if (!dataset.id) { + return; + } + + const targetId = Number(dataset.id); + + const nextTarget = inputReferences.current[targetId + 1]; + const previousTarget = inputReferences.current[targetId - 1]; + + switch (key) { + case 'Backspace': { + event.preventDefault(); + + if (value) { + onChange(Object.assign([], codes, { [targetId]: '' })); + break; + } + + if (previousTarget) { + previousTarget.focus(); + onChange(Object.assign([], codes, { [targetId - 1]: '' })); + } + + break; + } + + case 'ArrowLeft': { + event.preventDefault(); + previousTarget?.focus(); + break; + } + + case 'ArrowRight': { + event.preventDefault(); + nextTarget?.focus(); + break; + } + case '+': + case '-': + case 'e': + case '.': + case 'ArrowUp': + case 'ArrowDown': { + event.preventDefault(); + break; + } + + default: { + break; + } + } + }, + [codes, onChange] + ); + + useEffect(() => { + if (value.length === 0) { + inputReferences.current[0]?.focus(); + } + }, [value]); + + return ( +
+
+ {Array.from({ length }).map((_, index) => ( + { + // eslint-disable-next-line @silverhand/fp/no-mutation + inputReferences.current[index] = element; + }} + // eslint-disable-next-line react/no-array-index-key + key={`${name}_${index}`} + className={styles.input} + name={`${name}_${index}`} + data-id={index} + value={codes[index]} + type="number" + inputMode="numeric" + pattern="[0-9]*" + autoComplete="off" + onPaste={onPasteHandler} + onInput={onInputHandler} + onKeyDown={onKeyDownHandler} + /> + ))} +
+ {error &&
{error}
} +
+ ); +}; + +export default VerificationCodeInput; diff --git a/packages/console/src/pages/Main/index.tsx b/packages/console/src/pages/Main/index.tsx index 5bc608d01..af8830fcc 100644 --- a/packages/console/src/pages/Main/index.tsx +++ b/packages/console/src/pages/Main/index.tsx @@ -47,6 +47,8 @@ import Users from '@/pages/Users'; import Welcome from '@/pages/Welcome'; import ChangePasswordModal from '../Profile/containers/ChangePasswordModal'; +import LinkEmailModal from '../Profile/containers/LinkEmailModal'; +import VerificationCodeModal from '../Profile/containers/VerificationCodeModal'; import VerifyPasswordModal from '../Profile/containers/VerifyPasswordModal'; const Main = () => { @@ -139,6 +141,8 @@ const Main = () => { } /> } /> } /> + } /> + } /> diff --git a/packages/console/src/pages/Profile/components/MainFlowLikeModal/index.module.scss b/packages/console/src/pages/Profile/components/MainFlowLikeModal/index.module.scss index 6cbcb5caa..147ba0fe6 100644 --- a/packages/console/src/pages/Profile/components/MainFlowLikeModal/index.module.scss +++ b/packages/console/src/pages/Profile/components/MainFlowLikeModal/index.module.scss @@ -45,3 +45,7 @@ margin-top: _.unit(-3); } } + +.strong { + font-weight: 600; +} diff --git a/packages/console/src/pages/Profile/components/MainFlowLikeModal/index.tsx b/packages/console/src/pages/Profile/components/MainFlowLikeModal/index.tsx index 4957b7cc9..efd3595a4 100644 --- a/packages/console/src/pages/Profile/components/MainFlowLikeModal/index.tsx +++ b/packages/console/src/pages/Profile/components/MainFlowLikeModal/index.tsx @@ -1,7 +1,7 @@ import type { AdminConsoleKey } from '@logto/phrases'; import classNames from 'classnames'; import type { PropsWithChildren } from 'react'; -import { useTranslation } from 'react-i18next'; +import { Trans, useTranslation } from 'react-i18next'; import ReactModal from 'react-modal'; import { useNavigate } from 'react-router-dom'; @@ -14,10 +14,19 @@ import * as styles from './index.module.scss'; type Props = PropsWithChildren<{ title: AdminConsoleKey; subtitle?: AdminConsoleKey; + subtitleProps?: Record; onClose: () => void; + onGoBack?: () => void; }>; -const MainFlowLikeModal = ({ title, subtitle, children, onClose }: Props) => { +const MainFlowLikeModal = ({ + title, + subtitle, + subtitleProps, + children, + onClose, + onGoBack, +}: Props) => { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); const navigate = useNavigate(); @@ -29,13 +38,23 @@ const MainFlowLikeModal = ({ title, subtitle, children, onClose }: Props) => { className={styles.backButton} icon={} onClick={() => { - navigate(-1); + if (onGoBack) { + onGoBack(); + } else { + navigate(-1); + } }} > {t('general.back')} {t(title)} - {subtitle && {t(subtitle)}} + {subtitle && ( + + }}> + {t(subtitle, subtitleProps)} + + + )} {children} diff --git a/packages/console/src/pages/Profile/containers/ChangePasswordModal/index.tsx b/packages/console/src/pages/Profile/containers/ChangePasswordModal/index.tsx index 57d866a7d..ce931aca7 100644 --- a/packages/console/src/pages/Profile/containers/ChangePasswordModal/index.tsx +++ b/packages/console/src/pages/Profile/containers/ChangePasswordModal/index.tsx @@ -3,7 +3,7 @@ import { useState } from 'react'; import { useForm } from 'react-hook-form'; import { toast } from 'react-hot-toast'; import { useTranslation } from 'react-i18next'; -import { useNavigate } from 'react-router-dom'; +import { useLocation, useNavigate } from 'react-router-dom'; import Button from '@/components/Button'; import Checkbox from '@/components/Checkbox'; @@ -28,6 +28,7 @@ const defaultValues: FormFields = { const ChangePasswordModal = () => { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); const navigate = useNavigate(); + const { state } = useLocation(); const { watch, reset, @@ -49,9 +50,9 @@ const ChangePasswordModal = () => { const onSubmit = () => { clearErrors(); void handleSubmit(async ({ newPassword }) => { - await api.post(`me/password`, { json: { password: newPassword } }).json(); + await api.post(`me/password`, { json: { password: newPassword } }); toast.success(t('settings.password_changed')); - reset({}); + reset(); onClose(); })(); }; @@ -63,7 +64,13 @@ const ChangePasswordModal = () => { }; return ( - + { + navigate('../verify-password', { state }); + }} + > { + const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + const navigate = useNavigate(); + const { state } = useLocation(); + const { + register, + reset, + clearErrors, + handleSubmit, + formState: { errors, isSubmitting }, + } = useForm({ + reValidateMode: 'onBlur', + }); + const api = useStaticApi({ prefixUrl: adminTenantEndpoint, resourceIndicator: meApi.indicator }); + + const onClose = () => { + navigate('/profile'); + }; + + const onSubmit = () => { + clearErrors(); + void handleSubmit(async ({ email }) => { + await api.post(`me/verification-codes`, { json: { email } }); + reset(); + navigate('../verification-code', { state: { email, action: 'changeEmail' } }); + })(); + }; + + return ( + + + (checkLocationState(state) && state.email !== value) || + t('profile.link_account.identical_email_address'), + })} + errorMessage={errors.email?.message} + onKeyDown={(event) => { + if (event.key === 'Enter') { + onSubmit(); + } + }} + /> +