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';

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>:
                <Typography display="inline">
                  用戶名或密碼錯誤
                </Typography>
              }
          </Stack>
        </DialogTitle>
        <DialogContent>
          <DialogContentText id="alert-dialog-description">
            {""}
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button variant="contained" color="error" onClick={props.handleClose} autoFocus>
            關閉
          </Button>
        </DialogActions>
      </Dialog>
  );
};

export default PasswordAlertDialog;