init project portal web

lib/login/view/index.tsx

@@ -0,0 +1,110 @@
+"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;