pages/index.js
// Popup that appears when a user clicks the Login Button
Popup that appears when a user clicks the Login Button
Popup that appears when a user clicks the Login Button
function LoginPopup({ isVisible, toggleLoginPopup }) {
  const [loading, setLoading] = useState(false);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [showError, setShowError] = useState(false);
  const lang = useSelector((state) => state.lang);
  const isAuth = useSelector((state) => state.auth.isAuthenticated);
  const dispatch = useDispatch();
  const router = useRouter();
  const validationSchema = Yup.object().shape({
    email: Yup.string()
      .email("*enter a valid mail")
      .required("*please enter your email"),
    password: Yup.string().required("*please enter your password"),
  });
  const validationSchemaGerman = Yup.object().shape({
    email: Yup.string()
      .email("*gib eine valide Mailadresse an")
      .required("*bitte gib deine Email an"),
    password: Yup.string().required("*bitte gib dein Passwort ein"),
  });
  const onClose = () => toggleLoginPopup(false);
  if (isVisible) {
    return (
      <div className={styles.popup}>
        {loading ? <CenterSpinner /> : <></>}
        <div className={styles.popup_inner}>
          {showError ? (
            <>
              <Alert
                className='alertInPopup'
                variant='danger'
                onClose={() => setShowError(false)}
                dismissible>
                <Alert.Heading>Ups!</Alert.Heading>
                {lang === "eng" ? (
                  <p>Email or password is wrong.</p>
                ) : (
                  <p>Email oder Passwort ist falsch.</p>
                )}
              </Alert>
            </>
          ) : (
            <></>
          )}
          <Formik
            initialValues={{ email: "", password: "" }}
            validationSchema={
              lang === "eng" ? validationSchema : validationSchemaGerman
            }
            onSubmit={(values, { setSubmitting, resetForm }) => {
              setSubmitting(true);
              fetch(userLoginPostUrl, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                credentials: "include",
                body: JSON.stringify(values),
              })
                .then((res) => {
                  if (res.ok) {
                    res.json().then((result) => {
                      resetForm();
                      dispatch(loginUser(result.jwt));
                      console.log("Login: Success");
                      setLoading(true);
                      router.push("/user");
                    });
                  } else {
                    throw new Error("Something went wrong");
                  }
                })
                .catch((err) => {
                  resetForm();
                  setShowError(true);
                  console.log("Login: Denied");
                  console.log(err.message);
                });
            }}>
            {}
            {({
              values,
              errors,
              touched,
              handleChange,
              handleBlur,
              handleSubmit,
              isSubmitting,
            }) => (
              <Form onSubmit={handleSubmit} className='mx-auto'>
                <Form.Group className='form-group' controlId='formEmail'>
                  <Form.Label>Email:</Form.Label>
                  <Form.Control
                    type='text'
                    name='email'
                    placeholder=''
                    onChange={handleChange}
                    onBlur={handleBlur}
                    value={values.email}
                    className={
                      touched.email && errors.email ? "errorForm" : null
                    }
                  />
                  {touched.email && errors.email ? (
                    <div className='errorForm-message'>{errors.email}</div>
                  ) : null}
                </Form.Group>
                <Form.Group
                  className='form-group'
                  controlId='formBasicPassword'>
                  <Form.Label>
                    {lang === "eng" ? "Password:" : "Passwort:"}
                  </Form.Label>
                  <Form.Control
                    type='password'
                    placeholder=''
                    name='password'
                    onChange={handleChange}
                    onBlur={handleBlur}
                    value={values.password}
                    className={
                      touched.password && errors.password ? "errorForm" : null
                    }
                  />
                  {touched.password && errors.password ? (
                    <div className='errorForm-message'>{errors.password}</div>
                  ) : null}
                </Form.Group>
                <BootstrapButton
                  className='form-group'
                  variant='secondary'
                  type='submit'
                  disabled={isSubmitting}>
                  Login
                </BootstrapButton>
              </Form>
            )}
          </Formik>
          <button className={styles.popupCloseButton} onClick={() => onClose()}>
            <FontAwesomeIcon className={styles.closeIcon} icon={faTimes} />
          </button>
        </div>
      </div>
    );
  } else {
    return <React.Fragment />;
  }
}
function LoginPopup ( { isVisible , toggleLoginPopup } ) { const [ loading , setLoading ] = useState ( false ) ; const [ email , setEmail ] = useState ( "" ) ; const [ password , setPassword ] = useState ( "" ) ; const [ showError , setShowError ] = useState ( false ) ; const lang = useSelector ( ( state ) => state . lang ) ; const isAuth = useSelector ( ( state ) => state . auth . isAuthenticated ) ; const dispatch = useDispatch ( ) ; const router = useRouter ( ) ; const validationSchema = Yup . object ( ) . shape ( { email : Yup . string ( ) . email ( "*enter a valid mail" ) . required ( "*please enter your email" ) , password : Yup . string ( ) . required ( "*please enter your password" ) , } ) ; const validationSchemaGerman = Yup . object ( ) . shape ( { email : Yup . string ( ) . email ( "*gib eine valide Mailadresse an" ) . required ( "*bitte gib deine Email an" ) , password : Yup . string ( ) . required ( "*bitte gib dein Passwort ein" ) , } ) ; const onClose = ( ) => toggleLoginPopup ( false ) ; if ( isVisible ) { return ( < div className = { styles . popup } > { loading ? < CenterSpinner / > : < > < / > } < div className = { styles . popup_inner } > { showError ? ( < > < Alert className = 'alertInPopup' variant = 'danger' onClose = { ( ) => setShowError ( false ) } dismissible > < Alert . Heading > Ups! < / Alert . Heading > { lang === "eng" ? ( < p > Email or password is wrong. < / p > ) : ( < p > Email oder Passwort ist falsch. < / p > ) } < / Alert > < / > ) : ( < > < / > ) } < Formik initialValues = { { email : "" , password : "" } } validationSchema = { lang === "eng" ? validationSchema : validationSchemaGerman } onSubmit = { ( values , { setSubmitting , resetForm } ) => { setSubmitting ( true ) ; fetch ( userLoginPostUrl , { method : "POST" , headers : { "Content-Type" : "application/json" } , credentials : "include" , body : JSON . stringify ( values ) , } ) . then ( ( res ) => { if ( res . ok ) { res . json ( ) . then ( ( result ) => { resetForm ( ) ; dispatch ( loginUser ( result . jwt ) ) ; console . log ( "Login: Success" ) ; setLoading ( true ) ; router . push ( "/user" ) ; } ) ; } else { throw new Error ( "Something went wrong" ) ; } } ) . catch ( ( err ) => { resetForm ( ) ; setShowError ( true ) ; console . log ( "Login: Denied" ) ; console . log ( err . message ) ; } ) ; } } > { } { ( { values , errors , touched , handleChange , handleBlur , handleSubmit , isSubmitting , } ) => ( < Form onSubmit = { handleSubmit } className = 'mx-auto' > < Form . Group className = 'form-group' controlId = 'formEmail' > < Form . Label > Email: < / Form . Label > < Form . Control type = 'text' name = 'email' placeholder = '' onChange = { handleChange } onBlur = { handleBlur } value = { values . email } className = { touched . email && errors . email ? "errorForm" : null } / > { touched . email && errors . email ? ( < div className = 'errorForm-message' > { errors . email } < / div > ) : null } < / Form . Group > < Form . Group className = 'form-group' controlId = 'formBasicPassword' > < Form . Label > { lang === "eng" ? "Password:" : "Passwort:" } < / Form . Label > < Form . Control type = 'password' placeholder = '' name = 'password' onChange = { handleChange } onBlur = { handleBlur } value = { values . password } className = { touched . password && errors . password ? "errorForm" : null } / > { touched . password && errors . password ? ( < div className = 'errorForm-message' > { errors . password } < / div > ) : null } < / Form . Group > < BootstrapButton className = 'form-group' variant = 'secondary' type = 'submit' disabled = { isSubmitting } > 
                  Login
                 < / BootstrapButton > < / Form > ) } < / Formik > < button className = { styles . popupCloseButton } onClick = { ( ) => onClose ( ) } > < FontAwesomeIcon className = { styles . closeIcon } icon = { faTimes } / > < / button > < / div > < / div > ) ; } else { return < React . Fragment / > ; } }
Popup that appears when a user clicks the Login Button
Popup that appears when a user clicks the Login Button
// Schema for yup // Schema for yup // Hooks up our validationSchema to Formik /* Callback function containing Formik state and helpers that handle common form actions */