Add error display for signup and signin

Author: ZD292

authentication-service/README.md

@@ -12,7 +12,8 @@ docker run -p 4040:4040 --env-file .env acc account-creation-service
 ## Example Usage
 
 1. Make sure your json struct has a similar structure:
-``` {
+
+```{
   "email": "[email protected]",
   "name": "exampleUser",
   "password": "securePassword123",
@@ -44,3 +45,4 @@ fetch("http://localhost:4040/register", requestOptions)
   .then((response) => response.text())
   .then((result) => console.log(result))
   .catch((error) => console.error(error));```
+```

peerprep-fe/src/app/signin/page.tsx

@@ -1,23 +1,62 @@
 'use client';
 import { useState } from 'react';
+import { useRouter } from 'next/navigation';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Input } from '@/components/ui/input';
 import Link from 'next/link';
 import { GithubIcon } from 'lucide-react';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 
 export default function LoginForm() {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  // const [error, setError] = useState('');
+  const router = useRouter();
+  // handle login here
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    // setError('');
+    // const apiEndpoint = 'http://localhost:4040/api/auth/login';
+    // const result = await fetch(apiEndpoint, {
+    // 	method: 'POST',
+    // 	headers: {
+    // 		'Content-Type': 'application/json',
+    // 	},
+    // 	body: JSON.stringify({ email, password }),
+    // 	});
+
+    // const data = await result.json();
+    // const message = data.message;
+    // const isAuth = message === "Login successful";
+    const isAuth = false;
+    if (isAuth) {
+      // const token = data.token;
+      // localStorage.setItem('token', token);
+      // go to homepage
+      router.push('/');
+    } else {
+      setError('Please provide correct email and password');
+      console.error('Login failed');
+    }
+  };
 
   return (
     <div className="flex min-h-screen items-center justify-center bg-gray-900">
       <div className="w-full max-w-md space-y-6 rounded-lg bg-gray-800 p-8 shadow-xl">
+        {error && (
+          <Alert variant="destructive" className="mb-4">
+            {/* <AlertCircle className="h-4 w-4" /> */}
+            <AlertTitle>Error</AlertTitle>
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+        )}
         <div className="text-center">
           <h2 className="text-3xl font-bold text-white">PeerPrep</h2>
           <p className="text-sm text-gray-400">Sign in to your account</p>
         </div>
-        <form className="space-y-4">
+        <form onSubmit={handleLogin} className="space-y-4">
           <div>
             <Input
               type="email"
@@ -86,7 +125,7 @@ export default function LoginForm() {
           </Button>
         </div>
         <div className="flex justify-center text-center text-sm text-gray-400">
-          Don't have an account?
+          Do not have an account?
           <span className="mx-1" />
           <Link href="/signup" className="text-blue-500 hover:underline">
             Sign up

peerprep-fe/src/app/signup/page.tsx

@@ -4,17 +4,59 @@ import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Input } from '@/components/ui/input';
 import { GithubIcon } from 'lucide-react';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 
 export default function SignUpPage() {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
   const [agreeTerms, setAgreeTerms] = useState(false);
+  const [error, setError] = useState('');
+  const router = useRouter();
+
+  const handleSignUp = async (e: React.FormEvent) => {
+    e.preventDefault();
+    // setError('');
+    // const apiEndpoint = 'http://localhost:4040/api/auth/signup';
+    // const result = await fetch(apiEndpoint, {
+    // 	method: 'POST',
+    // 	headers: {
+    // 		'Content-Type': 'application/json',
+    // 	},
+    // 	body: JSON.stringify({ email, password }),
+    // 	});
+
+    // const data = await result.json();
+    // const message = data.message;
+    // const isAuth = message === "Login successful";
+    const isAuth = true;
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+    if (isAuth) {
+      // const token = data.token;
+      // localStorage.setItem('token', token);
+      // go to homepage
+      router.push('/');
+    } else {
+      setError('Account creation failed');
+      console.error('Login failed');
+    }
+  };
 
   return (
     <div className="flex min-h-screen items-center justify-center bg-gray-900">
       <div className="w-full max-w-md space-y-6 rounded-lg bg-gray-800 p-8 shadow-xl">
+        {error && (
+          <Alert variant="destructive" className="mb-4">
+            {/* <AlertCircle className="h-4 w-4" /> */}
+            <AlertTitle>Error</AlertTitle>
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+        )}
         <div className="text-center">
           <h2 className="text-3xl font-bold text-white">Create your account</h2>
           <p className="text-sm text-gray-400">
@@ -25,7 +67,7 @@ export default function SignUpPage() {
             </Link>
           </p>
         </div>
-        <form className="space-y-4">
+        <form onSubmit={handleSignUp} className="space-y-4">
           <div>
             <Input
               type="email"

peerprep-fe/src/components/ui/alert.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground',
+        destructive:
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+));
+Alert.displayName = 'Alert';
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn('mb-1 font-medium leading-none tracking-tight', className)}
+    {...props}
+  />
+));
+AlertTitle.displayName = 'AlertTitle';
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('text-sm [&_p]:leading-relaxed', className)}
+    {...props}
+  />
+));
+AlertDescription.displayName = 'AlertDescription';
+
+export { Alert, AlertTitle, AlertDescription };