Merge pull request #46 from brendantwh/matching

Matching on question page
CS3219-AY2425S1 · Oct 19, 2024 · b429426 · b429426
2 parents e0f29ef + 2459779
commit b429426
Show file tree

Hide file tree

Showing 11 changed files with 285 additions and 486 deletions.
diff --git a/frontend/app/(authenticated)/profile/page.tsx b/frontend/app/(authenticated)/profile/page.tsx
@@ -18,7 +18,7 @@ export default function Home() {
         email: "[email protected]",
         password: "abcdefgh",
     });
-    const initialUserData  = useRef({
+    const initialUserData = useRef({
         username: "johndoe",
         email: "[email protected]",
         password: "abcdefgh",
@@ -51,7 +51,7 @@ export default function Home() {
 
                 const data = (await response.json()).data;
                 // placeholder for password *Backend wont expose password via any API call
-                const password = "********";
+                const password = "";
 
                 setUserData({
                     username: data.username,
@@ -73,7 +73,7 @@ export default function Home() {
     }, []);
 
      // Validate the password before making the API call
-     const validatePassword = (password: string) => {
+    const validatePassword = (password: string) => {
         let errorMessage = "";
         if (!/[A-Z]/.test(password)) {
             errorMessage += "Must contain at least one uppercase letter.\n";
@@ -163,7 +163,7 @@ export default function Home() {
                     throw new Error("Error during email verification process.");
                 }                
             }
-              
+
             if (userData.password !== initialUserData.current.password) {
                 console.log("detect password change: original:", initialUserData.current.password, " new pw: ", userData.password)
                 // Check for password validity
@@ -232,8 +232,8 @@ export default function Home() {
     }
 
     return (
-        <main className="flex items-center justify-center min-h-screen p-4 font-sans text-black">
-            <Card className="w-full max-w-xl rounded-2xl">
+        <main className="flex items-start justify-center min-h-screen p-4 font-sans text-black">
+            <Card className="mt-40 w-full max-w-xl rounded-2xl">
                 <CardHeader className="flex flex-row items-center justify-between">
                     <CardTitle className="font-serif font-normal tracking-tight text-3xl">Profile</CardTitle>
                     {isEditing ? (
@@ -253,7 +253,7 @@ export default function Home() {
                 </CardHeader>
                 <CardContent>
                     {feedback.message && (
-                        <Alert variant={feedback.type === 'error' ? 'destructive' : 'default'}>
+                        <Alert variant={feedback.type === 'error' ? 'destructive' : 'default'} className="mb-4">
                             <AlertCircle className="h-4 w-4" />
                             <AlertTitle className="font-semibold">
                                 {feedback.type === 'error' ? 'Error' : 'Check your email'}

diff --git a/frontend/app/(authenticated)/questions/page.tsx b/frontend/app/(authenticated)/questions/page.tsx
diff --git a/frontend/app/auth/forgot-password/page.tsx b/frontend/app/auth/forgot-password/page.tsx
@@ -91,7 +91,7 @@ export default function ForgottenPassword() {
 
     return (
         <div className="flex flex-col min-h-screen w-screen px-10 items-start justify-center bg-white font-sans">
-            <div className="-mt-80 mx-auto flex flex-col justify-center gap-6 w-[350px]">
+            <div className="-mt-48 mx-auto flex flex-col justify-center gap-6 w-[350px]">
                 <div className="pb-10">
                     <Button asChild variant="ghost" size="sm" className="pl-0 py-1 pr-2 -ml-1"><Link href="/auth/login" className="text-muted-foreground"><ChevronLeft className="h-5 w-5" />Back to Login</Link></Button>
                 </div>

diff --git a/frontend/app/auth/forgot-password/verify-code/page.tsx b/frontend/app/auth/forgot-password/verify-code/page.tsx
@@ -174,18 +174,18 @@ export default function OTPForm() {
   }
 
   return (
-    <div className="flex items-center justify-center min-h-screen bg-gray-100">
-      <div className="bg-white px-6 pt-10 pb-9 shadow-xl mx-auto w-full max-w-2xl rounded-2xl">
-        <div className="flex flex-col items-center justify-center text-center space-y-2 mb-5">
-          <div className="font-semibold text-3xl">
-            <p>Email Verification</p>
-          </div>
-          <div className="flex flex-row text-sm font-medium text-gray-400">
-            <p>We have sent a code to your email {param_email && ":" + param_email}<br/>Please check your email.</p>
-          </div>
+    <div className="flex items-center justify-center min-h-screen bg-gray-100 font-sans">
+      <div className="flex flex-col bg-white px-6 pt-10 pb-9 shadow-xl w-full max-w-2xl rounded-2xl">
+        <div className="flex flex-col gap-2 text-center">
+            <span className="font-serif font-light text-4xl text-primary tracking-tight">
+              Email Verification
+            </span>
+            <p className="text-sm text-muted-foreground">
+              We have sent a code to your email{param_email && ": " + param_email}
+            </p>
         </div>
         {error && (
-            <Alert variant="destructive">
+            <Alert variant="destructive" className="mt-4">
                 <AlertCircle className="h-4 w-4" />
                 <AlertTitle className="font-semibold">Error</AlertTitle>
                 <AlertDescription>
@@ -206,7 +206,7 @@ export default function OTPForm() {
                   <FormControl>
                     <OTPInput
                         maxLength={6}
-                        containerClassName="group flex items-center has-[:disabled]:opacity-30"
+                        containerClassName="group flex text-black items-center has-[:disabled]:opacity-30"
                         render={({ slots }) => (
                             <>
                             <div className="flex">
@@ -226,7 +226,7 @@ export default function OTPForm() {
                 {isLoading ? (
                     <LoaderCircle className="animate-spin" />
                 ) : (
-                    "Verify Account"
+                    "Verify"
                 )}
             </Button>
           </form>

diff --git a/frontend/app/auth/login/page.tsx b/frontend/app/auth/login/page.tsx
@@ -98,7 +98,7 @@ export default function Login() {
     }
 
     return (
-        <div className="flex min-h-screen w-screen px-10 items-center justify-center bg-white font-sans">
+        <div className="flex min-h-screen w-screen -mt-12 px-10 items-center justify-center bg-white font-sans">
             <div className="mx-auto flex flex-col justify-center gap-6 w-[350px]">
                 <div className="flex flex-col gap-2 text-left pb-1">
                     <span className="font-serif font-light text-4xl text-primary tracking-tight">

diff --git a/frontend/app/auth/reset-password/success/page.tsx b/frontend/app/auth/reset-password/success/page.tsx
@@ -8,21 +8,27 @@ const PasswordChangeSuccess = () => {
   const router = useRouter();
 
   const handleReturn = () => {
-    router.push('/');
+    router.push('/auth/login');
   };
 
   return (
-      <div className="flex flex-col items-center justify-center min-h-screen bg-white p-8 rounded-lg shadow-lg text-center">
+      <div className="flex flex-col items-center justify-center min-h-screen bg-white p-8 rounded-lg shadow-lg text-center font-sans gap-8">
         <div className="flex flex-col items-center mb-4">
         <svg className="w-24 h-24 text-green-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 48 48" stroke="currentColor">
             <circle cx="24" cy="24" r="22" stroke="currentColor" strokeWidth="3" fill="none" />
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M14 24l6 6L34 16" />
           </svg>
         </div>
-        <h1 className="text-2xl font-semibold text-gray-800">Password Changed!</h1>
-        <p className="mt-2 text-gray-600">Your password has been changed successfully.</p>
+        <div className="flex flex-col gap-2 text-center">
+          <span className="font-serif font-light text-4xl text-primary tracking-tight">
+            Password Changed
+          </span>
+          <p className="text text-muted-foreground">
+            Your password has been changed successfully.
+          </p>
+        </div>
         <Button onClick={handleReturn} className="mt-6 w-full max-w-xs" variant="default">
-          Go to Login
+          Sign in
         </Button>
       </div>
   );

diff --git a/frontend/app/auth/sign-up/page.tsx b/frontend/app/auth/sign-up/page.tsx
@@ -230,7 +230,7 @@ export default function Signup() {
         await fetch(`${process.env.NEXT_PUBLIC_USER_API_EMAIL_URL}/send-verification-email`, {
             method: 'POST',
             headers: {
-              'Content-Type': 'application/json',
+                'Content-Type': 'application/json',
             },
             body: JSON.stringify({
                 username: username, 
@@ -244,11 +244,11 @@ export default function Signup() {
     return (
 
     <div className="min-h-screen w-screen laptop:flex">
-        <div className="hidden min-h-screen bg-brand-50 laptop:w-screen laptop:flex laptop:items-center laptop:justify-center">
-            <span className="text-4xl font-bold font-branding tracking-tight text-brand-700">PeerPrep</span>
+        <div className="hidden min-h-screen bg-brand-50 -mt-12 laptop:w-screen laptop:flex laptop:items-center laptop:justify-center">
+            <span className="text-4xl font-bold font-brand tracking-tight text-brand-700">PeerPrep</span>
         </div>
 
-        <div className="min-h-screen laptop:w-screen text-black font-sans flex flex-col items-center justify-center gap-6 mx-auto w-[350px]">
+        <div className="min-h-screen laptop:w-screen text-black font-sans flex flex-col items-center justify-center gap-6 mx-auto -mt-8 w-[350px]">
             <div className="flex flex-col gap-2 text-center">
                 <span className="font-serif font-light text-4xl text-primary tracking-tight">
                     Create an account

diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
@@ -35,7 +35,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${brandFont.variable} ${matterFont.variable} ${recklessNeueFont.variable} antialiased bg-white`}
+        className={`${brandFont.variable} ${matterFont.variable} ${recklessNeueFont.variable} font-sans antialiased bg-white`}
       >
         {children}
       </body>