mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: init new login page
This commit is contained in:
swve
parent
9b9f46f693
commit
fc6122e3a6
3 changed files with 158 additions and 98 deletions
136
front/app/orgs/[orgslug]/login/login.tsx
Normal file
136
front/app/orgs/[orgslug]/login/login.tsx
Normal file
|
|
@ -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
|
||||||
|
|
||||||
|
|
@ -1,110 +1,35 @@
|
||||||
"use client";
|
import { getOrganizationContextInfo } from "@services/organizations/orgs";
|
||||||
import { useRouter } from 'next/navigation';
|
import LoginClient from "./login";
|
||||||
import React, { useState } from "react";
|
import { Metadata } from 'next';
|
||||||
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';
|
|
||||||
|
|
||||||
const Login = () => {
|
type MetadataProps = {
|
||||||
const [email, setEmail] = React.useState("");
|
params: { orgslug: string, courseid: string };
|
||||||
const [password, setPassword] = React.useState("");
|
searchParams: { [key: string]: string | string[] | undefined };
|
||||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
};
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const handleSubmit = (e: any) => {
|
export async function generateMetadata(
|
||||||
e.preventDefault();
|
{ params }: MetadataProps,
|
||||||
setIsSubmitting(true);
|
): Promise<Metadata> {
|
||||||
toast.promise(
|
const orgslug = params.orgslug;
|
||||||
loginAndGetToken(email, password),
|
// Get Org context information
|
||||||
{
|
const org = await getOrganizationContextInfo(orgslug, { revalidate: 1800, tags: ['organizations'] });
|
||||||
loading: 'Logging in...',
|
|
||||||
success: () => {
|
|
||||||
router.push('/');
|
|
||||||
return <b>Logged in successfully</b>;
|
|
||||||
},
|
|
||||||
error: <b>Wrong credentials</b>,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
setIsSubmitting(false);
|
return {
|
||||||
|
title: 'Login' + ` — ${org.name}`,
|
||||||
};
|
};
|
||||||
|
}
|
||||||
|
|
||||||
const handleEmailChange = (e: any) => {
|
const Login = async (params: any) => {
|
||||||
setEmail(e.target.value);
|
const orgslug = params.params.orgslug;
|
||||||
};
|
const org = await getOrganizationContextInfo(orgslug, { revalidate: 1800, tags: ['organizations'] });
|
||||||
|
|
||||||
const handlePasswordChange = (e: any) => {
|
|
||||||
setPassword(e.target.value);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<LoginPage>
|
<LoginClient org={org}></LoginClient>
|
||||||
<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>
|
|
||||||
|
|
||||||
</div>
|
</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;
|
export default Login;
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@ interface LoginAndGetTokenResponse {
|
||||||
// ⚠️ mvp phase code
|
// ⚠️ mvp phase code
|
||||||
// TODO : everything in this file need to be refactored including security issues fix
|
// 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
|
// Request Config
|
||||||
|
|
||||||
// get origin
|
// get origin
|
||||||
|
|
@ -25,8 +25,7 @@ export async function loginAndGetToken(username: string, password: string): Prom
|
||||||
|
|
||||||
// fetch using await and async
|
// fetch using await and async
|
||||||
const response = await fetch(`${getAPIUrl()}auth/login`, requestOptions);
|
const response = await fetch(`${getAPIUrl()}auth/login`, requestOptions);
|
||||||
const data = await response.json();
|
return response;
|
||||||
return data;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function getUserInfo(token: string): Promise<any> {
|
export async function getUserInfo(token: string): Promise<any> {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue