create-blitzpack 0.1.0

package/template/apps/web/src/app/(auth)/forgot-password/page.tsx

@@ -0,0 +1,177 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Button } from '@repo/packages-ui/button';
+import { Input } from '@repo/packages-ui/input';
+import { Label } from '@repo/packages-ui/label';
+import { Info, MailIcon, TriangleAlert } from 'lucide-react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+import { RedirectIfAuthenticated } from '@/components/auth/redirect-if-authenticated';
+import { authClient } from '@/lib/auth';
+
+const forgotPasswordSchema = z.object({
+  email: z.string().email('Invalid email address'),
+});
+
+type ForgotPasswordFormData = z.infer<typeof forgotPasswordSchema>;
+
+export default function ForgotPasswordPage() {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const [emailSent, setEmailSent] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    getValues,
+  } = useForm<ForgotPasswordFormData>({
+    resolver: zodResolver(forgotPasswordSchema),
+    defaultValues: {
+      email: '',
+    },
+  });
+
+  const onSubmit = async (data: ForgotPasswordFormData) => {
+    setIsLoading(true);
+
+    try {
+      const result = await authClient.forgetPassword({
+        email: data.email,
+        redirectTo: '/reset-password',
+      });
+
+      if (result.error) {
+        toast.error(result.error.message || 'Failed to send reset email');
+        return;
+      }
+
+      setEmailSent(true);
+      toast.success('Password reset email sent! Check your inbox.');
+    } catch (error) {
+      toast.error('An unexpected error occurred');
+      console.error('Forgot password error:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (emailSent) {
+    return (
+      <RedirectIfAuthenticated>
+        <div className="flex min-h-screen items-center justify-center p-4">
+          <div className="bg-card w-full max-w-md rounded-lg border p-8">
+            <div className="mb-6 text-center">
+              <div className="bg-primary text-primary-foreground mx-auto mb-4 flex size-16 items-center justify-center rounded-full">
+                <MailIcon className="size-8" />
+              </div>
+              <h1 className="text-2xl font-semibold">Check your email</h1>
+              <p className="text-muted-foreground mt-2 text-sm">
+                We sent a password reset link to
+              </p>
+              <p className="text-foreground mt-1 text-sm font-medium">
+                {getValues('email')}
+              </p>
+            </div>
+            <div className="mb-6 space-y-4 rounded-lg border p-4">
+              <div className="flex gap-3">
+                <div className="mt-0.5 flex-shrink-0">
+                  <Info className="size-4" />
+                </div>
+                <div className="space-y-1">
+                  <p className="text-foreground text-sm font-medium">
+                    Next steps
+                  </p>
+                  <p className="text-muted-foreground text-sm leading-relaxed">
+                    Click the link in the email to reset your password. The link
+                    will expire in 1 hour.
+                  </p>
+                </div>
+              </div>
+              <div className="flex gap-3">
+                <div className="mt-0.5 flex-shrink-0">
+                  <TriangleAlert className="size-4" />
+                </div>
+                <div className="space-y-1">
+                  <p className="text-foreground text-sm font-medium">
+                    Didn't receive it?
+                  </p>
+                  <p className="text-muted-foreground text-sm leading-relaxed">
+                    Check your spam folder or use the button below to send
+                    another email.
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div className="flex flex-col gap-3">
+              <Button
+                variant="outline"
+                className="w-full"
+                onClick={() => setEmailSent(false)}
+              >
+                Send another email
+              </Button>
+              <Button
+                variant="ghost"
+                className="w-full"
+                onClick={() => router.push('/login')}
+              >
+                Back to sign in
+              </Button>
+            </div>
+          </div>
+        </div>
+      </RedirectIfAuthenticated>
+    );
+  }
+
+  return (
+    <RedirectIfAuthenticated>
+      <div className="flex min-h-screen items-center justify-center p-4">
+        <div className="bg-card w-full max-w-md rounded-lg border p-8">
+          <div className="mb-6">
+            <h1 className="text-2xl font-semibold">Reset your password</h1>
+            <p className="text-muted-foreground mt-2 text-sm">
+              Enter your email address and we'll send you a link to reset your
+              password
+            </p>
+          </div>
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="name@example.com"
+                {...register('email')}
+                disabled={isLoading}
+              />
+              {errors.email && (
+                <p className="text-destructive text-xs">
+                  {errors.email.message}
+                </p>
+              )}
+            </div>
+            <div className="flex flex-col gap-4 pt-2">
+              <Button type="submit" className="w-full" isLoading={isLoading}>
+                Send reset link
+              </Button>
+              <p className="text-muted-foreground text-center text-sm">
+                Remember your password?{' '}
+                <Link href="/login" className="text-primary hover:underline">
+                  Sign in
+                </Link>
+              </p>
+            </div>
+          </form>
+        </div>
+      </div>
+    </RedirectIfAuthenticated>
+  );
+}

package/template/apps/web/src/app/(auth)/login/page.tsx

@@ -0,0 +1,159 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Button } from '@repo/packages-ui/button';
+import { Checkbox } from '@repo/packages-ui/checkbox';
+import { Input } from '@repo/packages-ui/input';
+import { Label } from '@repo/packages-ui/label';
+import { PasswordInput } from '@repo/packages-ui/password-input';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+import { GithubButton } from '@/components/auth/github-button';
+import { GoogleButton } from '@/components/auth/google-button';
+import { RedirectIfAuthenticated } from '@/components/auth/redirect-if-authenticated';
+import { authClient } from '@/lib/auth';
+
+const loginSchema = z.object({
+  email: z.string().email('Invalid email address'),
+  password: z.string().min(8, 'Password must be at least 8 characters'),
+  rememberMe: z.boolean().default(false),
+});
+
+export default function LoginPage() {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(loginSchema),
+    defaultValues: {
+      email: '',
+      password: '',
+      rememberMe: false,
+    },
+  });
+
+  const onSubmit = async (data: z.infer<typeof loginSchema>) => {
+    setIsLoading(true);
+
+    try {
+      const result = await authClient.signIn.email({
+        email: data.email,
+        password: data.password,
+        rememberMe: data.rememberMe,
+      });
+
+      if (result.error) {
+        toast.error(result.error.message || 'Failed to sign in');
+        return;
+      }
+
+      toast.success('Welcome back!');
+      router.push('/dashboard');
+    } catch (error) {
+      toast.error('An unexpected error occurred');
+      console.error('Login error:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <RedirectIfAuthenticated>
+      <div className="flex min-h-screen items-center justify-center p-4">
+        <div className="bg-card w-full max-w-md rounded-lg border p-8">
+          <div className="mb-6">
+            <h1 className="text-2xl font-semibold">Sign In</h1>
+            <p className="text-muted-foreground mt-2 text-sm">
+              Enter your email and password to access your account
+            </p>
+          </div>
+
+          <div className="mb-6 space-y-3">
+            <GoogleButton />
+            <GithubButton />
+          </div>
+
+          <div className="relative mb-6">
+            <div className="absolute inset-0 flex items-center">
+              <span className="w-full border-t" />
+            </div>
+            <div className="relative flex justify-center text-xs uppercase">
+              <span className="bg-card text-muted-foreground px-2">
+                Or continue with email
+              </span>
+            </div>
+          </div>
+
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="name@example.com"
+                {...register('email')}
+                disabled={isLoading}
+              />
+              {errors.email && (
+                <p className="text-destructive text-xs">
+                  {errors.email.message}
+                </p>
+              )}
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="password">Password</Label>
+              <PasswordInput
+                id="password"
+                placeholder="Enter your password"
+                {...register('password')}
+                disabled={isLoading}
+              />
+              {errors.password && (
+                <p className="text-destructive text-xs">
+                  {errors.password.message}
+                </p>
+              )}
+            </div>
+            <div className="flex items-center justify-between pt-2">
+              <div className="flex items-center space-x-2">
+                <Checkbox id="rememberMe" {...register('rememberMe')} />
+                <Label
+                  htmlFor="rememberMe"
+                  className="text-sm font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                >
+                  Remember me for 30 days
+                </Label>
+              </div>
+              <Link
+                href="/forgot-password"
+                className="text-primary text-sm hover:underline"
+              >
+                Forgot password?
+              </Link>
+            </div>
+            <div className="flex flex-col gap-4 pt-2">
+              <Button type="submit" className="w-full" isLoading={isLoading}>
+                Sign In
+              </Button>
+              <p className="text-muted-foreground text-center text-sm">
+                Don&apos;t have an account?{' '}
+                <Link href="/signup" className="text-primary hover:underline">
+                  Sign up
+                </Link>
+              </p>
+            </div>
+          </form>
+        </div>
+      </div>
+    </RedirectIfAuthenticated>
+  );
+}

package/template/apps/web/src/app/(auth)/reset-password/page.tsx

@@ -0,0 +1,245 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Button } from '@repo/packages-ui/button';
+import { Label } from '@repo/packages-ui/label';
+import { PasswordInput } from '@repo/packages-ui/password-input';
+import { ShieldAlert } from 'lucide-react';
+import Link from 'next/link';
+import { useRouter, useSearchParams } from 'next/navigation';
+import React, { Suspense, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+import { authClient } from '@/lib/auth';
+
+const resetPasswordSchema = z.object({
+  password: z.string().min(8, 'Password must be at least 8 characters'),
+});
+
+type ResetPasswordFormData = z.infer<typeof resetPasswordSchema>;
+
+function ResetPasswordContent() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [isLoading, setIsLoading] = useState(false);
+  const [resetSuccess, setResetSuccess] = useState(false);
+
+  const token = searchParams.get('token');
+  const error = searchParams.get('error');
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<ResetPasswordFormData>({
+    resolver: zodResolver(resetPasswordSchema),
+    defaultValues: {
+      password: '',
+    },
+  });
+
+  const hasErrors = Object.keys(errors).length > 0;
+
+  if (!token || error) {
+    return (
+      <div className="flex min-h-screen items-center justify-center p-4">
+        <div className="bg-card w-full max-w-md rounded-lg border p-8">
+          <div className="mb-6 text-center">
+            <div className="bg-destructive/10 text-destructive mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+                className="h-7 w-7"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
+                />
+              </svg>
+            </div>
+            <h1 className="text-2xl font-semibold">Invalid reset link</h1>
+            <p className="text-muted-foreground mt-2 text-sm">
+              This password reset link is invalid or has expired.
+            </p>
+          </div>
+          <div className="bg-muted/50 mb-6 space-y-2 rounded-lg p-4">
+            <p className="text-muted-foreground text-sm">
+              Password reset links expire after 1 hour for security reasons.
+            </p>
+            <p className="text-muted-foreground text-sm">
+              Please request a new password reset link to continue.
+            </p>
+          </div>
+          <div className="flex flex-col gap-3">
+            <Button
+              className="w-full"
+              onClick={() => router.push('/forgot-password')}
+            >
+              Request new reset link
+            </Button>
+            <Button
+              variant="ghost"
+              className="w-full"
+              onClick={() => router.push('/login')}
+            >
+              Back to sign in
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const onSubmit = async (data: ResetPasswordFormData) => {
+    if (!token) {
+      toast.error('Reset token is missing');
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      const result = await authClient.resetPassword({
+        newPassword: data.password,
+        token,
+      });
+
+      if (result.error) {
+        toast.error(result.error.message || 'Failed to reset password');
+        return;
+      }
+
+      setResetSuccess(true);
+      toast.success('Password reset successful!');
+    } catch (error) {
+      toast.error('An unexpected error occurred');
+      console.error('Reset password error:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (resetSuccess) {
+    return (
+      <div className="flex min-h-screen items-center justify-center p-4">
+        <div className="bg-card w-full max-w-md rounded-lg border p-8">
+          <div className="mb-6 text-center">
+            <div className="bg-primary/10 text-primary mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+                className="h-7 w-7"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="m4.5 12.75 6 6 9-13.5"
+                />
+              </svg>
+            </div>
+            <h1 className="text-2xl font-semibold">
+              Password reset successful
+            </h1>
+            <p className="text-muted-foreground mt-2 text-sm">
+              Your password has been successfully reset. You can now sign in
+              with your new password.
+            </p>
+          </div>
+          <Button className="w-full" onClick={() => router.push('/login')}>
+            Continue to sign in
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center p-4">
+      <div className="bg-card w-full max-w-md rounded-lg border p-8">
+        <div className="mb-6">
+          <h1 className="text-2xl font-semibold">Create new password</h1>
+          <p className="text-muted-foreground mt-2 text-sm">
+            Enter a new password for your account
+          </p>
+        </div>
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="password">New password</Label>
+            <PasswordInput
+              id="password"
+              placeholder="Enter your new password"
+              {...register('password')}
+              disabled={isLoading}
+            />
+            {errors.password && (
+              <p className="text-destructive text-xs">
+                {errors.password.message}
+              </p>
+            )}
+          </div>
+
+          {hasErrors && (
+            <div className="border-destructive/50 bg-destructive/5 rounded-lg border p-4">
+              <div className="flex items-start gap-3">
+                <ShieldAlert className="text-destructive mt-0.5 h-5 w-5 shrink-0" />
+                <div>
+                  <p className="text-destructive text-sm font-medium">
+                    Password requirements:
+                  </p>
+                  <ul className="text-destructive/80 mt-1.5 space-y-1 text-sm">
+                    <li>• At least 8 characters long</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {!hasErrors && (
+            <div className="bg-muted/50 rounded-lg p-4">
+              <p className="text-muted-foreground text-sm font-medium">
+                Password requirements:
+              </p>
+              <ul className="text-muted-foreground mt-2 space-y-1 text-sm">
+                <li>• At least 8 characters long</li>
+              </ul>
+            </div>
+          )}
+          <div className="flex flex-col gap-4 pt-2">
+            <Button type="submit" className="w-full" isLoading={isLoading}>
+              Reset password
+            </Button>
+            <p className="text-muted-foreground text-center text-sm">
+              Remember your password?{' '}
+              <Link href="/login" className="text-primary hover:underline">
+                Sign in
+              </Link>
+            </p>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default function ResetPasswordPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex min-h-screen items-center justify-center">
+          <div className="text-muted-foreground">Loading...</div>
+        </div>
+      }
+    >
+      <ResetPasswordContent />
+    </Suspense>
+  );
+}