Merge pull request #11 from hduoc2003/fix/fix-signin

#4 fix sign in
hduoc2003 · Nov 7, 2023 · 11429bf · 11429bf
2 parents c9d3cd4 + c03dea4
commit 11429bf
Show file tree

Hide file tree

Showing 3 changed files with 147 additions and 124 deletions.
diff --git a/app/(auth)/signin/page.tsx b/app/(auth)/signin/page.tsx
@@ -1,12 +1,15 @@
 "use client"
 import Link from 'next/link'
 import React, {useState} from 'react'
+import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons'
 
 export default function SignIn() {
   const [inputValue, setInputValue] = useState('');
   const [inputFocused, setInputFocused] = useState(false);
   const [inputPasswordValue, setInputPasswordValue] = useState('');
   const [inputPasswordFocused, setInputPasswordFocused] = useState(false);
+  const [type, setType] = useState("password");
+
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(e.target.value);
   };
@@ -19,6 +22,12 @@ export default function SignIn() {
   const handleInputPasswordFocus = () => {
     setInputPasswordFocused(true);
   };
+  const changeStatus = () => {
+    if (type == "password")
+      setType("text");
+    else 
+      setType("password");
+  }
 
   return (
     <main className="bg-white py-5">
@@ -58,20 +67,34 @@ export default function SignIn() {
                   value={inputPasswordValue}
                   onChange={handleInputPasswordChange}
                   onFocus={handleInputPasswordFocus}
-                  type="password"
+                  type={type}
                   className={`w-full border rounded-lg text-black caret-black p-4 m-2 ${inputPasswordFocused && inputPasswordValue === '' ? 'border-red-500':''}`}
                   placeholder="Nhập mật khẩu">
                 </input>
                 {inputPasswordFocused && inputPasswordValue === '' && (
                   <p className="text-red-500 ml-2 text-sm">Vui lòng nhập mật khẩu</p>
                   )}
               </div>
+              <div>
+                {type == "password" && (
+                <EyeInvisibleOutlined className="absolute top-8 right-6" onClick={changeStatus} />
+                )}
+                {type == "text" && (
+                <EyeOutlined className="absolute top-8 right-6" onClick={changeStatus} />
+                )}
+              </div>
             </div>
           </div>
         </div>
         <div className="w-full flex justify-end items-end">
           <button className="text-sm text-primary mr-8 hover:underline hover:underline-offset-2">Quên mật khẩu?</button>
         </div>
+        <div className="w-full flex justify-end items-end">
+          Chưa có tài khoản? 
+          <button className="text-sm text-primary mr-8 mt-2 ml-2 hover:underline hover:underline-offset-2">
+            <Link href="/signup">Đăng ký ngay</Link>
+          </button>
+        </div>
         <div className="w-full flex justify-between">
         <button className="text-lg text-black rounded-lg px-6 py-2 font-bold ml-8 mt-16 hover:bg-slate-300">
             <Link href="/">Quay lại</Link>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,8 +23,8 @@
     "lodash": "^4.17.21",
     "next": "^13.5.5",
     "postcss": "8.4.30",
-    "react-countdown-circle-timer": "^3.2.1",
     "react": "^18.2.0",
+    "react-countdown-circle-timer": "^3.2.1",
     "react-dom": "18.2.0",
     "react-icons": "^4.11.0",
     "react-redux": "^8.1.3",
@@ -33,10 +33,10 @@
     "typescript": "5.2.2"
   },
   "devDependencies": {
+    "@types/lodash": "^4.14.200",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.31",
     "tailwindcss": "^3.3.3",
-    "typescript": "^5.2.2",
-    "@types/lodash": "^4.14.200"
+    "typescript": "^5.2.2"
   }
 }