Untitled

// 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 &#8594;</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;