@mohasinac/appkit 2.1.3 → 2.3.0

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

@@ -1,180 +0,0 @@
-"use client";
-
-import React, { FormEvent, useCallback, useState } from "react";
-import { Div, Heading, Text, Label } from "../../../ui";
-
-export interface LoginFormValues {
-  email: string;
-  password: string;
-  rememberMe?: boolean;
-}
-
-export interface LoginFormProps {
-  onSubmit: (values: LoginFormValues) => Promise<void>;
-  onGoogleLogin?: () => Promise<void>;
-  isLoading?: boolean;
-  error?: string | null;
-  labels?: {
-    title?: string;
-    subtitle?: string;
-    signInLink?: string;
-    emailLabel?: string;
-    emailPlaceholder?: string;
-    passwordLabel?: string;
-    passwordPlaceholder?: string;
-    rememberMe?: string;
-    forgotPasswordLabel?: string;
-    submitLabel?: string;
-    submittingLabel?: string;
-    orSeparator?: string;
-  };
-  /** Render social login buttons (e.g. Google) */
-  renderSocialButtons?: () => React.ReactNode;
-  /** Render a "create account" link */
-  renderCreateAccountLink?: () => React.ReactNode;
-  /** Render forgot password link */
-  renderForgotPasswordLink?: () => React.ReactNode;
-  /** Render submit button */
-  renderSubmitButton?: (
-    loading: boolean,
-    labels: LoginFormProps["labels"],
-  ) => React.ReactNode;
-  className?: string;
-}
-
-export function LoginForm({
-  onSubmit,
-  onGoogleLogin,
-  isLoading = false,
-  error,
-  labels = {},
-  renderSocialButtons,
-  renderCreateAccountLink,
-  renderForgotPasswordLink,
-  renderSubmitButton,
-  className = "",
-}: LoginFormProps) {
-  const [values, setValues] = useState<LoginFormValues>({
-    email: "",
-    password: "",
-    rememberMe: false,
-  });
-
-  const handleSubmit = useCallback(
-    async (e: FormEvent) => {
-      e.preventDefault();
-      await onSubmit(values);
-    },
-    [onSubmit, values],
-  );
-
-  return (
-    <Div
-      className={`flex items-center justify-center min-h-[60vh] px-4 ${className}`}
-    >
-      <Div className="max-w-md w-full space-y-6">
-        {/* Header */}
-        <Div className="text-center">
-          <Heading level={1} className="text-3xl font-extrabold">
-            {labels.title ?? "Sign In"}
-          </Heading>
-          {(labels.subtitle || renderCreateAccountLink) && (
-            <Text className="mt-2 text-sm text-neutral-600">
-              {labels.subtitle ?? "Or"} {renderCreateAccountLink?.()}
-            </Text>
-          )}
-        </Div>
-
-        {/* Error */}
-        {error && (
-          <Div
-            role="alert"
-            className="rounded-lg bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-700"
-          >
-            {error}
-          </Div>
-        )}
-
-        {/* Form */}
-        <form className="space-y-4" onSubmit={handleSubmit} noValidate>
-          <Div>
-            <Label
-              htmlFor="login-email"
-              className="block text-sm font-medium mb-1"
-            >
-              {labels.emailLabel ?? "Email address"}
-            </Label>
-            <input
-              id="login-email"
-              name="email"
-              type="email"
-              autoComplete="username"
-              required
-              placeholder={labels.emailPlaceholder ?? "you@example.com"}
-              value={values.email}
-              onChange={(e) => setValues({ ...values, email: e.target.value })}
-              className="w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
-            />
-          </Div>
-
-          <Div>
-            <Label
-              htmlFor="login-password"
-              className="block text-sm font-medium mb-1"
-            >
-              {labels.passwordLabel ?? "Password"}
-            </Label>
-            <input
-              id="login-password"
-              name="password"
-              type="password"
-              autoComplete="current-password"
-              required
-              placeholder={labels.passwordPlaceholder ?? "••••••••"}
-              value={values.password}
-              onChange={(e) =>
-                setValues({ ...values, password: e.target.value })
-              }
-              className="w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
-            />
-          </Div>
-
-          <Div className="flex items-center justify-between">
-            <Div className="flex items-center gap-2">
-              <input
-                id="login-remember"
-                type="checkbox"
-                checked={values.rememberMe ?? false}
-                onChange={(e) =>
-                  setValues({ ...values, rememberMe: e.target.checked })
-                }
-                className="h-4 w-4 rounded border-neutral-300 accent-primary"
-              />
-              <Label htmlFor="login-remember" className="text-sm">
-                {labels.rememberMe ?? "Remember me"}
-              </Label>
-            </Div>
-            {renderForgotPasswordLink?.()}
-          </Div>
-
-          {renderSubmitButton ? (
-            renderSubmitButton(isLoading, labels)
-          ) : (
-            <button
-              type="submit"
-              disabled={isLoading}
-              className="w-full rounded-lg bg-primary px-4 py-2.5 text-sm font-semibold text-white disabled:opacity-60 hover:bg-primary/90 transition-colors"
-            >
-              {isLoading
-                ? (labels.submittingLabel ?? "Signing in…")
-                : (labels.submitLabel ?? "Sign in")}
-            </button>
-          )}
-        </form>
-
-        {/* Social buttons */}
-        {renderSocialButtons?.()}
-      </Div>
-    </Div>
-  );
-}

package/src/features/auth/components/RegisterForm.tsx

@@ -1,232 +0,0 @@
-"use client";
-
-import React, { FormEvent, useCallback, useState } from "react";
-import { Div, Heading, Label, Text } from "../../../ui";
-
-export interface RegisterFormValues {
-  email: string;
-  password: string;
-  confirmPassword: string;
-  displayName: string;
-  acceptTerms: boolean;
-}
-
-export interface RegisterFormProps {
-  onSubmit: (values: RegisterFormValues) => Promise<void>;
-  isLoading?: boolean;
-  error?: string | null;
-  success?: string | null;
-  labels?: {
-    title?: string;
-    subtitle?: string;
-    displayNameLabel?: string;
-    displayNamePlaceholder?: string;
-    emailLabel?: string;
-    emailPlaceholder?: string;
-    passwordLabel?: string;
-    passwordPlaceholder?: string;
-    confirmPasswordLabel?: string;
-    confirmPasswordPlaceholder?: string;
-    acceptTermsLabel?: string;
-    submitLabel?: string;
-    submittingLabel?: string;
-    passwordMismatch?: string;
-  };
-  renderSocialButtons?: () => React.ReactNode;
-  renderLoginLink?: () => React.ReactNode;
-  renderTermsLink?: () => React.ReactNode;
-  renderPasswordStrength?: (password: string) => React.ReactNode;
-  className?: string;
-}
-
-export function RegisterForm({
-  onSubmit,
-  isLoading = false,
-  error,
-  success,
-  labels = {},
-  renderSocialButtons,
-  renderLoginLink,
-  renderTermsLink,
-  renderPasswordStrength,
-  className = "",
-}: RegisterFormProps) {
-  const [values, setValues] = useState<RegisterFormValues>({
-    email: "",
-    password: "",
-    confirmPassword: "",
-    displayName: "",
-    acceptTerms: false,
-  });
-  const [validationError, setValidationError] = useState<string | null>(null);
-
-  const handleSubmit = useCallback(
-    async (e: FormEvent) => {
-      e.preventDefault();
-      setValidationError(null);
-      if (values.password !== values.confirmPassword) {
-        setValidationError(labels.passwordMismatch ?? "Passwords do not match");
-        return;
-      }
-      await onSubmit(values);
-    },
-    [onSubmit, values, labels.passwordMismatch],
-  );
-
-  const displayError = error ?? validationError;
-
-  return (
-    <Div
-      className={`flex items-center justify-center min-h-[60vh] px-4 ${className}`}
-    >
-      <Div className="max-w-md w-full space-y-6">
-        <Div className="text-center">
-          <Heading level={1} className="text-3xl font-extrabold">
-            {labels.title ?? "Create Account"}
-          </Heading>
-          {(labels.subtitle || renderLoginLink) && (
-            <Text className="mt-2 text-sm text-neutral-600">
-              {labels.subtitle ?? "Already have an account?"}{" "}
-              {renderLoginLink?.()}
-            </Text>
-          )}
-        </Div>
-
-        {success && (
-          <Div
-            role="status"
-            className="rounded-lg bg-green-50 border border-green-200 px-4 py-3 text-sm text-green-700"
-          >
-            {success}
-          </Div>
-        )}
-
-        {displayError && (
-          <Div
-            role="alert"
-            className="rounded-lg bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-700"
-          >
-            {displayError}
-          </Div>
-        )}
-
-        <form className="space-y-4" onSubmit={handleSubmit} noValidate>
-          <Div>
-            <Label
-              htmlFor="reg-name"
-              className="block text-sm font-medium mb-1"
-            >
-              {labels.displayNameLabel ?? "Full name"}
-            </Label>
-            <input
-              id="reg-name"
-              name="displayName"
-              type="text"
-              autoComplete="name"
-              required
-              placeholder={labels.displayNamePlaceholder ?? "Your name"}
-              value={values.displayName}
-              onChange={(e) =>
-                setValues({ ...values, displayName: e.target.value })
-              }
-              className="w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
-            />
-          </Div>
-
-          <Div>
-            <Label
-              htmlFor="reg-email"
-              className="block text-sm font-medium mb-1"
-            >
-              {labels.emailLabel ?? "Email address"}
-            </Label>
-            <input
-              id="reg-email"
-              name="email"
-              type="email"
-              autoComplete="username"
-              required
-              placeholder={labels.emailPlaceholder ?? "you@example.com"}
-              value={values.email}
-              onChange={(e) => setValues({ ...values, email: e.target.value })}
-              className="w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
-            />
-          </Div>
-
-          <Div>
-            <Label
-              htmlFor="reg-password"
-              className="block text-sm font-medium mb-1"
-            >
-              {labels.passwordLabel ?? "Password"}
-            </Label>
-            <input
-              id="reg-password"
-              name="password"
-              type="password"
-              autoComplete="new-password"
-              required
-              placeholder={labels.passwordPlaceholder ?? "••••••••"}
-              value={values.password}
-              onChange={(e) =>
-                setValues({ ...values, password: e.target.value })
-              }
-              className="w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
-            />
-            {renderPasswordStrength?.(values.password)}
-          </Div>
-
-          <Div>
-            <Label
-              htmlFor="reg-confirm"
-              className="block text-sm font-medium mb-1"
-            >
-              {labels.confirmPasswordLabel ?? "Confirm password"}
-            </Label>
-            <input
-              id="reg-confirm"
-              name="confirmPassword"
-              type="password"
-              autoComplete="new-password"
-              required
-              placeholder={labels.confirmPasswordPlaceholder ?? "••••••••"}
-              value={values.confirmPassword}
-              onChange={(e) =>
-                setValues({ ...values, confirmPassword: e.target.value })
-              }
-              className="w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
-            />
-          </Div>
-
-          <Div className="flex items-start gap-2">
-            <input
-              id="reg-terms"
-              type="checkbox"
-              required
-              checked={values.acceptTerms}
-              onChange={(e) =>
-                setValues({ ...values, acceptTerms: e.target.checked })
-              }
-              className="mt-0.5 h-4 w-4 rounded border-neutral-300 accent-primary"
-            />
-            <Label htmlFor="reg-terms" className="text-sm leading-snug">
-              {labels.acceptTermsLabel ?? "I accept the"} {renderTermsLink?.()}
-            </Label>
-          </Div>
-
-          <button
-            type="submit"
-            disabled={isLoading}
-            className="w-full rounded-lg bg-primary px-4 py-2.5 text-sm font-semibold text-white disabled:opacity-60 hover:bg-primary/90 transition-colors"
-          >
-            {isLoading
-              ? (labels.submittingLabel ?? "Creating account…")
-              : (labels.submitLabel ?? "Create account")}
-          </button>
-        </form>
-
-        {renderSocialButtons?.()}
-      </Div>
-    </Div>
-  );
-}

package/src/features/auth/components/ResetPasswordView.tsx

@@ -1,144 +0,0 @@
-"use client";
-
-import React, { FormEvent, useCallback, useState } from "react";
-import { Div, Heading, Label, Text } from "../../../ui";
-
-export interface ResetPasswordViewProps {
-  /** OOB code from URL */
-  oobCode: string;
-  onSubmit: (oobCode: string, newPassword: string) => Promise<void>;
-  isLoading?: boolean;
-  error?: string | null;
-  success?: string | null;
-  labels?: {
-    title?: string;
-    description?: string;
-    passwordLabel?: string;
-    passwordPlaceholder?: string;
-    confirmPasswordLabel?: string;
-    confirmPasswordPlaceholder?: string;
-    submitLabel?: string;
-    submittingLabel?: string;
-    passwordMismatch?: string;
-  };
-  renderLoginLink?: () => React.ReactNode;
-  className?: string;
-}
-
-export function ResetPasswordView({
-  oobCode,
-  onSubmit,
-  isLoading = false,
-  error,
-  success,
-  labels = {},
-  renderLoginLink,
-  className = "",
-}: ResetPasswordViewProps) {
-  const [password, setPassword] = useState("");
-  const [confirm, setConfirm] = useState("");
-  const [validationError, setValidationError] = useState<string | null>(null);
-
-  const handleSubmit = useCallback(
-    async (e: FormEvent) => {
-      e.preventDefault();
-      setValidationError(null);
-      if (password !== confirm) {
-        setValidationError(labels.passwordMismatch ?? "Passwords do not match");
-        return;
-      }
-      await onSubmit(oobCode, password);
-    },
-    [oobCode, onSubmit, password, confirm, labels.passwordMismatch],
-  );
-
-  const displayError = error ?? validationError;
-
-  return (
-    <Div
-      className={`flex items-center justify-center min-h-[60vh] px-4 ${className}`}
-    >
-      <Div className="max-w-md w-full space-y-6">
-        <Div className="text-center">
-          <Heading level={1} className="text-3xl font-extrabold">
-            {labels.title ?? "Reset Password"}
-          </Heading>
-          {labels.description && (
-            <Text className="mt-2 text-sm text-neutral-600">
-              {labels.description}
-            </Text>
-          )}
-        </Div>
-
-        {displayError && (
-          <Div
-            role="alert"
-            className="rounded-lg bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-700"
-          >
-            {displayError}
-          </Div>
-        )}
-
-        {success ? (
-          <Div
-            role="status"
-            className="rounded-lg bg-green-50 border border-green-200 px-4 py-3 text-sm text-green-700"
-          >
-            {success}
-            {renderLoginLink && <Div className="mt-2">{renderLoginLink()}</Div>}
-          </Div>
-        ) : (
-          <form className="space-y-4" onSubmit={handleSubmit} noValidate>
-            <Div>
-              <Label
-                htmlFor="rp-password"
-                className="block text-sm font-medium mb-1"
-              >
-                {labels.passwordLabel ?? "New password"}
-              </Label>
-              <input
-                id="rp-password"
-                name="password"
-                type="password"
-                autoComplete="new-password"
-                required
-                placeholder={labels.passwordPlaceholder ?? "••••••••"}
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                className="w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
-              />
-            </Div>
-            <Div>
-              <Label
-                htmlFor="rp-confirm"
-                className="block text-sm font-medium mb-1"
-              >
-                {labels.confirmPasswordLabel ?? "Confirm new password"}
-              </Label>
-              <input
-                id="rp-confirm"
-                name="confirmPassword"
-                type="password"
-                autoComplete="new-password"
-                required
-                placeholder={labels.confirmPasswordPlaceholder ?? "••••••••"}
-                value={confirm}
-                onChange={(e) => setConfirm(e.target.value)}
-                className="w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
-              />
-            </Div>
-            <button
-              type="submit"
-              disabled={isLoading}
-              className="w-full rounded-lg bg-primary px-4 py-2.5 text-sm font-semibold text-white disabled:opacity-60 hover:bg-primary/90 transition-colors"
-            >
-              {isLoading
-                ? (labels.submittingLabel ?? "Resetting…")
-                : (labels.submitLabel ?? "Reset password")}
-            </button>
-          </form>
-        )}
-      </Div>
-    </Div>
-  );
-}

package/src/features/auth/components/SocialAuthButtons.tsx

@@ -1,60 +0,0 @@
-"use client";
-
-import { Button, Div, Span } from "../../../ui";
-
-interface SocialAuthButtonsProps {
-  onGoogle: () => void;
-  disabled?: boolean;
-  dividerLabel: string;
-  googleLabel: string;
-}
-
-export function SocialAuthButtons({
-  onGoogle,
-  disabled,
-  dividerLabel,
-  googleLabel,
-}: SocialAuthButtonsProps) {
-  return (
-    <>
-      <Div className="relative">
-        <Div className="absolute inset-0 flex items-center">
-          <Div className="w-full border-t border-neutral-200" />
-        </Div>
-        <Div className="relative flex justify-center text-sm">
-          <Span className="px-2 bg-white text-neutral-500">{dividerLabel}</Span>
-        </Div>
-      </Div>
-
-      <Div className="grid grid-cols-1 gap-3">
-        <Button
-          type="button"
-          onClick={onGoogle}
-          disabled={disabled}
-          variant="outline"
-          className="inline-flex items-center justify-center rounded-md border border-neutral-300 bg-white px-4 py-2 text-sm font-medium text-neutral-900 hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-50"
-        >
-          <svg className="mr-2 h-5 w-5" viewBox="0 0 24 24" aria-hidden="true">
-            <path
-              fill="currentColor"
-              d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
-            />
-            <path
-              fill="currentColor"
-              d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
-            />
-            <path
-              fill="currentColor"
-              d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
-            />
-            <path
-              fill="currentColor"
-              d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
-            />
-          </svg>
-          {googleLabel}
-        </Button>
-      </Div>
-    </>
-  );
-}