Issue #82: ADD change password

src/app/login/components/LoginForm.js

@@ -10,8 +10,9 @@ import {
 } from "@mui/material";
 import theme from "@/app/theme";
 import { ThemeProvider } from "@emotion/react";
-import { use, useState } from "react";
+import { useState } from "react";
 import SignupModal from "./SignupModal";
+import PasswdModal from "./PasswdModal";
 import Title from "@/app/components/Title";
 import { useRouter } from "next/navigation";
 
@@ -22,10 +23,14 @@ export default function LoginForm({
   handleSubmit,
   errorMessage,
 }) {
-  const [openModal, setOpenModal] = useState(false);
+  const [openModalSignup, setOpenModalSignup] = useState(false);
+  const [openModalPasswd, setOpenModalPasswd] = useState(false);
 
-  const handleOpenModal = () => setOpenModal(true);
-  const handleCloseModal = () => setOpenModal(false);
+  const handleOpenModalSignup = () => setOpenModalSignup(true);
+  const handleCloseModalSignup = () => setOpenModalSignup(false);
+
+  const handleOpenModalPasswd = () => setOpenModalPasswd(true);
+  const handleCloseModalPasswd = () => setOpenModalPasswd(false);
 
   const router = useRouter();
 
@@ -49,7 +54,7 @@ export default function LoginForm({
                 className="m-5"
               />
               {errorMessage ? (
-                <Alert severity="error">{errorMessage}</Alert>
+                <Alert severity="error" className="mb-3">{errorMessage}</Alert>
               ) : null}
               <TextField
                 fullWidth
@@ -88,23 +93,26 @@ export default function LoginForm({
               </Button>
               <p className="mt-5 text-xs text-gray-500">
                 Esqueceu a senha?{" "}
-                <a className="text-secondary cursor-pointer hover:font-bold">
+                <a
+                  onClick={handleOpenModalPasswd} 
+                  className="text-secondary cursor-pointer hover:font-bold">
                   Clique aqui.
                 </a>
               </p>
+              <PasswdModal open={openModalPasswd} handleClose={handleCloseModalPasswd} />
             </Paper>
           </form>
           <a onClick={() => router.push("/collections")} className="text-secondary lg:text-nowrap hover:font-bold cursor-pointer">Permanecer sem logar</a>
           <p className="mt-5 text-xs text-gray-400 lg:text-nowrap">
             Não tem uma conta?{" "}
             <a
-              onClick={handleOpenModal}
+              onClick={handleOpenModalSignup}
               className="text-secondary hover:font-bold cursor-pointer"
             >
               Cadastre-se.
             </a>
           </p>
-          <SignupModal open={openModal} handleClose={handleCloseModal} />
+          <SignupModal open={openModalSignup} handleClose={handleCloseModalSignup} />
         </div>
       </div>
     </ThemeProvider>

src/app/login/components/PasswdModal.js

+import * as React from "react";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Modal from "@mui/material/Modal";
+import { TextField, Alert } from "@mui/material";
+import { useState } from "react";
+import mecredApi from "@/axiosConfig";
+import { removeFromLocalStorage } from "@/app/handlers/localStorageHandler";
+
+export default function PasswdModal({ open, handleClose }) {
+  const [userEmail, setUserEmail] = useState("");
+  const [feedbackMessage, setfeedbackMessage] = useState("");
+  const [error, setError] = useState(false);
+
+  const sendRecovery = async () => {
+    mecredApi
+      .post("/auth/password", {
+        email: userEmail,
+        "redirect_url": "http://localhost:3000/resetPassword"
+      })
+      .then((response) => {
+        setfeedbackMessage(
+          "Email de recuperação de senha enviado com sucesso."
+        );
+        removeFromLocalStorage("access_token");
+        setError(false);
+      })
+      .catch((e) => {
+        setfeedbackMessage(e["response"]["data"]["errors"][0]);
+        setError(true);
+      });
+  };
+
+  const resetForm = () => {
+    setUserEmail("");
+  };
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+
+    if (!userEmail) {
+      setfeedbackMessage("Email obrigatório!");
+      setError(true);
+      resetForm();
+    } else {
+        sendRecovery();
+    }
+  };
+
+  return (
+    <Modal
+      className="grid h-screen place-items-center m-5"
+      open={open}
+      onClose={handleClose}
+    >
+      <Box className="bg-white sm:w-1/2 xl:w-1/4 p-5 flex flex-col items-center border-none rounded-xl">
+        <h1 className="text-secondary text-2xl font-bold m-5">Vamos encontrar sua conta</h1>
+        <form onSubmit={handleSubmit}>
+          {feedbackMessage ? (
+            <Alert severity={error ? "error" : "success"}>
+              {feedbackMessage}
+            </Alert>
+          ) : null}
+          <TextField
+            fullWidth
+            onChange={(e) => setUserEmail(e.target.value)}
+            label="E-mail *"
+            type="email"
+            className="mb-5"
+            value={userEmail}
+            error={!userEmail && error}
+          />
+          <Button
+            fullWidth
+            disableElevation
+            className="bg-secondary text-white hover:bg-secondary-hover"
+            type="submit"
+          >
+            Enviar
+          </Button>
+        </form>
+      </Box>
+    </Modal>
+  );
+}

src/app/login/components/SignupModal.js

@@ -69,7 +69,7 @@ export default function SignupModal({ open, handleClose }) {
         <h1 className="text-secondary text-2xl font-bold m-5">Cadastre-se</h1>
         <form onSubmit={handleSubmit}>
           {feedbackMessage ? (
-            <Alert severity={error ? "error" : "success"}>
+            <Alert className="mb-3" severity={error ? "error" : "success"}>
               {feedbackMessage}
             </Alert>
           ) : null}

src/app/login/page.js

 "use client";
 import Grid from "@mui/material/Unstable_Grid2";
-import Hightlights from "./components/Highlights";
 import LoginForm from "./components/LoginForm";
 import { useEffect, useState } from "react";
 import mecredApi from "@/axiosConfig";
@@ -29,7 +28,6 @@ function Login() {
 
   const handleEmailChange = (e) => {
     setUserEmail(e.target.value);
-    // console.log(e.target.value);
   };
 
   const handlePasswordChange = (e) => {
@@ -45,7 +43,6 @@ function Login() {
       password: userPassword,
     })
     .then((response) => {
-      // console.log(response.headers)
       saveToLocalStorage("user_data", JSON.stringify(response.data["data"]));
       saveToLocalStorage("access_token", response.headers["access-token"]);
       saveToLocalStorage("client", response.headers["client"])

src/app/resetPassword/page.js

+"use client";
+import Image from "next/image";
+import { useState } from 'react';
+import {
+    Button,
+    Paper,
+    Alert,
+    TextField
+} from "@mui/material";
+import theme from "@/app/theme";
+import { ThemeProvider } from "@emotion/react";
+import { useRouter } from "next/navigation";
+import mecredApi from "@/axiosConfig";
+import { removeFromLocalStorage } from "../handlers/localStorageHandler";
+
+
+export default function ResetPassword() {
+
+    const [error, setError] = useState(false)
+    const [password, setPassword] = useState("")
+    const [passwordConfirmation, setPasswordConfirmation] = useState("")
+    const [errorMessage, setErrorMessage] = useState("")
+
+    const router = useRouter();
+
+    const onSubmit = async (e) => {
+        e.preventDefault()
+
+        if (!password || !passwordConfirmation) {
+            setErrorMessage("Todos os campos marcados com * são obrigatórios!");
+            setError(true);
+            return
+        } else if (password != passwordConfirmation) {
+            setErrorMessage("As senhas devem ser iguais!");
+            setError(true);
+            return
+        }
+
+        const urlParams = new URLSearchParams(window.location.search);
+        const clientId = urlParams.get("client_id");
+        const config = urlParams.get("config");
+        const expiry = urlParams.get("expiry");
+        const resetPassword = urlParams.get("reset_password");
+        const token = urlParams.get("token");
+        const uid = urlParams.get("uid");
+
+        const url = `/auth/password`
+
+        const payload = {
+            "password": e.target["senha"].value,
+            "password_confirmation": e.target["confirma-senha"].value,
+            "client": clientId,
+            "config": config,
+            "expiry": expiry,
+            "reset_password": resetPassword,
+            "access-token": token,
+            "uid": uid
+        }
+
+        try {
+            const res = await mecredApi.put(url, payload)
+            removeFromLocalStorage("access_token");
+            setError(false);
+            router.push("/login");
+        } catch (e) {
+            setError(true);
+        }
+    }
+
+    return (
+        <ThemeProvider theme={theme}>
+            <div className="grid grid-cols-1 h-screen">
+                <div className="flex flex-col justify-center items-center">
+                <div className="my-10 mx-10">
+                <h1 className="text-3xl max-lg:text-xl font-bold text-secondary my-10 text-center">
+                    Digite sua nova senha
+                </h1>
+                <h1 className="text-lg max-lg:text-base text-main-text text-balance mb-5 text-center">
+                    Assim que sua senha for alterada com sucesso você será redirecionado para o login
+                </h1>
+                </div>
+                    <form onSubmit={onSubmit} className="mb-5">
+                        <Paper
+                            elevation={0}
+                            className="w-96 flex flex-col items-center p-5 rounded-xl"
+                        >
+                            <Image
+                                src="/mecred.svg"
+                                alt="MecRED Logo"
+                                width={60}
+                                height={24}
+                                className="m-5"
+                            />
+                            {error && errorMessage ? (
+                                <Alert severity="error" className="mb-3">{errorMessage}</Alert>
+                            ) : null}
+                            <TextField
+                                fullWidth
+                                type="password"
+                                label="Nova Senha *"
+                                className="mb-5"
+                                name="senha"
+                                onChange={(e) => setPassword(e.target.value)}
+                                value={password}
+                            />
+                            <TextField
+                                fullWidth
+                                type="password"
+                                label="Confirme Nova Senha *"
+                                className="mb-5"
+                                name="confirma-senha"
+                                onChange={(e) => setPasswordConfirmation(e.target.value)}
+                                value={passwordConfirmation}
+                            />
+                            <Button
+                                fullWidth
+                                disableElevation
+                                className="bg-secondary text-white hover:bg-secondary-hover"
+                                type="submit"
+                            >
+                                Trocar a Senha
+                            </Button>
+                        </Paper>
+                    </form>
+                </div>
+            </div>
+        </ThemeProvider>
+    );
+}