From ea74a092e586f567fa13f3e932ca2054ae2c6595 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Thu, 14 Mar 2024 11:44:16 +0100
Subject: [PATCH] made login page responsive

---
 src/components/Login/Login.tsx            | 81 ++++++++++++-----------
 src/components/shared/FloatLabelInput.tsx | 42 ++++++++++++
 src/components/shared/index.ts            |  3 +-
 3 files changed, 88 insertions(+), 38 deletions(-)
 create mode 100644 src/components/shared/FloatLabelInput.tsx

diff --git a/src/components/Login/Login.tsx b/src/components/Login/Login.tsx
index 52381d5..a3a669a 100644
--- a/src/components/Login/Login.tsx
+++ b/src/components/Login/Login.tsx
@@ -1,66 +1,73 @@
-import { Button, Footer } from '../../components'
+import {useState} from 'react'
+import { Button, Footer, FloatLabelInput } from '../../components'
 import { Link } from 'react-router-dom'
 
+type FormType = {
+    email:string,
+    password:string
+}
+
+type HandleChange = {
+    name:string,
+    value:string
+  }
+
 export default function Login() {
+    let [formDetails, setFormDetails] = useState<FormType>({
+        email: '',
+        password: ''
+    })
+
+    const handleFormChange = ({target:{name, value}}:{target:HandleChange}):void => {
+        setFormDetails(prev => ({...prev, [name]:value}))
+    }
+
   return (
     <div className={`w-full h-screen overflow-y-auto bg-[url('../../../src/assets/images/sign-in.png')] bg-top bg-cover`}>
         <div className='containerMode h-full'>
             <div className='grid grid-cols-1 md:grid-cols-2 items-center h-full'>
-                <div className='bg-white col-start-1 md:col-start-2 w-full h-[450px] rounded-2xl shadow-lg'>
-                    <div className='w-full p-10 sm:p-20 flex flex-col justify-between items-center h-full'>
+                <div className='bg-white col-start-1 md:col-start-2 w-full rounded-2xl shadow-lg'>
+                    <div className='w-full p-10 sm:p-20 md:p-10 lg:p-20 flex flex-col justify-between items-center h-full'>
                         <div className='mb-4'>
                             <h1 className='text-2xl text-center font-bold leading-3 tracking-wide text-black dark:text-black'>Welcome!</h1>
-                            <p className='text-xl mt-2 text-center font-medium text-black dark:text-black'>Please login to admin dashboard</p>
+                            <p className='text-xl mt-4 text-center font-medium text-black dark:text-black'>Please login to admin dashboard</p>
                         </div>
 
                         <div className='w-full'>
                             {/* INPUTS */}
-                            {/* THIS INPUTS WILL BE MADE A COMPONENT LATER, TO AVOID REPEATINGS THINGS */}
                             <div className='w-full'>
                                 <div className='relative my-2 py-2'>
-                                    <input
-                                        id={'id'}
-                                        name={'email'}
-                                        className={`peer pr-8 w-full h-12 outline-none border-b-2 border-b-purple-500 placeholder:text-transparent transition-all duration-500`}
-                                        // type={type == "password" ? inputType : type}
-                                        type='text'
-                                        placeholder={'email'}
-                                        // value={value}
-                                        // onChange={onChange}
+                                    <FloatLabelInput 
+                                        id='email'
+                                        name='email'
+                                        type='email'
+                                        placeHolder='Email'
+                                        labelName='Email'
+                                        value={formDetails.email}
+                                        inputClass=''
+                                        onChange={handleFormChange}
                                     />
-                                    <label
-                                        htmlFor={'email'}
-                                        className={`text-sm text-black/70 absolute left-0 -top-1 translate-y-0 peer-focus:-top-1 peer-focus:translate-y-0 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 transition-all duration-500`}
-                                    >
-                                        {'Email'}
-                                    </label>
                                 </div>
                                 <div className='relative my-2 py-2'>
-                                    <input
-                                        id={'id'}
-                                        name={'password'}
-                                        className={`peer pr-8 w-full h-12 outline-none border-b-2 border-b-purple-500 placeholder:text-transparent transition-all duration-500`}
-                                        // type={type == "password" ? inputType : type}
+                                    <FloatLabelInput 
+                                        id='password'
+                                        name='password'
                                         type='password'
-                                        placeholder={'password'}
-                                        // value={value}
-                                        // onChange={onChange}
+                                        placeHolder='Password'
+                                        labelName='Password'
+                                        value={formDetails.password}
+                                        inputClass=''
+                                        onChange={handleFormChange}
                                     />
-                                    <label
-                                        htmlFor={'email'}
-                                        className={`text-sm text-black/70 absolute left-0 -top-1 translate-y-0 peer-focus:-top-1 peer-focus:translate-y-0 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 transition-all duration-500`}
-                                    >
-                                        {'Password'}
-                                    </label>
                                 </div>
                             </div>
 
                             <div className='mt-10 w-full sm:flex justify-between items-center gap-2'>
                                 <Button 
                                     text='Login' 
-                                    className='rounded-md w-full sm:w-2/5 text-xl' 
+                                    className='rounded-md w-full sm:w-2/5 text-xl capitalize font-bold' 
                                 />
-                                <Link to='#' className='text-black text-sm'>Forget your password</Link>
+                                <Link to='#' className='text-black text-sm'>Forget your password?</Link>
                             </div>
                         </div>
                     </div>
@@ -69,7 +76,7 @@ export default function Login() {
         </div>
 
         {/* FOOTER SECTION */}
-        <div className='page-footer'>
+        <div className='page-footer w-full fixed bottom-0'>
             <Footer />
         </div>
     </div>
diff --git a/src/components/shared/FloatLabelInput.tsx b/src/components/shared/FloatLabelInput.tsx
new file mode 100644
index 0000000..a512bd3
--- /dev/null
+++ b/src/components/shared/FloatLabelInput.tsx
@@ -0,0 +1,42 @@
+
+type Props = {
+    id?:string,
+    name?:string,
+    type?:string,
+    placeHolder?:string,
+    labelName?:string,
+    inputClass?:string,
+    value:string,
+    onChange:()=>void
+}
+
+export default function FloatLabelInput({
+    id,
+    name,
+    type,
+    placeHolder,
+    labelName,
+    value,
+    inputClass,
+    onChange
+}:Props) {
+  return (
+    <div className='w-full'>
+        <input
+            id={id ? id : ''}
+            name={name? name : ''}
+            className={`peer pr-8 w-full h-12 outline-none border-b-2 border-b-[#5A2C82] placeholder:text-transparent transition-all duration-500 ${inputClass && inputClass}`}
+            type={type ? type : 'text'}
+            placeholder={placeHolder ? placeHolder : ''}
+            value={value}
+            onChange={onChange}
+        />
+        <label
+            htmlFor={id ? id : ''}
+            className={`cursor-pointer text-sm text-black/70 absolute left-0 -top-1 translate-y-0 peer-focus:-top-1 peer-focus:translate-y-0 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 transition-all duration-500`}
+        >
+            {labelName ? labelName : ''}
+        </label>
+    </div>
+  )
+}
diff --git a/src/components/shared/index.ts b/src/components/shared/index.ts
index 4f733f4..3b0f127 100644
--- a/src/components/shared/index.ts
+++ b/src/components/shared/index.ts
@@ -1,3 +1,4 @@
 import Button from "./Button";
+import FloatLabelInput from "./FloatLabelInput";
 
-export {Button}
\ No newline at end of file
+export {Button, FloatLabelInput}
\ No newline at end of file
-- 
2.34.1