Prepare new login

oj-lab · Sep 26, 2024 · 1ed5909 · 1ed5909
1 parent 7082737
commit 1ed5909
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 64 deletions.
diff --git a/src/components/display/icons/OJLabIcon.tsx b/src/components/display/icons/OJLabIcon.tsx
@@ -2,10 +2,8 @@ import { FC } from "react";
 
 const OJLabIconPath = `${import.meta.env.BASE_URL}images/oj-lab-icon.svg`;
 
-const OJLabIcon: FC = () => {
-  return (
-    <img className="mr-2 h-12 w-auto gap-4" src={OJLabIconPath} alt="OJ Lab" />
-  );
+const OJLabIcon: FC<{ className: string }> = (props) => {
+  return <img className={props.className} src={OJLabIconPath} alt="OJ Lab" />;
 };
 
 export default OJLabIcon;
diff --git a/src/layouts/Drawer.tsx b/src/layouts/Drawer.tsx
@@ -114,7 +114,7 @@ export const Drawer: React.FC<DrawerProps> = (props) => {
         />
         <div className="h-full border-r border-base-content/10 bg-base-100">
           <div className="flex flex-row px-6 py-2">
-            <OJLabIcon />
+            <OJLabIcon className="mr-2 h-12 w-auto gap-4" />
             <h1 className="ml-2 self-center text-xl font-bold">OJ LAB</h1>
           </div>
           <PageMenu sections={getPageMenuSections(isAdmin)} />

diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
@@ -3,8 +3,7 @@ import { redirectToOAuthGitHub, postPasswordLogin } from "@/apis/auth";
 import GitHubIcon from "@/components/display/icons/GitHubIcon";
 import EyeIcon from "@/components/display/icons/tabler/EyeIcon";
 import EyeClosedIcon from "@/components/display/icons/tabler/EyeClosedIcon";
-
-const background = `${import.meta.env.BASE_URL}images/loginBackground.webp`;
+import OJLabIcon from "@/components/display/icons/OJLabIcon";
 
 const Login: React.FC = () => {
   const [showPassaword, setShowPassword] = React.useState<boolean>(false);
@@ -16,37 +15,32 @@ const Login: React.FC = () => {
   };
 
   return (
-    <div className="flex flex-col items-center justify-center gap-4">
-      <div className="max-w-sm">
-        <img src={background} alt="BackgroundImage" />
+    <div className="flex flex-col items-center justify-center gap-4 bg-base-100 p-12">
+      <div className="flex flex-col">
+        <OJLabIcon className="h-48 w-auto" />
+        <h1 className="mt-[-24px] self-center text-2xl font-bold">
+          Welcome to OJ LAB!
+        </h1>
       </div>
 
-      <div className="flex w-1/3 max-w-sm flex-col gap-4">
-        <div className="flex items-center justify-center gap-4">
-          <label className="font-semibold">Sign in with</label>
-          <button
-            type="button"
-            className="centermx-1 h-9 w-9 rounded-full hover:shadow-[0_0px_24px_-4px_#999999]"
-            onClick={redirectToOAuthGitHub}
-          >
-            <GitHubIcon className="fill-base-content" />
-          </button>
-        </div>
-
-        <div className="flex items-center before:mt-0.5 before:flex-1 before:border-t before:border-neutral-300 after:mt-0.5 after:flex-1 after:border-t after:border-neutral-300">
-          <p className="mx-4 text-center font-semibold text-slate-500">Or</p>
-        </div>
-
+      <div className="flex max-w-sm flex-col gap-4">
+        <button className="btn btn-outline" onClick={redirectToOAuthGitHub}>
+          <GitHubIcon className="w-8 fill-current" />
+          Sign in with GitHub
+        </button>
         <div className="flex flex-col gap-2">
-          <label className="input input-bordered flex items-center gap-2">
+          <p className="text-start text-sm text-slate-500">
+            Or, for internal users only:
+          </p>
+          <label className="input input-sm input-bordered flex items-center gap-2">
             <input
               className="grow"
               type="text"
               placeholder="Username"
               onChange={(e) => setAccount(e.target.value)}
             />
           </label>
-          <label className="input input-bordered flex items-center gap-2">
+          <label className="input input-sm input-bordered flex items-center gap-2">
             <input
               className="grow"
               type={showPassaword ? "text" : "password"}
@@ -55,49 +49,27 @@ const Login: React.FC = () => {
               autoComplete="current-password"
             />
             <button
-              className="btn btn-circle btn-ghost btn-sm"
+              className="btn btn-circle btn-ghost btn-xs"
               onClick={toggleShowPassword}
             >
               {showPassaword ? (
-                <EyeIcon className="h-6 w-6" />
+                <EyeIcon className="h-4 w-4" />
               ) : (
-                <EyeClosedIcon className="h-6 w-6" />
+                <EyeClosedIcon className="h-4 w-4" />
               )}
             </button>
           </label>
-        </div>
-
-        <div className="flex justify-between text-sm font-semibold">
-          <label className="flex cursor-pointer items-center gap-1 text-slate-500 hover:text-slate-600">
-            <input
-              type="checkbox"
-              defaultChecked
-              className="checkbox checkbox-xs"
-            />
-            <span className="select-none">Remember Me</span>
-          </label>
-          <button className="btn btn-link h-6 min-h-6 p-0 ">
-            Forgot Password?
-          </button>
-        </div>
-
-        <button
-          className="btn btn-neutral btn-active btn-block"
-          type="submit"
-          onClick={() => {
-            postPasswordLogin(account, password).then((res) => {
-              console.log(res);
-              window.location.href = import.meta.env.BASE_URL;
-            });
-          }}
-        >
-          Login
-        </button>
-
-        <div className="text-left text-sm font-semibold text-slate-500">
-          Don&apos;t have an account?{" "}
-          <button className="btn btn-link h-6 min-h-6 p-0 text-error">
-            Register
+          <button
+            className="btn btn-neutral btn-active btn-sm btn-block"
+            type="submit"
+            onClick={() => {
+              postPasswordLogin(account, password).then((res) => {
+                console.log(res);
+                window.location.href = import.meta.env.BASE_URL;
+              });
+            }}
+          >
+            Login
           </button>
         </div>
       </div>