@umituz/web-dashboard 5.0.0 → 6.0.0

package/src/domains/auth/components/AuthLayout.tsx

@@ -1,99 +0,0 @@
-import { BrandLogo } from "../../layouts/components";
-import { cn } from "@umituz/web-design-system/utils/cn";
-import { AUTH_KEYS } from "../utils/i18nKeys";
-import type { AuthLayoutProps, Translate } from "../types/auth";
-
-const DEFAULT_STRINGS: Record<string, string> = {
-  [AUTH_KEYS.layout.backToHome]: "Back to home",
-  [AUTH_KEYS.layout.orContinueWith]: "Or continue with",
-  [AUTH_KEYS.layout.allRightsReserved]: "All rights reserved.",
-};
-
-export const AuthLayout = ({
-  config,
-  translate,
-  onSocialLogin,
-  children,
-}: AuthLayoutProps) => {
-  const t: Translate = translate ?? ((key) => DEFAULT_STRINGS[key] ?? key);
-  const homeRoute = config.homeRoute ?? config.afterLoginRoute;
-  const footerLinks = config.footerLinks ?? [];
-
-  return (
-    <div className="udb-root udb-auth">
-      <header className="udb-auth__header">
-        <div className="udb-auth__brand">
-          <BrandLogo size={32} />
-          <span className="udb-auth__brand-name">{config.brandName}</span>
-        </div>
-
-        {homeRoute && (
-          <a href={homeRoute} className="udb-auth__home-link">
-            {t(AUTH_KEYS.layout.backToHome)}
-          </a>
-        )}
-      </header>
-
-      <main className="udb-auth__main">
-        <div className="udb-auth__column">
-          <div className="udb-auth__card">
-            {config.brandTagline && (
-              <p className="udb-auth__tagline">
-                {config.brandTagline}
-              </p>
-            )}
-
-            {children}
-          </div>
-
-          {config.showSocialLogin && config.socialProviders && config.socialProviders.length > 0 && (
-            <div className="udb-auth__social">
-              <div className="udb-divider-row">
-                <span className="udb-divider-row__label">
-                  {t(AUTH_KEYS.layout.orContinueWith)}
-                </span>
-              </div>
-
-              <div className="udb-social-grid">
-                {config.socialProviders.map((provider) => (
-                  <button
-                    key={provider.id}
-                    type="button"
-                    className={cn("udb-social-btn")}
-                    onClick={() => onSocialLogin?.(provider.id)}
-                  >
-                    <span className="udb-social-btn__icon">{provider.icon}</span>
-                    <span>{provider.name}</span>
-                  </button>
-                ))}
-              </div>
-            </div>
-          )}
-        </div>
-      </main>
-
-      <footer className="udb-auth__footer">
-        <div className="udb-auth__footer-inner">
-          <p>
-            © {new Date().getFullYear()} {config.brandName}. {t(AUTH_KEYS.layout.allRightsReserved)}
-          </p>
-          {footerLinks.length > 0 && (
-            <div className="udb-auth__footer-links">
-              {footerLinks.map((link) => (
-                <a
-                  key={link.href}
-                  href={link.href}
-                  className="udb-auth__footer-link"
-                >
-                  {link.label}
-                </a>
-              ))}
-            </div>
-          )}
-        </div>
-      </footer>
-    </div>
-  );
-};
-
-export default AuthLayout;

package/src/domains/auth/components/ForgotPasswordForm.tsx

@@ -1,167 +0,0 @@
-import { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { useT } from "@umituz/web-localization/react";
-import { ArrowLeft, Loader2, CheckCircle2, Check } from "lucide-react";
-import { Button } from "@umituz/web-design-system/atoms";
-import type { ForgotPasswordFormProps, Translate } from "../types/auth";
-import { validateForgotPassword } from "../utils/auth";
-import { AUTH_KEYS } from "../utils/i18nKeys";
-import { AUTH_VALIDATION_KEYS } from "../utils/validationKeys";
-import { AuthErrorBanner, EmailInput } from "./shared";
-
-const KEYS = {
-  title: 'auth.forgotPassword.title',
-  description: 'auth.forgotPassword.description',
-  emailLabel: AUTH_KEYS.fields.email,
-  emailPlaceholder: AUTH_KEYS.placeholders.emailExample,
-  submitting: 'auth.forgotPassword.submitting',
-  submit: 'auth.forgotPassword.submit',
-  backToSignIn: 'auth.forgotPassword.backToSignIn',
-  successTitle: 'auth.forgotPassword.successTitle',
-  successMessage: 'auth.forgotPassword.successMessage',
-  sentTo: 'auth.forgotPassword.sentTo',
-  step1: 'auth.forgotPassword.steps.step1',
-  step2: 'auth.forgotPassword.steps.step2',
-  step3: 'auth.forgotPassword.steps.step3',
-  invalidEmail: AUTH_VALIDATION_KEYS.emailInvalid,
-  sendResetFailed: 'auth.errors.sendResetFailed',
-} as const;
-
-export const ForgotPasswordForm = ({
-  config,
-  onSuccess,
-  onError,
-  showBackLink = true,
-}: ForgotPasswordFormProps) => {
-  const navigate = useNavigate();
-  const t = useT();
-  const translate: Translate = t;
-
-  const [email, setEmail] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [success, setSuccess] = useState(false);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError(null);
-
-    const validation = validateForgotPassword({ email });
-    if (!validation.valid) {
-      const message = validation.error ?? KEYS.invalidEmail;
-      setError(message);
-      onError?.(message);
-      return;
-    }
-
-    setIsLoading(true);
-    try {
-      await onSuccess?.({ email });
-      setSuccess(true);
-    } catch (err) {
-      const message = err instanceof Error ? err.message : KEYS.sendResetFailed;
-      setError(message);
-      onError?.(message);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  if (success) {
-    return (
-      <div className="udb-form" role="status" aria-live="polite">
-        <div className="udb-form__header">
-          <div className="udb-success-badge">
-            <CheckCircle2 className="udb-success-badge__icon" aria-hidden="true" />
-          </div>
-          <h1 className="udb-form__title">
-            {translate(KEYS.successTitle)}
-          </h1>
-          <p className="udb-form__subtitle">
-            {translate(KEYS.sentTo)}{' '}
-            <span className="udb-form__subtitle-strong">{email}</span>
-          </p>
-        </div>
-
-        <ol className="udb-steps-list">
-          <li className="udb-steps-list__item">
-            <Check className="udb-steps-list__icon" aria-hidden="true" />
-            {translate(KEYS.step1)}
-          </li>
-          <li className="udb-steps-list__item">
-            <Check className="udb-steps-list__icon" aria-hidden="true" />
-            {translate(KEYS.step2)}
-          </li>
-          <li className="udb-steps-list__item">
-            <Check className="udb-steps-list__icon" aria-hidden="true" />
-            {translate(KEYS.step3)}
-          </li>
-        </ol>
-
-        {showBackLink && config.loginRoute && (
-          <Button
-            type="button"
-            variant="ghost"
-            onClick={() => navigate(config.loginRoute)}
-            className="udb-submit-btn"
-          >
-            <ArrowLeft className="udb-btn__spinner" aria-hidden="true" />
-            {translate(KEYS.backToSignIn)}
-          </Button>
-        )}
-      </div>
-    );
-  }
-
-  return (
-    <form onSubmit={handleSubmit} className="udb-form" noValidate>
-      <div className="udb-form__header">
-        <h1 className="udb-form__title udb-form__title--lg">
-          {translate(KEYS.title)}
-        </h1>
-        <p className="udb-form__subtitle">{translate(KEYS.description)}</p>
-      </div>
-
-      <AuthErrorBanner message={error} translate={translate} />
-
-      <EmailInput
-        id="forgot-email"
-        labelKey={KEYS.emailLabel}
-        placeholderKey={KEYS.emailPlaceholder}
-        value={email}
-        onChange={setEmail}
-        translate={translate}
-        disabled={isLoading}
-        required
-      />
-
-      <Button
-        type="submit"
-        className="udb-submit-btn udb-submit-btn--pill"
-        disabled={isLoading}
-      >
-        {isLoading ? (
-          <>
-            <Loader2 className="udb-btn__spinner" aria-hidden="true" />
-            {translate(KEYS.submitting)}
-          </>
-        ) : (
-          translate(KEYS.submit)
-        )}
-      </Button>
-
-      {showBackLink && config.loginRoute && (
-        <button
-          type="button"
-          onClick={() => navigate(config.loginRoute)}
-          className="udb-back-link"
-        >
-          <ArrowLeft className="udb-back-link__icon" aria-hidden="true" />
-          {translate(KEYS.backToSignIn)}
-        </button>
-      )}
-    </form>
-  );
-};
-
-export default ForgotPasswordForm;

package/src/domains/auth/components/LoginForm.tsx

@@ -1,222 +0,0 @@
-import { useState, useCallback } from "react";
-import { useNavigate } from "react-router-dom";
-import { useT } from "@umituz/web-localization/react";
-import { Button, Checkbox } from "@umituz/web-design-system/atoms";
-import { Loader2 } from "lucide-react";
-import { validateLogin } from "../utils/auth";
-import type {
-  LoginFormProps,
-  LoginCredentials,
-  User,
-  Translate,
-} from "../types/auth";
-import {
-  AuthErrorBanner,
-  EmailInput,
-  PasswordInput,
-  SocialLoginButtons,
-} from "./shared";
-
-const KEYS = {
-  welcomeBack: 'auth.login.welcomeBack',
-  signInTo: 'auth.login.signInTo',
-  emailLabel: 'auth.fields.email',
-  emailPlaceholder: 'auth.placeholders.emailExample',
-  passwordLabel: 'auth.fields.password',
-  passwordPlaceholder: 'auth.placeholders.password',
-  rememberMe: 'auth.login.rememberMe',
-  forgotPassword: 'auth.login.forgotPassword',
-  submit: 'auth.login.submit',
-  submitting: 'auth.login.submitting',
-  noAccount: 'auth.login.noAccount',
-  signUp: 'auth.login.signUp',
-  orContinueWith: 'auth.login.orContinueWith',
-  invalidCredentials: 'auth.errors.invalidCredentials',
-  loginFailed: 'auth.errors.loginFailed',
-  noAuthProvider: 'auth.errors.noAuthProvider',
-} as const;
-
-export const LoginForm = ({
-  config,
-  defaultCredentials,
-  showRememberMe = true,
-  showForgotPassword = true,
-  showRegisterLink = true,
-  showSocialLogin = true,
-  enableMockAuth = false,
-  onLoginAttempt,
-  onLoginSuccess,
-  onLoginError,
-  onGoogleLogin,
-  onAppleLogin,
-}: LoginFormProps) => {
-  const navigate = useNavigate();
-  const t = useT();
-  const translate: Translate = t;
-
-  const [email, setEmail] = useState<string>(defaultCredentials?.email ?? "");
-  const [password, setPassword] = useState<string>(defaultCredentials?.password ?? "");
-  const [remember, setRemember] = useState<boolean>(false);
-  const [loading, setLoading] = useState<boolean>(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const performLogin = useCallback(
-    async (credentials: LoginCredentials): Promise<User> => {
-      if (onLoginAttempt) {
-        return onLoginAttempt(credentials);
-      }
-      if (!enableMockAuth) {
-        throw new Error(KEYS.noAuthProvider);
-      }
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-      return {
-        id: "1",
-        email: credentials.email,
-        name: credentials.email.split("@")[0],
-      };
-    },
-    [onLoginAttempt, enableMockAuth],
-  );
-
-  const handleSubmit = useCallback(
-    async (e: React.FormEvent) => {
-      e.preventDefault();
-      setError(null);
-
-      const validation = validateLogin({ email, password });
-      if (!validation.valid) {
-        const message = validation.error ?? KEYS.invalidCredentials;
-        setError(message);
-        onLoginError?.(message);
-        return;
-      }
-
-      setLoading(true);
-      try {
-        const user = await performLogin({ email, password });
-        await onLoginSuccess?.(user);
-        navigate(config.afterLoginRoute);
-      } catch (err) {
-        const message = err instanceof Error ? err.message : KEYS.loginFailed;
-        setError(message);
-        onLoginError?.(message);
-      } finally {
-        setLoading(false);
-      }
-    },
-    [email, password, performLogin, navigate, config.afterLoginRoute, onLoginSuccess, onLoginError],
-  );
-
-  const handleSocial = useCallback(
-    (provider: 'google' | 'apple') => {
-      if (provider === 'google') onGoogleLogin?.();
-      if (provider === 'apple') onAppleLogin?.();
-    },
-    [onGoogleLogin, onAppleLogin],
-  );
-
-  return (
-    <form onSubmit={handleSubmit} className="udb-form" noValidate>
-      <div className="udb-form__header">
-        <h1 className="udb-form__title">
-          {translate(KEYS.welcomeBack)}
-        </h1>
-        <p className="udb-form__subtitle">
-          {translate(KEYS.signInTo, { brand: config.brandName })}
-        </p>
-      </div>
-
-      <AuthErrorBanner message={error} translate={translate} />
-
-      <EmailInput
-        id="login-email"
-        labelKey={KEYS.emailLabel}
-        placeholderKey={KEYS.emailPlaceholder}
-        value={email}
-        onChange={setEmail}
-        translate={translate}
-        disabled={loading}
-        required
-      />
-
-      <PasswordInput
-        id="login-password"
-        labelKey={KEYS.passwordLabel}
-        placeholderKey={KEYS.passwordPlaceholder}
-        value={password}
-        onChange={setPassword}
-        translate={translate}
-        autoComplete="current-password"
-        disabled={loading}
-        required
-      />
-
-      {(showRememberMe || showForgotPassword) && (
-        <div className="udb-form__row">
-          {showRememberMe && (
-            <label className="udb-check-label">
-              <Checkbox
-                checked={remember}
-                onCheckedChange={(checked) => setRemember(Boolean(checked))}
-                disabled={loading}
-              />
-              {translate(KEYS.rememberMe)}
-            </label>
-          )}
-          {showForgotPassword && (
-            <button
-              type="button"
-              onClick={() => navigate(config.forgotPasswordRoute ?? '/forgot-password')}
-              className="udb-link-btn"
-              disabled={loading}
-            >
-              {translate(KEYS.forgotPassword)}
-            </button>
-          )}
-        </div>
-      )}
-
-      <Button type="submit" disabled={loading} className="udb-submit-btn">
-        {loading ? (
-          <>
-            <Loader2 className="udb-btn__spinner" aria-hidden="true" />
-            {translate(KEYS.submitting)}
-          </>
-        ) : (
-          translate(KEYS.submit)
-        )}
-      </Button>
-
-      {showRegisterLink && (
-        <p className="udb-form__footer-text">
-          {translate(KEYS.noAccount)}{' '}
-          <button
-            type="button"
-            onClick={() => navigate(config.registerRoute)}
-            className="udb-link-btn udb-link-btn--strong"
-            disabled={loading}
-          >
-            {translate(KEYS.signUp)}
-          </button>
-        </p>
-      )}
-
-      {showSocialLogin && (
-        <>
-          <div className="udb-divider-row">
-            <span className="udb-divider-row__label">
-              {translate(KEYS.orContinueWith)}
-            </span>
-          </div>
-          <SocialLoginButtons
-            onProvider={handleSocial}
-            translate={translate}
-            disabled={loading}
-          />
-        </>
-      )}
-    </form>
-  );
-};
-
-export default LoginForm;