Merge pull request #67 from bipproduction/ui/login

UI Login

src/app_modules/auth/login/view.tsx

@@ -24,6 +24,11 @@ import { RouterAuth } from "@/app/lib/router_hipmi/router_auth";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
 import { PhoneInput } from "react-international-phone";
 import "react-international-phone/style.css";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
+import ComponentGlobal_ErrorInput from "@/app_modules/component_global/error_input";
 
 export default function Login() {
   const router = useRouter();
@@ -31,15 +36,13 @@ export default function Login() {
   const focusTrapRef = useFocusTrap();
   const [phone, setPhone] = useState("");
   const [loading, setLoading] = useState(false);
+  const [isError, setError] = useState(false);
 
   async function onLogin() {
-    // if (nomor.length < 10)
-    //   return ComponentGlobal_NotifikasiPeringatan("Nomor minimal 10 digit");
-    // if (nomor.length > 13)
-    //   return ComponentGlobal_NotifikasiPeringatan("Nomor maximal 13 digit");
-
     const nomorHp = phone.substring(1);
-    // console.log(nomorHp)
+    console.log(nomorHp);
+
+    if (nomorHp.length <= 4) return setError(true);
 
     await auth_funLogin(nomorHp).then((res) => {
       if (res.status === 200) {
@@ -79,47 +82,54 @@ export default function Login() {
 
   return (
     <>
-      <Stack align="center" justify="center"  h={"100vh"}>
-        <Center>
-          <Stack spacing={"xl"}>
-            <Center h={"100%"}>
-              <Image
-                mt={"xl"}
-                height={130}
-                width={130}
-                alt="logo"
-                src={"/aset/logo/logo-hipmi.png"}
-              />
-            </Center>
-            <Stack spacing={0}>
-              <Title order={4}>Selamat Datang di HIPMI App</Title>
-              <Text fs={"italic"} fz={"sm"}>
-                Silahkan masukan nomor telepon anda untuk masuk !
-              </Text>
-            </Stack>
+      <Stack
+        align="center"
+        justify="center"
+        h={"100vh"}
+        bg={MainColor.darkblue}
+        spacing={100}
+      >
+        <Stack align="center" spacing={0}>
+          <Title order={3} c={MainColor.yellow}>
+            WELCOME TO
+          </Title>
+          <Title c={MainColor.yellow}>HIPMI APPS</Title>
+        </Stack>
 
-            <PhoneInput
-              // ref={focusTrapRef}
-              inputStyle={{ width: "100%" }}
-              defaultCountry="id"
-              onChange={(val) => {
-                setPhone(val);
-              }}
-            />
+        <Stack w={300}>
+          <Center>
+            <Text c={"white"}>Nomor telepon</Text>
+          </Center>
+          <PhoneInput
+            inputStyle={{ width: "100%" }}
+            defaultCountry="id"
+            onChange={(val) => {
+              setPhone(val);
+            }}
+          />
 
-            <Button
-              radius={"md"}
-              color={"teal"}
-              onClick={() => {
-                onLogin();
-              }}
-              loading={loading ? true : false}
-              loaderPosition="center"
-            >
-              LOGIN
-            </Button>
-          </Stack>
-        </Center>
+          {isError ? (
+            <ComponentGlobal_ErrorInput text="Masukan nomor telepon anda" />
+          ) : (
+            ""
+          )}
+
+          <Button
+            radius={"md"}
+            bg={MainColor.yellow}
+            loading={loading ? true : false}
+            loaderPosition="center"
+            c={"black"}
+            style={{
+              borderColor: AccentColor.yellow,
+            }}
+            onClick={() => {
+              onLogin();
+            }}
+          >
+            LOGIN
+          </Button>
+        </Stack>
       </Stack>
     </>
   );

src/app_modules/auth/splash/view.tsx

@@ -1,23 +1,17 @@
 "use client";
 
+import { MainColor } from "@/app_modules/component_global/color/color_pallet";
 import {
-  AspectRatio,
-  Box,
   Center,
-  Flex,
   Image,
   Paper,
-  Stack,
-  Text,
-  Title,
+  Stack
 } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
 
 export default function SplashScreen({ data }: { data: any }) {
   const router = useRouter();
-  const [val, setVal] = useState(false);
 
   useShallowEffect(() => {
     if (!data) {
@@ -32,16 +26,16 @@ export default function SplashScreen({ data }: { data: any }) {
   }, []);
   return (
     <>
-      <Center h={"100vh"}>
+      <Center h={"100vh"} bg={MainColor.darkblue}>
         <Stack align="center" justify="center" p={"md"}>
           {/* <Title c={"#002e59"}>Welcome to</Title> */}
           <Paper
-            p={{ base: 50, md: 60, lg: 80 }}
+            p={{ base: 20, md: 30, lg: 40 }}
             bg={"gray.1"}
-            radius={500}
+            radius={"100%"}
             shadow="xl"
           >
-            <Image alt="" src={"/aset/logo/logo-hipmi.png"} />
+            <Image height={200} alt="" src={"/aset/logo/logo-hipmi.png"} />
           </Paper>
         </Stack>
       </Center>

src/app_modules/component_global/color/color_pallet.ts

@@ -0,0 +1,12 @@
+export const MainColor = {
+  black: "#202020",
+  darkblue: "#001D3D",
+  yellow: "#FFC300",
+};
+
+export const AccentColor = {
+  blackgray: "#333533",
+  darkblue: "#002E59",
+  blue: "#00447D",
+  yellow: "#FFD60A",
+};