Add password reset card

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 && (

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;

src/staff/components/StaffPassword/index.ts

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

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

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, {