djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add dialog component

Browse source
This commit is contained in:
dominik-zeglen 2019-12-03 17:30:37 +01:00
parent 1a2f8727a8
commit a6f425ef39
3 changed files with 133 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

113
src/staff/components/StaffPasswordResetDialog/StaffPasswordResetDialog.tsx Normal file
View file

@ -0,0 +1,113 @@
import React from "react";
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 TextField from "@material-ui/core/TextField";
import DialogTitle from "@material-ui/core/DialogTitle";
import { FormattedMessage, useIntl } from "react-intl";
import { DialogProps, UserError } from "@saleor/types";
import { buttonMessages } from "@saleor/intl";
import Form from "@saleor/components/Form";
import ConfirmButton, {
ConfirmButtonTransitionState
} from "@saleor/components/ConfirmButton";
import FormSpacer from "@saleor/components/FormSpacer";
interface StaffPasswordResetDialogFormData {
password: string;
previousPassword: string;
}
export interface StaffPasswordResetDialogProps extends DialogProps {
confirmButtonState: ConfirmButtonTransitionState;
errors: UserError[];
onSubmit: (password: string) => void;
}
const initialForm: StaffPasswordResetDialogFormData = {
password: "",
previousPassword: ""
};
const StaffPasswordResetDialog: React.FC<StaffPasswordResetDialogProps> = ({
confirmButtonState,
errors: apiErrors,
open,
onClose,
onSubmit
}) => {
const intl = useIntl();
return (
<Dialog onClose={onClose} open={open} fullWidth maxWidth="sm">
<DialogTitle>
<FormattedMessage
defaultMessage="Assign Collection"
description="dialog header"
/>
</DialogTitle>
<Form
errors={apiErrors}
initial={initialForm}
onSubmit={data => onSubmit(data.password)}
>
{({ change, data, errors, submit }) => (
<>
<DialogContent>
<TextField
error={!!errors.previousPassword}
fullWidth
helperText={errors.previousPassword}
label={intl.formatMessage({
defaultMessage: "Previous Password",
description: "input label"
})}
name="previousPassword"
type="password"
onChange={change}
/>
<FormSpacer />
<TextField
error={!!errors.password}
fullWidth
helperText={
errors.password ||
intl.formatMessage({
defaultMessage:
"New password must be at least 5 characters long"
})
}
label={intl.formatMessage({
defaultMessage: "New Password",
description: "input label"
})}
name="password"
type="password"
onChange={change}
/>
</DialogContent>
<DialogActions>
<Button onClick={onClose}>
<FormattedMessage {...buttonMessages.back} />
</Button>
<ConfirmButton
disabled={data.password.length <= 4}
transitionState={confirmButtonState}
color="primary"
variant="contained"
type="submit"
onClick={submit}
>
<FormattedMessage {...buttonMessages.save} />
</ConfirmButton>
</DialogActions>
</>
)}
</Form>
</Dialog>
);
};
StaffPasswordResetDialog.displayName = "StaffPasswordResetDialog";
export default StaffPasswordResetDialog;

2
src/staff/components/StaffPasswordResetDialog/index.ts Normal file
View file

@ -0,0 +1,2 @@
export { default } from "./StaffPasswordResetDialog";
export * from "./StaffPasswordResetDialog";

24
src/staff/views/StaffDetails.tsx
View file

@ -27,6 +27,7 @@ import {
staffMemberDetailsUrl,
StaffMemberDetailsUrlQueryParams
} from "../urls";
import StaffPasswordResetDialog from "../components/StaffPasswordResetDialog";
interface OrderListProps {
id: string;
@ -40,6 +41,14 @@ export const StaffDetails: React.FC<OrderListProps> = ({ id, params }) => {
const intl = useIntl();
const shop = useShop();
const closeModal = () =>
navigate(
staffMemberDetailsUrl(id, {
...params,
action: undefined
})
);
return (
<TypedStaffMemberDetailsQuery
displayLoader
@ -182,9 +191,7 @@ export const StaffDetails: React.FC<OrderListProps> = ({ id, params }) => {
})}
confirmButtonState={deleteTransitionState}
variant="delete"
onClose={() =>
navigate(staffMemberDetailsUrl(id))
}
onClose={closeModal}
onConfirm={deleteStaffMember}
>
<DialogContentText>
@ -204,9 +211,7 @@ export const StaffDetails: React.FC<OrderListProps> = ({ id, params }) => {
})}
confirmButtonState={deleteAvatarTransitionState}
variant="delete"
onClose={() =>
navigate(staffMemberDetailsUrl(id))
}
onClose={closeModal}
onConfirm={deleteStaffAvatar}
>
<DialogContentText>
@ -222,6 +227,13 @@ export const StaffDetails: React.FC<OrderListProps> = ({ id, params }) => {
/>
</DialogContentText>
</ActionDialog>
<StaffPasswordResetDialog
confirmButtonState="default"
errors={[]}
open={params.action === "change-password"}
onClose={closeModal}
onSubmit={() => undefined}
/>
</>
);
}}