111 lines
3.9 KiB
TypeScript
111 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
import { Input } from "@/components/ui/input";
|
|
import { useLogin } from "../view-model";
|
|
import InputPassword from "@/components/module/input-password";
|
|
import { Button } from "@/components/ui/button";
|
|
import QueryWrapper from "@/components/module/query-wrapper";
|
|
import leftClipath from "@/images/left_clip_path.png";
|
|
import rightClipPath from "@/images/right_clip_path.png";
|
|
import mainLogo from "@/images/Telkomcel.png";
|
|
import formDecor from "@/images/login_accesoris.png";
|
|
import Image from "next/image";
|
|
import { Toaster } from "sonner";
|
|
import { observer } from "mobx-react-lite";
|
|
import loginStore from "../store";
|
|
|
|
const Content = observer(() => {
|
|
const { isLoading, login } = useLogin();
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
login();
|
|
};
|
|
|
|
return (
|
|
<div className="w-screen h-screen bg-white lg:flex">
|
|
<div className="hidden w-full h-full bg-primary lg:block relative">
|
|
<div className="absolute left-0 top-0">
|
|
<Image src={leftClipath} alt="left-clipt" />
|
|
</div>
|
|
<div className="absolute right-0 bottom-0">
|
|
<Image src={rightClipPath} alt="right-clipt" />
|
|
</div>
|
|
<section className="h-full flex flex-col justify-center items-center">
|
|
<div className="max-w-96">
|
|
<Image src={mainLogo} alt="main-logo" />
|
|
</div>
|
|
<div className="mt-[60px] space-y-10 text-center text-white">
|
|
<h3 className="text-3xl">Connect. Secure. Thrive</h3>
|
|
<p className="max-w-[542px] text-left text-2xl">
|
|
Empowering business with advanced networking solutions that drive growth and innovation.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<div className="w-full h-full p-4 flex lg:block flex-col justify-center items-center lg:p-0">
|
|
<div className="w-full mt-[-30px] hidden lg:block">
|
|
<Image src={formDecor} alt="form-decor-1" width={188} height={188} />
|
|
</div>
|
|
<div className="flex flex-col justify-center items-center lg:mt-[-30px]">
|
|
<h1 className="text-black font-bold text-[40px]">Welcome!</h1>
|
|
<div className="w-1/2 lg:w-1/6 border-2 border-primaryBlue-100"></div>
|
|
</div>
|
|
<form
|
|
className="space-y-4 mt-[45px] mx-auto w-full lg:max-w-[399px]"
|
|
onSubmit={handleSubmit}
|
|
autoComplete="off"
|
|
>
|
|
<div>
|
|
<label htmlFor="email">Username</label>
|
|
<Input
|
|
className="placeholder:text-black-50 border border-black-90 h-[38px]"
|
|
type="text"
|
|
id="username"
|
|
name="username"
|
|
placeholder="Username"
|
|
value={loginStore.username}
|
|
onChange={(e) => loginStore.setUsername(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="password">Password</label>
|
|
<InputPassword
|
|
className="placeholder:text-black-50 border border-black-90 h-[38px]"
|
|
id="password"
|
|
name="password"
|
|
placeholder="Password"
|
|
value={loginStore.password}
|
|
onChange={(e) => loginStore.setPassword(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="flex justify-center">
|
|
<Button
|
|
type="submit"
|
|
variant="destructive"
|
|
className="w-full h-[38px] bg-primary p-2 text-lg"
|
|
>
|
|
{isLoading ? "Please wait..." : "Login"}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
|
|
<div className="mt-[-30px] hidden lg:flex justify-end">
|
|
<Image src={formDecor} alt="form-decor-1" width={188} height={188} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
const Login = () => {
|
|
return (
|
|
<QueryWrapper>
|
|
<Content />
|
|
<Toaster position="top-right" richColors duration={1500} />
|
|
</QueryWrapper>
|
|
);
|
|
};
|
|
|
|
export default Login;
|