worldshine-redesign/client/src/components/login/Login.js

import React, {useEffect, useState} from "react";
import {AuthService} from './../../services';
import { useNavigate } from "react-router-dom";

const Login = ({ setMenu}) => {

  const getLogoSuffix = () => {
    return (window.location.hostname.includes('worldshine2.mayo.llc') || window.location.hostname.includes('site2') || window.location.host.includes('ws2') ||window.location.hostname.includes('localhost')) ? "Care LLC" : ((window.location.hostname.includes('worldshine3.mayo.llc') ||window.location.hostname.includes('site3') || window.location.hostname.includes('ws3')) ? "Cloverleaf LLC" : "International LLC");
  }
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const navigate = useNavigate();
  useEffect(() => {
    if (localStorage.getItem('user') && localStorage.getItem('token')) {
      if (AuthService.canAccessLegacySystem()) {
        navigate(`/landing`);
      } else {
        navigate(`/admin`);
      }
    }
  }, []);
  const loginAndRedirect = () => {
    AuthService.login({
      emailUsername: username,
      password
    }).then(({data}) => {
      localStorage.setItem('token', data.accessToken);
      localStorage.setItem('user', JSON.stringify(data));
      if (AuthService.canAccessLegacySystem()) {
        navigate(`/landing`);
      } 
      // else {
      //   navigate(`/admin`);
      // }
      // navigate(`/admin`);
      setMenu();
    }).catch((error) => {
      window.alert(error?.response?.data?.message);
      console.log(error);
    })
  };
  return (
    <div className="container container-fixed">
      <div className="login">
        <div className="logo-container"><img class="login-logo" src="/images/logo-trans.png" /><strong className="logo-worldshine">Worldshine</strong><span className="logo-suffix">{getLogoSuffix()}</span></div>
        <div className="login-container mt-4">
          <div className="login-items">
            <div>
              <h6>Sign In</h6>
            </div>
            <div className="mb-2">
              <label for="username">Email/Username</label>
            </div>
            <div className="mb-2">
              <input id="username" name="username" type="text" placeholder="e.g. example@worldshine.com" value={username} onChange={(e) => setUsername(e.currentTarget.value)}></input>
            </div>
            <div className="mb-2">
              <label for="password">Password</label>
            </div>
            <div className="mb-2">
              <input id="password" name="password" type="password" placeholder="e.g. Password@123!" value={password} onChange={(e) => setPassword(e.currentTarget.value)}></input>
            </div>
            <div className="mb-4">
              <div class="login-disclaimer">Forgot password? Please contact your supervisor.</div>
            </div>
            <div className="mb-2">
              <button className="btn btn-primary btn-login" onClick={() => loginAndRedirect()}>Sign In</button>
            </div>
          </div>
        
        </div>
      </div>
    </div>
  );
};

export default Login;