Issue #26: CONNECT signup modal to api

src/app/login/components/LoginForm.js

@@ -47,7 +47,7 @@ export default function LoginForm({
               label="E-mail"
               className="m-5"
               onChange={handleEmailChange}
-              error={errorMessage != ""}
+              error={errorMessage.length > 0}
             />
             <TextField
               fullWidth
@@ -55,7 +55,7 @@ export default function LoginForm({
               label="Senha"
               className="mb-5"
               onChange={handlePasswordChange}
-              error={errorMessage != ""}
+              error={errorMessage != errorMessage.length > 0}
             />
             <Button
               fullWidth

src/app/login/components/SignupModal.js

@@ -4,21 +4,56 @@ import Button from "@mui/material/Button";
 import Modal from "@mui/material/Modal";
 import { TextField, Divider, Alert } from "@mui/material";
 import { useState } from "react";
+import mecredApi from "@/axiosConfig";
 
 export default function SignupModal({ open, handleClose }) {
   const [userName, setUserName] = useState("");
   const [userEmail, setUserEmail] = useState("");
   const [userPassword, setUserPassword] = useState("");
   const [userPasswordConfirmation, setUserPasswordConfirmation] = useState("");
-  const [errorMessage, setErrorMessage] = useState("");
+  const [feedbackMessage, setfeedbackMessage] = useState("");
+  const [error, setError] = useState(false);
+
+  const helperText = "As senhas devem ser iguais!";
+
+  const userSignup = async () => {
+    mecredApi
+      .post("/auth", {
+        name: userName,
+        email: userEmail,
+        password: userPassword,
+        password_confirmation: userPasswordConfirmation,
+      })
+      .then((response) => {
+        setfeedbackMessage("Usuário cadastrado com sucesso! Por favor confirme seu e-mail.");
+        setError(false);
+        
+      })
+      .catch(e => {
+        setfeedbackMessage(e['response']['data']['errors']['full_messages'][0]);
+        setError(true);
+      })
+  };
+
+  const resetForm = () => {
+    setUserName("");
+    setUserEmail("");
+    setUserPassword("");
+    setUserPasswordConfirmation("");
+  }
 
   const handleSubmit = (event) => {
     event.preventDefault();
 
-    if (!userName || !userEmail || !userPassword || !userPasswordConfirmation)
-      setErrorMessage("Todos os campos marcados com * são obrigatórios!")
-    else if (userPassword != userPasswordConfirmation)
-      setErrorMessage("As senhas devem ser iguais!");
+    if (!userName || !userEmail || !userPassword || !userPasswordConfirmation) {
+      setfeedbackMessage("Todos os campos marcados com * são obrigatórios!");
+      setError(true);
+    } else if (userPassword != userPasswordConfirmation) {
+      setfeedbackMessage("As senhas devem ser iguais!");
+      setError(true);
+    }
+    else userSignup();
+      resetForm();
   };
 
   return (
@@ -30,14 +65,14 @@ export default function SignupModal({ open, 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">Cadastre-se</h1>
         <form onSubmit={handleSubmit}>
-          {errorMessage ? <Alert severity="error">{errorMessage}</Alert> : null}
+          {feedbackMessage ? <Alert severity={error ? "error" : "success"}>{feedbackMessage}</Alert> : null}
           <TextField
             fullWidth
             onChange={(e) => setUserName(e.target.value)}
             label="Nome Completo *"
             className="my-5"
             value={userName}
-            error={!userName && errorMessage}
+            error={!userName && error}
           />
           <TextField
             fullWidth
@@ -46,7 +81,7 @@ export default function SignupModal({ open, handleClose }) {
             type="email"
             className="mb-5"
             value={userEmail}
-            error={!userEmail && errorMessage}
+            error={!userEmail && error}
           />
           <TextField
             fullWidth
@@ -55,7 +90,7 @@ export default function SignupModal({ open, handleClose }) {
             label="Senha *"
             className="mb-5"
             value={userPassword}
-            error={!userPassword && errorMessage}
+            error={!userPassword && error}
           />
           <TextField
             fullWidth
@@ -64,8 +99,15 @@ export default function SignupModal({ open, handleClose }) {
             label="Confirmar senha *"
             className="mb-5"
             value={userPasswordConfirmation}
-            error={userPasswordConfirmation != userPassword && userPasswordConfirmation != ""}
-            helperText={userPasswordConfirmation && userPasswordConfirmation != userPassword && <p>As senhas devem ser iguais!</p>}
+            error={
+              userPasswordConfirmation != userPassword &&
+              userPasswordConfirmation != ""
+            }
+            helperText={
+              userPasswordConfirmation.length > 0 &&
+              userPasswordConfirmation != userPassword &&
+              helperText
+            }
           />
           <Button
             fullWidth

src/axiosConfig.js

 import axios from "axios";
 
 const mecredApi = axios.create({
-    baseURL: 'https://api.portalmec.c3sl.ufpr.br/v1',
+    baseURL: 'https://api.portalmechomologa.c3sl.ufpr.br/v1',
     timeout: 1000
 })