Various small fixes and touch ups (gravitational#876)

* Show error when auth settings return `u2f` second factor option - Handles `u2f` cfg returned from v9 - Push users to use webauthn * Conditionally render adding passwordless device based on if pwdless is enabled * Fix brief flash rendering of buttons before attempt success state * Add soft warning for firefox users for passwordless login or register
hatched · Jun 9, 2022 · cb8b843 · cb8b843
1 parent ed54b5d
commit cb8b843
Show file tree

Hide file tree

Showing 16 changed files with 538 additions and 795 deletions.
diff --git a/web/packages/shared/services/types.ts b/web/packages/shared/services/types.ts
@@ -30,8 +30,11 @@ export type PrimaryAuthType = 'local' | 'passwordless' | 'sso';
 // is preferred when more than one option can be available
 // and only one should be preferred.
 //
-// TODO(lisa) remove, currently does nothing.
-export type PreferredMfaType = 'webauthn' | '';
+// DELETE IN 11.0.0, preferredMfaType currently has no usage, other
+// than in teleterm, where we check if auth settings return
+// the deprecated `u2f` option (v9). Starting v10
+// 'u2f' will automatically be aliased to 'webauthn'.
+export type PreferredMfaType = 'webauthn' | 'u2f' | '';
 
 export type AuthProvider = {
   displayName?: string;

diff --git a/web/packages/teleport/src/Account/ManageDevices/AddDevice/AddDevice.story.tsx b/web/packages/teleport/src/Account/ManageDevices/AddDevice/AddDevice.story.tsx
@@ -58,6 +58,7 @@ const props: State = {
   clearAttempt: () => null,
   onClose: () => null,
   auth2faType: 'on',
+  isPasswordlessEnabled: true,
   qrCode:
     'iVBORw0KGgoAAAANSUhEUgAAAcgAAAHIEAAAAAC/Wvl1AAAJV0lEQVR4nOzdsW4jORZA0fbC///LXowV' +
     'TFIWmqAefUtzTrDJeEtltS+YPDx+fn39ASL+99svAPzr85//+fj47df4ycr5ff1bXD9h/2f3vcenTf0L' +

diff --git a/web/packages/teleport/src/Account/ManageDevices/AddDevice/AddDevice.tsx b/web/packages/teleport/src/Account/ManageDevices/AddDevice/AddDevice.tsx
@@ -71,6 +71,7 @@ export function AddDevice({
   onClose,
   qrCode,
   auth2faType,
+  isPasswordlessEnabled,
 }: State) {
   const [otpToken, setOtpToken] = useState('');
   const [deviceName, setDeviceName] = useState('');
@@ -207,7 +208,7 @@ export function AddDevice({
                   readonly={addDeviceAttempt.status === 'processing'}
                 />
               )}
-              {mfaOption.value === 'webauthn' && (
+              {mfaOption.value === 'webauthn' && isPasswordlessEnabled && (
                 <FieldSelect
                   width="50%"
                   label="Allow Passwordless Login?"

diff --git a/web/packages/teleport/src/Account/ManageDevices/AddDevice/useAddDevice.ts b/web/packages/teleport/src/Account/ManageDevices/AddDevice/useAddDevice.ts
@@ -80,6 +80,7 @@ export default function useAddDevice(
     clearAttempt,
     qrCode,
     auth2faType: cfg.getAuth2faType(),
+    isPasswordlessEnabled: cfg.isPasswordlessEnabled(),
   };
 }
 

diff --git a/web/packages/teleport/src/Apps/Apps.tsx b/web/packages/teleport/src/Apps/Apps.tsx
@@ -61,14 +61,13 @@ export function Apps(props: State) {
     onLabelClick,
   } = props;
 
-  const hasNoApps =
-    attempt.status === 'success' && results.apps.length === 0 && isSearchEmpty;
+  const hasNoApps = results.apps.length === 0 && isSearchEmpty;
 
   return (
     <FeatureBox>
       <FeatureHeader alignItems="center" justifyContent="space-between">
         <FeatureHeaderTitle>Applications</FeatureHeaderTitle>
-        {!hasNoApps && (
+        {attempt.status === 'success' && !hasNoApps && (
           <AgentButtonAdd
             agent="application"
             beginsWithVowel={true}
@@ -105,7 +104,7 @@ export function Apps(props: State) {
           onLabelClick={onLabelClick}
         />
       )}
-      {hasNoApps && (
+      {attempt.status === 'success' && hasNoApps && (
         <Empty
           clusterId={clusterId}
           canCreate={canCreate && !isLeafCluster}