PNSPS-frontend-MaterialUI/src/pages/authentication/auth-forms/AuthLoginCustom.js

import {
  useEffect,
  useState,
  useRef,
  lazy,
  useContext
} from 'react';
import { Link as RouterLink } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
import { useForm, } from 'react-hook-form'
import { getBowserType, isAppBowser, iAmSmartCallbackPath } from 'auth/utils'

import * as HttpUtils from "utils/HttpUtils";
import { I_AM_SMART_PATH } from "utils/ApiPathConst";


// material-ui
import {
  Button,
  FormHelperText,
  Grid,
  Link,
  IconButton,
  InputAdornment,
  InputLabel,
  OutlinedInput,
  Stack,
  Typography
} from '@mui/material';

// third party
import * as yup from 'yup';
import { useFormik, FormikProvider } from 'formik';

import AnimateButton from 'components/@extended/AnimateButton';
import Loadable from 'components/Loadable';
const PasswordAlertDialog = Loadable(lazy(() => import('./PasswordAlertDialog')));
// assets
import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
// import axios from "axios";

import { useDispatch } from "react-redux";
import { handleLogin } from "auth/index";
import useJwt from "auth/jwt/useJwt";
import { FormattedMessage, useIntl } from "react-intl";
import { SysContext } from "components/SysSettingProvider"

import { IAmSmartButton } from "components/iAmSmartButton";
import usePageTitle from "components/usePageTitle";
const LoadingComponent = Loadable(lazy(() => import('pages/extra-pages/LoadingComponent')));

// ============================|| FIREBASE - LOGIN ||============================ //

const AuthLoginCustom = () => {
  const dispatch = useDispatch()
  const navigate = useNavigate()
  const intl = useIntl();
  const { locale } = intl;
  const { sysSetting } = useContext(SysContext);

  // Localized document title/meta on login page
  usePageTitle("login");

  const [showPassword, setShowPassword] = useState(false);
  const handleClickShowPassword = () => {
    setShowPassword(!showPassword);
  };

  const [isValid, setisValid] = useState(false);
  const [open, setOpen] = useState(false);
  const [isButtonDisabled, setIsButtonDisabled] = useState(true);
  const [errorMassage, setErrorMassage] = useState('');
  const [onLogin, setOnLogin] = useState(false);
  /** Blocks a second login before React re-renders (double-click / rapid taps). */
  const loginInFlightRef = useRef(false);

  const handleMouseDownPassword = (event) => {
    event.preventDefault();
  };

  const tryLogin = () => {
    if (isValid) {
      if (loginInFlightRef.current) {
        return;
      }
      loginInFlightRef.current = true;
      setOnLogin(true)
      useJwt
        .login({ username: values.username, password: values.password })
        .then((response) => {
          // console.log(response)
          const userData = {
            id: response.data.id,
            fullenName: response.data.name,
            fullchName: response.data.chName,
            email: response.data.email,
            type: response.data.type,
            role: response.data.role,
            abilities: response.data.abilities,
            creditor: response.data.creditor,
            locale: response.data.preferLocale,
            passwordExpiryDate: response.data.passwordExpiryDate,
            orgPaymentRecord: response.data.orgPaymentRecord,
            orgDnRecord: response.data.orgDnRecord,
            //avatar: require('src/assets/images/users/avatar-3.png').default,
          }
          const data = { ...userData, accessToken: response.data.accessToken, refreshToken: response.data.refreshToken }
          // setSuccess(true)
          // console.log(response.data);
          if (response.data.type === "GLD") {
            // setLocale("en");
            localStorage.setItem('locale', 'en');
          } else {
            if (response.data.preferLocale === "zh_HK") {
              // setLocale("zh-HK");
              localStorage.setItem('locale', 'zh-HK');
            }
            if (response.data.preferLocale === "zh-CN") {
              // setLocale("zh-CN");
              localStorage.setItem('locale', 'zh-CN');
            }
            if (response.data.preferLocale === "en") {
              // setLocale("zh-CN");
              localStorage.setItem('locale', 'en');
            }
          }
          dispatch(handleLogin(data))
          navigate('/dashboard');
          location.reload()
          // setSumitting(false)
        })
        .catch((error) => {
          // console.log(error.response)
          // setSuccess(false)
          loginInFlightRef.current = false;
          setOnLogin(false)
          if (error.response != undefined) {
            setErrorMassage(error.response.data.error)
          } else {
            setErrorMassage("CONNECTION_ERROR")
          }
          setOpen(true)
        });
    } else {
      setOpen(true)
    }
  }

  const formik = useFormik({
    initialValues: ({
      username: '',
      password: '',
      submit: null
    }),
    validationSchema: yup.object().shape({
      username: yup.string().required(intl.formatMessage({ id: 'requireUsername' })),
      password: yup.string().min(8, intl.formatMessage({ id: 'atLeast8CharPassword' })).required(intl.formatMessage({ id: 'requirePassword' }))
        .matches(/^(?=.*[a-z])/, intl.formatMessage({ id: 'atLeastOneSmallLetter' }))
        .matches(/^(?=.*[A-Z])/, intl.formatMessage({ id: 'atLeastOneCapLetter' }))
        .matches(/^(?=.*[0-9])/, intl.formatMessage({ id: 'atLeast1Number' }))
        .matches(/^(?=.*\W)/, intl.formatMessage({ id: 'atLeast1SpecialChar' })),
    }),
  });

  const checkDataField = (data) => {
    if (data.username !== "" &&
      data.password !== "" &&
      handlePassword(data.password)
      // &&handle6Digi(data.username)
    ) {
      setisValid(true)
      setIsButtonDisabled(false);
      return isValid
    } else {
      setisValid(false)
      setIsButtonDisabled(true);
      return isValid
    }
  };

  function handlePassword(password) {
    let new_pass = password;
    // regular expressions to validate password
    var lowerCase = /[a-z]/g;
    var upperCase = /[A-Z]/g;
    var numbers = /[0-9]/g;
    var symbol = /^(?=.*\W)/;
    if (!new_pass.match(lowerCase)) {
      return false;
    } else if (!new_pass.match(upperCase)) {
      return false;
    } else if (!new_pass.match(numbers)) {
      return false;
    } else if (!new_pass.match(symbol)) {
      return false;
    } else if (new_pass.length < 8) {
      return false;
    } else {
      return true;
    }
  }

  const handleClose = () => {
    setOpen(false);
  };

  const { values } = formik
  useEffect(() => {
    checkDataField(values)
  }, [values])

  const { handleSubmit } = useForm({})

  function getQRWithIAmSmart() {
    if (isAppBowser()) {
      openApp();
    } else {
      openQR();
    }
  }

  const openQR = () => {
    let callbackUrl = "https://" + iAmSmartCallbackPath() + "/iamsmart/authcallback";

    HttpUtils.get({
      url: I_AM_SMART_PATH,
      onSuccess: (responseData) => {
        let url = responseData.iAmSmartPath + "/api/v1/auth/getQR"
          + "?clientID=" + responseData.ci
          + "&responseType=code"
          + "&source=" + getBowserType()
          + "&redirectURI=" + encodeURIComponent(callbackUrl)
          + "&scope=" + encodeURIComponent("eidapi_auth eidapi_profiles")
          + "&lang=" + (locale === 'en' ? "en-US" : locale === 'zh-HK' ? "zh-HK" : "zh-CN")
          //+"&state="
          + "&brokerPage=true"
        window.location = url;
      }
    });

  }

  const openApp = () => {
    // setTimeout(function () {
    //   openQR();
    // }, 1000);
    // let callbackUrl = "https://" + iAmSmartCallbackPath() + "/iamsmart/authcallback";

    // let source = getBowserType()
    // console.log(source)
    // let url = iAmSmartAppPath + "auth"
    //   + "?clientID=" + clientId
    //   + "&responseType=code"
    //   + "&source=" + getBowserType()
    //   + "&redirectURI=" + encodeURIComponent(callbackUrl)
    //   + "&scope=" + encodeURIComponent("eidapi_auth eidapi_profiles")
    //   + "&lang=zh-HK"//en-US, zh-HK, or zh-CN
    //   //+"&state="
    //   + "&brokerPage=true"
    //   window.location=url;

    let callbackUrl = "https://" + iAmSmartCallbackPath() + "/iamsmart/authcallback";
    HttpUtils.get({
      url: I_AM_SMART_PATH,
      onSuccess: (responseData) => {
        let url = responseData.iAmSmartPath + "/api/v1/auth/getQR"
          + "?clientID=" + responseData.ci
          + "&responseType=code"
          + "&source=" + getBowserType()
          + "&redirectURI=" + encodeURIComponent(callbackUrl)
          + "&scope=" + encodeURIComponent("eidapi_auth eidapi_profiles")
          + "&lang=" + (locale === 'en' ? "en-US" : locale === 'zh-HK' ? "zh-HK" : "zh-CN")
          //+"&state="
          + "&brokerPage=true"
        window.location = url;
      }
    });

  }


  return (
    <FormikProvider value={formik}>
      <form onSubmit={handleSubmit(tryLogin)}>
        <Grid container spacing={3}>
          <Grid item xs={12}>
            <Stack spacing={1}>
              <InputLabel htmlFor="email-login">
                <Typography variant="h5">
                  <FormattedMessage id="userLoginName" />
                </Typography>
              </InputLabel>
              <OutlinedInput
                id="username"
                name="username"
                onChange={formik.handleChange}
                placeholder=""
                fullWidth
                autoFocus
                value={formik.values.username}
                error={Boolean(formik.touched.username && formik.errors.username)}
                onBlur={formik.handleBlur}
                inputProps={{
                  "aria-describedby": 'standard-weight-helper-text-username-login',
                  maxLength: 50,
                  onKeyDown: (e) => {
                    if (e.key === 'Enter') {
                      e.preventDefault();
                    }
                  },
                }}
              />
              {formik.touched.username && formik.errors.username && (
                <FormHelperText error id="standard-weight-helper-text-username-login">
                  {formik.errors.username}
                </FormHelperText>
              )}
            </Stack>
          </Grid>
          <Grid item xs={12}>
            <Stack spacing={1}>
              <InputLabel htmlFor="password-login"><Typography variant="h5">
                <FormattedMessage id="userPassword" />
              </Typography></InputLabel>
              <OutlinedInput
                fullWidth
                id="password-login"
                type={showPassword ? 'text' : 'password'}
                name="password"
                value={formik.values.password}
                onChange={formik.handleChange}
                onBlur={formik.handleBlur}
                error={Boolean(formik.touched.password && formik.errors.password)}
                endAdornment={
                  <InputAdornment position="end">
                    <IconButton
                      aria-label={intl.formatMessage({
                        id: showPassword ? "ariaHidePassword" : "ariaShowPassword"
                      })}
                      onClick={handleClickShowPassword}
                      onMouseDown={handleMouseDownPassword}
                      edge="end"
                      size="large"
                    >
                      {showPassword ? <EyeOutlined /> : <EyeInvisibleOutlined />}
                    </IconButton>
                  </InputAdornment>
                }
                placeholder=""
                inputProps={{
                  "aria-describedby": 'standard-weight-helper-text-password-login',
                }}
              />
              {formik.touched.password && formik.errors.password && (
                <FormHelperText error id="standard-weight-helper-text-password-login">
                  {formik.errors.password}
                </FormHelperText>
              )}
            </Stack>
          </Grid>

          <Grid item xs={12}>
            <Grid container>
              <Grid item xs={12}>
                <AnimateButton>
                  {onLogin ?
                    <LoadingComponent disableText={true} alignItems="center" />
                    :
                    <Button disableElevation disabled={isButtonDisabled}
                      fullWidth size="large" type="submit" variant="contained" color="primary"
                      sx={{
                        backgroundColor: "#0C489E",
                        color: "#FFFFFF",
                        "&:hover": { backgroundColor: "#093A7A" },
                        "&.Mui-disabled": {
                          background: "#bbdefb",
                          color: "#fff",
                          border: "2px solid",
                          borderColor: "#e7e7e7"
                        }
                      }}>
                      <Typography variant="h5">
                        <FormattedMessage id="login" />
                      </Typography>
                    </Button>
                  }
                </AnimateButton>
              </Grid>
              <Grid item xs={12}>
                <Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={1}>
                  <Link component={RouterLink} to="/forgot/password" color="primary" sx={{ textDecoration: "none" }}>
                    <Typography align="center" variant="h7">
                      <FormattedMessage id="forgotUserPassword" />?
                    </Typography>
                  </Link>
                  <Typography align="center" variant="h7">
                    |
                  </Typography>
                  <Link component={RouterLink} to="/forgot/username" color="primary" sx={{ textDecoration: "none" }}>
                    <Typography align="center" variant="h7">
                      <FormattedMessage id="forgotUsername" />?
                    </Typography>
                  </Link>
                </Stack>
              </Grid>
            </Grid>
          </Grid>
          {
            sysSetting?.allowRegistration ?
              <>
                <Grid item xs={12} >
                  <Grid container>
                    <Grid item xs={12}>
                      <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
                        <IAmSmartButton
                          label={intl.formatMessage({ id: "iAmSmartLogin" })}
                          onClickFun={getQRWithIAmSmart}
                          fullWidth={true}
                        />
                      </Stack>
                    </Grid>
                    <Grid item xs={12}>
                      <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
                        <Link href={intl.formatMessage({ id: "iamsmartLink" })} color="primary" sx={{ textDecoration: "none" }}>
                          <Typography align="center" variant="h7">
                            {intl.formatMessage({ id: 'learnMore' }) + " >"}
                          </Typography>
                        </Link>
                      </Stack>
                    </Grid>
                  </Grid>
                </Grid>
                <Grid item xs={12}>
                  <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
                    <Button fullWidth size="large" variant="outlined" href="/register" ><Typography variant="h5">
                      <FormattedMessage id="createOrReActivate" />
                    </Typography></Button>
                  </Stack>
                </Grid>
              </>
              :
              <></>
          }


        </Grid>
        <PasswordAlertDialog open={open} handleClose={handleClose} errorMassage={errorMassage} />
      </form>
    </FormikProvider>
  );
};

export default AuthLoginCustom;