[v15]: A new password change wizard

web/packages/teleport/src/Account/Account.story.tsx

@@ -115,47 +115,53 @@ const props: AccountProps = {
       name: 'touch_id',
       registeredDate: new Date(1628799417000),
       lastUsedDate: new Date(1628799417000),
-      residentKey: true,
+      type: 'webauthn',
+      usage: 'passwordless',
     },
     {
       id: '2',
       description: 'Hardware Key',
       name: 'solokey',
       registeredDate: new Date(1623722252000),
       lastUsedDate: new Date(1623981452000),
-      residentKey: true,
+      type: 'webauthn',
+      usage: 'passwordless',
     },
     {
       id: '3',
       description: 'Hardware Key',
       name: 'backup yubikey',
       registeredDate: new Date(1618711052000),
       lastUsedDate: new Date(1626472652000),
-      residentKey: true,
+      type: 'webauthn',
+      usage: 'passwordless',
     },
     {
       id: '4',
       description: 'Hardware Key',
       name: 'yubikey',
       registeredDate: new Date(1612493852000),
       lastUsedDate: new Date(1614481052000),
-      residentKey: true,
+      type: 'webauthn',
+      usage: 'passwordless',
     },
     {
       id: '5',
       description: 'Hardware Key',
       name: 'yubikey-mfa',
       registeredDate: new Date(1612493852000),
       lastUsedDate: new Date(1614481052000),
-      residentKey: false,
+      type: 'webauthn',
+      usage: 'mfa',
     },
     {
       id: '6',
       description: 'Authenticator App',
       name: 'iphone 12',
       registeredDate: new Date(1628799417000),
       lastUsedDate: new Date(1628799417000),
-      residentKey: false,
+      type: 'totp',
+      usage: 'mfa',
     },
   ],
   onDeviceAdded: () => {},

web/packages/teleport/src/Account/Account.tsx

@@ -101,8 +101,8 @@ export function Account({
   enterpriseComponent: EnterpriseComponent,
   newDeviceUsage,
 }: AccountProps) {
-  const passkeys = devices.filter(d => d.residentKey);
-  const mfaDevices = devices.filter(d => !d.residentKey);
+  const passkeys = devices.filter(d => d.usage === 'passwordless');
+  const mfaDevices = devices.filter(d => d.usage === 'mfa');
   const disableAddDevice =
     createRestrictedTokenAttempt.status === 'processing' ||
     fetchDevicesAttempt.status !== 'success';
@@ -198,6 +198,7 @@ export function Account({
             changeDisabled={
               createRestrictedTokenAttempt.status === 'processing'
             }
+            devices={devices}
             onPasswordChange={onPasswordChange}
           />
         )}

web/packages/teleport/src/Account/ChangePasswordWizard/ChangePasswordWizard.story.tsx

@@ -0,0 +1,115 @@
+/**
+ * Teleport
+ * Copyright (C) 2024 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react';
+
+import Dialog from 'design/Dialog';
+
+import { createTeleportContext } from 'teleport/mocks/contexts';
+import { ContextProvider } from 'teleport';
+
+import { MfaDevice } from 'teleport/services/mfa';
+
+import {
+  ChangePasswordStep,
+  ReauthenticateStep,
+  createReauthOptions,
+} from './ChangePasswordWizard';
+
+export default {
+  title: 'teleport/Account/Manage Devices/Change Password Wizard',
+  decorators: [
+    Story => {
+      const ctx = createTeleportContext();
+      return (
+        <ContextProvider ctx={ctx}>
+          <Dialog open={true} dialogCss={() => ({ width: '650px' })}>
+            <Story />
+          </Dialog>
+        </ContextProvider>
+      );
+    },
+  ],
+};
+
+export function Reauthenticate() {
+  return <ReauthenticateStep {...stepProps} />;
+}
+
+export function ChangePasswordWithPasswordlessVerification() {
+  return <ChangePasswordStep {...stepProps} reauthMethod="passwordless" />;
+}
+
+export function ChangePasswordWithMfaDeviceVerification() {
+  return <ChangePasswordStep {...stepProps} reauthMethod="mfaDevice" />;
+}
+
+export function ChangePasswordWithOtpVerification() {
+  return <ChangePasswordStep {...stepProps} reauthMethod="otp" />;
+}
+
+const devices: MfaDevice[] = [
+  {
+    id: '1',
+    description: 'Hardware Key',
+    name: 'touch_id',
+    registeredDate: new Date(1628799417000),
+    lastUsedDate: new Date(1628799417000),
+    type: 'webauthn',
+    usage: 'passwordless',
+  },
+  {
+    id: '2',
+    description: 'Hardware Key',
+    name: 'solokey',
+    registeredDate: new Date(1623722252000),
+    lastUsedDate: new Date(1623981452000),
+    type: 'webauthn',
+    usage: 'mfa',
+  },
+  {
+    id: '3',
+    description: 'Authenticator App',
+    name: 'iPhone',
+    registeredDate: new Date(1618711052000),
+    lastUsedDate: new Date(1626472652000),
+    type: 'totp',
+    usage: 'mfa',
+  },
+];
+
+const defaultReauthOptions = createReauthOptions('optional', true, devices);
+
+const stepProps = {
+  // StepComponentProps
+  next() {},
+  prev() {},
+  hasTransitionEnded: true,
+  stepIndex: 0,
+  flowLength: 1,
+  refCallback: () => {},
+
+  // Other props
+  reauthOptions: defaultReauthOptions,
+  reauthMethod: defaultReauthOptions[0].value,
+  credential: { id: '', type: '' },
+  onReauthMethodChange() {},
+  onAuthenticated() {},
+  onClose() {},
+  onSuccess() {},
+};