feat: init new login page

front/app/orgs/[orgslug]/login/login.tsx

@@ -0,0 +1,136 @@
+"use client";
+import learnhouseIcon from "public/learnhouse_bigicon_1.png";
+import FormLayout, { ButtonBlack, FormField, FormLabel, FormLabelAndMessage, FormMessage, Input } from '@components/StyledElements/Form/Form'
+import Image from 'next/image';
+import * as Form from '@radix-ui/react-form';
+import { useFormik } from 'formik';
+import { getOrgLogoMediaDirectory } from "@services/media/media";
+import { BarLoader } from "react-spinners";
+import React from "react";
+import { loginAndGetToken } from "@services/auth/auth";
+import { AlertTriangle } from "lucide-react";
+import { useRouter } from "next/navigation";
+
+interface LoginClientProps {
+    org: any;
+}
+
+const validate = (values: any) => {
+    const errors: any = {};
+
+    if (!values.email) {
+        errors.email = 'Required';
+    }
+    else if (
+        !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
+    ) {
+        errors.email = 'Invalid email address';
+    }
+
+    if (!values.password) {
+        errors.password = 'Required';
+    }
+    else if (values.password.length < 8) {
+        errors.password = 'Password must be at least 8 characters';
+    }
+
+    return errors;
+};
+
+const LoginClient = (props: LoginClientProps) => {
+    const [isSubmitting, setIsSubmitting] = React.useState(false);
+    const router = useRouter();
+    const [error, setError] = React.useState('');
+    const formik = useFormik({
+        initialValues: {
+            email: '',
+            password: '',
+        },
+        validate,
+        onSubmit: async values => {
+            setIsSubmitting(true);
+            let res = await loginAndGetToken(values.email, values.password);
+            console.log(res.status);
+            if (res.status == 200) {
+                router.push(`/`);
+                setIsSubmitting(false);
+            }
+            else if (res.status == 401 || res.status == 400 || res.status == 404 || res.status == 409) {
+                setError("Invalid email or password");
+                setIsSubmitting(false);
+            }
+            else {
+                setError("Something went wrong");
+                setIsSubmitting(false);
+            }
+
+        },
+    });
+    return (
+        <div className='grid grid-flow-col justify-stretch h-screen'>
+            <div className="right-login-part" style={{ background: "linear-gradient(041.61deg, #202020 7.15%, #000000 90.96%)" }} >
+                <div className='login-topbar m-10'>
+                    <Image quality={100} width={30} height={30} src={learnhouseIcon} alt="" />
+                </div>
+                <div className="ml-10 h-4/6 flex flex-row text-white">
+                    <div className="m-auto flex space-x-4 items-center flex-wrap">
+                        <div>Login to </div>
+                        <div className="shadow-[0px_4px_16px_rgba(0,0,0,0.02)]" >
+                            {props.org?.logo ? (
+                                <img
+                                    src={`${getOrgLogoMediaDirectory(props.org.org_id, props.org?.logo)}`}
+                                    alt="Learnhouse"
+                                    style={{ width: "auto", height: 70 }}
+                                    className="rounded-md shadow-xl inset-0 ring-1 ring-inset ring-black/10 bg-white"
+                                />
+                            ) : (
+                                <Image quality={100} width={70} height={70} src={learnhouseIcon} alt="" />
+                            )}
+                        </div>
+                        <div className="font-bold text-xl">{props.org?.name}</div>
+                    </div>
+                </div>
+            </div>
+            <div className="left-login-part bg-white flex flex-row">
+                <div className="login-form m-auto w-72">
+                    {error && (
+                        <div className="flex justify-center bg-red-200 rounded-md text-red-950 space-x-2 items-center p-4 transition-all shadow-sm">
+                            <AlertTriangle size={18} />
+                            <div className="font-bold text-sm">{error}</div>
+                        </div>
+                    )}
+                    <FormLayout onSubmit={formik.handleSubmit}>
+                        <FormField name="email">
+                            <FormLabelAndMessage label='Email' message={formik.errors.email} />
+                            <Form.Control asChild>
+                                <Input onChange={formik.handleChange} value={formik.values.email} type="email" required />
+                            </Form.Control>
+                        </FormField>
+                        {/* for password  */}
+                        <FormField name="password">
+                            <FormLabelAndMessage label='Password' message={formik.errors.password} />
+
+                            <Form.Control asChild>
+                                <Input onChange={formik.handleChange} value={formik.values.password} type="password" required />
+                            </Form.Control>
+                        </FormField>
+
+
+                        <div className="flex  py-4">
+                            <Form.Submit asChild>
+                                <button className="w-full bg-black text-white font-bold text-center p-2 rounded-md shadow-md hover:cursor-pointer" >
+                                    {isSubmitting ? "Loading..."
+                                        : "Login"}
+                                </button>
+                            </Form.Submit>
+                        </div>
+
+                    </FormLayout>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default LoginClient
+

front/app/orgs/[orgslug]/login/page.tsx

@@ -1,110 +1,35 @@
-"use client";
-import { useRouter } from 'next/navigation';
-import React, { useState } from "react";
-import { styled } from '@stitches/react';
-import { loginAndGetToken } from "../../../../services/auth/auth";
-import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, FormMessage, Input } from '@components/StyledElements/Form/Form';
-import * as Form from '@radix-ui/react-form';
-import { BarLoader } from 'react-spinners';
-import Toast from '@components/StyledElements/Toast/Toast';
-import { toast } from 'react-hot-toast';
+import { getOrganizationContextInfo } from "@services/organizations/orgs";
+import LoginClient from "./login";
+import { Metadata } from 'next';
 
-const Login = () => {
-  const [email, setEmail] = React.useState("");
-  const [password, setPassword] = React.useState("");
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const router = useRouter();
+type MetadataProps = {
+  params: { orgslug: string, courseid: string };
+  searchParams: { [key: string]: string | string[] | undefined };
+};
 
-  const handleSubmit = (e: any) => {
-    e.preventDefault();
-    setIsSubmitting(true);
-    toast.promise(
-      loginAndGetToken(email, password),
-      {
-        loading: 'Logging in...',
-        success: () => {
-          router.push('/');
-          return <b>Logged in successfully</b>;
-        },
-        error: <b>Wrong credentials</b>,
-      }
-    );
+export async function generateMetadata(
+  { params }: MetadataProps,
+): Promise<Metadata> {
+  const orgslug = params.orgslug;
+  // Get Org context information 
+  const org = await getOrganizationContextInfo(orgslug, { revalidate: 1800, tags: ['organizations'] });
 
-    setIsSubmitting(false);
+  return {
+    title: 'Login' + ` — ${org.name}`,
   };
+}
 
-  const handleEmailChange = (e: any) => {
-    setEmail(e.target.value);
-  };
-
-  const handlePasswordChange = (e: any) => {
-    setPassword(e.target.value);
-  };
+const Login = async (params: any) => {
+  const orgslug = params.params.orgslug;
+  const org = await getOrganizationContextInfo(orgslug, { revalidate: 1800, tags: ['organizations'] });
 
   return (
     <div>
-      <LoginPage>
-        <Toast></Toast>
-        <LoginBox>
-          <FormLayout onSubmit={handleSubmit}>
-            <FormField name="login-email">
-              <Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
-                <FormLabel>Email</FormLabel>
-                <FormMessage style={{ color: "black" }} match="valueMissing">Please provide an email</FormMessage>
-              </Flex>
-              <Form.Control asChild>
-                <Input onChange={handleEmailChange} type="text" />
-              </Form.Control>
-            </FormField>
-            <FormField name="login-password">
-              <Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
-                <FormLabel>Password</FormLabel>
-                <FormMessage style={{ color: "black" }} match="valueMissing">Please provide a password</FormMessage>
-              </Flex>
-              <Form.Control asChild>
-                <Input type="password" onChange={handlePasswordChange} />
-              </Form.Control>
-            </FormField>
-
-            <Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
-              <Form.Submit asChild>
-                <ButtonBlack type="submit" css={{ marginTop: 10 }}>
-                  {isSubmitting ? <BarLoader cssOverride={{ borderRadius: 60, }} width={60} color="#ffffff" /> : "Login"}
-                </ButtonBlack>
-              </Form.Submit>
-            </Flex>
-          </FormLayout>
-        </LoginBox>
-      </LoginPage>
-
+      <LoginClient org={org}></LoginClient>
     </div>
   );
 };
 
-const LoginPage = styled('div', {
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  height: '100vh',
-  width: '100vw',
-  backgroundColor: '#f5f5f5',
-});
 
-const LoginBox = styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  alignItems: 'center',
-  height: '40vh',
-  width: '40vw',
-  backgroundColor: '#ffffff',
-  borderRadius: 10,
-
-  '@media (max-width: 768px)': {
-    width: '100vw',
-    height: '100vh',
-    borderRadius: 0,
-  },
-});
 
 export default Login;

front/services/auth/auth.ts

@@ -8,7 +8,7 @@ interface LoginAndGetTokenResponse {
 // ⚠️ mvp phase code 
 // TODO : everything in this file need to be refactored including security issues fix 
 
-export async function loginAndGetToken(username: string, password: string): Promise<LoginAndGetTokenResponse> {
+export async function loginAndGetToken(username: string, password: string): Promise<any> {
   // Request Config
 
   // get origin 
@@ -25,8 +25,7 @@ export async function loginAndGetToken(username: string, password: string): Prom
 
   // fetch using await and async
   const response = await fetch(`${getAPIUrl()}auth/login`, requestOptions);
-  const data = await response.json();
-  return data;
+  return response;
 }
 
 export async function getUserInfo(token: string): Promise<any> {