Merge pull request #18 from digitalsolutiongroup/feat/login
Revision in Slicing and Integration API for Login Page
This commit is contained in:
sianida26
GitHub
commit
4f4056eca5
|
|
@ -19,6 +19,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
|
|||
import { useEffect, useState } from "react";
|
||||
import useAuth from "@/hooks/useAuth";
|
||||
import { TbArrowNarrowRight } from "react-icons/tb";
|
||||
import logo from "@/assets/logos/amati-logo.png";
|
||||
|
||||
export const Route = createLazyFileRoute("/login/")({
|
||||
component: LoginPage,
|
||||
|
|
@ -30,8 +31,8 @@ type FormSchema = {
|
|||
};
|
||||
|
||||
const formSchema = z.object({
|
||||
username: z.string().min(1, "This field is required"),
|
||||
password: z.string().min(1, "This field is required"),
|
||||
username: z.string().min(1, "Kolom ini wajib diisi"),
|
||||
password: z.string().min(1, "Kolom ini wajib diisi"),
|
||||
});
|
||||
|
||||
export default function LoginPage() {
|
||||
|
|
@ -97,94 +98,100 @@ export default function LoginPage() {
|
|||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex items-center justify-center bg-contain bg-top lg:bg-right
|
||||
bg-no-repeat bg-[url('../src/assets/backgrounds/backgroundLoginMobile.png')]
|
||||
lg:bg-[url('../src/assets/backgrounds/backgroundLogin.png')]"
|
||||
>
|
||||
<div className="absolute top-[1.688rem] left-[1.875rem] text-base font-bold leading-[1.21rem]">
|
||||
Amati
|
||||
<div className="flex flex-col w-screen h-screen 3xl:max-w-screen-2xl 3xl:mx-auto 3xl:px-4 overflow-hidden">
|
||||
{/* Navbar */}
|
||||
<nav className="flex w-full bg-transparent px-8 py-7 justify-between">
|
||||
<div className="flex">
|
||||
<img src="../src/assets/logos/amati-logo.png" alt="Amati Logo" className="h-4 object-contain" />
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Background shapes */}
|
||||
<div className="absolute inset-0 flex -z-20 overflow-hidden">
|
||||
<div className="relative h-[50vw] lg:h-screen z-0">
|
||||
<div className="-translate-y-[calc(40vw+2rem)] lg:translate-y-0 w-full lg:-translate-x-[calc(10vh-60vw)]">
|
||||
<span className="absolute scale-50 lg:scale-50 -rotate-12 w-[100vw] h-[100vw] lg:w-[100vh] lg:h-[100vh] border border-gray-800 flex rounded-3xl"></span>
|
||||
<span className="absolute scale-[85%] lg:scale-[70%] -rotate-12 w-[100vw] h-[100vw] lg:w-[100vh] lg:h-[100vh] border border-gray-400 flex rounded-3xl"></span>
|
||||
<span className="absolute scale-[120%] lg:scale-90 -rotate-12 w-[100vw] h-[100vw] lg:w-[100vh] lg:h-[100vh] border border-gray-300 flex rounded-3xl"></span>
|
||||
<span className="absolute scale-150 lg:scale-110 -rotate-12 w-[100vw] h-[100vw] lg:w-[100vh] lg:h-[100vh] border border-gray-200 hidden lg:flex rounded-3xl"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-screen h-screen flex ml-0 lg:ml-[7.063rem] justify-center lg:justify-start items-center">
|
||||
<Card className="w-[19.125rem] sm:w-[26.063rem] lg:w-[29.5rem] h-auto bg-transparent border-none">
|
||||
<h1 className="mb-2 text-[2.625rem] font-bold leading-[3.177rem] tracking-tightest">Sign In</h1>
|
||||
<p className="text-sm mb-10 leading-[1.059rem]">
|
||||
New to this app?{' '}
|
||||
<a
|
||||
href="/register"
|
||||
className="text-blue-500 font-bold hover:text-blue-800"
|
||||
>
|
||||
Register now
|
||||
|
||||
{/* Sign In form */}
|
||||
<div className="flex w-full min-h-screen ml-0 lg:ml-28 3xl:ml-40 -mt-16 justify-center lg:justify-start items-center">
|
||||
<Card className="w-full sm:w-3/5 lg:w-2/6 px-8 sm:p-0 h-auto bg-transparent border-none shadow-none">
|
||||
<h1 className="mb-2 text-4xl font-bold leading-10 tracking-tighter">Sign In</h1>
|
||||
<p className="text-sm mb-10 leading-4 text-muted-foreground">
|
||||
Baru mengenal aplikasi ini?{' '}
|
||||
<a href="/register" className="text-blue-600 font-bold hover:text-blue-800">
|
||||
Daftar sekarang
|
||||
</a>
|
||||
</p>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(handleSubmit)}>
|
||||
<div className="space-y-5">
|
||||
{errorMessage && (
|
||||
<Alert variant="destructive">
|
||||
<p>{errorMessage}</p>
|
||||
</Alert>
|
||||
)}
|
||||
<FormField
|
||||
name="username"
|
||||
render={({ field }) => (
|
||||
<FormItem className="text-sm">
|
||||
<FormLabel className="font-semibold leading-4">Email/Username</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="eg; user@mail.com"
|
||||
disabled={loginMutation.isPending}
|
||||
className={form.formState.errors.username ? "border-red-500" : ""}
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem className="text-sm">
|
||||
<FormLabel className="font-semibold leading-4">Kata sandi</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="*****"
|
||||
disabled={loginMutation.isPending}
|
||||
className={form.formState.errors.password ? "border-red-500" : ""}
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<p className="text-sm">
|
||||
<a href="/forgot-password" className="text-blue-600 font-bold hover:text-blue-800 leading-4">
|
||||
Lupa kata sandi?
|
||||
</a>
|
||||
</p>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(handleSubmit)}>
|
||||
<div className="space-y-5">
|
||||
{errorMessage && (
|
||||
<Alert variant="destructive">
|
||||
<p>{errorMessage}</p>
|
||||
</Alert>
|
||||
)}
|
||||
<FormField
|
||||
name="username"
|
||||
render={({ field }) => (
|
||||
<FormItem className="text-sm">
|
||||
<FormLabel className="font-semibold leading-[1.059rem]">Email/Username</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="eg; user@mail.com"
|
||||
disabled={loginMutation.isPending}
|
||||
className={form.formState.errors.username ? "border-red-500" : ""}
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem className="text-sm">
|
||||
<FormLabel className="font-semibold leading-[1.059rem]">Password</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="*****"
|
||||
disabled={loginMutation.isPending}
|
||||
className={form.formState.errors.password ? "border-red-500" : ""}
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<p className="text-sm">
|
||||
<a
|
||||
href="/forgot-password"
|
||||
className="text-blue-500 font-bold hover:text-blue-800 leading-[1.059rem]"
|
||||
>
|
||||
Forgot Password?
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-between mt-10">
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={loginMutation.isPending}
|
||||
variant="default"
|
||||
className="w-full flex items-center justify-center space-x-[13.125rem] sm:space-x-[20rem]
|
||||
lg:space-x-[23.125rem] bg-[#2555FF] text-white hover:bg-[#1e4ae0]"
|
||||
>
|
||||
<span className="leading-[1.25rem]">Sign In</span>
|
||||
<TbArrowNarrowRight className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex mt-10">
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={loginMutation.isPending}
|
||||
variant="default"
|
||||
className="flex w-full justify-between bg-blue-600 text-white hover:bg-blue-700"
|
||||
>
|
||||
<span className="leading-5">Sign In</span>
|
||||
<TbArrowNarrowRight className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -72,15 +72,13 @@ module.exports = {
|
|||
"accordion-up": "accordion-up 0.2s ease-out",
|
||||
},
|
||||
},
|
||||
letterSpacing: {
|
||||
tightest: '-.075em',
|
||||
tighter: '-.05em',
|
||||
tight: '-.025em',
|
||||
normal: '0',
|
||||
wide: '.025em',
|
||||
wider: '.05em',
|
||||
widest: '.1em',
|
||||
widest: '.25em',
|
||||
screens: {
|
||||
'sm': '640px',
|
||||
'md': '768px',
|
||||
'lg': '1024px',
|
||||
'xl': '1280px',
|
||||
'2xl': '1536px',
|
||||
'3xl': '1980px',
|
||||
},
|
||||
},
|
||||
plugins: [require("tailwindcss-animate")],
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user