Merge pull request #4 from isd-sgcu/feature/joh-13-login-register

Feature/joh 13 login register

src/app/login/page.tsx

@@ -0,0 +1,24 @@
+import LoginForm from "../../components/Form/LoginForm";
+import MainLayout from "../../layouts/MainLayout";
+
+// Page
+const Login = () => {
+ return (
+ <div className="flex min-h-screen w-full flex-col items-center justify-center space-y-12 p-12">
+ <div className="flex flex-col items-center justify-center space-y-4 px-3">
+ <h1 className="text-nowrap text-5xl font-bold text-primary ">
+ เข้าสู่ระบบ
+ </h1>
+ <p className="text-nowrap text-lg font-normal text-johnjud-gray">
+ เข้าสู่ระบบของคุณ
+ </p>
+ </div>
+ <LoginForm />
+ </div>
+ );
+};
+
+export default Login;
+
+// Layout
+export const Layout = MainLayout;

src/app/register/page.tsx

@@ -0,0 +1,24 @@
+import RegisterForm from "../../components/Form/RegisterForm";
+import MainLayout from "../../layouts/MainLayout";
+
+// Page
+const Register = () => {
+ return (
+ <div className="flex min-h-screen w-full flex-col items-center justify-center space-y-12 p-12">
+ <div className="flex flex-col items-center justify-center space-y-1 px-3">
+ <h1 className="text-nowrap text-5xl font-bold text-primary ">
+ ลงทะเบียน
+ </h1>
+ <p className="text-nowrap text-lg font-normal text-johnjud-gray">
+ ลงทะเบียนบัญชีของคุณ
+ </p>
+ </div>
+ <RegisterForm />
+ </div>
+ );
+};
+
+export default Register;
+
+// Layout
+export const Layout = MainLayout;

src/components/Form/LoginForm.tsx

@@ -0,0 +1,65 @@
+import { Link } from "react-router-dom";
+import checkIcon from "../../assets/formIcon/check.svg";
+import lockIcon from "../../assets/formIcon/lock.svg";
+import userIcon from "../../assets/formIcon/user.svg";
+import SubmitButton from "./SubmitButton";
+
+const LoginForm = () => {
+ return (
+ <form className="flex w-full flex-col items-center justify-center space-y-20 sm:w-1/2 md:w-6/12 lg:w-4/12 xl:w-3/12">
+ <div className="flex w-full flex-col items-center justify-center space-y-4">
+ <div className="focus: flex w-full items-center rounded-lg bg-johnjud-light-gray px-2.5 py-2.5 outline-none">
+ <img src={userIcon} alt="Icon" className="mx-2" />
+ <input
+ type="text"
+ placeholder="ชื่อผู้ใช้"
+ className="focus: w-full rounded-lg bg-johnjud-light-gray font-semibold text-johnjud-gray outline-none"
+ />
+ </div>
+ <div className="focus: flex w-full items-center rounded-lg bg-johnjud-light-gray px-2.5 py-2.5 outline-none">
+ <img src={lockIcon} alt="Icon" className="mx-2" />
+ <input
+ type="password"
+ placeholder="รหัสผ่าน"
+ className="focus: w-full rounded-lg bg-johnjud-light-gray font-semibold text-johnjud-gray outline-none"
+ />
+ </div>
+ <div className="flex w-full justify-between">
+ <label className="flex cursor-pointer items-center">
+ <input
+ type="checkbox"
+ className="peer sr-only"
+ id="custom-checkbox"
+ />
+ <div className="flex h-5 w-5 items-center justify-center rounded-sm bg-johnjud-light-gray peer-checked:hidden" />
+ <div className="hidden h-5 w-5 items-center justify-center rounded-sm bg-primary peer-checked:flex">
+ <img src={checkIcon} alt="Icon" className="h-4 w-4" />
+ </div>
+
+ <span className="ml-2 text-black">จดจำฉัน</span>
+ </label>
+ <Link
+ to="/forgot-password"
+ className="text-base font-medium text-johnjud-gray underline"
+ >
+ ลืมรหัสผ่าน?
+ </Link>
+ </div>
+ </div>
+ <div className="flex flex-col items-center justify-center">
+ <SubmitButton text="เข้าสู่ระบบ" />
+ <div className="flex space-x-2 px-2.5 py-2">
+ <span className="text-base-johnjud-gray">ยังไม่มีบัญชี?</span>
+ <Link
+ to="/register"
+ className="text-base font-semibold text-black underline"
+ >
+ ลงทะเบียน
+ </Link>
+ </div>
+ </div>
+ </form>
+ );
+};
+
+export default LoginForm;

src/components/Form/RegisterForm.tsx

@@ -0,0 +1,59 @@
+import { Link } from "react-router-dom";
+import lockIcon from "../../assets/formIcon/lock.svg";
+import userIcon from "../../assets/formIcon/user.svg";
+import SubmitButton from "./SubmitButton";
+
+const RegisterForm = () => {
+ return (
+ <form className="flex w-full flex-col items-center justify-center space-y-12 sm:w-1/2 md:w-6/12 lg:w-4/12 xl:w-3/12">
+ <div className="flex w-full flex-col items-center justify-center space-y-4">
+ <div className="focus: flex w-full items-center rounded-lg bg-johnjud-light-gray px-2.5 py-2.5 outline-none">
+ <img src={userIcon} alt="Icon" className="mx-2" />
+ <input
+ type="text"
+ placeholder="ชื่อ"
+ className="focus: w-full rounded-lg bg-johnjud-light-gray font-semibold text-johnjud-gray outline-none"
+ />
+ </div>
+ <div className="focus: flex w-full items-center rounded-lg bg-johnjud-light-gray px-2.5 py-2.5 outline-none">
+ <img src={userIcon} alt="Icon" className="mx-2" />
+ <input
+ type="text"
+ placeholder="นามสกุล"
+ className="focus: w-full rounded-lg bg-johnjud-light-gray font-semibold text-johnjud-gray outline-none"
+ />
+ </div>
+ <div className="focus: flex w-full items-center rounded-lg bg-johnjud-light-gray px-2.5 py-2.5 outline-none">
+ <img src={userIcon} alt="Icon" className="mx-2" />
+ <input
+ type="email"
+ placeholder="อีเมล"
+ className="focus: w-full rounded-lg bg-johnjud-light-gray font-semibold text-johnjud-gray outline-none"
+ />
+ </div>
+ <div className="focus: flex w-full items-center rounded-lg bg-johnjud-light-gray px-2.5 py-2.5 outline-none">
+ <img src={lockIcon} alt="Icon" className="mx-2" />
+ <input
+ type="password"
+ placeholder="รหัสผ่าน"
+ className="focus: w-full rounded-lg bg-johnjud-light-gray font-semibold text-johnjud-gray outline-none"
+ />
+ </div>
+ </div>
+ <div className="flex flex-col items-center justify-center">
+ <SubmitButton text="ลงทะเบียน" />
+ <div className="flex space-x-2 px-2.5 py-2">
+ <span className="text-base-johnjud-gray">มีบัญชีอยู่แล้ว?</span>
+ <Link
+ to="/login"
+ className="text-base font-semibold text-black underline"
+ >
+ คลิกเพื่อเข้าสู่ระบบ
+ </Link>
+ </div>
+ </div>
+ </form>
+ );
+};
+
+export default RegisterForm;

src/components/Form/SubmitButton.tsx

@@ -0,0 +1,20 @@
+import React, { ReactNode } from "react";
+
+interface SubmitButtonProps {
+ text: ReactNode;
+}
+
+const SubmitButton: React.FC<SubmitButtonProps> = ({
+ text,
+}: SubmitButtonProps) => {
+ return (
+ <button
+ type="submit"
+ className="w-full text-nowrap rounded-3xl bg-primary px-28 py-3 text-2xl font-semibold text-white focus:outline-none"
+ >
+ {text}
+ </button>
+ );
+};
+
+export default SubmitButton;

tailwind.config.js

@@ -15,6 +15,7 @@ export default {
  "johnjud-purple": "#3D0D40",
  "johnjud-gray": "#808086",
  "johnjud-yellow": "#FFFF31",
+ "johnjud-light-gray": "#D9D9D9",
  },
  },
  },