[v15]: Backport the new wizard for adding authentication devices

lib/auth/password.go

@@ -244,6 +244,9 @@ func (a *Server) checkOTP(user string, otpToken string) (*types.MFADevice, error
 		}
 		return dev, nil
 	}
+	// This message is relied upon by the Web UI in
+	// web/packages/teleport/src/Account/ManageDevices/AddAuthDeviceWizard/AddAuthDeviceWizard.tsx/RequthenticateStep().
+	// Please keep these in sync.
 	return nil, trace.AccessDenied("invalid totp token")
 }
 

web/packages/design/src/Alert/Alert.jsx

@@ -46,6 +46,14 @@ const kind = props => {
         background: theme.colors.success.main,
         color: theme.colors.text.primaryInverse,
       };
+    case 'outline-danger':
+      return {
+        background: fade(theme.colors.error.main, 0.1),
+        border: `${theme.radii[1]}px solid ${theme.colors.error.main}`,
+        borderRadius: `${theme.radii[3]}px`,
+        boxShadow: 'none',
+        justifyContent: 'normal',
+      };
     case 'outline-info':
       return {
         background: fade(theme.colors.link, 0.1),
@@ -90,6 +98,7 @@ Alert.propTypes = {
     'info',
     'warning',
     'success',
+    'outline-danger',
     'outline-info',
   ]),
   ...color.propTypes,
@@ -108,4 +117,7 @@ export const Danger = props => <Alert kind="danger" {...props} />;
 export const Info = props => <Alert kind="info" {...props} />;
 export const Warning = props => <Alert kind="warning" {...props} />;
 export const Success = props => <Alert kind="success" {...props} />;
+export const OutlineDanger = props => (
+  <Alert kind="outline-danger" {...props} />
+);
 export const OutlineInfo = props => <Alert kind="outline-info" {...props} />;

web/packages/design/src/Icon/Icons.story.tsx

@@ -101,6 +101,7 @@ export const Icons = () => (
     <IconBox IconCmpt={Icon.Cross} text="Cross" />
     <IconBox IconCmpt={Icon.Database} text="Database" />
     <IconBox IconCmpt={Icon.Desktop} text="Desktop" />
+    <IconBox IconCmpt={Icon.DeviceMobileCamera} text="DeviceMobileCamera" />
     <IconBox IconCmpt={Icon.Devices} text="Devices" />
     <IconBox IconCmpt={Icon.Download} text="Download" />
     <IconBox IconCmpt={Icon.Earth} text="Earth" />
@@ -111,6 +112,7 @@ export const Icons = () => (
     <IconBox IconCmpt={Icon.EqualizersVertical} text="EqualizersVertical" />
     <IconBox IconCmpt={Icon.Expand} text="Expand" />
     <IconBox IconCmpt={Icon.Facebook} text="Facebook" />
+    <IconBox IconCmpt={Icon.FingerprintSimple} text="FingerprintSimple" />
     <IconBox IconCmpt={Icon.Floppy} text="Floppy" />
     <IconBox IconCmpt={Icon.FlowArrow} text="FlowArrow" />
     <IconBox IconCmpt={Icon.FolderPlus} text="FolderPlus" />
@@ -195,6 +197,7 @@ export const Icons = () => (
     <IconBox IconCmpt={Icon.User} text="User" />
     <IconBox IconCmpt={Icon.UserAdd} text="UserAdd" />
     <IconBox IconCmpt={Icon.UserCircleGear} text="UserCircleGear" />
+    <IconBox IconCmpt={Icon.UserFocus} text="UserFocus" />
     <IconBox IconCmpt={Icon.UserIdBadge} text="UserIdBadge" />
     <IconBox IconCmpt={Icon.UserList} text="UserList" />
     <IconBox IconCmpt={Icon.Users} text="Users" />

web/packages/design/src/Icon/Icons/DeviceMobileCamera.tsx

@@ -0,0 +1,73 @@
+/**
+ * Teleport
+ * Copyright (C) 2023  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/>.
+ */
+
+/* MIT License
+
+Copyright (c) 2020 Phosphor Icons
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+*/
+
+import React from 'react';
+
+import { Icon, IconProps } from '../Icon';
+
+/*
+
+THIS FILE IS GENERATED. DO NOT EDIT.
+
+*/
+
+export function DeviceMobileCamera({
+  size = 24,
+  color,
+  ...otherProps
+}: IconProps) {
+  return (
+    <Icon
+      size={size}
+      color={color}
+      className="icon icon-devicemobilecamera"
+      {...otherProps}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.25 3.75C17.25 3.33579 16.9142 3 16.5 3H7.5C7.08579 3 6.75 3.33579 6.75 3.75V20.25C6.75 20.6642 7.08579 21 7.5 21H16.5C16.9142 21 17.25 20.6642 17.25 20.25V3.75ZM16.5 1.5C17.7426 1.5 18.75 2.50736 18.75 3.75V20.25C18.75 21.4926 17.7426 22.5 16.5 22.5H7.5C6.25736 22.5 5.25 21.4926 5.25 20.25V3.75C5.25 2.50736 6.25736 1.5 7.5 1.5H16.5Z"
+      />
+      <path d="M12 6.5625C12.5178 6.5625 12.9375 6.14277 12.9375 5.625C12.9375 5.10723 12.5178 4.6875 12 4.6875C11.4822 4.6875 11.0625 5.10723 11.0625 5.625C11.0625 6.14277 11.4822 6.5625 12 6.5625Z" />
+    </Icon>
+  );
+}

web/packages/design/src/Icon/Icons/Fingerprint.tsx

@@ -0,0 +1,105 @@
+/**
+ * Teleport
+ * Copyright (C) 2023  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/>.
+ */
+
+/* MIT License
+
+Copyright (c) 2020 Phosphor Icons
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+*/
+
+import React from 'react';
+
+import { Icon, IconProps } from '../Icon';
+
+/*
+
+THIS FILE IS GENERATED. DO NOT EDIT.
+
+*/
+
+export function Fingerprint({ size = 24, color, ...otherProps }: IconProps) {
+  return (
+    <Icon
+      size={size}
+      color={color}
+      className="icon icon-fingerprint"
+      {...otherProps}
+    >
+      <path
+        d="M16.5 12C16.5039 14.9325 15.9328 17.8372 14.8191 20.55"
+        stroke="white"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M15.3534 8.99926C14.7458 8.32021 13.9464 7.84163 13.0608 7.62683C12.1753 7.41202 11.2454 7.47111 10.3942 7.79627C9.54296 8.12144 8.81051 8.69736 8.29372 9.44785C7.77693 10.1983 7.50015 11.088 7.5 11.9993C7.50314 14.2864 6.9223 16.5366 5.8125 18.5364"
+        stroke="white"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M9 3.51201C10.3577 3.03356 11.8103 2.88752 13.2361 3.08614C14.6619 3.28476 16.0193 3.82225 17.1945 4.65356C18.3698 5.48487 19.3287 6.58577 19.9908 7.86402C20.6529 9.14226 20.999 10.5606 21 12.0001C21.0012 14.0188 20.7766 16.0313 20.3306 18.0001"
+        stroke="white"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M2.18335 15.7508C2.72298 14.5744 3.00154 13.2951 2.99991 12.0008C2.99867 10.7344 3.26532 9.48201 3.78235 8.32595C4.29939 7.16989 5.05512 6.13627 5.99991 5.29297"
+        stroke="white"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M10.366 19.5C10.1785 19.9144 9.97348 20.3206 9.75098 20.7188"
+        stroke="white"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M12 12C12.0027 13.5177 11.8137 15.0297 11.4375 16.5"
+        stroke="white"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </Icon>
+  );
+}

web/packages/design/src/Icon/Icons/FingerprintSimple.tsx

@@ -0,0 +1,89 @@
+/**
+ * Teleport
+ * Copyright (C) 2023  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/>.
+ */
+
+/* MIT License
+
+Copyright (c) 2020 Phosphor Icons
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+*/
+
+import React from 'react';
+
+import { Icon, IconProps } from '../Icon';
+
+/*
+
+THIS FILE IS GENERATED. DO NOT EDIT.
+
+*/
+
+export function FingerprintSimple({
+  size = 24,
+  color,
+  ...otherProps
+}: IconProps) {
+  return (
+    <Icon
+      size={size}
+      color={color}
+      className="icon icon-fingerprintsimple"
+      {...otherProps}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.1264 7.09652C11.1195 6.71717 12.2044 6.64823 13.2375 6.89884C14.2706 7.14945 15.2033 7.70779 15.9122 8.50001C16.1884 8.80869 16.1621 9.28283 15.8534 9.55904C15.5448 9.83525 15.0706 9.80893 14.7944 9.50026C14.2881 8.93439 13.6218 8.53557 12.8839 8.35656C12.146 8.17756 11.3711 8.2268 10.6617 8.49777C9.96462 8.76405 9.36312 9.23213 8.93383 9.84176C8.43452 10.7802 8.38127 11.5959 8.30971 12.6921C8.29564 12.9076 8.28086 13.134 8.26184 13.3743C8.14535 14.8463 7.85803 16.5799 6.45592 18.9225C6.2432 19.2779 5.78263 19.3936 5.42721 19.1809C5.0718 18.9681 4.95612 18.5076 5.16885 18.1521C6.42332 16.0562 6.66323 14.561 6.76651 13.256C6.78214 13.0585 6.79437 12.8593 6.80672 12.6582C6.87558 11.5365 6.94802 10.3567 7.63431 9.09119C7.64696 9.06786 7.66084 9.04522 7.67589 9.02337C8.27881 8.14779 9.13334 7.47588 10.1264 7.09652Z"
+      />
+      <path d="M9.24916 4.21937C8.85849 4.35704 8.43019 4.15195 8.29252 3.76128C8.15485 3.37061 8.35995 2.94231 8.75061 2.80464C10.2214 2.28635 11.795 2.12816 13.3395 2.34331C14.884 2.55847 16.3544 3.14072 17.6275 4.04125C18.9007 4.94179 19.9394 6.13437 20.6566 7.51905C21.3739 8.90374 21.7488 10.4402 21.7499 11.9996C21.7511 14.0742 21.5203 16.1425 21.062 18.1658C20.9705 18.5698 20.5688 18.8231 20.1648 18.7316C19.7608 18.6401 19.5075 18.2384 19.599 17.8344C20.0327 15.9202 20.251 13.9634 20.2499 12.0007C20.248 9.34598 18.9286 6.7989 16.7613 5.26586C14.594 3.73284 11.7529 3.33706 9.24916 4.21937Z" />
+      <path d="M5.45674 4.77313C5.74238 4.47316 6.21711 4.46154 6.51708 4.74718C6.81609 5.03191 6.82232 5.51279 6.54008 5.81064C6.24734 6.12128 5.96861 6.44567 5.6997 6.77705C5.22735 7.35915 4.72407 8.05482 4.46255 8.63049C3.81632 10.053 4.09735 11.6882 3.72771 13.1806C3.51687 14.0318 3.1524 15.1819 2.9838 15.704C2.95342 15.7981 2.92285 15.8922 2.89187 15.986C2.76166 16.3793 2.33735 16.5925 1.94413 16.4623C1.55092 16.3321 1.33771 15.9077 1.4679 15.5145C1.57247 15.1976 1.67353 14.8795 1.77251 14.5608C1.94298 14.0118 2.14251 13.3416 2.27171 12.82C2.43969 12.1418 2.46871 11.5725 2.50028 10.9533C2.5066 10.8293 2.51303 10.7033 2.52069 10.5741C2.56636 9.80353 2.65788 8.97642 3.09687 8.01008C3.44208 7.25018 4.04889 6.43087 4.53494 5.83189C4.78379 5.52522 5.01254 5.26237 5.17928 5.07595C5.27053 4.97392 5.36244 4.87237 5.45674 4.77313Z" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.4989 11.2501C16.9131 11.2496 17.2493 11.5849 17.2499 11.9992C17.2538 15.0296 16.6636 18.0315 15.5127 20.835C15.3554 21.2181 14.9173 21.4013 14.5341 21.2439C14.1509 21.0866 13.9678 20.6485 14.1251 20.2653C15.2016 17.6432 15.7536 14.8355 15.7499 12.0011C15.7493 11.5869 16.0847 11.2507 16.4989 11.2501Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.675 18.8168C11.0524 18.9876 11.2199 19.4319 11.0491 19.8093C10.8529 20.243 10.6383 20.6682 10.4055 21.0848C10.2034 21.4463 9.74651 21.5757 9.38493 21.3736C9.02336 21.1715 8.89405 20.7146 9.09613 20.353C9.30832 19.9733 9.50377 19.586 9.68252 19.1909C9.85328 18.8136 10.2976 18.6461 10.675 18.8168Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.9986 11.2501C12.4128 11.2494 12.7492 11.5846 12.7499 11.9988C12.7527 13.5797 12.5558 15.1545 12.164 16.686C12.0613 17.0873 11.6528 17.3294 11.2515 17.2267C10.8502 17.1241 10.6081 16.7155 10.7108 16.3142C11.0713 14.9051 11.2524 13.456 11.2499 12.0014C11.2492 11.5872 11.5844 11.2509 11.9986 11.2501Z"
+      />
+    </Icon>
+  );
+}