From 1a2f8727a8abc2d3520fa2c17147a547e08d7758 Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Tue, 3 Dec 2019 17:14:30 +0100
Subject: [PATCH] Add password reset card

---
 .../StaffDetailsPage/StaffDetailsPage.tsx     |  9 ++++
 .../StaffPassword/StaffPassword.tsx           | 43 +++++++++++++++++++
 src/staff/components/StaffPassword/index.ts   |  2 +
 src/staff/urls.ts                             |  5 ++-
 src/staff/views/StaffDetails.tsx              |  7 +++
 5 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 src/staff/components/StaffPassword/StaffPassword.tsx
 create mode 100644 src/staff/components/StaffPassword/index.ts

diff --git a/src/staff/components/StaffDetailsPage/StaffDetailsPage.tsx b/src/staff/components/StaffDetailsPage/StaffDetailsPage.tsx
index f8e1d9b80..dfb3ae516 100644
--- a/src/staff/components/StaffDetailsPage/StaffDetailsPage.tsx
+++ b/src/staff/components/StaffDetailsPage/StaffDetailsPage.tsx
@@ -19,6 +19,7 @@ import { PermissionEnum } from "../../../types/globalTypes";
 import { StaffMemberDetails_user } from "../../types/StaffMemberDetails";
 import StaffPreferences from "../StaffPreferences";
 import StaffProperties from "../StaffProperties/StaffProperties";
+import StaffPassword from "../StaffPassword/StaffPassword";
 
 interface FormData {
   hasFullAccess: boolean;
@@ -39,6 +40,7 @@ export interface StaffDetailsPageProps {
   saveButtonBarState: ConfirmButtonTransitionState;
   staffMember: StaffMemberDetails_user;
   onBack: () => void;
+  onChangePassword: () => void;
   onDelete: () => void;
   onImageDelete: () => void;
   onSubmit: (data: FormData) => void;
@@ -55,6 +57,7 @@ const StaffDetailsPage: React.FC<StaffDetailsPageProps> = ({
   saveButtonBarState,
   staffMember,
   onBack,
+  onChangePassword,
   onDelete,
   onImageDelete,
   onImageUpload,
@@ -100,6 +103,12 @@ const StaffDetailsPage: React.FC<StaffDetailsPageProps> = ({
                 onImageUpload={onImageUpload}
                 onImageDelete={onImageDelete}
               />
+              {canEditPreferences && (
+                <>
+                  <CardSpacer />
+                  <StaffPassword onChangePassword={onChangePassword} />
+                </>
+              )}
             </div>
             <div>
               {canEditPreferences && (
diff --git a/src/staff/components/StaffPassword/StaffPassword.tsx b/src/staff/components/StaffPassword/StaffPassword.tsx
new file mode 100644
index 000000000..485e536ee
--- /dev/null
+++ b/src/staff/components/StaffPassword/StaffPassword.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+import Button from "@material-ui/core/Button";
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
+import Typography from "@material-ui/core/Typography";
+import { FormattedMessage, useIntl } from "react-intl";
+
+import CardTitle from "@saleor/components/CardTitle";
+
+interface StaffPasswordProps {
+  onChangePassword: () => void;
+}
+
+const StaffPassword: React.FC<StaffPasswordProps> = ({ onChangePassword }) => {
+  const intl = useIntl();
+
+  return (
+    <Card>
+      <CardTitle
+        title={intl.formatMessage({
+          defaultMessage: "Password",
+          description: "header"
+        })}
+        toolbar={
+          <Button color="primary" onClick={onChangePassword}>
+            <FormattedMessage
+              defaultMessage="Change your password"
+              description=" utton"
+            />
+          </Button>
+        }
+      />
+      <CardContent>
+        <Typography>
+          <FormattedMessage defaultMessage="You should change your password every month to avoid security issues." />
+        </Typography>
+      </CardContent>
+    </Card>
+  );
+};
+
+StaffPassword.displayName = "StaffPassword";
+export default StaffPassword;
diff --git a/src/staff/components/StaffPassword/index.ts b/src/staff/components/StaffPassword/index.ts
new file mode 100644
index 000000000..9131e4472
--- /dev/null
+++ b/src/staff/components/StaffPassword/index.ts
@@ -0,0 +1,2 @@
+export { default } from "./StaffPassword";
+export * from "./StaffPassword";
diff --git a/src/staff/urls.ts b/src/staff/urls.ts
index 7bdf6e201..b99a09235 100644
--- a/src/staff/urls.ts
+++ b/src/staff/urls.ts
@@ -27,7 +27,10 @@ export const staffListUrl = (params?: StaffListUrlQueryParams) =>
   staffListPath + "?" + stringifyQs(params);
 
 export const staffMemberDetailsPath = (id: string) => urlJoin(staffSection, id);
-export type StaffMemberDetailsUrlDialog = "remove" | "remove-avatar";
+export type StaffMemberDetailsUrlDialog =
+  | "change-password"
+  | "remove"
+  | "remove-avatar";
 export type StaffMemberDetailsUrlQueryParams = Dialog<
   StaffMemberDetailsUrlDialog
 >;
diff --git a/src/staff/views/StaffDetails.tsx b/src/staff/views/StaffDetails.tsx
index e3739efc0..7d54e099c 100644
--- a/src/staff/views/StaffDetails.tsx
+++ b/src/staff/views/StaffDetails.tsx
@@ -128,6 +128,13 @@ export const StaffDetails: React.FC<OrderListProps> = ({ id, params }) => {
                                 canRemove={!isUserSameAsViewer}
                                 disabled={loading}
                                 onBack={() => navigate(staffListUrl())}
+                                onChangePassword={() =>
+                                  navigate(
+                                    staffMemberDetailsUrl(id, {
+                                      action: "change-password"
+                                    })
+                                  )
+                                }
                                 onDelete={() =>
                                   navigate(
                                     staffMemberDetailsUrl(id, {