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

package/src/v2/pages/auth/CreatePassword/CreatePasswordPage.scss

@@ -0,0 +1,149 @@
+.auth-create-password {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+
+  &__requirements {
+    margin-bottom: 24px;
+  }
+
+  &__requirements-title {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 1.4;
+    color: var(--label-primary);
+    margin: 0 0 8px;
+    padding: 0;
+  }
+
+  &__requirements-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  &__requirement-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 15px;
+    font-weight: 400;
+    line-height: 1.4;
+    color: var(--label-primary);
+  }
+
+  &__requirement-icon {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &--met {
+      color: var(--label-status-success);
+    }
+
+    &--unmet {
+      color: var(--label-status-error);
+    }
+
+    &--neutral {
+      color: var(--label-tertiary);
+    }
+  }
+
+  &__field {
+    margin-bottom: 16px;
+  }
+
+  &__field--last {
+    margin-bottom: 24px;
+  }
+
+  &__strength {
+    margin-top: 8px;
+  }
+
+  &__strength-header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 4px;
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 12px;
+    color: var(--label-secondary);
+  }
+
+  &__strength-bar-track {
+    height: 4px;
+    background-color: var(--surface-tertiary);
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  &__strength-bar-fill {
+    height: 100%;
+    border-radius: 4px;
+    transition: width 0.3s ease, background-color 0.3s ease;
+  }
+
+  &__match {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 8px;
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 13px;
+
+    &--match {
+      color: var(--label-status-success);
+    }
+
+    &--no-match {
+      color: var(--label-status-error);
+    }
+  }
+
+  &__actions {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    align-items: flex-start;
+  }
+
+  &__reset-link {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 15px;
+    font-weight: 400;
+    color: var(--label-action);
+    text-decoration: underline;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  &__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/CreatePassword/CreatePasswordPage.stories.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { CreatePasswordPage } from './CreatePasswordPage'
+
+const meta: Meta<typeof CreatePasswordPage> = {
+  title: 'v2/Pages/Auth/Create Password',
+  component: CreatePasswordPage,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    onSubmit: { action: 'submitted' },
+    onResetInstead: { action: 'reset-instead' },
+    isLoading: { control: 'boolean' },
+    error: { control: 'text' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof CreatePasswordPage>
+
+export const Default: Story = {
+  args: {
+    onSubmit: async (password) => {
+      console.log('Set password:', password)
+    },
+    onResetInstead: () => {
+      console.log('Reset instead clicked')
+    },
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    ...Default.args,
+    isLoading: true,
+  },
+}
+
+export const WithError: Story = {
+  args: {
+    ...Default.args,
+    error: 'Failed to update password. Please try again.',
+  },
+}

package/src/v2/pages/auth/CreatePassword/CreatePasswordPage.tsx

@@ -0,0 +1,181 @@
+import React from 'react'
+import { useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { AuthLayout } from '../AuthLayout'
+import { FormField } from '../../../components/FormField'
+import { Button } from '../../../components/Button'
+import { PasswordTypeIcon, PasswordRequirementIcon } from '../../../icons'
+import './CreatePasswordPage.scss'
+
+type FormValues = {
+  password: string
+  confirmPassword: string
+}
+
+export interface CreatePasswordPageProps {
+  onSubmit: (password: string) => Promise<void> | void
+  onResetInstead?: () => void
+  isLoading?: boolean
+  error?: string
+}
+
+export const CreatePasswordPage: React.FC<CreatePasswordPageProps> = ({
+  onSubmit,
+  onResetInstead,
+  isLoading = false,
+  error,
+}) => {
+  const { t } = useTranslation(['Validation', 'User'])
+  const { register, handleSubmit, watch, formState: { errors, touchedFields } } = useForm<FormValues>({ mode: 'onChange' })
+
+  const password = watch('password', '')
+  const confirmPassword = watch('confirmPassword', '')
+
+  const hasNumber = /\d/.test(password)
+  const hasCapital = /[A-Z]/.test(password)
+  const hasMinLength = password.length >= 8
+
+  const criteriaCount = [hasNumber, hasCapital, hasMinLength].filter(Boolean).length
+
+  const getStrengthColor = () => {
+    if (password.length === 0) return 'transparent'
+    if (criteriaCount <= 1) return 'var(--red-600)'
+    if (criteriaCount === 2) return 'var(--orange-500)'
+    return 'var(--green-600)'
+  }
+
+  const getStrengthWidth = () => {
+    if (password.length === 0) return '0%'
+    if (criteriaCount <= 1) return '33%'
+    if (criteriaCount === 2) return '66%'
+    return '100%'
+  }
+
+  const getStrengthLabel = () => {
+    if (password.length === 0) return ''
+    if (criteriaCount <= 1) return t('User:passwordStrengthWeak')
+    if (criteriaCount === 2) return t('User:passwordStrengthMedium')
+    return t('User:passwordStrengthStrong')
+  }
+
+  const passwordsMatch = password === confirmPassword && confirmPassword.length > 0
+  const showMatchIndicator = confirmPassword.length > 0
+
+  const onFormSubmit = async (data: FormValues) => {
+    await onSubmit(data.password)
+  }
+
+  return (
+    <AuthLayout
+      badgeLabel={t('User:newPassword')}
+      icon={<PasswordTypeIcon />}
+      title={t('User:newPassword')}
+      subtitle={t('User:newPasswordSubtitle')}
+      error={error}
+    >
+      <form className="auth-create-password" onSubmit={handleSubmit(onFormSubmit)} noValidate>
+
+        <div className="auth-create-password__requirements">
+          <p className="auth-create-password__requirements-title">
+            {t('User:passwordsMustContain')}
+          </p>
+          <ul className="auth-create-password__requirements-list">
+            <li className="auth-create-password__requirement-item">
+              <PasswordRequirementIcon met={hasNumber} visible={password.length > 0} />
+              {t('User:passwordRequireNumber')}
+            </li>
+            <li className="auth-create-password__requirement-item">
+              <PasswordRequirementIcon met={hasCapital} visible={password.length > 0} />
+              {t('User:passwordRequireCapital')}
+            </li>
+            <li className="auth-create-password__requirement-item">
+              <PasswordRequirementIcon met={hasMinLength} visible={password.length > 0} />
+              {t('User:passwordRequireMinLength')}
+            </li>
+          </ul>
+        </div>
+
+        <div className="auth-create-password__field">
+          <FormField
+            label={t('User:password')}
+            type="password"
+            disabled={isLoading}
+            error={errors.password?.message}
+            success={!!touchedFields.password && !errors.password}
+            {...register('password', {
+              required: t('Validation:fieldRequired', { attribute: t('User:password') }) as string,
+              minLength: {
+                value: 8,
+                message: t('Validation:fieldMinLength', { attribute: t('User:password'), min: 8 }) as string,
+              },
+            })}
+          />
+          {password.length > 0 && (
+            <div className="auth-create-password__strength">
+              <div className="auth-create-password__strength-header">
+                <span>{t('User:passwordStrength')}</span>
+                <span>{getStrengthLabel()}</span>
+              </div>
+              <div className="auth-create-password__strength-bar-track">
+                <div
+                  className="auth-create-password__strength-bar-fill"
+                  style={{
+                    width: getStrengthWidth(),
+                    backgroundColor: getStrengthColor(),
+                  }}
+                />
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div className="auth-create-password__field--last">
+          <FormField
+            label={t('User:confirmPassword')}
+            type="password"
+            disabled={isLoading}
+            error={errors.confirmPassword?.message}
+            success={!!touchedFields.confirmPassword && !errors.confirmPassword}
+            {...register('confirmPassword', {
+              required: t('Validation:fieldRequired', { attribute: t('User:confirmPassword') }) as string,
+              validate: (value) =>
+                value === password ||
+                (t('Validation:fieldDoesntMatchField', {
+                  field1: t('User:confirmPassword'),
+                  field2: t('User:password'),
+                }) as string),
+            })}
+          />
+          {showMatchIndicator && (
+            <div className={`auth-create-password__match auth-create-password__match--${passwordsMatch ? 'match' : 'no-match'}`}>
+              <PasswordRequirementIcon met={passwordsMatch} />
+              {passwordsMatch ? t('User:passwordsMatch') : t('User:passwordsDoNotMatch')}
+            </div>
+          )}
+        </div>
+
+        <div className="auth-create-password__actions">
+          <Button
+            type="submit"
+            variant="primary"
+            isLoading={isLoading}
+            disabled={isLoading}
+          >
+            {t('User:submit')}
+          </Button>
+
+          {onResetInstead && (
+            <button
+              type="button"
+              className="auth-create-password__reset-link"
+              onClick={onResetInstead}
+              disabled={isLoading}
+            >
+              {t('User:resetPasswordInstead')}
+            </button>
+          )}
+        </div>
+      </form>
+    </AuthLayout>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { CreatePasswordPage } from './CreatePasswordPage'
+export type { CreatePasswordPageProps } from './CreatePasswordPage'

package/src/v2/pages/auth/Login/LoginPage.scss

@@ -0,0 +1,49 @@
+.auth-login {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+
+  &__field {
+    margin-bottom: 16px;
+  }
+
+  &__field--last {
+    margin-bottom: 24px;
+  }
+
+  &__forgot {
+    display: inline-block;
+    margin-top: 8px;
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 15px;
+    font-weight: 400;
+    color: var(--label-action);
+    text-decoration: underline;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  &__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/Login/LoginPage.stories.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { LoginPage } from './LoginPage'
+
+const meta: Meta<typeof LoginPage> = {
+  title: 'v2/Pages/Auth/Login',
+  component: LoginPage,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    onSubmit: { action: 'submitted' },
+    onForgotPassword: { action: 'forgot-password' },
+    isLoading: { control: 'boolean' },
+    error: { control: 'text' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof LoginPage>
+
+export const Default: Story = {
+  args: {
+    onSubmit: async (email, password) => {
+      console.log('Login:', email, password)
+    },
+    onForgotPassword: () => {
+      console.log('Forgot password clicked')
+    },
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    ...Default.args,
+    isLoading: true,
+  },
+}
+
+export const WithError: Story = {
+  args: {
+    ...Default.args,
+    error: 'Invalid email or password. Please try again.',
+  },
+}

package/src/v2/pages/auth/Login/LoginPage.tsx

@@ -0,0 +1,100 @@
+import React from 'react'
+import { useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { AuthLayout } from '../AuthLayout'
+import { FormField } from '../../../components/FormField'
+import { Button } from '../../../components/Button'
+import { SecurityIcon } from '../../../icons'
+import emailRule from '@licklist/plugins/dist/validation/Rules/emailRule'
+import './LoginPage.scss'
+
+type FormValues = {
+  email: string
+  password: string
+}
+
+export interface LoginPageProps {
+  onSubmit: (email: string, password: string) => Promise<void> | void
+  onForgotPassword?: () => void
+  isLoading?: boolean
+  error?: string
+  version?: string
+}
+
+export const LoginPage: React.FC<LoginPageProps> = ({
+  onSubmit,
+  onForgotPassword,
+  isLoading = false,
+  error,
+  version,
+}) => {
+  const { t } = useTranslation(['Validation', 'User'])
+  const { register, handleSubmit, formState: { errors, touchedFields } } = useForm<FormValues>({ mode: 'onChange' })
+
+  const onFormSubmit = async (data: FormValues) => {
+    await onSubmit(data.email, data.password)
+  }
+
+  return (
+    <AuthLayout
+      badgeLabel={t('User:login')}
+      icon={<SecurityIcon />}
+      title={t('User:login')}
+      subtitle={t('User:loginSubtitle')}
+      version={version}
+      error={error}
+    >
+      <form className="auth-login" onSubmit={handleSubmit(onFormSubmit)} noValidate>
+        <FormField
+          className="auth-login__field"
+          label={t('User:emailAddress')}
+          type="email"
+          disabled={isLoading}
+          error={errors.email?.message}
+          success={!!touchedFields.email && !errors.email}
+          {...register('email', {
+            required: t('Validation:fieldRequired', { attribute: t('User:email') }) as string,
+            pattern: {
+              value: emailRule,
+              message: t('Validation:fieldValidEmail', { attribute: t('User:email') }) as string,
+            },
+          })}
+        />
+
+        <div className="auth-login__field--last">
+          <FormField
+            label={t('User:password')}
+            type="password"
+            disabled={isLoading}
+            error={errors.password?.message}
+            success={!!touchedFields.password && !errors.password}
+            {...register('password', {
+              required: t('Validation:fieldRequired', { attribute: t('User:password') }) as string,
+            })}
+          />
+          {onForgotPassword && (
+            <button
+              type="button"
+              className="auth-login__forgot"
+              onClick={onForgotPassword}
+              disabled={isLoading}
+            >
+              {t('User:forgotPassword')}
+            </button>
+          )}
+        </div>
+
+        <div className="auth-login__actions">
+          <Button
+            type="submit"
+            variant="primary"
+            isLoading={isLoading}
+            disabled={isLoading}
+          >
+            {t('User:login')}
+          </Button>
+        </div>
+      </form>
+    </AuthLayout>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { LoginPage } from './LoginPage'
+export type { LoginPageProps } from './LoginPage'

package/src/v2/pages/auth/ResetPassword/ResetPasswordPage.scss

@@ -0,0 +1,82 @@
+.auth-reset {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+
+  &__description {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 15px;
+    font-weight: 400;
+    line-height: 1.4;
+    color: var(--label-primary);
+    margin: 0 0 24px;
+    padding: 0;
+  }
+
+  &__field {
+    margin-bottom: 24px;
+  }
+
+  &__actions {
+    margin-bottom: 16px;
+  }
+
+  &__footer {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &__footer-text {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 15px;
+    font-weight: 400;
+    color: var(--label-primary);
+    margin: 0;
+    padding: 0;
+  }
+
+  &__link {
+    color: var(--label-action);
+    text-decoration: underline;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  &__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;
+  }
+
+  &__success {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 12px;
+    border-radius: 8px;
+    background-color: var(--surface-status-success);
+    border: 1px solid var(--border-status-success);
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 13px;
+    color: var(--label-status-success);
+    margin-bottom: 16px;
+  }
+}