add login page

2019-01-28 16:28:44 +07:00
parent cccca5a774
commit 52856ccca0
11 changed files with 283 additions and 1 deletions
--- a/src/common/components/Alert/AlertSuccess.js
+++ b/src/common/components/Alert/AlertSuccess.js
@@ -0,0 +1,109 @@
+import React from 'react';
+import withStyles from "@material-ui/core/styles/withStyles";
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import Zoom from '@material-ui/core/Zoom';
+import Typography from "@material-ui/core/Typography/Typography";
+import {inject, observer} from "mobx-react";
+import withMobileDialog from '@material-ui/core/withMobileDialog';
+
+function Transition(props) {
+    return <Zoom in={true} {...props} />;
+}
+
+@inject('store')
+@observer
+class AlertSuccess extends React.Component{
+    // state = {
+    //     open: this.props.open,
+    //     callback : this.props.onClose
+    // };
+
+    constructor(props){
+        super(props);
+        this.global_ui = props.store.global_ui;
+    }
+
+    // componentDidUpdate(prevProps){
+    //     if (this.props.open !== prevProps.open) {
+    //         this.setState({open : this.props.open});
+    //     }
+    // }
+
+    handleClose = () => {
+        this.global_ui.closeAlert();
+    };
+
+    onActionClick = async ()=>{
+        if(typeof this.global_ui.successAlertCB === 'function') {
+            let cbResult = this.global_ui.successAlertCB();
+            if(cbResult && cbResult.then && typeof cbResult.then === 'function'){
+                await cbResult
+            }
+        }
+        this.global_ui.closeAlert()
+    };
+
+    renderIcon = (type)=>{
+        if(type === 'success'){
+            return <img src={require('../../../../assets/images/login/success_new.gif')}/>
+        }
+        else {
+            return (<Zoom in={true}>
+                <img src={require('../../../../assets/images/login/error.png')} width={"30%"} style={{transitionDelay: '2000ms',marginBottom : 20}}/>
+            </Zoom>)
+        }
+    };
+
+    render() {
+            let actions = this.props.actions.length ? this.props.actions : [<Button onClick={this.onActionClick} color="primary">Ok</Button>];
+            const { fullScreen } = this.props;
+            return (
+            <Dialog
+                open={this.global_ui.alertDialog.open}
+                TransitionComponent={Transition}
+                keepMounted
+                fullWidth
+                fullScreen={fullScreen}
+                onClose={this.handleClose}
+                aria-labelledby="alert-dialog-slide-title"
+                aria-describedby="alert-dialog-slide-description"
+                disableBackdropClick
+                disableEscapeKeyDown
+            >
+                        <DialogContent style={{display:'flex',alignItems : 'center',justifyContent : 'center',flexDirection : 'column'}}>
+                                {
+                                    this.renderIcon(this.global_ui.alertDialog.type)
+                                }
+
+                                <Typography variant={"h6"} gutterBottom={true}>
+                                    {this.global_ui.alertDialog.title}
+                                </Typography>
+                                <Typography variant={"subtitle2"} gutterBottom={true}>
+                                    {this.global_ui.alertDialog.subtitle}
+                                </Typography>
+                        </DialogContent>
+                <DialogActions>
+                    {
+                        actions.map(it=>it)
+                    }
+                </DialogActions>
+            </Dialog>
+        );
+    }
+}
+
+AlertSuccess.defaultProps = {
+    open : false,
+    title : 'Alert',
+    subtitle : '',
+    onClose : ()=>{},
+    actions : [],
+    type : 'error'
+};
+
+export default withMobileDialog()(AlertSuccess);