Merge pull request #83 from IT-Academy-BCN/forgotten-password

Show ForgottenPasswordComponent when Recordar/Cambiar contraseña is clicked
IT-Academy-BCN · Oct 4, 2023 · 2c2bb3e · 2c2bb3e
2 parents 00e1daa + ca4f787
commit 2c2bb3e
Show file tree

Hide file tree

Showing 6 changed files with 234 additions and 95 deletions.
diff --git a/src/components/HeaderComponent.tsx b/src/components/HeaderComponent.tsx
@@ -7,12 +7,14 @@ import selector from "../assets/img/sel_right.png";
 import menu from "../assets/img/menu.png";
 import LoginComponent from "./LoginComponent";
 import RegisterComponent from "./Registercomponent";
+import PasswordReminderComponent from "./PasswordReminderComponent";
 
 const Header = () => {
   const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
   const [IsDropdownEnterButton, setIsDropdownEnterButton] =
     useState<boolean>(false);
   const [isDropdownCuenta, setisDropdownCuenta] = useState<boolean>(false);
+  const [isPasswordReminder, setIsPasswordReminder] = useState<boolean>(false);
 
   const toggleDropdown = (): void => {
     setIsDropdownOpen(!isDropdownOpen);
@@ -115,12 +117,22 @@ const Header = () => {
           <LoginComponent
             setIsDropdownEnterButton={setIsDropdownEnterButton}
             setisDropdownCuenta={setisDropdownCuenta}
+            setIsPasswordReminder={setIsPasswordReminder}
           />
         ) : null}
         {isDropdownCuenta ? (
           <RegisterComponent
             setIsDropdownEnterButton={setIsDropdownEnterButton}
             setisDropdownCuenta={setisDropdownCuenta}
+            setIsPasswordReminder={setIsPasswordReminder}
+          />
+        ) : null}
+
+        {isPasswordReminder ? (
+          <PasswordReminderComponent
+            setIsPasswordReminder={setIsPasswordReminder}
+            setIsDropdownEnterButton={setIsDropdownEnterButton}
+            setisDropdownCuenta={setisDropdownCuenta}
           />
         ) : null}
 

diff --git a/src/components/LoginComponent.tsx b/src/components/LoginComponent.tsx
@@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom";
 import {
   handleSubmit,
   eraseMessageError,
+  passwordReminderReducer,
 } from "../store/reducers/apiCall/apiPostRegisterLogin";
 import { useDispatch, useSelector } from "react-redux";
 import {
@@ -15,6 +16,7 @@ import {
 export default function LoginComponent({
   setIsDropdownEnterButton,
   setisDropdownCuenta,
+  setIsPasswordReminder,
 }: ChildComponentProps) {
   const navegador = useNavigate();
   const dispatch = useDispatch();
@@ -58,7 +60,20 @@ export default function LoginComponent({
               />
 
               <a className="text-xs text-end">
-                <span className="border-b-2 border-black">
+                <span
+                  className="border-b-2 border-black"
+                  onClick={() => {
+                    dispatch(
+                      passwordReminderReducer({
+                        type: "SHOW_PASSWORD_REMINDER",
+                      })
+                    );
+                    dispatch(eraseMessageError());
+                    setIsDropdownEnterButton(false);
+                    setisDropdownCuenta(false);
+                    setIsPasswordReminder(true);
+                  }}
+                >
                   Recordar/Cambiar contraseña
                 </span>
               </a>

diff --git a/src/components/PasswordReminderComponent.tsx b/src/components/PasswordReminderComponent.tsx
@@ -0,0 +1,49 @@
+import cross from "../assets/img/cross.png";
+import { ChildComponentProps } from "../interfaces/interfaces";
+
+const PasswordReminderComponent = ({
+  setIsPasswordReminder,
+}: ChildComponentProps) => {
+  return (
+    <>
+      <div>
+        <div
+          className={`absolute z-50 right-0 top-full mt-6 w-80 rounded-xl bg-white border-2 `}
+        >
+          <div className="p-3 flex ">
+            <img
+              onClick={() => setIsPasswordReminder(false)}
+              src={cross}
+              className=" cursor-pointer w-3 ml-auto "
+              alt=""
+            />
+          </div>
+          <div className="flex flex-col  justify-evenly h-60 px-5 py-0  ">
+            <h1 className="text-center font-bold text-xl">
+              Recordar contraseña
+            </h1>
+            <form>
+              <input
+                type="email"
+                name="email"
+                className="input input-bordered placeholder-black w-full max-w-xs"
+                placeholder="Dirección de email"
+              />
+
+              <button
+                type="submit"
+                className="mt-5 btn btn-block normal-case bg-pink-it text-white"
+              >
+                <p>Recordar contraseña</p>
+              </button>
+            </form>
+          </div>
+        </div>
+
+        <div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
+      </div>
+    </>
+  );
+};
+
+export default PasswordReminderComponent;
diff --git a/src/interfaces/interfaces.tsx b/src/interfaces/interfaces.tsx
@@ -1,18 +1,20 @@
 export interface ChildComponentProps {
-    setIsDropdownEnterButton: React.Dispatch<React.SetStateAction<boolean>>;
-    setisDropdownCuenta: React.Dispatch<React.SetStateAction<boolean>>;
-  }
- export interface CardTwoLogosProps   {
-  pos: string,
+  setIsDropdownEnterButton: React.Dispatch<React.SetStateAction<boolean>>;
+  setisDropdownCuenta: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsPasswordReminder: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export interface CardTwoLogosProps {
+  pos: string;
   imgSrc1: string;
   imgSrc2?: string;
   title: string;
   description: string;
   buttonText: string;
 }
 export interface appsLoad {
-  appsInfo:  AppData
-  loadingApps: boolean
+  appsInfo: AppData;
+  loadingApps: boolean;
 }
 export interface AppData {
   title: string;
@@ -23,43 +25,44 @@ export interface AppData {
   github: string;
 }
 
-export interface faqContent{
-  title:string;
-  description:string;
+export interface faqContent {
+  title: string;
+  description: string;
+}
+export interface RootState {
+  apiPostRegister: ApiPostRegisterState;
+}
+export interface ApiPostRegisterState {
+  messageError: string;
+  isLoadingMessageError: boolean;
+}
+export interface createToken {
+  acces_token: string;
+}
+export interface ApiStateApps {
+  apps: AppData[];
 }
- export interface RootState {
-    apiPostRegister: ApiPostRegisterState;   
-  } 
-  export interface ApiPostRegisterState {
-    messageError: string;
-    isLoadingMessageError: boolean;
-  }
-  export interface createToken {
-    acces_token: string;  
-  }
-  export interface ApiStateApps {
-    apps: AppData[]; 
-  }
 
-  export interface Faq {
-    id: number;
-    title: string;
-    description: string;
-  }
+export interface Faq {
+  id: number;
+  title: string;
+  description: string;
+}
 
-  export interface loginRegisterParams {
-    messageError:string,
-    isLogged:boolean,
-    isLoadingMessageError:boolean,
-    acces_token:string
-    }
+export interface loginRegisterParams {
+  messageError: string;
+  isLogged: boolean;
+  isLoadingMessageError: boolean;
+  acces_token: string;
+  showPasswordReminder: boolean;
+}
 
-   export interface FormDataEvent extends React.FormEvent<HTMLFormElement> {
-      target: HTMLFormElement;
-    }
+export interface FormDataEvent extends React.FormEvent<HTMLFormElement> {
+  target: HTMLFormElement;
+}
 
-    export interface collaborator {
-      name:string,
-      url:string
-      photo:string
-   }
+export interface collaborator {
+  name: string;
+  url: string;
+  photo: string;
+}