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

import React, {
  // useEffect,
  // useState
} from 'react';

// material-ui
import {
  Button,
  // Link,
  Stack,
  Typography,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle
} from '@mui/material';
import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';
import {FormattedMessage} from "react-intl";

const PasswordAlertDialog = (props) => {
  return (
    <Dialog
      open={props.open}
      onClose={props.handleClose}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
    >
      <DialogTitle id="alert-dialog-title">
        <Stack mt={1} mr={4} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
          <CancelOutlinedIcon color="error" sx={{ width: "35px", height: "40px" }} />
          {props.errorMassage === 'ACCOUNT_LOCKED_ERROR' ?
            <Stack direction="column">
              <Typography display="inline">
                帳戶將被封鎖
              </Typography>
              <Typography display="inline">
                帳戶連續五次登入錯誤,請與系統管理員聯絡
              </Typography>
            </Stack> :
            props.errorMassage === 'ACCOUNT_VERIFIED_ERROR' ?
              <Typography display="inline">
                帳戶尚未驗證
              </Typography> :
              <Typography display="inline">
                用戶名或密碼錯誤
              </Typography>
          }
        </Stack>
      </DialogTitle>
      <DialogContent>
        <DialogContentText id="alert-dialog-description">
          {""}
        </DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button variant="contained" color="error" onClick={props.handleClose} autoFocus>
          <FormattedMessage id="close"/>
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default PasswordAlertDialog;