diff --git a/src/components/HeaderComponent.tsx b/src/components/HeaderComponent.tsx index cfc9244..58aa6f1 100644 --- 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(false); const [IsDropdownEnterButton, setIsDropdownEnterButton] = useState(false); const [isDropdownCuenta, setisDropdownCuenta] = useState(false); + const [isPasswordReminder, setIsPasswordReminder] = useState(false); const toggleDropdown = (): void => { setIsDropdownOpen(!isDropdownOpen); @@ -115,12 +117,22 @@ const Header = () => { ) : null} {isDropdownCuenta ? ( + ) : null} + + {isPasswordReminder ? ( + ) : null} diff --git a/src/components/LoginComponent.tsx b/src/components/LoginComponent.tsx index bc70199..4e538a1 100644 --- 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({ /> - + { + dispatch( + passwordReminderReducer({ + type: "SHOW_PASSWORD_REMINDER", + }) + ); + dispatch(eraseMessageError()); + setIsDropdownEnterButton(false); + setisDropdownCuenta(false); + setIsPasswordReminder(true); + }} + > Recordar/Cambiar contraseña diff --git a/src/components/PasswordReminderComponent.tsx b/src/components/PasswordReminderComponent.tsx new file mode 100644 index 0000000..5ef7197 --- /dev/null +++ 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 ( + <> +
+
+
+ setIsPasswordReminder(false)} + src={cross} + className=" cursor-pointer w-3 ml-auto " + alt="" + /> +
+
+

+ Recordar contraseña +

+
+ + + +
+
+
+ +
+
+ + ); +}; + +export default PasswordReminderComponent; diff --git a/src/interfaces/interfaces.tsx b/src/interfaces/interfaces.tsx index 783b502..8813e9b 100644 --- a/src/interfaces/interfaces.tsx +++ b/src/interfaces/interfaces.tsx @@ -1,9 +1,11 @@ export interface ChildComponentProps { - setIsDropdownEnterButton: React.Dispatch>; - setisDropdownCuenta: React.Dispatch>; - } - export interface CardTwoLogosProps { - pos: string, + setIsDropdownEnterButton: React.Dispatch>; + setisDropdownCuenta: React.Dispatch>; + setIsPasswordReminder: React.Dispatch>; +} + +export interface CardTwoLogosProps { + pos: string; imgSrc1: string; imgSrc2?: string; title: string; @@ -11,8 +13,8 @@ export interface ChildComponentProps { 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 { - target: HTMLFormElement; - } +export interface FormDataEvent extends React.FormEvent { + target: HTMLFormElement; +} - export interface collaborator { - name:string, - url:string - photo:string - } \ No newline at end of file +export interface collaborator { + name: string; + url: string; + photo: string; +} diff --git a/src/store/reducers/apiCall/apiPostRegisterLogin.tsx b/src/store/reducers/apiCall/apiPostRegisterLogin.tsx index 1630a2d..98ed2d0 100644 --- a/src/store/reducers/apiCall/apiPostRegisterLogin.tsx +++ b/src/store/reducers/apiCall/apiPostRegisterLogin.tsx @@ -1,64 +1,124 @@ -import { createSlice } from '@reduxjs/toolkit' -import { PayloadAction } from '@reduxjs/toolkit' -import axios from 'axios' -import { Dispatch } from '@reduxjs/toolkit' -import { loginRegisterParams,FormDataEvent } from '../../../interfaces/interfaces' -import { NavigateFunction } from 'react-router-dom' +import { createSlice } from "@reduxjs/toolkit"; +import { PayloadAction } from "@reduxjs/toolkit"; +import axios from "axios"; +import { Dispatch } from "@reduxjs/toolkit"; +import { + loginRegisterParams, + FormDataEvent, +} from "../../../interfaces/interfaces"; +import { NavigateFunction } from "react-router-dom"; const initialState: loginRegisterParams = { - messageError:'', - isLogged:false, - isLoadingMessageError:false, - acces_token:'' -} + messageError: "", + isLogged: false, + isLoadingMessageError: false, + acces_token: "", + showPasswordReminder: false, +}; export const apiSlice = createSlice({ - name: 'apiPostRegister', + name: "apiPostRegister", initialState, reducers: { - setMessageError:(state, action: PayloadAction<{errorMessage: string, loadingBoolean: boolean }>)=>{ - - const { errorMessage, loadingBoolean } = action.payload; + setMessageError: ( + state, + action: PayloadAction<{ errorMessage: string; loadingBoolean: boolean }> + ) => { + const { errorMessage, loadingBoolean } = action.payload; state.messageError = errorMessage; - state.isLoadingMessageError= loadingBoolean; + state.isLoadingMessageError = loadingBoolean; + }, + eraseMessageError: (state) => { + state.messageError = ""; + }, + setIsLogged: (state, actions) => { + state.isLogged = actions.payload; + }, + setToken: (state, actions) => { + state.acces_token = actions.payload; + }, + passwordReminderReducer: (state, action) => { + const actionHandlers: Record typeof initialState> = { + SHOW_PASSWORD_REMINDER: () => ({ + ...state, + showPasswordReminder: true, + }), + HIDE_PASSWORD_REMINDER: () => ({ + ...state, + showPasswordReminder: false, + }), + }; - },eraseMessageError:(state)=>{ - state.messageError= ''; - - },setIsLogged:(state,actions)=>{ - state.isLogged = actions.payload - },setToken:(state,actions)=>{ - state.acces_token = actions.payload - } + const handler = actionHandlers[action.type] || (() => state); + return handler(); + }, }, -}) +}); -export const { setMessageError,eraseMessageError,setIsLogged,setToken } = apiSlice.actions; +export const { + setMessageError, + eraseMessageError, + setIsLogged, + setToken, + passwordReminderReducer, +} = apiSlice.actions; //Api call for login and register. - - export const handleSubmit = async(dispatch:Dispatch, e:FormDataEvent, number:number, navegador:NavigateFunction) => { +export const handleSubmit = async ( + dispatch: Dispatch, + e: FormDataEvent, + number: number, + navegador: NavigateFunction +) => { e.preventDefault(); - dispatch(setMessageError({errorMessage:'',loadingBoolean:true})); + dispatch(setMessageError({ errorMessage: "", loadingBoolean: true })); const formData = new FormData(e.target); - - //RESGISTER - if(number === 1){ - axios.post('http://87.106.229.119/api/register',formData) - .then(resp=> {console.log( resp); dispatch(setMessageError({errorMessage: resp.data.result.message.split('.')[0],loadingBoolean:false}))}) - .catch(err=> console.log(err,'error')); + //RESGISTER + if (number === 1) { + axios + .post("http://87.106.229.119/api/register", formData) + .then((resp) => { + console.log(resp); + dispatch( + setMessageError({ + errorMessage: resp.data.result.message.split(".")[0], + loadingBoolean: false, + }) + ); + }) + .catch((err) => console.log(err, "error")); //LOGIN - }else if(number === 2){ - axios.post('http://87.106.229.119/api/login',formData) - .then(resp=> { dispatch(setToken(resp.data.result.access_token)); dispatch(setIsLogged(true)); navegador('/backoffice'); dispatch(setMessageError({errorMessage:'', loadingBoolean:false})) }) - .catch(err=>{err.response.status==422? dispatch(setMessageError({errorMessage:err.response.data.message.split('.')[0], loadingBoolean:false})) : dispatch(setMessageError({errorMessage:err.response.data.result.message, loadingBoolean:false}))}) - } + } else if (number === 2) { + axios + .post("http://87.106.229.119/api/login", formData) + .then((resp) => { + dispatch(setToken(resp.data.result.access_token)); + dispatch(setIsLogged(true)); + navegador("/backoffice"); + dispatch(setMessageError({ errorMessage: "", loadingBoolean: false })); + }) + .catch((err) => { + err.response.status == 422 + ? dispatch( + setMessageError({ + errorMessage: err.response.data.message.split(".")[0], + loadingBoolean: false, + }) + ) + : dispatch( + setMessageError({ + errorMessage: err.response.data.result.message, + loadingBoolean: false, + }) + ); + }); } +}; //End of Api call for login register -export default apiSlice.reducer \ No newline at end of file +export default apiSlice.reducer; diff --git a/src/store/store.tsx b/src/store/store.tsx index 5a0650d..3bae125 100644 --- a/src/store/store.tsx +++ b/src/store/store.tsx @@ -1,19 +1,19 @@ -import { configureStore } from '@reduxjs/toolkit' +import { configureStore } from "@reduxjs/toolkit"; // ... - import apiPostRegister from './reducers/apiCall/apiPostRegisterLogin' - import faqsReducer from './reducers/faqsCall/faqsReducer' -import appsCallApiFunctionality from './reducers/appsCall/appsCallApiFunctionality' -import getCollaboratorsFunctionality from './reducers/CollaboratorsCall/getCollaboratorsFunctionality' +import apiPostRegister from "./reducers/apiCall/apiPostRegisterLogin"; +import faqsReducer from "./reducers/faqsCall/faqsReducer"; +import appsCallApiFunctionality from "./reducers/appsCall/appsCallApiFunctionality"; +import getCollaboratorsFunctionality from "./reducers/CollaboratorsCall/getCollaboratorsFunctionality"; export const store = configureStore({ reducer: { apiPostRegister: apiPostRegister, - faqsReducer:faqsReducer, - appsCallApiFunctionality:appsCallApiFunctionality, - getCollaboratorsFunctionality:getCollaboratorsFunctionality + faqsReducer: faqsReducer, + appsCallApiFunctionality: appsCallApiFunctionality, + getCollaboratorsFunctionality: getCollaboratorsFunctionality, }, -}) +}); // Infer the `RootState` and `AppDispatch` types from the store itself -export type RootState = ReturnType +export type RootState = ReturnType; // Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState} -export type AppDispatch = typeof store.dispatch \ No newline at end of file +export type AppDispatch = typeof store.dispatch;