root-imp-inputError (#43)

nicitaacom · Aug 19, 2023 · 080e81b · 080e81b
1 parent 4864655
commit 080e81b
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 39 deletions.
diff --git a/src/components/pages/auth/SignInForm.tsx b/src/components/pages/auth/SignInForm.tsx
@@ -19,6 +19,7 @@ function SignInForm() {
           placeholder="Password"
           type='password'
           value={password}
+          inputError="Enter valid email"
           onChange={e => setPassword(e.target.value)}
         />
       </div>

diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx
@@ -1,61 +1,87 @@
+import { motion } from "framer-motion"
 import { ChangeEvent, useState } from "react"
 import { AiFillEye, AiFillEyeInvisible } from "react-icons/ai"
 
 interface InputProps extends React.HTMLAttributes<HTMLInputElement> {
-  type: 'email' | 'password' | 'number'
+  type: "email" | "password" | "number"
   placeholder: string
   value: string
   onChange: (e: ChangeEvent<HTMLInputElement>) => void
   checked?: boolean
   size?: "sm" | "" | undefined
+  inputError?: string | undefined
 }
 
-export function Input({ type, size, placeholder, ...props }: InputProps) {
+export function Input({ type, size, placeholder, inputError, ...props }: InputProps) {
   const [showPassword, setShowPassword] = useState(false)
 
   return (
     <>
-      {type === "password"
-        ? (
-          <div className="relative w-full">
-            <input
-              className={`peer/input p-4 bg-primary-foreground text-secondary z-[9] ${size === "sm" ? "w-[100px] h-[40px]" : "w-full h-[55px]"}
+      {type === "password" ? (
+        <div className="relative w-full">
+          <input
+            className={`peer/input p-4 bg-primary-dark text-secondary z-[9]
+              ${inputError ? "border-danger border-[1px]" : ""}
+              ${size === "sm" ? "w-[100px] h-[40px]" : "w-full h-[55px]"}
               outline-none`}
-              type={showPassword ? "text" : "password"} placeholder=" "
-              {...props}
-            />
-            <label className="absolute 
+            type={showPassword ? "text" : "password"}
+            placeholder=" "
+            {...props}
+          />
+          <label
+            className="absolute 
             left-1 top-[50%] translate-y-[-120%] text-xs
             peer-placeholder-shown/input:left-4 peer-placeholder-shown/input:translate-y-[-50%] peer-placeholder-shown/input:text-md
             font-secondary text-secondary transition-all duration-300
-             pointer-events-none select-none">{placeholder}</label>
-            {showPassword ? (
-              <AiFillEyeInvisible
-                className="absolute right-4 top-[50%] translate-y-[-50%] w-8 h-8 text-secondary cursor-pointer z-[10]"
-                onClick={() => setShowPassword(!showPassword)}
-              />
-            ) : (
-              <AiFillEye
-                className="absolute right-4 w-8 h-8 top-[50%] translate-y-[-50%] text-secondary cursor-pointer z-[10]"
-                onClick={() => setShowPassword(!showPassword)}
-              />
-            )}
-          </div>
-        ) : (
-          <div className="relative w-full">
-            <input
-              className={`peer/input p-4 bg-primary-foreground text-secondary z-[9] ${size === "sm" ? "w-[100px] h-[40px]" : "w-full h-[55px]"}
-              outline-none`}
-              type='email' placeholder=" " required
-              {...props}
+             pointer-events-none select-none">
+            {placeholder}
+          </label>
+          {showPassword ? (
+            <AiFillEyeInvisible
+              className="absolute right-4 top-[50%] translate-y-[-50%] w-8 h-8 text-secondary cursor-pointer z-[10]"
+              onClick={() => setShowPassword(!showPassword)}
             />
-            <label className="absolute 
+          ) : (
+            <AiFillEye
+              className="absolute right-4 w-8 h-8 top-[50%] translate-y-[-50%] text-secondary cursor-pointer z-[10]"
+              onClick={() => setShowPassword(!showPassword)}
+            />
+          )}
+          <motion.p
+            className="absolute font-secondary text-danger text-xs"
+            initial={{ rotate: 0 }}
+            animate={{ rotate: [0, -5, 5, 0] }}>
+            {inputError}
+          </motion.p>
+        </div>
+      ) : (
+        <div className="relative w-full">
+          <input
+            className={`peer/input p-4 bg-primary-dark text-secondary z-[9] 
+               ${inputError ? "border-danger border-[1px]" : ""}
+              ${size === "sm" ? "w-[100px] h-[40px]" : "w-full h-[55px]"}
+              outline-none`}
+            type="email"
+            placeholder=" "
+            required
+            {...props}
+          />
+          <label
+            className="absolute 
             left-1 top-[50%] translate-y-[-120%] text-xs
             peer-placeholder-shown/input:left-4 peer-placeholder-shown/input:translate-y-[-50%] peer-placeholder-shown/input:text-md
              font-secondary text-secondary transition-all duration-300
-             pointer-events-none select-none">{placeholder}</label>
-          </div>
-        )}
+             pointer-events-none select-none">
+            {placeholder}
+          </label>
+          <motion.p
+            className="absolute font-secondary text-danger text-xs"
+            initial={{ rotate: 0 }}
+            animate={{ rotate: [0, -5, 5, 0] }}>
+            {inputError}
+          </motion.p>
+        </div>
+      )}
     </>
   )
 }
diff --git a/src/pages/auth/signin.tsx b/src/pages/auth/signin.tsx
@@ -4,21 +4,21 @@ import { getProviders } from "next-auth/react"
 import { getServerSession } from "next-auth/next"
 import Link from "next/link"
 
-import { AiOutlineGoogle } from 'react-icons/ai'
+import { AiOutlineGoogle } from "react-icons/ai"
 
 import { authOptions } from "../../server/auth"
 import { SignInForm } from "~/components"
 import { Button } from "~/components/ui"
 
-export default function SignIn({ providers }: InferGetServerSidePropsType<typeof getServerSideProps>) {
+export default function SignIn({}: InferGetServerSidePropsType<typeof getServerSideProps>) {
   return (
     <div
       className="flex text-md flex-col items-center w-[456px] max-w-[80vw] mx-auto px-4 py-2 rounded-[12px]
      tablet:px-6 tablet:py-4 laptop:px-10 laptop:py-6 space-y-4 bg-secondary ">
       <h1 className="text-md font-bold text-primary">Login</h1>
       <SignInForm />
       <p className="font-bold">or</p>
-      <Button variant='continue-with'>
+      <Button variant="continue-with">
         Continue with Google
         <AiOutlineGoogle className="text-primary-foreground" size={42} />
       </Button>

diff --git a/src/pages/auth/signup.tsx b/src/pages/auth/signup.tsx
@@ -6,7 +6,7 @@ import { authOptions } from "../../server/auth"
 import Link from "next/link"
 import SignUpForm from "~/components/pages/auth/SignUpForm"
 
-function Signup({ providers }: InferGetServerSidePropsType<typeof getServerSideProps>) {
+function Signup({}: InferGetServerSidePropsType<typeof getServerSideProps>) {
   return (
     <div
       className="flex flex-col items-center w-[456px] max-w-[80vw] mx-auto px-4 py-2 rounded-[12px]