set dev credentials
parent
a6941afdf1
commit
34f455ded2
|
|
@ -7,7 +7,7 @@ import {
|
|||
Tabs,
|
||||
Tab,
|
||||
TextField,
|
||||
Fade,
|
||||
Fade
|
||||
} from "@material-ui/core";
|
||||
import { withRouter } from "react-router-dom";
|
||||
import classnames from "classnames";
|
||||
|
|
@ -33,8 +33,8 @@ function Login(props) {
|
|||
var [error, setError] = useState(null);
|
||||
var [activeTabId, setActiveTabId] = useState(0);
|
||||
var [nameValue, setNameValue] = useState("");
|
||||
var [loginValue, setLoginValue] = useState("admin@flatlogic.com");
|
||||
var [passwordValue, setPasswordValue] = useState("password");
|
||||
var [loginValue, setLoginValue] = useState(***REMOVED***);
|
||||
var [passwordValue, setPasswordValue] = useState("***REMOVED***");
|
||||
|
||||
return (
|
||||
<Grid container className={classes.container}>
|
||||
|
|
@ -78,11 +78,11 @@ function Login(props) {
|
|||
InputProps={{
|
||||
classes: {
|
||||
underline: classes.textFieldUnderline,
|
||||
input: classes.textField,
|
||||
},
|
||||
input: classes.textField
|
||||
}
|
||||
}}
|
||||
value={loginValue}
|
||||
onChange={e => setLoginValue(e.target.value)}
|
||||
onChange={(e) => setLoginValue(e.target.value)}
|
||||
margin="normal"
|
||||
placeholder="Email Adress"
|
||||
type="email"
|
||||
|
|
@ -93,11 +93,11 @@ function Login(props) {
|
|||
InputProps={{
|
||||
classes: {
|
||||
underline: classes.textFieldUnderline,
|
||||
input: classes.textField,
|
||||
},
|
||||
input: classes.textField
|
||||
}
|
||||
}}
|
||||
value={passwordValue}
|
||||
onChange={e => setPasswordValue(e.target.value)}
|
||||
onChange={(e) => setPasswordValue(e.target.value)}
|
||||
margin="normal"
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
|
|
@ -118,7 +118,7 @@ function Login(props) {
|
|||
passwordValue,
|
||||
props.history,
|
||||
setIsLoading,
|
||||
setError,
|
||||
setError
|
||||
)
|
||||
}
|
||||
variant="contained"
|
||||
|
|
@ -156,11 +156,11 @@ function Login(props) {
|
|||
InputProps={{
|
||||
classes: {
|
||||
underline: classes.textFieldUnderline,
|
||||
input: classes.textField,
|
||||
},
|
||||
input: classes.textField
|
||||
}
|
||||
}}
|
||||
value={nameValue}
|
||||
onChange={e => setNameValue(e.target.value)}
|
||||
onChange={(e) => setNameValue(e.target.value)}
|
||||
margin="normal"
|
||||
placeholder="Full Name"
|
||||
type="text"
|
||||
|
|
@ -171,11 +171,11 @@ function Login(props) {
|
|||
InputProps={{
|
||||
classes: {
|
||||
underline: classes.textFieldUnderline,
|
||||
input: classes.textField,
|
||||
},
|
||||
input: classes.textField
|
||||
}
|
||||
}}
|
||||
value={loginValue}
|
||||
onChange={e => setLoginValue(e.target.value)}
|
||||
onChange={(e) => setLoginValue(e.target.value)}
|
||||
margin="normal"
|
||||
placeholder="Email Adress"
|
||||
type="email"
|
||||
|
|
@ -186,11 +186,11 @@ function Login(props) {
|
|||
InputProps={{
|
||||
classes: {
|
||||
underline: classes.textFieldUnderline,
|
||||
input: classes.textField,
|
||||
},
|
||||
input: classes.textField
|
||||
}
|
||||
}}
|
||||
value={passwordValue}
|
||||
onChange={e => setPasswordValue(e.target.value)}
|
||||
onChange={(e) => setPasswordValue(e.target.value)}
|
||||
margin="normal"
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
|
|
@ -208,7 +208,7 @@ function Login(props) {
|
|||
passwordValue,
|
||||
props.history,
|
||||
setIsLoading,
|
||||
setError,
|
||||
setError
|
||||
)
|
||||
}
|
||||
disabled={
|
||||
|
|
@ -235,7 +235,7 @@ function Login(props) {
|
|||
size="large"
|
||||
className={classnames(
|
||||
classes.googleButton,
|
||||
classes.googleButtonCreating,
|
||||
classes.googleButtonCreating
|
||||
)}
|
||||
>
|
||||
<img src={google} alt="google" className={classes.googleIcon} />
|
||||
|
|
@ -245,7 +245,16 @@ function Login(props) {
|
|||
)}
|
||||
</div>
|
||||
<Typography color="primary" className={classes.copyright}>
|
||||
© 2014-{new Date().getFullYear()} <a style={{ textDecoration: 'none', color: 'inherit' }} href="https://flatlogic.com" rel="noopener noreferrer" target="_blank">Flatlogic</a>, LLC. All rights reserved.
|
||||
© 2014-{new Date().getFullYear()}{" "}
|
||||
<a
|
||||
style={{ textDecoration: "none", color: "inherit" }}
|
||||
href="https://flatlogic.com"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Flatlogic
|
||||
</a>
|
||||
, LLC. All rights reserved.
|
||||
</Typography>
|
||||
</div>
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -1,112 +0,0 @@
|
|||
import React from "react";
|
||||
import { withStyles } from "@material-ui/core";
|
||||
import { compose, withState, withHandlers } from "recompose";
|
||||
import { toast } from "react-toastify";
|
||||
|
||||
import Notification from "../../components/Notification";
|
||||
import NotificationsView from "./NotificationsView";
|
||||
|
||||
const positions = [
|
||||
toast.POSITION.TOP_LEFT,
|
||||
toast.POSITION.TOP_CENTER,
|
||||
toast.POSITION.TOP_RIGHT,
|
||||
toast.POSITION.BOTTOM_LEFT,
|
||||
toast.POSITION.BOTTOM_CENTER,
|
||||
toast.POSITION.BOTTOM_RIGHT
|
||||
];
|
||||
|
||||
export default compose(
|
||||
withStyles((theme) => ({
|
||||
/*progress: {
|
||||
visibility: "hidden"
|
||||
},
|
||||
notification: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
background: "transparent",
|
||||
boxShadow: "none",
|
||||
overflow: "visible"
|
||||
},
|
||||
notificationComponent: {
|
||||
paddingRight: theme.spacing.unit * 4
|
||||
}*/
|
||||
})),
|
||||
withState("notificationsPosition", "setNotificationPosition", 2),
|
||||
withState("errorToastId", "setErrorToastId", null),
|
||||
withHandlers({
|
||||
sendNotification: (props) => (componentProps, options) => {
|
||||
return toast(
|
||||
<Notification
|
||||
{...componentProps}
|
||||
className={props.classes.notificationComponent}
|
||||
/>,
|
||||
options
|
||||
);
|
||||
}
|
||||
}),
|
||||
withHandlers({
|
||||
retryErrorNotification: (props) => () => {
|
||||
const componentProps = {
|
||||
type: "message",
|
||||
message: "Message was sent successfully!",
|
||||
variant: "contained",
|
||||
color: "success"
|
||||
};
|
||||
|
||||
toast.update(props.errorToastId, {
|
||||
render: <Notification {...componentProps} />,
|
||||
type: "success"
|
||||
});
|
||||
props.setErrorToastId(null);
|
||||
}
|
||||
}),
|
||||
withHandlers({
|
||||
handleNotificationCall: (props) => (notificationType) => {
|
||||
let componentProps;
|
||||
|
||||
if (props.errorToastId && notificationType === "error") return;
|
||||
|
||||
switch (notificationType) {
|
||||
case "info":
|
||||
componentProps = {
|
||||
type: "feedback",
|
||||
message: "New user feedback received",
|
||||
variant: "contained",
|
||||
color: "primary"
|
||||
};
|
||||
break;
|
||||
case "error":
|
||||
componentProps = {
|
||||
type: "message",
|
||||
message: "Message was not sent!",
|
||||
variant: "contained",
|
||||
color: "secondary",
|
||||
extraButton: "Resend",
|
||||
extraButtonClick: props.retryErrorNotification
|
||||
};
|
||||
break;
|
||||
default:
|
||||
componentProps = {
|
||||
type: "shipped",
|
||||
message: "The item was shipped",
|
||||
variant: "contained",
|
||||
color: "success"
|
||||
};
|
||||
}
|
||||
|
||||
const toastId = props.sendNotification(componentProps, {
|
||||
type: notificationType,
|
||||
position: positions[props.notificationsPosition],
|
||||
progressClassName: props.classes.progress,
|
||||
onClose:
|
||||
notificationType === "error" && (() => props.setErrorToastId(null)),
|
||||
className: props.classes.notification
|
||||
});
|
||||
|
||||
if (notificationType === "error") props.setErrorToastId(toastId);
|
||||
},
|
||||
changeNotificationPosition: (props) => (positionId) => {
|
||||
props.setNotificationPosition(positionId);
|
||||
}
|
||||
})
|
||||
)(NotificationsView);
|
||||
|
|
@ -1,365 +0,0 @@
|
|||
import React from "react";
|
||||
import { Grid, withStyles } from "@material-ui/core";
|
||||
import { Close as CloseIcon } from "@material-ui/icons";
|
||||
import classnames from "classnames";
|
||||
import { ToastContainer } from "react-toastify";
|
||||
import SyntaxHighlighter from "react-syntax-highlighter";
|
||||
import { docco } from "react-syntax-highlighter/dist/esm/styles/hljs";
|
||||
import tinycolor from "tinycolor2";
|
||||
import "react-toastify/dist/ReactToastify.css";
|
||||
|
||||
import Widget from "../../components/Widget";
|
||||
import PageTitle from "../../components/PageTitle";
|
||||
import NotificationCustomComponent from "../../components/Notification";
|
||||
import { Typography, Button } from "../../components/Wrappers";
|
||||
|
||||
const CloseButton = ({ closeToast, className }) => (
|
||||
<CloseIcon className={className} onClick={closeToast} />
|
||||
);
|
||||
|
||||
const NotificationsPage = ({ classes, ...props }) => (
|
||||
<React.Fragment>
|
||||
<PageTitle title="Notifications" />
|
||||
<Grid container spacing={32}>
|
||||
<ToastContainer
|
||||
className={classes.toastsContainer}
|
||||
closeButton={
|
||||
<CloseButton className={classes.notificationCloseButton} />
|
||||
}
|
||||
closeOnClick={false}
|
||||
progressClassName={classes.notificationProgress}
|
||||
/>
|
||||
<Grid item xs={12} md={6} lg={4}>
|
||||
<Widget title="Layout Options" disableWidgetMenu>
|
||||
<Typography>
|
||||
There are few position options available for notifications. You can
|
||||
click any of them to change notifications position:
|
||||
</Typography>
|
||||
<div className={classes.layoutContainer}>
|
||||
<div className={classes.layoutButtonsRow}>
|
||||
<button
|
||||
onClick={() => props.changeNotificationPosition(0)}
|
||||
className={classnames(classes.layoutButton, {
|
||||
[classes.layoutButtonActive]:
|
||||
props.notificationsPosition === 0
|
||||
})}
|
||||
/>
|
||||
<button
|
||||
onClick={() => props.changeNotificationPosition(1)}
|
||||
className={classnames(classes.layoutButton, {
|
||||
[classes.layoutButtonActive]:
|
||||
props.notificationsPosition === 1
|
||||
})}
|
||||
/>
|
||||
<button
|
||||
onClick={() => props.changeNotificationPosition(2)}
|
||||
className={classnames(classes.layoutButton, {
|
||||
[classes.layoutButtonActive]:
|
||||
props.notificationsPosition === 2
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
<Typography className={classes.layoutText} size="md">
|
||||
Click any position
|
||||
</Typography>
|
||||
<div className={classes.layoutButtonsRow}>
|
||||
<button
|
||||
onClick={() => props.changeNotificationPosition(3)}
|
||||
className={classnames(classes.layoutButton, {
|
||||
[classes.layoutButtonActive]:
|
||||
props.notificationsPosition === 3
|
||||
})}
|
||||
/>
|
||||
<button
|
||||
onClick={() => props.changeNotificationPosition(4)}
|
||||
className={classnames(classes.layoutButton, {
|
||||
[classes.layoutButtonActive]:
|
||||
props.notificationsPosition === 4
|
||||
})}
|
||||
/>
|
||||
<button
|
||||
onClick={() => props.changeNotificationPosition(5)}
|
||||
className={classnames(classes.layoutButton, {
|
||||
[classes.layoutButtonActive]:
|
||||
props.notificationsPosition === 5
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Widget>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6} lg={4}>
|
||||
<Widget title="Notifications Types" disableWidgetMenu>
|
||||
<Typography>
|
||||
Different types of notifications for lost of use cases. Custom
|
||||
classes are also supported.
|
||||
</Typography>
|
||||
<div className={classes.buttonsContainer}>
|
||||
<Button
|
||||
variant="contained"
|
||||
colortheme="primary"
|
||||
onClick={() => props.handleNotificationCall("info")}
|
||||
className={classnames(classes.notificationCallButton)}
|
||||
>
|
||||
Info Message
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
colortheme="warning"
|
||||
onClick={() => props.handleNotificationCall("error")}
|
||||
className={classnames(classes.notificationCallButton)}
|
||||
>
|
||||
Error + Retry Message
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
colortheme="success"
|
||||
onClick={() => props.handleNotificationCall("success")}
|
||||
className={classnames(classes.notificationCallButton)}
|
||||
>
|
||||
Success Message
|
||||
</Button>
|
||||
</div>
|
||||
</Widget>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6} lg={4}>
|
||||
<Widget title="Usage" disableWidgetMenu>
|
||||
<Typography>
|
||||
Notifications are created with the help of{" "}
|
||||
<a href="https://github.com/fkhadra/react-toastify">
|
||||
react-toastify
|
||||
</a>
|
||||
</Typography>
|
||||
<div className={classes.codeContainer}>
|
||||
<SyntaxHighlighter
|
||||
className={classes.codeComponent}
|
||||
language="javascript"
|
||||
style={docco}
|
||||
>{`
|
||||
// import needed components, functions and styles
|
||||
import { ToastContainer, toast } from 'react-toastify';
|
||||
import 'react-toastify/dist/ReactToastify.css';
|
||||
|
||||
const Page = () => {
|
||||
<div>
|
||||
<ToastContainer />
|
||||
<button onClick={() => toast('Toast Message')}>
|
||||
show notification
|
||||
</button>
|
||||
</div>
|
||||
};
|
||||
`}</SyntaxHighlighter>
|
||||
<Typography variant="caption">
|
||||
For more API information refer to the library documentation
|
||||
</Typography>
|
||||
</div>
|
||||
</Widget>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6} lg={4}>
|
||||
<Widget title="Notification Types Examples" disableWidgetMenu>
|
||||
<NotificationCustomComponent
|
||||
className={classes.notificationItem}
|
||||
shadowless
|
||||
type="message"
|
||||
message="Thanks for Checking out Messenger"
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
/>
|
||||
<NotificationCustomComponent
|
||||
className={classes.notificationItem}
|
||||
shadowless
|
||||
type="feedback"
|
||||
message="New user feedback received"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
/>
|
||||
<NotificationCustomComponent
|
||||
className={classes.notificationItem}
|
||||
shadowless
|
||||
type="customer"
|
||||
message="New customer is registered"
|
||||
variant="contained"
|
||||
color="success"
|
||||
/>
|
||||
<NotificationCustomComponent
|
||||
className={classes.notificationItem}
|
||||
shadowless
|
||||
type="shipped"
|
||||
message="The order was shipped"
|
||||
variant="contained"
|
||||
color="warning"
|
||||
/>
|
||||
<NotificationCustomComponent
|
||||
className={classes.notificationItem}
|
||||
shadowless
|
||||
type="delivered"
|
||||
message="The order was delivered"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
/>
|
||||
<NotificationCustomComponent
|
||||
className={classes.notificationItem}
|
||||
shadowless
|
||||
type="defence"
|
||||
message="5 Defence alerts"
|
||||
variant="contained"
|
||||
color="info"
|
||||
/>
|
||||
</Widget>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6} lg={4}>
|
||||
<Widget title="Notification Types Examples" disableWidgetMenu>
|
||||
<NotificationCustomComponent
|
||||
className={classes.notificationItem}
|
||||
type="report"
|
||||
message="New report has been received"
|
||||
color="secondary"
|
||||
/>
|
||||
<NotificationCustomComponent
|
||||
className={classes.notificationItem}
|
||||
type="feedback"
|
||||
message="New user feedback received"
|
||||
color="primary"
|
||||
/>
|
||||
<NotificationCustomComponent
|
||||
className={classes.notificationItem}
|
||||
type="shipped"
|
||||
message="The item was shipped"
|
||||
color="success"
|
||||
/>
|
||||
<NotificationCustomComponent
|
||||
className={classes.notificationItem}
|
||||
type="message"
|
||||
message="The new message from user @nahawaii"
|
||||
color="warning"
|
||||
/>
|
||||
<NotificationCustomComponent
|
||||
className={classes.notificationItem}
|
||||
type="upload"
|
||||
message="Your file is ready to upload"
|
||||
color="primary"
|
||||
/>
|
||||
<NotificationCustomComponent
|
||||
className={classes.notificationItem}
|
||||
type="disc"
|
||||
message="The disc is full"
|
||||
color="info"
|
||||
/>
|
||||
</Widget>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6} lg={4}>
|
||||
<Widget title="Notification Types Examples" disableWidgetMenu>
|
||||
<NotificationCustomComponent
|
||||
className={classes.notificationItem}
|
||||
type="report"
|
||||
message="New report has been received"
|
||||
variant="rounded"
|
||||
color="secondary"
|
||||
/>
|
||||
<NotificationCustomComponent
|
||||
className={classes.notificationItem}
|
||||
type="feedback"
|
||||
message="New user feedback received"
|
||||
variant="rounded"
|
||||
color="primary"
|
||||
/>
|
||||
<NotificationCustomComponent
|
||||
className={classes.notificationItem}
|
||||
type="shipped"
|
||||
message="The item was shipped"
|
||||
variant="rounded"
|
||||
color="success"
|
||||
/>
|
||||
<NotificationCustomComponent
|
||||
className={classes.notificationItem}
|
||||
type="message"
|
||||
message="The new message from user @nahawaii"
|
||||
variant="rounded"
|
||||
color="warning"
|
||||
/>
|
||||
<NotificationCustomComponent
|
||||
className={classes.notificationItem}
|
||||
type="upload"
|
||||
message="Your file is ready to upload"
|
||||
variant="rounded"
|
||||
color="primary"
|
||||
/>
|
||||
<NotificationCustomComponent
|
||||
className={classes.notificationItem}
|
||||
type="disc"
|
||||
message="The disc is full"
|
||||
variant="rounded"
|
||||
color="info"
|
||||
/>
|
||||
</Widget>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
const styles = (theme) => ({
|
||||
layoutContainer: {
|
||||
height: 200,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginTop: theme.spacing.unit * 2,
|
||||
border: "1px dashed",
|
||||
borderColor: theme.palette.primary.main,
|
||||
position: "relative"
|
||||
},
|
||||
layoutText: {
|
||||
color: tinycolor(theme.palette.background.light).darken().toHexString()
|
||||
},
|
||||
layoutButtonsRow: {
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "space-between"
|
||||
},
|
||||
layoutButton: {
|
||||
backgroundColor: theme.palette.background.light,
|
||||
width: 125,
|
||||
height: 50,
|
||||
outline: "none",
|
||||
border: "none"
|
||||
},
|
||||
layoutButtonActive: {
|
||||
backgroundColor: tinycolor(theme.palette.background.light)
|
||||
.darken()
|
||||
.toHexString()
|
||||
},
|
||||
buttonsContainer: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
marginTop: theme.spacing.unit * 2
|
||||
},
|
||||
notificationCallButton: {
|
||||
color: "white",
|
||||
marginBottom: theme.spacing.unit,
|
||||
textTransform: "none"
|
||||
},
|
||||
codeContainer: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
marginTop: theme.spacing.unit * 2
|
||||
},
|
||||
codeComponent: {
|
||||
flexGrow: 1
|
||||
},
|
||||
notificationItem: {
|
||||
marginTop: theme.spacing.unit * 2
|
||||
},
|
||||
notificationCloseButton: {
|
||||
position: "absolute",
|
||||
right: theme.spacing.unit * 2
|
||||
},
|
||||
toastsContainer: {
|
||||
width: 400,
|
||||
marginTop: theme.spacing.unit * 6,
|
||||
right: 0
|
||||
}
|
||||
});
|
||||
|
||||
export default withStyles(styles, { withTheme: true })(NotificationsPage);
|
||||
Loading…
Reference in New Issue