@licklist/design 0.78.44 → 0.78.46

package/src/v2/pages/auth/AuthLayout/AuthLayout.scss

@@ -0,0 +1,140 @@
+.auth-layout {
+  position: relative;
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  background-color: var(--surface-secondary);
+  padding: 0 16px;
+
+  &__alert {
+    width: 846px;
+    max-width: 100%;
+    margin-top: 24px;
+    position: relative;
+    z-index: 1;
+  }
+
+  &__bg-decoration {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 489px;
+    height: 588px;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  &__card {
+    position: relative;
+    z-index: 10;
+    width: 846px;
+    max-width: 100%;
+    min-height: 400px;
+    background-color: var(--surface-primary);
+    border-radius: 16px;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
+    overflow: hidden;
+    margin-top: 80px;
+
+    @media (max-width: 768px) {
+      margin-top: 40px;
+    }
+  }
+
+  &__alert + &__card {
+    margin-top: 16px;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px;
+    border-bottom: 1px solid var(--border-primary);
+
+    .new-badge {
+      padding: 6px 10px;
+      font-size: 11px;
+    }
+  }
+
+  &__body {
+    padding: 42px;
+
+    @media (max-width: 768px) {
+      padding: 20px;
+    }
+  }
+
+  &__content {
+    display: flex;
+    width: 100%;
+    gap: 64px;
+    flex-wrap: wrap;
+
+    @media (max-width: 768px) {
+      gap: 32px;
+    }
+  }
+
+  &__info {
+    min-width: 240px;
+    flex: 1;
+    flex-shrink: 0;
+    flex-basis: 0;
+    max-width: 260px;
+    color: var(--label-primary);
+  }
+
+  &__icon {
+    width: 64px;
+    height: 64px;
+    color: var(--fill-primary);
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__title {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 32px;
+    font-weight: 700;
+    line-height: 1;
+    color: var(--label-primary);
+    margin: 8px 0 0;
+    padding: 0;
+  }
+
+  &__subtitle {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 1;
+    color: var(--label-secondary);
+    margin: 16px 0 0;
+    padding: 0;
+
+    @media (max-width: 768px) {
+      margin-top: 4px;
+    }
+  }
+
+  &__form-area {
+    display: flex;
+    min-width: 240px;
+    flex-direction: column;
+    align-items: stretch;
+    flex: 1;
+    flex-shrink: 0;
+    flex-basis: 0;
+
+    @media (max-width: 768px) {
+      max-width: 100%;
+    }
+  }
+}

package/src/v2/pages/auth/AuthLayout/AuthLayout.tsx

@@ -0,0 +1,61 @@
+import React, { useState, useEffect } from 'react'
+import './AuthLayout.scss'
+import { DashboardFooter } from '../../../navigation/DashboardLayout/DashboardFooter'
+import { AuthBgDecorationIcon, BookedLogo } from '../../../icons'
+import { Badge } from '../../../components/Badge'
+import { Alert } from '../../../components/Alert'
+
+export interface AuthLayoutProps {
+  badgeLabel: string
+  icon: React.ReactNode
+  title: string
+  subtitle: string
+  children: React.ReactNode
+  version?: string
+  error?: string
+  successMessage?: string
+}
+
+export const AuthLayout: React.FC<AuthLayoutProps> = ({ badgeLabel, icon, title, subtitle, children, version, error, successMessage }) => {
+  const [dismissed, setDismissed] = useState(false)
+
+  useEffect(() => {
+    setDismissed(false)
+  }, [error, successMessage])
+
+  const showError = error && !dismissed
+  const showSuccess = successMessage && !dismissed
+
+  return (
+    <div className="auth-layout">
+      <AuthBgDecorationIcon />
+
+      {showError && (
+        <Alert variant="error" title="Error" message={error} className="auth-layout__alert" onDismiss={() => setDismissed(true)} />
+      )}
+      {showSuccess && (
+        <Alert variant="success" title="Success" message={successMessage} className="auth-layout__alert" onDismiss={() => setDismissed(true)} />
+      )}
+
+      <div className="auth-layout__card">
+        <div className="auth-layout__header">
+          <BookedLogo />
+          <Badge>{badgeLabel}</Badge>
+        </div>
+        <div className="auth-layout__body">
+          <div className="auth-layout__content">
+            <div className="auth-layout__info">
+              <div className="auth-layout__icon">{icon}</div>
+              <h1 className="auth-layout__title">{title}</h1>
+              <p className="auth-layout__subtitle">{subtitle}</p>
+            </div>
+            <div className="auth-layout__form-area">
+              {children}
+            </div>
+          </div>
+        </div>
+      </div>
+      <DashboardFooter version={version} />
+    </div>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { AuthLayout } from './AuthLayout'
+export type { AuthLayoutProps } from './AuthLayout'

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,179 @@
+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 } } = 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}
+            {...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}
+            {...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.',
+  },
+}