From 42bfd80cefba71621fc420b197dd59d7d70cf3c6 Mon Sep 17 00:00:00 2001
From: an920107 <an920107@gmail.com>
Date: Sat, 2 Nov 2024 19:04:25 +0800
Subject: [PATCH 1/2] feat: sign in page frontend

---
 src/routes/login.tsx | 95 +++++++++++++++++++++++++++++++++-----------
 1 file changed, 72 insertions(+), 23 deletions(-)

diff --git a/src/routes/login.tsx b/src/routes/login.tsx
index f30a8c4..d9b7567 100644
--- a/src/routes/login.tsx
+++ b/src/routes/login.tsx
@@ -1,7 +1,6 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { useState } from 'react'
-import { VStack } from '../components'
-import { supabase } from '../utils/supabase'
+import { createFileRoute } from '@tanstack/react-router';
+import { useState } from 'react';
+import { supabase } from '../utils/supabase';
 
 export const Route = createFileRoute('/login')({
   component: LoginPage,
@@ -15,16 +14,17 @@ export const Route = createFileRoute('/login')({
 function LoginPage() {
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
+  const [isRemember, setIsRemember] = useState(false);
+  const [isError, setIsError] = useState(false);
   const { redirect: redirectUrl } = Route.useSearch()
 
-  async function login() {
-    const { data: { session }, error } = await supabase.auth.signInWithPassword({
-      email,
-      password
-    })
+  async function login(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const { data: { session }, error } = await supabase.auth.signInWithPassword({ email, password });
 
     if (error !== null) {
-      throw error
+      setPassword('');
+      setIsError(true);
     }
 
     if (session !== null) {
@@ -33,19 +33,68 @@ function LoginPage() {
   }
 
   return (
-    <div>
-      <VStack>
-        <div>
-          <label>Email: </label>
-          <input className='border' type="email" onChange={(e) => { setEmail(e.target.value) }} />
-        </div>
-        <div>
-          <label>Password:</label>
-          <input className='border' type="password" onChange={(e) => { setPassword(e.target.value) }} />
-        </div>
-      </VStack>
-      <button onClick={login}>Login</button>
-    </div>
+    <form
+      className='flex flex-col h-screen items-center justify-center px-5 gap-4 bg-gradient-to-b from-[#d9d9d9] to-[#6ccae8]'
+      onSubmit={login}
+    >
+      <input
+        type='text'
+        className='w-full h-14 rounded-full bg-white border border-black focus:border focus:border-black px-6 text-black font-bold text-xl placeholder:text-gray-300'
+        placeholder={Labels.account}
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+      />
+      <input
+        type='password'
+        className='w-full h-14 rounded-full bg-white border border-black focus:border focus:border-black px-6 text-black font-bold text-xl placeholder:text-gray-300'
+        placeholder={Labels.password}
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+      />
+      <div className='flex flex-row items-center gap-4'>
+        {/* The style of the checkbox is refered from https://www.material-tailwind.com/docs/html/checkbox */}
+        <label htmlFor='remember' className='flex items-center cursor-pointer relative'>
+          <input
+            type='checkbox'
+            className='peer size-5 cursor-pointer transition-all appearance-none rounded bg-white border-2 border-gray-600 checked:bg-cyan-500 checked:border-cyan-500' id='remember'
+            checked={isRemember}
+            onChange={(e) => setIsRemember(e.target.checked)}
+          />
+          <span className='absolute text-white opacity-0 peer-checked:opacity-100 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2'>
+            <svg xmlns='http://www.w3.org/2000/svg' className='h-3.5 w-3.5' viewBox='0 0 20 20' fill='currentColor' stroke='currentColor' stroke-width='1'>
+              <path fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'></path>
+            </svg>
+          </span>
+        </label>
+        <label htmlFor='remember' className='text-white font-bold text-2xl'>
+          {Labels.remember}
+        </label>
+      </div>
+      {
+        isError
+          ? (
+            <span className='text-red-500 font-bold text-2xl'>
+              {isError ? Labels.wrongAccountOrPassword : ''}
+            </span>
+          )
+          : <></>
+      }
+      <button
+        type='submit'
+        className='w-full h-20 rounded-md bg-green-600 text-white font-extrabold text-5xl'
+      >
+        {Labels.login}
+      </button>
+    </form>
   )
+}
+
+class Labels {
+  private constructor() { }
 
+  static readonly account = '信箱或手機號碼';
+  static readonly password = '密碼';
+  static readonly remember = '保持我的登入狀態';
+  static readonly login = '登入';
+  static readonly wrongAccountOrPassword = '帳號或密碼錯誤';
 }

From b9317a17e447041d03d274ac2b884a57513eed73 Mon Sep 17 00:00:00 2001
From: Susan Chen <92381825+1989ONCE@users.noreply.github.com>
Date: Wed, 27 Nov 2024 14:37:55 +0800
Subject: [PATCH 2/2] Update src/routes/login.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 src/routes/login.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/login.tsx b/src/routes/login.tsx
index d9b7567..e108cc5 100644
--- a/src/routes/login.tsx
+++ b/src/routes/login.tsx
@@ -61,8 +61,8 @@ function LoginPage() {
             onChange={(e) => setIsRemember(e.target.checked)}
           />
           <span className='absolute text-white opacity-0 peer-checked:opacity-100 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2'>
-            <svg xmlns='http://www.w3.org/2000/svg' className='h-3.5 w-3.5' viewBox='0 0 20 20' fill='currentColor' stroke='currentColor' stroke-width='1'>
-              <path fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'></path>
+            <svg xmlns='http://www.w3.org/2000/svg' className='h-3.5 w-3.5' viewBox='0 0 20 20' fill='currentColor' stroke='currentColor' strokeWidth='1' aria-hidden="true">
+              <path fillRule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clipRule='evenodd'></path>
             </svg>
           </span>
         </label>