From 181f8885e28f5c9490c3381c74396ef17bc62483 Mon Sep 17 00:00:00 2001
From: lumb19 <lumb19@inf.ufpr.br>
Date: Wed, 6 Mar 2024 11:52:02 -0300
Subject: [PATCH] Issue #26: CONNECT signup modal to api
---
src/app/login/components/LoginForm.js | 4 +-
src/app/login/components/SignupModal.js | 66 ++++++++++++++++++++-----
src/axiosConfig.js | 2 +-
3 files changed, 57 insertions(+), 15 deletions(-)
diff --git a/src/app/login/components/LoginForm.js b/src/app/login/components/LoginForm.js
index bbbe7232..963d7038 100644
--- a/src/app/login/components/LoginForm.js
+++ b/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
diff --git a/src/app/login/components/SignupModal.js b/src/app/login/components/SignupModal.js
index 263a1234..af3409e2 100644
--- a/src/app/login/components/SignupModal.js
+++ b/src/app/login/components/SignupModal.js
@@ -4,22 +4,57 @@ 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 (
<Modal
@@ -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
diff --git a/src/axiosConfig.js b/src/axiosConfig.js
index 67f46a09..3189ce56 100644
--- a/src/axiosConfig.js
+++ b/src/axiosConfig.js
@@ -1,7 +1,7 @@
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
})
--
GitLab