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

import {
  useEffect,
  useState,
  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 { iAmSmartPath, clientId, getBowserType, isAppBowser, iAmSmartCallbackPath } from 'auth/utils'
//iAmSmartAppPath

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

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

// project import
//import FirebaseSocial from './FirebaseSocial';
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 { handleLogoutFunction } from 'auth/index';
import { FormattedMessage, useIntl } from "react-intl";

import {IAmSmartButton} from "components/iAmSmartButton";
// import LocaleContext from "components/I18nProvider";
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 { setLocaleFromLogin } = useContext(LocaleContext);

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

  // let [posts, setPosts] = useState([]);
  const [isValid, setisValid] = useState(false);
  const [open, setOpen] = useState(false);
  const [isButtonDisabled, setIsButtonDisabled] = useState(true);
  const [errorMassage, setErrorMassage] = useState('');
  const [onLogin, setOnLogin] = useState(false);

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

  const tryLogin = () => {
    if (isValid) {
      dispatch(handleLogoutFunction());
      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,
            //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)
          // setSuccess(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().min(6,'用戶名稱最少6位').required('請輸入用戶名稱'),
      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(/^(?=.*[!@#%&])/, 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 = /^(?=.*[!@#%&])/;
    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";
    let url = iAmSmartPath + "/api/v1/auth/getQR"
      + "?clientID=" + clientId
      + "&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=false"
    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";
    let url = iAmSmartPath + "/api/v1/auth/getQR"
      + "?clientID=" + clientId
      + "&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={{
                  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="toggle password visibility"
                      onClick={handleClickShowPassword}
                      onMouseDown={handleMouseDownPassword}
                      edge="end"
                      size="large"
                    >
                      {showPassword ? <EyeOutlined /> : <EyeInvisibleOutlined />}
                    </IconButton>
                  </InputAdornment>
                }
                placeholder=""
              />
              {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={{
                        "&.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>
          <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;