coder · BrunoQuaresma · May 6, 2022 · May 4, 2022 · May 4, 2022 · May 5, 2022
diff --git a/coderd/users.go b/coderd/users.go
@@ -361,10 +361,10 @@ func (api *api) putUserSuspend(rw http.ResponseWriter, r *http.Request) {
 }
 
 func (api *api) putUserPassword(rw http.ResponseWriter, r *http.Request) {
-        var (
-                user  = httpmw.UserParam(r)
-                params codersdk.UpdateUserPasswordRequest
-        )
+	var (
+		user   = httpmw.UserParam(r)
+		params codersdk.UpdateUserPasswordRequest
+	)
 	if !httpapi.Read(rw, r, &params) {
 		return
 	}

diff --git a/site/jest.setup.ts b/site/jest.setup.ts
@@ -1,6 +1,16 @@
 import "@testing-library/jest-dom"
+import crypto from "crypto"
 import { server } from "./src/testHelpers/server"
 
+// Polyfill the getRandomValues that is used on utils/random.ts
+Object.defineProperty(global.self, "crypto", {
+  value: {
+    getRandomValues: function (buffer: Buffer) {
+      return crypto.randomFillSync(buffer)
+    },
+  },
+})
+
 // Establish API mocking before all tests through MSW.
 beforeAll(() =>
   server.listen({

diff --git a/site/src/api/index.ts b/site/src/api/index.ts
@@ -155,3 +155,6 @@ export const suspendUser = async (userId: TypesGen.User["id"]): Promise<TypesGen
   const response = await axios.put<TypesGen.User>(`/api/v2/users/${userId}/suspend`)
   return response.data
 }
+
+export const updateUserPassword = async (password: string, userId: TypesGen.User["id"]): Promise<undefined> =>
+  axios.put(`/api/v2/users/${userId}/password`, { password })
diff --git a/site/src/components/CodeBlock/CodeBlock.tsx b/site/src/components/CodeBlock/CodeBlock.tsx
@@ -1,16 +1,18 @@
 import { makeStyles } from "@material-ui/core/styles"
 import React from "react"
 import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
+import { combineClasses } from "../../util/combineClasses"
 
 export interface CodeBlockProps {
   lines: string[]
+  className?: string
 }
 
-export const CodeBlock: React.FC<CodeBlockProps> = ({ lines }) => {
+export const CodeBlock: React.FC<CodeBlockProps> = ({ lines, className = "" }) => {
   const styles = useStyles()
 
   return (
-    <div className={styles.root}>
+    <div className={combineClasses([styles.root, className])}>
       {lines.map((line, idx) => (
         <div className={styles.line} key={idx}>
           {line}

diff --git a/site/src/components/ResetPasswordDialog/ResetPasswordDialog.stories.tsx b/site/src/components/ResetPasswordDialog/ResetPasswordDialog.stories.tsx
@@ -0,0 +1,23 @@
+import { Story } from "@storybook/react"
+import React from "react"
+import { MockUser } from "../../testHelpers"
+import { generateRandomString } from "../../util/random"
+import { ResetPasswordDialog, ResetPasswordDialogProps } from "./ResetPasswordDialog"
+
+export default {
+  title: "components/ResetPasswordDialog",
+  component: ResetPasswordDialog,
+  argTypes: {
+    onClose: { action: "onClose" },
+    onConfirm: { action: "onConfirm" },
+  },
+}
+
+const Template: Story<ResetPasswordDialogProps> = (args: ResetPasswordDialogProps) => <ResetPasswordDialog {...args} />
+
+export const Example = Template.bind({})
+Example.args = {
+  open: true,
+  user: MockUser,
+  newPassword: generateRandomString(12),
+}
diff --git a/site/src/components/ResetPasswordDialog/ResetPasswordDialog.tsx b/site/src/components/ResetPasswordDialog/ResetPasswordDialog.tsx
@@ -0,0 +1,69 @@
+import DialogActions from "@material-ui/core/DialogActions"
+import DialogContent from "@material-ui/core/DialogContent"
+import DialogContentText from "@material-ui/core/DialogContentText"
+import { makeStyles } from "@material-ui/core/styles"
+import React from "react"
+import * as TypesGen from "../../api/typesGenerated"
+import { CodeBlock } from "../CodeBlock/CodeBlock"
+import { Dialog, DialogActionButtons, DialogTitle } from "../Dialog/Dialog"
+
+export interface ResetPasswordDialogProps {
+  open: boolean
+  onClose: () => void
+  onConfirm: () => void
+  user?: TypesGen.User
+  newPassword?: string
+  loading: boolean
+}
+
+export const Language = {
+  title: "Reset password",
+  message: (username?: string): JSX.Element => (
+    <>
+      You will need to send <strong>{username}</strong> the following password:
+    </>
+  ),
+  confirmText: "Reset password",
+}
+
+export const ResetPasswordDialog: React.FC<ResetPasswordDialogProps> = ({
+  open,
+  onClose,
+  onConfirm,
+  user,
+  newPassword,
+  loading,
+}) => {
+  const styles = useStyles()
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle title={Language.title} />
+
+      <DialogContent>
+        <DialogContentText variant="subtitle2">{Language.message(user?.username)}</DialogContentText>
+
+        <DialogContentText component="div">
+          <CodeBlock lines={[newPassword ?? ""]} className={styles.codeBlock} />
+        </DialogContentText>
+      </DialogContent>
+
+      <DialogActions>
+        <DialogActionButtons
+          onCancel={onClose}
+          confirmText={Language.confirmText}
+          onConfirm={onConfirm}
+          confirmLoading={loading}
+        />
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+const useStyles = makeStyles(() => ({
+  codeBlock: {
+    minHeight: "auto",
+    userSelect: "all",
+    width: "100%",
+  },
+}))
diff --git a/site/src/components/UsersTable/UsersTable.tsx b/site/src/components/UsersTable/UsersTable.tsx
@@ -11,6 +11,7 @@ export const Language = {
   emptyMessage: "No users found",
   usernameLabel: "User",
   suspendMenuItem: "Suspend",
+  resetPasswordMenuItem: "Reset password",
 }
 
 const emptyState = <EmptyState message={Language.emptyMessage} />
@@ -28,9 +29,10 @@ const columns: Column<UserResponse>[] = [
 export interface UsersTableProps {
   users: UserResponse[]
   onSuspendUser: (user: UserResponse) => void
+  onResetUserPassword: (user: UserResponse) => void
 }
 
-export const UsersTable: React.FC<UsersTableProps> = ({ users, onSuspendUser }) => {
+export const UsersTable: React.FC<UsersTableProps> = ({ users, onSuspendUser, onResetUserPassword }) => {
   return (
     <Table
       columns={columns}
@@ -45,6 +47,10 @@ export const UsersTable: React.FC<UsersTableProps> = ({ users, onSuspendUser })
               label: Language.suspendMenuItem,
               onClick: onSuspendUser,
             },
+            {
+              label: Language.resetPasswordMenuItem,
+              onClick: onResetUserPassword,
+            },
           ]}
         />
       )}

diff --git a/site/src/pages/UsersPage/UsersPage.test.tsx b/site/src/pages/UsersPage/UsersPage.test.tsx
@@ -2,6 +2,7 @@ import { fireEvent, screen, waitFor, within } from "@testing-library/react"
 import React from "react"
 import * as API from "../../api"
 import { GlobalSnackbar } from "../../components/GlobalSnackbar/GlobalSnackbar"
+import { Language as ResetPasswordDialogLanguage } from "../../components/ResetPasswordDialog/ResetPasswordDialog"
 import { Language as UsersTableLanguage } from "../../components/UsersTable/UsersTable"
 import { MockUser, MockUser2, render } from "../../testHelpers"
 import { Language as usersXServiceLanguage } from "../../xServices/users/usersXService"
@@ -34,6 +35,33 @@ const suspendUser = async (setupActionSpies: () => void) => {
   fireEvent.click(confirmButton)
 }
 
+const resetUserPassword = async (setupActionSpies: () => void) => {
+  // Get the first user in the table
+  const users = await screen.findAllByText(/.*@coder.com/)
+  const firstUserRow = users[0].closest("tr")
+  if (!firstUserRow) {
+    throw new Error("Error on get the first user row")
+  }
+
+  // Click on the "more" button to display the "Suspend" option
+  const moreButton = within(firstUserRow).getByLabelText("more")
+  fireEvent.click(moreButton)
+  const menu = screen.getByRole("menu")
+  const resetPasswordButton = within(menu).getByText(UsersTableLanguage.resetPasswordMenuItem)
+  fireEvent.click(resetPasswordButton)
+
+  // Check if the confirm message is displayed
+  const confirmDialog = screen.getByRole("dialog")
+  expect(confirmDialog).toHaveTextContent(`You will need to send ${MockUser.username} the following password:`)
+
+  // Setup spies to check the actions after
+  setupActionSpies()
+
+  // Click on the "Confirm" button
+  const confirmButton = within(confirmDialog).getByRole("button", { name: ResetPasswordDialogLanguage.confirmText })
+  fireEvent.click(confirmButton)
+}
+
 describe("Users Page", () => {
   it("shows users", async () => {
     render(<UsersPage />)
@@ -81,7 +109,7 @@ describe("Users Page", () => {
           jest.spyOn(API, "suspendUser").mockRejectedValueOnce({})
         })
 
-        // Check if the success message is displayed
+        // Check if the error message is displayed
         await screen.findByText(usersXServiceLanguage.suspendUserError)
 
         // Check if the API was called correctly
@@ -90,4 +118,50 @@ describe("Users Page", () => {
       })
     })
   })
+
+  describe("reset user password", () => {
+    describe("when it is success", () => {
+      it("shows a success message", async () => {
+        render(
+          <>
+            <UsersPage />
+            <GlobalSnackbar />
+          </>,
+        )
+
+        await resetUserPassword(() => {
+          jest.spyOn(API, "updateUserPassword").mockResolvedValueOnce(undefined)
+        })
+
+        // Check if the success message is displayed
+        await screen.findByText(usersXServiceLanguage.resetUserPasswordSuccess)
+
+        // Check if the API was called correctly
+        expect(API.updateUserPassword).toBeCalledTimes(1)
+        expect(API.updateUserPassword).toBeCalledWith(expect.any(String), MockUser.id)
+      })
+    })
+
+    describe("when it fails", () => {
+      it("shows an error message", async () => {
+        render(
+          <>
+            <UsersPage />
+            <GlobalSnackbar />
+          </>,
+        )
+
+        await resetUserPassword(() => {
+          jest.spyOn(API, "updateUserPassword").mockRejectedValueOnce({})
+        })
+
+        // Check if the error message is displayed
+        await screen.findByText(usersXServiceLanguage.resetUserPasswordError)
+
+        // Check if the API was called correctly
+        expect(API.updateUserPassword).toBeCalledTimes(1)
+        expect(API.updateUserPassword).toBeCalledWith(expect.any(String), MockUser.id)
+      })
+    })
+  })
 })
diff --git a/site/src/pages/UsersPage/UsersPage.tsx b/site/src/pages/UsersPage/UsersPage.tsx
@@ -3,6 +3,7 @@ import React, { useContext, useEffect } from "react"
 import { useNavigate } from "react-router"
 import { ConfirmDialog } from "../../components/ConfirmDialog/ConfirmDialog"
 import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
+import { ResetPasswordDialog } from "../../components/ResetPasswordDialog/ResetPasswordDialog"
 import { XServiceContext } from "../../xServices/StateContext"
 import { UsersPageView } from "./UsersPageView"
 
@@ -15,9 +16,10 @@ export const Language = {
 export const UsersPage: React.FC = () => {
   const xServices = useContext(XServiceContext)
   const [usersState, usersSend] = useActor(xServices.usersXService)
-  const { users, getUsersError, userIdToSuspend } = usersState.context
+  const { users, getUsersError, userIdToSuspend, userIdToResetPassword, newUserPassword } = usersState.context
   const navigate = useNavigate()
   const userToBeSuspended = users?.find((u) => u.id === userIdToSuspend)
+  const userToResetPassword = users?.find((u) => u.id === userIdToResetPassword)
 
   /**
    * Fetch users on component mount
@@ -39,6 +41,9 @@ export const UsersPage: React.FC = () => {
           onSuspendUser={(user) => {
             usersSend({ type: "SUSPEND_USER", userId: user.id })
           }}
+          onResetUserPassword={(user) => {
+            usersSend({ type: "RESET_USER_PASSWORD", userId: user.id })
+          }}
           error={getUsersError}
         />
 
@@ -61,6 +66,19 @@ export const UsersPage: React.FC = () => {
             </>
           }
         />
+
+        <ResetPasswordDialog
+          loading={usersState.matches("resettingUserPassword")}
+          user={userToResetPassword}
+          newPassword={newUserPassword}
+          open={usersState.matches("confirmUserPasswordReset")}
+          onClose={() => {
+            usersSend("CANCEL_USER_PASSWORD_RESET")
+          }}
+          onConfirm={() => {
+            usersSend("CONFIRM_USER_PASSWORD_RESET")
+          }}
+        />
       </>
     )
   }

diff --git a/site/src/pages/UsersPage/UsersPageView.tsx b/site/src/pages/UsersPage/UsersPageView.tsx
@@ -15,20 +15,26 @@ export interface UsersPageViewProps {
   users: UserResponse[]
   openUserCreationDialog: () => void
   onSuspendUser: (user: UserResponse) => void
+  onResetUserPassword: (user: UserResponse) => void
   error?: unknown
 }
 
 export const UsersPageView: React.FC<UsersPageViewProps> = ({
   users,
   openUserCreationDialog,
   onSuspendUser,
+  onResetUserPassword,
   error,
 }) => {
   return (
     <Stack spacing={4}>
       <Header title={Language.pageTitle} action={{ text: Language.newUserButton, onClick: openUserCreationDialog }} />
       <Margins>
-        {error ? <ErrorSummary error={error} /> : <UsersTable users={users} onSuspendUser={onSuspendUser} />}
+        {error ? (
+          <ErrorSummary error={error} />
+        ) : (
+          <UsersTable users={users} onSuspendUser={onSuspendUser} onResetUserPassword={onResetUserPassword} />
+        )}
       </Margins>
     </Stack>
   )

diff --git a/site/src/util/random.ts b/site/src/util/random.ts
@@ -0,0 +1,19 @@
+/**
+ * Generate a cryptographically secure random string using the specified number
+ * of bytes then encode with base64.
+ *
+ * Base64 encodes 6 bits per character and pads with = so the length will not
+ * equal the number of randomly generated bytes.
+ * @see <https://developer.mozilla.org/en-US/docs/Glossary/Base64#encoded_size_increase>
+ */
+export const generateRandomString = (bytes: number): string => {
+  const byteArr = window.crypto.getRandomValues(new Uint8Array(bytes))
+  // The types for `map` don't seem to support mapping from one array type to
+  // another and `String.fromCharCode.apply` wants `number[]` so loop like this
+  // instead.
+  const strArr: string[] = []
+  for (const byte of byteArr) {
+    strArr.push(String.fromCharCode(byte))
+  }
+  return btoa(strArr.join(""))
+}