Untitled
unknown
plain_text
7 months ago
5.5 kB
3
Indexable
Never
// Login.jsx import React, { useState } from 'react'; import axios from 'axios'; import { Formik, Form, Field, ErrorMessage } from 'formik'; import { Button } from '@mui/material'; import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; import './Login.css'; import { useNavigate } from 'react-router-dom'; import { login_check } from '../API_FILE/apis'; const Login = () => { const navigate = useNavigate(); const notifyError = (message) => toast.error(message); const notifySuccess = (message) => toast.success(message); const handleLogin = async (values) => { try { const response = await axios.get(login_check(values.email, values.password)); const email = values.email; const password = values.password; if (response.data === true) { sessionStorage.setItem('email', email); sessionStorage.setItem('password', password); const storedEmail = sessionStorage.getItem('email'); notifySuccess("Logged in successfully."); setTimeout(() => navigate(`/${storedEmail}`), 1000); } else { notifyError('Invalid email or password. Please try again.'); } } catch (error) { console.error('Error logging in:', error); notifyError('An error occurred while logging in. Please try again later.'); } }; return ( <div className={`app app--is-${mode}`}> <div className="form-block-wrapper form-block-wrapper--is-login"></div> <section className="form-block form-block--is-login"> <header className="form-block__header"> <h1>Welcome back!</h1> <div className="form-block__toggle-block"> <span>Don't have an account? Click here →</span> <input id="form-toggler" type="checkbox" onClick={toggleMode.bind(this)} /> <label htmlFor="form-toggler"></label> </div> </header> <div className="login-card"> <Formik initialValues={{ email: '', password: '' }} onSubmit={(values) => handleLogin(values)} > <Form> <div className="form-block__input-wrapper"> <div className="form-group form-group--login"> <Input type="text" id="username" label="user name" disabled={false}/> <Input type="password" id="password" label="password" disabled={false}/> </div> </div> <Button variant='contained' type="submit" className='button button--primary full-width'>Login</Button> </Form> </Formik> </div> </section> </div> ); }; const Input = ({ id, type, label, disabled }) => ( <input className="form-group__input" type={type} id={id} placeholder={label} disabled={disabled}/> ); export default Login; import React from 'react'; import { Formik, Form, Field, ErrorMessage } from 'formik'; import axios from 'axios'; import { Button } from '@mui/material'; import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; import './Signup.css'; import { useNavigate } from 'react-router-dom'; import { signup } from '../API_FILE/apis'; const Signup = () => { const notifyError = (message) => toast.error(message); const notifySuccess = (message) => toast.success(message); const navigate = useNavigate(); const handleSignup = async (values) => { try { const response = await axios.post(signup(values.username, values.password, values.email, values.city)); console.log(response); if (response.status === 200) { notifySuccess('Sign Up Successful'); } navigate('/Login'); } catch (error) { console.error('Error signing up:', error); notifyError('An error occurred while signing up. Please try again later.'); } }; return ( <div className="signup-container"> <div className="container"> <ToastContainer /> <div className="signup-card"> <Formik initialValues={{ username: '', password: '', email: '', city: '' }} onSubmit={(values) => handleSignup(values)} > <Form> <h2>Sign Up</h2> <div className="input-group"> <label className='font-heading'>Username:</label> <Field type="text" name="username" /> <ErrorMessage name="username" component="div" className="error" /> </div> <div className="input-group"> <label className='font-heading'>Password:</label> <Field type="password" name="password" /> <ErrorMessage name="password" component="div" className="error" /> </div> <div className="input-group"> <label className='font-heading'>Email:</label> <Field type="email" name="email" /> <ErrorMessage name="email" component="div" className="error" /> </div> <div className="input-group"> <label className='font-heading'>City:</label> <Field type="text" name="city" /> <ErrorMessage name="city" component="div" className="error" /> </div> <Button variant='contained' type="submit">Sign Up</Button> </Form> </Formik> </div> </div> </div> ); }; export default Signup;
Leave a Comment