@licklist/design 0.78.5-dev.60 → 0.78.5-dev.62

package/src/v2/pages/auth/VerifyEmail/VerifyEmailPage.scss

@@ -0,0 +1,72 @@
+.auth-verify-email {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+
+  &__label {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 20px;
+    color: var(--label-primary);
+    display: block;
+    margin-bottom: 8px;
+  }
+
+  &__description {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 14px;
+    font-weight: 400;
+    color: var(--label-secondary);
+    margin: 0 0 16px;
+    padding: 0;
+  }
+
+  &__otp-group {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 24px;
+    height: 62px;
+  }
+
+  &__otp-input {
+    flex: 1;
+    background-color: var(--surface-secondary);
+    border: 2px solid var(--border-primary);
+    border-radius: 8px;
+    text-align: center;
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--label-primary);
+    transition: border-color 0.2s ease;
+    min-width: 0;
+
+    &:focus {
+      outline: none;
+      border-color: var(--border-selected, #6200EE);
+    }
+
+    &::placeholder {
+      color: var(--label-secondary);
+    }
+  }
+
+  &__actions {
+    margin-bottom: 0;
+  }
+
+  &__error {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 12px;
+    border-radius: 8px;
+    background-color: var(--surface-status-error);
+    border: 1px solid var(--border-status-error);
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 13px;
+    color: var(--label-status-error);
+    margin-bottom: 16px;
+  }
+}

package/src/v2/pages/auth/VerifyEmail/VerifyEmailPage.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { VerifyEmailPage } from './VerifyEmailPage'
+
+const meta: Meta<typeof VerifyEmailPage> = {
+  title: 'v2/Pages/Auth/Verify Email',
+  component: VerifyEmailPage,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    onSubmit: { action: 'submitted' },
+    isLoading: { control: 'boolean' },
+    error: { control: 'text' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof VerifyEmailPage>
+
+export const Default: Story = {
+  args: {
+    onSubmit: async (code) => {
+      console.log('Verify code:', code)
+    },
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    ...Default.args,
+    isLoading: true,
+  },
+}
+
+export const WithError: Story = {
+  args: {
+    ...Default.args,
+    error: 'Invalid verification code. Please try again.',
+  },
+}

package/src/v2/pages/auth/VerifyEmail/VerifyEmailPage.tsx

@@ -0,0 +1,110 @@
+import React, { useState, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { AuthLayout } from '../AuthLayout'
+import { VerifyEmailIcon } from '../../../icons'
+import { Button } from '../../../components/Button'
+import './VerifyEmailPage.scss'
+
+const CODE_LENGTH = 6
+
+export interface VerifyEmailPageProps {
+  onSubmit: (code: string) => Promise<void> | void
+  isLoading?: boolean
+  error?: string
+}
+
+export const VerifyEmailPage: React.FC<VerifyEmailPageProps> = ({
+  onSubmit,
+  isLoading = false,
+  error,
+}) => {
+  const { t } = useTranslation(['User'])
+  const [digits, setDigits] = useState<string[]>(Array(CODE_LENGTH).fill(''))
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([])
+
+  const handleChange = (index: number, value: string) => {
+    const digit = value.replace(/\D/g, '').slice(-1)
+    const newDigits = [...digits]
+    newDigits[index] = digit
+    setDigits(newDigits)
+
+    if (digit && index < CODE_LENGTH - 1) {
+      inputRefs.current[index + 1]?.focus()
+    }
+  }
+
+  const handleKeyDown = (index: number, e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Backspace' && !digits[index] && index > 0) {
+      inputRefs.current[index - 1]?.focus()
+    }
+  }
+
+  const handlePaste = (e: React.ClipboardEvent) => {
+    e.preventDefault()
+    const pasted = e.clipboardData.getData('text').replace(/\D/g, '').slice(0, CODE_LENGTH)
+    if (!pasted) return
+    const newDigits = [...digits]
+    pasted.split('').forEach((char, i) => {
+      newDigits[i] = char
+    })
+    setDigits(newDigits)
+    const nextEmpty = pasted.length < CODE_LENGTH ? pasted.length : CODE_LENGTH - 1
+    inputRefs.current[nextEmpty]?.focus()
+  }
+
+  const code = digits.join('')
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (code.length !== CODE_LENGTH) return
+    await onSubmit(code)
+  }
+
+  return (
+    <AuthLayout
+      badgeLabel={t('User:verifyEmail')}
+      icon={<VerifyEmailIcon />}
+      title={t('User:verifyEmail')}
+      subtitle={t('User:verifyEmailSubtitle')}
+      error={error}
+    >
+      <form className="auth-verify-email" onSubmit={handleSubmit} noValidate>
+        <label className="auth-verify-email__label">
+          {t('User:verifyEmailCode')}
+        </label>
+        <p className="auth-verify-email__description">
+          {t('User:verifyEmailDescription')}
+        </p>
+
+        <div className="auth-verify-email__otp-group" onPaste={handlePaste}>
+          {digits.map((digit, index) => (
+            <input
+              key={index}
+              ref={(el) => { inputRefs.current[index] = el }}
+              type="text"
+              inputMode="numeric"
+              maxLength={1}
+              value={digit}
+              onChange={(e) => handleChange(index, e.target.value)}
+              onKeyDown={(e) => handleKeyDown(index, e)}
+              className="auth-verify-email__otp-input"
+              disabled={isLoading}
+              aria-label={`Digit ${index + 1}`}
+            />
+          ))}
+        </div>
+
+        <div className="auth-verify-email__actions">
+          <Button
+            type="submit"
+            variant="primary"
+            isLoading={isLoading}
+            disabled={isLoading}
+          >
+            {t('User:verifyCode')}
+          </Button>
+        </div>
+      </form>
+    </AuthLayout>
+  )
+}

package/src/v2/pages/auth/VerifyEmail/index.ts

@@ -0,0 +1,2 @@
+export { VerifyEmailPage } from './VerifyEmailPage'
+export type { VerifyEmailPageProps } from './VerifyEmailPage'

package/src/v2/pages/auth/index.ts

@@ -0,0 +1,14 @@
+export { AuthLayout } from './AuthLayout'
+export type { AuthLayoutProps } from './AuthLayout'
+
+export { LoginPage } from './Login'
+export type { LoginPageProps } from './Login'
+
+export { ResetPasswordPage } from './ResetPassword'
+export type { ResetPasswordPageProps } from './ResetPassword'
+
+export { CreatePasswordPage } from './CreatePassword'
+export type { CreatePasswordPageProps } from './CreatePassword'
+
+export { VerifyEmailPage } from './VerifyEmail'
+export type { VerifyEmailPageProps } from './VerifyEmail'