Add dialog component

src/staff/components/StaffPasswordResetDialog/StaffPasswordResetDialog.tsx

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

src/staff/components/StaffPasswordResetDialog/index.ts

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

src/staff/views/StaffDetails.tsx

@@ -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={() =>
+                                onClose={closeModal}
-                                  navigate(staffMemberDetailsUrl(id))
-                                }
                                 onConfirm={deleteStaffMember}
                               >
                                 <DialogContentText>
@@ -204,9 +211,7 @@ export const StaffDetails: React.FC<OrderListProps> = ({ id, params }) => {
                                 })}
                                 confirmButtonState={deleteAvatarTransitionState}
                                 variant="delete"
-                                onClose={() =>
+                                onClose={closeModal}
-                                  navigate(staffMemberDetailsUrl(id))
-                                }
                                 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}
+                              />
                             </>
                           );
                         }}