mirror of
https://github.com/bitwarden/browser
synced 2025-12-16 00:03:56 +00:00
feat(2FA-UI-Refresh): [Auth/PM-8113] - 2FA Components Consolidation and UI Refresh (#12087)
* PM-8113 - Deprecate TwoFactorComponentRefactor feature flag in favor of UnauthenticatedExtensionUIRefresh flag * PM-8113 - Rename all existing 2FA components as V1. * PM-8113 - TwoFactorAuthComp - Add comment explaining that tagged unused import is used a dialog. * PM-8113 - 2FA Auth Comp - deprecate captcha * PM-8113 - LoginStrategySvc - add todo for deprecation of captcha response * PM-8113 - TwoFactorAuth tests - remove captcha * PM-8113 - TwoFactorAuthComp HTML - remove captcha * PM-8113 - Web Two Factor Auth - update deps * PM-8113 - Move all new two-factor-auth components into libs/auth instead of libs/angular/src/auth * PM-8113 - Add new child-components folder to help differentiate between top level page component and child components * PM-8113 - Add todo for browser TwoFactorAuthEmailComponent * PM-8113 - TwoFactorAuth - progress on consolidation * PM-8113 - TwoFactorAuth - add TODO to ensure I don't miss web on success logic * PM-8113 - TwoFactorAuth - Deprecate browser implementation of two-factor-auth and move all logic into single component - WIP * PM-8113 - Bring across 2FA session timeout to new 2FA orchestrator comp * PM-8113 - Export TwoFactorAuth from libs/auth * PM-8113 - Fix 2FA Auth Comp tests by adding new service deps. * PM-8113 - Fix TwoFactorAuthExpiredComp imports + TwoFactorAuthComponent imports on other clients. * PM-8113 - 2FA Auth Comp - Progress on removing onSuccessfulLogin callback * PM-8113 - 2FA Auth - update deps to private as inheritance will no longer be used. * PM-8113 - TwoFactorAuthComp - Refactor init a bit. * PM-8113 - TwoFactorAuthComp - More naming refactors * PM-8113 - TwoFactorAuth - (1) more refactoring (2) removed onSuccessfulLoginNavigate (3) after successful login we always loginEmailService.clearValues() * PM-8113 - TwoFactorAuthComp Tests - clean up tests for removed callbacks. * PM-8113 - TwoFactorAuthComponent - refactor default success route handling * PM-8113 - TwoFactorAuthComp - More refactoring * PM-8113 - TwoFactorAuthComp - more refactors * PM-8113 - TwoFactorAuth - Remove unused service dep * PM-8113 - TwoFactorAuthComp - Refactor out unused button action text and move checks for continue button visibility into component * PM-8113 - TwoFactorAuthComponent - Add type for providerData * PM-8113 - TwoFactorAuthComponent - Add todo * PM-8113 - TwoFactorAuthComponent - Add client type * PM-8113 - TwoFactorAuth - implement browser specific SSO + 2FA logic * PM-8113 - TwoFactorService Abstraction - refactor to use proper functions + mark methods as abstract properly + add null return to getProviders * PM-8113 - Refactor 2FA Guard logic out of ngOnInit and into own tested guard. Updated all routes. * PM-8113 - TwoFactorAuthComponent - WIP on webauthn init. * PM-8113 - TwoFactorAuthComponent - pull webauthn fallback response handling into primary init with checks based on client for if it should be processed. * PM-8113 - TwoFactorAuthComponent - move linux popup width extension logic into ExtensionTwoFactorAuthComponentService * PM-8113 - WebTwoFactorAuthComponentService - add explicit override for web's determineLegacyKeyMigrationAction method. * PM-8113 - Implement new TwoFactorAuthComponentService .openPopoutIfApprovedForEmail2fa to replace extension specific init logic. * PM-8113 - TwoFactorAuthComponent - misc cleanup * PM-8113 - TwoFactorAuthComponent - more clean up * PM-8113 - TwoFactorAuthComponent - WIP on removing TDE callbacks * PM-8113 - TwoFactorAuthComponent - finish refactoring out all callbacks * PM-8113 - TwoFactorAuthComponent - remove now unused method * PM-8113 - TwoFactorAuthComponent - refactor routes. * PM-8113 - TwoFactorAuthComponent - add TODO * PM-8113 - TwoFactorAuthComp - isTrustedDeviceEncEnabled - add undefined check for optional window close. + Add todo * PM-8113 - TwoFactorAuthComponent tests - updated to pass * PM-8113 - (1) Consolidate TwoFactorAuthEmail component into new service architecture (2) Move openPopoutIfApprovedForEmail2fa to new TwoFactorAuthEmailComponentService * PM-8113 - Refactor libs/auth/2fa into barrel files. * PM-8113 - Move TwoFactorAuthEmail content to own folder. * PM-8113 - Move 2FA Duo to own comp folder. * PM-8113 - ExtensionTwoFactorAuthEmailComponentService - Add comment * PM-8113 - TwoFactorAuthEmailComponentService - add docs * PM-8113 - TwoFactorAuthDuoComponentService - define top level abstraction and each clients implementation of the duo2faResultListener * PM-8113 - TwoFactorAuthDuoCompService - add client specific handling for launchDuoFrameless * PM-8113 - Delete no longer used client specific two factor auth duo components. * PM-8113 - Register TwoFactorAuthDuoComponentService implementation in each client. * PM-8113 - TwoFactorAuthComp - add destroy ref to fix warnings. * PM-8113 - Remove accidentally checked in dev change * PM-8113 - TwoFactorAuthComp - (1) Add loading state (2) Add missing CheckboxModule import * PM-8113 - TwoFactorAuthDuoComponent - update takeUntilDestroyed to pass in destroy context as you can't use takeUntilDestroyed in ngOnInit without it. * PM-8113 - TwoFactorAuthWebAuthnComponent - remove no longer necessary webauthn new tab check as webauthn seems to work without it * PM-8113 - TwoFactorAuthWebAuthnComp - refactor names and add todo * PM-8113 - (1) Move WebAuthn 2FA comp to own folder (2) build out client service for new tab logic * PM-8113 - Register TwoFactorAuthWebAuthnComponentServices * PM-8113 - Tweak TwoFactorAuthWebAuthnComponentService and add to TwoFactorAuthWebAuthnComponent * PM-8113 - WebTwoFactorAuthDuoComponentService - fix type issue * PM-8113 - ExtensionTwoFactorAuthDuoComponentService - attempt to fix type issue. * PM-8113 - Remove ts-strict-ignore * PM-8113 - TwoFactorAuthWebAuthnComponent - satisfy strict typescript reqs. * PM-8113 - TwoFactorAuthComponent - some progress on strict TS conversion * PM-8113 - TwoFactorAuthComp - fixed all strict typescript issues. * PM-8113 - TwoFactorAuthComp - remove no longer necessary webauthn code * PM-8113 - ExtensionTwoFactorAuthComponentService - handleSso2faFlowSuccess - add more context * PM-8113 - TwoFactorAuthComp - TDE should use same success handler method * PM-8113 - Fix SSO + 2FA result handling by closing proper popout window * PM-8113 - Add todo * PM-8113 - Webauthn 2FA - As webauthn popout doesn't persist SSO state, have to genercize success logic (which should be a good thing but requires confirmation testing). * PM-8113 - Per main changes, remove deprecated I18nPipe from 2fa comps that use it. * PM-8113 - Remove more incorrect i18nPipes * PM-8113 - TwoFactorAuth + Webauthn - Refactor logic * PM-8113 - TwoFactorAuth - build submitting loading logic * PM-8113 - TwoFactorAuth - remove loading as submitting. * PM-8113 - TwoFactorAuth - update to latest authN session timeout logic * PM-8113 - AuthPopoutWindow - Add new single action popout for email 2FA so we can close it programmatically * PM-8113 - Update ExtensionTwoFactorAuthComponentService to close email 2FA single action popouts. * PM-8113 - Fix build after merge conflict issue * PM-8113 - 2FA - Duo & Email comps - strict typescript adherence. * PM-8113 - TwoFactorAuth - Clean up unused stuff and get tests passing * PM-8113 - Clean up used service method + TODO as I've confirmed it works for other flows. * PM-8113 - TODO: test all comp services * PM-8113 - TwoFactorAuthComponent Tests - fix tests by removing mock of removed method. * PM-8113 - Revert changes to login strategies to avoid scope creep for the sake of typescript strictness. * PM-8113 - ExtensionTwoFactorAuthComponentService tests * PM-8113 - Test ExtensionTwoFactorAuthDuoComponentService * PM-8113 - ExtensionTwoFactorAuthEmailComponentService - add tests * PM-8113 - Test ExtensionTwoFactorAuthWebAuthnComponentService * PM-8113 - Add 2fa icons (icons need tweaking still) * PM-8113 - TwoFactorAuthComponent - add setAnonLayoutDataByTwoFactorProviderType and handle email case as POC * PM-8113 - TwoFactorEmailComp - work on converting to new design * PM-8113 - Update icons with proper svg with scaling via viewbox * PM-8113 - Update icons to use proper classes * PM-8113 - 2FA Auth Comp - Progress on implementing design changes * PM-8113 - TwoFactorOptionsComponent - add todos * PM-8113 - 2fa Email Comp - add style changes per discussion with design * PM-8113 - TwoFactorAuthComponent - use2faRecoveryCode - build out method per discussion with design * PM-8113 - TwoFactorAuthComp - fix comp tests * PM-8113 - TwoFactorAuthComp - progress on adding 2fa provider page icons and subtitles * PM-8113 - Browser Translations - update duoTwoFactorRequiredPageSubtitle to match design discussion * PM-8113 - TwoFactorAuthComp - more work on getting page title / icons working * PM-8113 - Add todo * PM-8113 - TwoFactorAuthDuoComponent Html - remove text that was moved to page subtitle. * PM-8113 - 2FA Auth Comp - Duo icon works * PM-8113 - (1) Add Yubico logo icon (2) Rename Yubikey icon to security key icon * PM-8113 - TwoFactorAuthComp - remove icon from launch duo button per figma * PM-8113 - Mark old two-factor-options component as v1. * PM-8113 - Web - TwoFactorOptionsComponentV1 - Fix import * PM-8113 - Fix more imports * PM-8113 - Adjust translations based on meeting with Design * PM-8113 - TwoFactorOptionsComponent - deprecate recovery code functionality * PM-8113 - TwoFactorOptionsComponent - remove icon disable logic and unused imports * PM-8113 - 2FA Options Comp rewritten to match figma * PM-8113 - TwoFactorOptions - (1) Sort providers like setup screen (2) Add responsive scaling * PM-8113 - Webauthn 2FA - WIP on updating connectors to latest style * PM-8113 - Webauthn connector - clean up commented out code and restore block style * PM-8113 - TwoFactorAuthWebAuthn - Add loading state for iframe until webauthn ready * PM-8113 - Webauthn Iframe - update translation per figma * PM-8113 - TwoFactorAuthComp - per figma, put webauthn after checkbox. * PM-8113 - WebAuthn Fallback connector - UI refreshed * PM-8113 - Two Factor Options - Implement wrapping * PM-8113 - TwoFactorAuthAuthenticator - Remove text per figma * PM-8113 - TwoFactorAuthYubikey - Clean up design per figma * PM-8113 - Refactor all 2FA flows to use either reactive forms or programmatic submission so we get the benefit of onSubmit form validation like we have elsewhere. * PM-8113 - 2FA Auth Comp - for form validated 2FA methods, add enter support. * PM-8113 - TwoFactorAuthComp - Add loginSuccessHandlerService * PM-8113 - DesktopTwoFactorAuthDuoComponentService - add tests * PM-8113 - WebTwoFactorAuthDuoComponentService test file - WIP on tests * PM-8113 - WebTwoFactorAuthDuoComponentService - test listenForDuo2faResult * PM-8113 - TwoFactorAuthComp - (1) remove unused deps (2) get tests passing * PM-8113 - Add required to inputs * PM-8113 - TwoFactorAuth - Save off 2FA providers map so we can only show the select another 2FA method if the user actually has more than 1 configured 2FA method. * PM-8113 - Webauthn iframe styling must be adjusted per client so adjust desktop and browser extension * PM-8113 - TwoFactorAuthComp - Integrate latest ssoLoginService changes * PM-8113 - Desktop & Browser routing modules - add new page title per figma * PM-8113 - WebAuthn - added optional awaiting security key interaction button state to improve UX. * PM-8113 - TwoFactorAuthComp - refactor to avoid reactive race condition with retrieval of active user id. * PM-8113 - ExtensionTwoFactorAuthEmailComponentService - force close the popup since it has stopped closing when the popup opens. * PM-8113 - TwoFactorAuth - refactor enter key press to exempt non-applicable flows from enter key handling * PM-8113 - Refactor ExtensionTwoFactorAuthComponentService methods to solve issues with submission * PM-8113 - TwoFactorAuth - fix programmatic submit of form * PM-8113 - Fix ExtensionTwoFactorAuthComponentService tests * PM-8113 - Extension - Webauthn iframe - remove -10px margin * PM-8113 - Extension Routing module - 2FA screens need back button * PM-8113 - Get Duo working in extension * PM-8113 - TwoFactorOptions - tweak styling of row styling to better work for extension * PM-8113 - TwoFactorWebauthnComp - new tab button styling per figma * PM-8113 - 2FA Comp - Update logic for hiding / showing the remember me checkbox * PM-8113 - TwoFactorAuthWebAuthnComp - new tab flow - fix remember me * PM-8113 - Per PR feedback, add TODO for better provider and module structure for auth component client logic services. * PM-8113 - TwoFactorAuth - add missing TDE offboarding logic. * PM-8113 - TwoFactorAuthComponent tests - fix tests * PM-8113 - 2FA Auth Comp HTML - per PR feedback, remove unnecessary margin bottom * PM-8113 - 2FA Comp - per PR feedback, remove inSsoFlow as it isn't used. * PM-8113 - TwoFactorOptionsComp - Clean up no longer needed emitters. * PM-8113 - TwoFactorOptions - per PR feedback, clean up any usage * PM-8113 - TwoFactorAuthComp - per PR feedback, rename method from selectOtherTwofactorMethod to selectOtherTwoFactorMethod * PM-8113 - Per PR feedback, fix translations misspelling * PM-8113 - TwoFactorAuthSecurityKeyIcon - fix hardcoded value * PM-8113 - TwoFactorAuthSecurityKeyIcon - fix extra " * PM-8113 - TwoFactorAuthDuo - Per PR feedback, remove empty template. * PM-8113 - LooseComponentsModule - re-add accidentally removed component * PM-8113 - TwoFactorAuthWebAuthnIcon - per PR feedback, fix hardcoded stroke value. * PM-8113 - Desktop AppRoutingModule - per PR feedback, remove unnecessary AnonLayoutWrapperComponent component property. * PM-8113 - Update apps/browser/src/auth/services/extension-two-factor-auth-duo-component.service.spec.ts to fix misspelling Co-authored-by: rr-bw <102181210+rr-bw@users.noreply.github.com> * PM-8113 - TwoFactorAuthComp - Per PR feedback, add trim to token value * PM-8113 - TwoFactorService - add typescript strict * PM-8113 - TwoFactorService - per PR feedback, add jsdocs * PM-8113 - Per PR feedback, fix misspelling * PM-8113 - Webauthn fallback - per PR feedback fix stroke * PM-8113 - Update apps/web/src/connectors/webauthn-fallback.html Co-authored-by: rr-bw <102181210+rr-bw@users.noreply.github.com> * PM-8113 - Update libs/auth/src/angular/icons/two-factor-auth/two-factor-auth-webauthn.icon.ts Co-authored-by: rr-bw <102181210+rr-bw@users.noreply.github.com> --------- Co-authored-by: rr-bw <102181210+rr-bw@users.noreply.github.com>
This commit is contained in:
Jared Snider
GitHub
@@ -1,39 +1,132 @@
|
||||
<!doctype html>
|
||||
<html class="theme_light">
|
||||
<html class="theme_light tw-h-full">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<title>Bitwarden WebAuthn Connector</title>
|
||||
</head>
|
||||
|
||||
<body class="layout_frontend">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center mt-5">
|
||||
<div class="col-5">
|
||||
<img src="../images/logo-dark@2x.png" class="mb-4 logo" alt="Bitwarden" />
|
||||
<div id="spinner">
|
||||
<p class="text-center">
|
||||
<i
|
||||
class="bwi bwi-spinner bwi-spin bwi-2x text-muted"
|
||||
title="Loading"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
</p>
|
||||
</div>
|
||||
<div id="content" class="card mt-4 d-none">
|
||||
<div class="card-body ng-star-inserted">
|
||||
<p id="msg" class="text-center"></p>
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="remember" name="remember" />
|
||||
<label class="form-check-label" for="remember" id="remember-label"></label>
|
||||
</div>
|
||||
<hr />
|
||||
<p class="text-center mb-0">
|
||||
<button type="button" id="webauthn-button" class="btn btn-primary btn-lg"></button>
|
||||
</p>
|
||||
</div>
|
||||
<body class="tw-min-h-full !tw-min-w-0 tw-text-center !tw-bg-background-alt">
|
||||
<main class="tw-flex tw-w-full tw-mx-auto tw-flex-col tw-px-6 tw-pt-6 tw-pb-4 tw-text-main">
|
||||
<a class="tw-w-[128px] tw-block tw-mb-12 [&>*]:tw-align-top">
|
||||
<img class="new-logo-themed" alt="Bitwarden" />
|
||||
</a>
|
||||
|
||||
<div class="tw-text-center tw-mb-6 tw-max-w-md tw-mx-auto">
|
||||
<div class="tw-mx-auto tw-max-w-28 sm:tw-max-w-32">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 120 100">
|
||||
<path
|
||||
class="tw-fill-art-primary"
|
||||
d="M19.258 16.434c0-3.635 2.966-6.58 6.626-6.58H56.88c3.659 0 6.625 2.946 6.625 6.58v27.788l-2.208 2.667V16.434c0-2.423-1.978-4.387-4.417-4.387H25.884c-2.44 0-4.418 1.964-4.418 4.387v67.09c0 2.422 1.978 4.386 4.418 4.386h16.389l-.814 2.194H25.884c-3.66 0-6.626-2.947-6.626-6.58v-67.09Z"
|
||||
/>
|
||||
<path
|
||||
class="tw-fill-art-primary"
|
||||
fill-rule="evenodd"
|
||||
d="M40.119 19.287a.55.55 0 0 1 .552-.548h2.208a.55.55 0 0 1 .553.548.55.55 0 0 1-.553.549h-2.208a.55.55 0 0 1-.552-.549Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
<path
|
||||
class="tw-fill-art-accent"
|
||||
fill-rule="evenodd"
|
||||
d="M31.994 38.828c2.103-3.001 5.541-4.957 9.425-4.957 5.66 0 10.376 4.155 11.392 9.653a.567.567 0 0 1-.439.664.553.553 0 0 1-.646-.451c-.918-4.969-5.183-8.73-10.307-8.73-3.515 0-6.625 1.769-8.53 4.485a.542.542 0 0 1-.77.129.579.579 0 0 1-.125-.793Zm-.623 2.186c.282.117.42.448.305.74a10.928 10.928 0 0 0-.748 3.992v3.46a.56.56 0 0 1-.553.569.56.56 0 0 1-.552-.568v-3.461c0-1.56.294-3.051.829-4.417a.547.547 0 0 1 .718-.315Zm21.09 4.164a.56.56 0 0 1 .553.568v3.23a.56.56 0 0 1-.552.568.56.56 0 0 1-.552-.568v-3.23a.56.56 0 0 1 .552-.568Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
<path
|
||||
class="tw-fill-art-accent"
|
||||
fill-rule="evenodd"
|
||||
d="M32.823 41.892c1.451-3.427 4.75-5.827 8.596-5.827 1.98 0 3.819.638 5.333 1.725.25.18.31.532.135.788a.544.544 0 0 1-.769.138 8.02 8.02 0 0 0-4.7-1.52c-3.382 0-6.297 2.111-7.582 5.146a.547.547 0 0 1-.726.294.57.57 0 0 1-.287-.744Zm14.94-2.495a.543.543 0 0 1 .778.066 9.936 9.936 0 0 1 2.265 6.35v7.783a.559.559 0 0 1-.552.566.559.559 0 0 1-.553-.566v-7.782a8.788 8.788 0 0 0-2.002-5.62.575.575 0 0 1 .064-.797Zm-15.06 4.804a.562.562 0 0 1 .487.625 9.062 9.062 0 0 0-.053.988v7.782a.559.559 0 0 1-.553.566.559.559 0 0 1-.552-.566v-7.782c0-.377.02-.748.06-1.114a.555.555 0 0 1 .611-.499Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
<path
|
||||
class="tw-fill-art-accent"
|
||||
fill-rule="evenodd"
|
||||
d="M34.24 45.704c0-4.105 3.207-7.446 7.178-7.446 3.972 0 7.178 3.341 7.178 7.446V55.79a.559.559 0 0 1-.552.565.559.559 0 0 1-.552-.565V45.704c0-3.495-2.726-6.315-6.074-6.315-3.347 0-6.073 2.82-6.073 6.315v3.948a.559.559 0 0 1-.553.566.559.559 0 0 1-.552-.566v-3.948Zm.552 5.572c.305 0 .553.253.553.565v3.949a.559.559 0 0 1-.553.565.559.559 0 0 1-.552-.565V51.84c0-.312.247-.565.552-.565Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
<path
|
||||
class="tw-fill-art-accent"
|
||||
fill-rule="evenodd"
|
||||
d="M38.89 41.142a4.955 4.955 0 0 1 2.529-.69 4.966 4.966 0 0 1 4.97 4.962v3.044a.55.55 0 0 1-.553.548.55.55 0 0 1-.552-.548v-3.044a3.865 3.865 0 0 0-5.83-3.33.554.554 0 0 1-.757-.19.546.546 0 0 1 .192-.752Zm-.911 1.45c.258.16.335.5.173.756a3.844 3.844 0 0 0-.599 2.066v11.49a.55.55 0 0 1-.552.548.55.55 0 0 1-.552-.548v-11.49c0-.974.282-1.884.768-2.651a.554.554 0 0 1 .762-.172Zm7.857 7.904a.55.55 0 0 1 .552.549v5.859a.55.55 0 0 1-.552.548.55.55 0 0 1-.552-.548v-5.86a.55.55 0 0 1 .552-.547Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
<path
|
||||
class="tw-fill-art-accent"
|
||||
fill-rule="evenodd"
|
||||
d="M38.658 45.306c0-1.488 1.256-2.66 2.76-2.66 1.505 0 2.761 1.172 2.761 2.66v4.829a.55.55 0 0 1-.552.548.55.55 0 0 1-.552-.548v-4.828c0-.845-.722-1.564-1.657-1.564-.934 0-1.656.72-1.656 1.563v12.146a.55.55 0 0 1-.552.549.55.55 0 0 1-.552-.549V45.307Zm4.97 6.317a.55.55 0 0 1 .551.549v5.28a.55.55 0 0 1-.552.549.55.55 0 0 1-.552-.549v-5.28a.55.55 0 0 1 .552-.549Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
<path
|
||||
class="tw-fill-art-accent"
|
||||
fill-rule="evenodd"
|
||||
d="M41.419 44.84a.55.55 0 0 1 .552.548v1.9a.55.55 0 0 1-.552.548.55.55 0 0 1-.552-.549v-1.9a.55.55 0 0 1 .552-.548Zm0 4a.55.55 0 0 1 .552.548V58a.55.55 0 0 1-.552.549.55.55 0 0 1-.552-.549v-8.612a.55.55 0 0 1 .552-.549Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
<path
|
||||
class="tw-fill-art-primary"
|
||||
fill-rule="evenodd"
|
||||
d="M48.904 87.97c2.492 0 4.542-2.042 4.542-4.616 0-2.51-1.986-4.616-4.542-4.616-2.55 0-4.543 2.049-4.543 4.616 0 2.574 2.05 4.616 4.543 4.616Zm3.016-4.616c0 1.739-1.376 3.086-3.016 3.086-1.64 0-3.017-1.347-3.017-3.086 0-1.745 1.333-3.086 3.017-3.086 1.677 0 3.016 1.385 3.016 3.086Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
<path
|
||||
class="tw-fill-art-primary"
|
||||
fill-rule="evenodd"
|
||||
d="M108.913 84.456a.767.767 0 0 0 0-1.074l-6.098-6.213a.76.76 0 0 0-.544-.228H70.225c-2.438-5.616-7.969-9.602-14.417-9.602-8.75 0-15.73 7.185-15.73 16.015 0 8.832 7.032 16.015 15.73 16.015 6.498 0 12.081-4.036 14.475-9.756h8.303c.204 0 .4-.082.544-.228l2.933-2.989 3.034 3.091a.762.762 0 0 0 1.088 0l.918-.934.766.78a.762.762 0 0 0 1.08.008l3.135-3.107 3.294 3.356c.143.146.339.229.543.229h7.408a.76.76 0 0 0 .544-.229l5.04-5.134Zm-5.903 3.832h-6.769l-3.606-3.674a.762.762 0 0 0-1.08-.007l-3.135 3.106-.774-.788a.762.762 0 0 0-1.087 0l-.918.935-3.034-3.091a.762.762 0 0 0-1.088 0l-3.253 3.314h-8.5c-.316 0-.6.196-.712.493-2.06 5.419-7.23 9.263-13.246 9.263-7.832 0-14.204-6.475-14.204-14.485 0-8.011 6.323-14.485 14.204-14.485 5.966 0 11.09 3.795 13.2 9.12a.763.763 0 0 0 .709.482h32.235l5.346 5.448-4.288 4.37Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
<path
|
||||
class="tw-fill-art-accent"
|
||||
d="M100.357 80.991a.382.382 0 0 0-.382-.382H73.651a.382.382 0 0 0 0 .765h26.324c.211 0 .382-.171.382-.383ZM65.693 77.56c-2.04-3.686-5.74-6.133-9.95-6.133-.895 0-1.766.11-2.602.319a.382.382 0 0 1-.184-.743 11.478 11.478 0 0 1 2.785-.341c4.52 0 8.46 2.627 10.618 6.528a14.09 14.09 0 0 1 1.563 4.503.382.382 0 1 1-.752.126 13.324 13.324 0 0 0-1.478-4.258Z"
|
||||
/>
|
||||
<path
|
||||
class="tw-fill-art-primary tw-stroke-art-primary"
|
||||
fill-rule="evenodd"
|
||||
stroke-width=".355"
|
||||
d="M75.94 32.403c8.007 0 14.498 6.51 14.498 14.538a14.542 14.542 0 0 1-9.26 13.56c8.849 1.9 15.896 8.519 18.221 17.036l-1.472.404C95.343 68.475 86.492 61.48 75.95 61.48c-6.743 0-12.796 2.861-16.96 7.404l-1.123-1.036a24.374 24.374 0 0 1 12.842-7.344 14.542 14.542 0 0 1-9.265-13.563c0-8.029 6.49-14.538 14.497-14.538Zm12.972 14.538c0-7.184-5.808-13.007-12.972-13.007S62.97 39.757 62.97 46.94c0 7.184 5.807 13.008 12.971 13.008s12.972-5.823 12.972-13.008Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<!-- Small screens -->
|
||||
<h1 bitTypography="h3" class="tw-mt-2 sm:tw-hidden" id="title-smaller-screens"></h1>
|
||||
<!-- Medium to Larger screens -->
|
||||
<h1
|
||||
bitTypography="h2"
|
||||
class="tw-mt-2 tw-hidden sm:tw-block"
|
||||
id="title-larger-screens"
|
||||
></h1>
|
||||
</div>
|
||||
|
||||
<div class="tw-text-sm sm:tw-text-base" id="subtitle"></div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="tw-grow tw-w-full tw-max-w-md tw-mx-auto tw-flex tw-flex-col tw-items-center sm:tw-min-w-[28rem]"
|
||||
>
|
||||
<div
|
||||
class="tw-rounded-2xl tw-mb-10 tw-mx-auto tw-w-full sm:tw-bg-background sm:tw-border sm:tw-border-solid sm:tw-border-secondary-300 sm:tw-p-8"
|
||||
>
|
||||
<p id="msg" class="tw-hidden"></p>
|
||||
|
||||
<div class="tw-block tw-mb-4">
|
||||
<input type="checkbox" class="" id="remember" name="remember" />
|
||||
<label
|
||||
class="tw-inline-flex tw-gap-1 tw-items-baseline tw-flex-row tw-min-w-0 !tw-font-normal"
|
||||
for="remember"
|
||||
id="remember-label"
|
||||
></label>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
id="webauthn-button"
|
||||
class="!tw-text-contrast disabled:!tw-text-muted disabled:hover:!tw-text-muted disabled:hover:tw-bg-secondary-300 disabled:hover:tw-border-secondary-300 disabled:hover:tw-no-underline disabled:tw-bg-secondary-300 disabled:tw-border-secondary-300 disabled:tw-cursor-not-allowed focus-visible:tw-ring-2 focus-visible:tw-ring-offset-2 focus-visible:tw-ring-primary-600 focus-visible:tw-z-10 focus:tw-outline-none hover:tw-bg-primary-700 hover:tw-border-primary-700 hover:tw-no-underline tw-bg-primary-600 tw-block tw-border-2 tw-border-primary-600 tw-border-solid tw-font-semibold tw-no-underline tw-px-3 tw-py-1.5 tw-rounded-full tw-text-center tw-transition tw-w-full"
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -4,10 +4,6 @@ import { b64Decode, getQsParam } from "./common";
|
||||
import { buildDataString, parseWebauthnJson } from "./common-webauthn";
|
||||
import { TranslationService } from "./translation.service";
|
||||
|
||||
// FIXME: Remove when updating file. Eslint update
|
||||
// eslint-disable-next-line @typescript-eslint/no-require-imports
|
||||
require("./webauthn.scss");
|
||||
|
||||
let parsed = false;
|
||||
let webauthnJson: any;
|
||||
let parentUrl: string = null;
|
||||
@@ -75,17 +71,22 @@ document.addEventListener("DOMContentLoaded", async () => {
|
||||
|
||||
await localeService.init();
|
||||
|
||||
document.getElementById("msg").innerText = localeService.t("webAuthnFallbackMsg");
|
||||
document.getElementById("remember-label").innerText = localeService.t("rememberMe");
|
||||
document.getElementById("remember-label").innerText = localeService.t(
|
||||
"dontAskAgainOnThisDeviceFor30Days",
|
||||
);
|
||||
|
||||
const button = document.getElementById("webauthn-button");
|
||||
button.innerText = localeService.t("webAuthnAuthenticate");
|
||||
button.innerText = localeService.t("readSecurityKey");
|
||||
button.onclick = start;
|
||||
|
||||
document.getElementById("spinner").classList.add("d-none");
|
||||
const content = document.getElementById("content");
|
||||
content.classList.add("d-block");
|
||||
content.classList.remove("d-none");
|
||||
const titleForSmallerScreens = document.getElementById("title-smaller-screens");
|
||||
const titleForLargerScreens = document.getElementById("title-larger-screens");
|
||||
|
||||
titleForSmallerScreens.innerText = localeService.t("verifyIdentity");
|
||||
titleForLargerScreens.innerText = localeService.t("verifyIdentity");
|
||||
|
||||
const subtitle = document.getElementById("subtitle");
|
||||
subtitle.innerText = localeService.t("followTheStepsBelowToFinishLoggingIn");
|
||||
});
|
||||
|
||||
function start() {
|
||||
@@ -146,20 +147,24 @@ function error(message: string) {
|
||||
el.textContent = message;
|
||||
el.classList.add("alert");
|
||||
el.classList.add("alert-danger");
|
||||
el.classList.remove("tw-hidden");
|
||||
}
|
||||
|
||||
function success(message: string) {
|
||||
(document.getElementById("webauthn-button") as HTMLButtonElement).disabled = true;
|
||||
(document.getElementById("remember") as HTMLInputElement).disabled = true;
|
||||
|
||||
const el = document.getElementById("msg");
|
||||
resetMsgBox(el);
|
||||
el.textContent = message;
|
||||
el.classList.add("alert");
|
||||
el.classList.add("alert-success");
|
||||
el.classList.remove("tw-hidden");
|
||||
}
|
||||
|
||||
function resetMsgBox(el: HTMLElement) {
|
||||
el.classList.remove("alert");
|
||||
el.classList.remove("alert-danger");
|
||||
el.classList.remove("alert-success");
|
||||
el.classList.add("tw-hidden");
|
||||
}
|
||||
|
||||
@@ -5,14 +5,11 @@
|
||||
<title>Bitwarden WebAuthn Connector</title>
|
||||
</head>
|
||||
|
||||
<body style="background: transparent">
|
||||
<picture>
|
||||
<source srcset="../images/u2fkey.avif" type="image/avif" />
|
||||
<source srcset="../images/u2fkey.webp" type="image/webp" />
|
||||
<img src="../images/u2fkey.jpg" class="rounded img-fluid mb-3" />
|
||||
</picture>
|
||||
<div class="text-center">
|
||||
<button type="button" id="webauthn-button" class="btn btn-primary"></button>
|
||||
</div>
|
||||
<body class="tw-h-full tw-m-0 tw-flex tw-justify-center tw-items-center tw-bg-transparent">
|
||||
<button
|
||||
type="button"
|
||||
id="webauthn-button"
|
||||
class="tw-block !tw-text-contrast focus-visible:tw-ring-2 focus-visible:tw-ring-offset-2 focus-visible:tw-ring-primary-600 focus-visible:tw-z-10 focus:tw-outline-none hover:tw-bg-primary-700 hover:tw-border-primary-700 hover:tw-no-underline tw-bg-primary-600 tw-border-2 tw-border-primary-600 tw-border-solid tw-font-semibold tw-no-underline tw-px-3 tw-py-1.5 tw-rounded-full tw-text-center tw-transition tw-w-full"
|
||||
></button>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -13,6 +13,7 @@ let parsed = false;
|
||||
let webauthnJson: any;
|
||||
let headerText: string = null;
|
||||
let btnText: string = null;
|
||||
let btnAwaitingInteractionText: string = null;
|
||||
let btnReturnText: string = null;
|
||||
let parentUrl: string = null;
|
||||
let parentOrigin: string = null;
|
||||
@@ -21,21 +22,60 @@ let stopWebAuthn = false;
|
||||
let sentSuccess = false;
|
||||
let obj: any = null;
|
||||
|
||||
// For accessibility, we do not actually disable the button as it would
|
||||
// become unfocusable by a screenreader. We just make it look disabled.
|
||||
const disabledBtnClasses = [
|
||||
"tw-bg-secondary-300",
|
||||
"tw-border-secondary-300",
|
||||
"!tw-text-muted",
|
||||
"!tw-cursor-not-allowed",
|
||||
"hover:tw-bg-secondary-300",
|
||||
"hover:tw-border-secondary-300",
|
||||
"hover:!tw-text-muted",
|
||||
"hover:tw-no-underline",
|
||||
];
|
||||
|
||||
const enabledBtnClasses = [
|
||||
"tw-bg-primary-600",
|
||||
"tw-border-primary-600",
|
||||
"!tw-text-contrast",
|
||||
"hover:tw-bg-primary-700",
|
||||
"hover:tw-border-primary-700",
|
||||
"hover:!tw-text-contrast",
|
||||
"hover:tw-no-underline",
|
||||
];
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
init();
|
||||
|
||||
parseParameters();
|
||||
if (headerText) {
|
||||
const header = document.getElementById("webauthn-header");
|
||||
header.innerText = decodeURI(headerText);
|
||||
}
|
||||
if (btnText) {
|
||||
const button = document.getElementById("webauthn-button");
|
||||
button.innerText = decodeURI(btnText);
|
||||
button.onclick = executeWebAuthn;
|
||||
}
|
||||
});
|
||||
|
||||
function setDefaultWebAuthnButtonState() {
|
||||
if (!btnText) {
|
||||
return;
|
||||
}
|
||||
|
||||
const button = document.getElementById("webauthn-button");
|
||||
button.onclick = executeWebAuthn;
|
||||
|
||||
button.innerText = decodeURI(btnText);
|
||||
|
||||
// reset back to default button state
|
||||
button.classList.remove(...disabledBtnClasses);
|
||||
button.classList.add(...enabledBtnClasses);
|
||||
}
|
||||
|
||||
function setAwaitingInteractionWebAuthnButtonState() {
|
||||
if (!btnAwaitingInteractionText) {
|
||||
return;
|
||||
}
|
||||
const button = document.getElementById("webauthn-button");
|
||||
button.innerText = decodeURI(btnAwaitingInteractionText);
|
||||
button.onclick = null;
|
||||
|
||||
button.classList.remove(...enabledBtnClasses);
|
||||
button.classList.add(...disabledBtnClasses);
|
||||
}
|
||||
|
||||
function init() {
|
||||
start();
|
||||
onMessage();
|
||||
@@ -76,6 +116,7 @@ function parseParametersV1() {
|
||||
webauthnJson = b64Decode(data);
|
||||
headerText = getQsParam("headerText");
|
||||
btnText = getQsParam("btnText");
|
||||
btnAwaitingInteractionText = getQsParam("btnAwaitingInteractionText");
|
||||
btnReturnText = getQsParam("btnReturnText");
|
||||
}
|
||||
|
||||
@@ -113,6 +154,14 @@ function start() {
|
||||
}
|
||||
|
||||
parseParameters();
|
||||
|
||||
if (headerText) {
|
||||
const header = document.getElementById("webauthn-header");
|
||||
header.innerText = decodeURI(headerText);
|
||||
}
|
||||
|
||||
setDefaultWebAuthnButtonState();
|
||||
|
||||
if (!webauthnJson) {
|
||||
error("No data.");
|
||||
return;
|
||||
@@ -141,9 +190,12 @@ function start() {
|
||||
|
||||
function executeWebAuthn() {
|
||||
if (stopWebAuthn) {
|
||||
// reset back to default button state
|
||||
setDefaultWebAuthnButtonState();
|
||||
return;
|
||||
}
|
||||
|
||||
setAwaitingInteractionWebAuthnButtonState();
|
||||
navigator.credentials.get({ publicKey: obj }).then(success).catch(error);
|
||||
}
|
||||
|
||||
@@ -156,6 +208,7 @@ function onMessage() {
|
||||
}
|
||||
|
||||
if (event.data === "stop") {
|
||||
setDefaultWebAuthnButtonState();
|
||||
stopWebAuthn = true;
|
||||
} else if (event.data === "start" && stopWebAuthn) {
|
||||
start();
|
||||
@@ -171,6 +224,7 @@ function error(message: string) {
|
||||
returnButton(mobileCallbackUri + "?error=" + encodeURIComponent(message));
|
||||
} else {
|
||||
parent.postMessage("error|" + message, parentUrl);
|
||||
setDefaultWebAuthnButtonState();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user