Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2025-02-19 01:51:27 +01:00
Code Issues Projects Releases Wiki Activity

PM-8113 - Webauthn 2FA - WIP on updating connectors to latest style

Browse Source
This commit is contained in:
Jared Snider 2025-01-30 19:50:39 -05:00
parent 4cce1d788d
commit d0454afba9
No known key found for this signature in database
GPG Key ID: A149DDD612516286
5 changed files with 57 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
apps/web/src/connectors/webauthn-fallback.html
View File

@ -1,12 +1,15 @@
<!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">
<body class="tw-min-h-full !tw-min-w-0 tw-text-center !tw-bg-background-alt">
<!-- <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" />
@ -34,6 +37,42 @@
</div>
</div>
</div>
</div>
</div> -->
<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 tw-m-8" 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">
icon goes here
<!-- <bit-icon [icon]="icon"></bit-icon> -->
</div>
<div>
<!-- Small screens -->
<h1 bitTypography="h3" class="tw-mt-2 sm:tw-hidden">Title</h1>
<!-- Medium to Larger screens -->
<h1 bitTypography="h2" class="tw-mt-2 tw-hidden sm:tw-block">Title</h1>
</div>
<div class="tw-text-sm sm:tw-text-base">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"
>
<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>
</main>
</body>
</html>

6
apps/web/src/connectors/webauthn-fallback.ts
View File

@ -159,7 +159,7 @@ function success(message: string) {
}
function resetMsgBox(el: HTMLElement) {
el.classList.remove("alert");
el.classList.remove("alert-danger");
el.classList.remove("alert-success");
el?.classList?.remove("alert");
el?.classList?.remove("alert-danger");
el?.classList?.remove("alert-success");
}

17
apps/web/src/connectors/webauthn.html
View File

@ -5,14 +5,13 @@
<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">
<!-- <div class="tw-w-full tw-flex tw-justify-center tw-items-center"> -->
<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> -->
</body>
</html>

2
apps/web/src/scss/plugins.scss
View File

@ -12,7 +12,7 @@
}
#web-authn-frame {
height: 315px;
height: 40px;
@include themify($themes) {
background: themed("imgLoading") 0 0 no-repeat;
}

4
apps/web/webpack.config.js
View File

@ -94,7 +94,7 @@ const plugins = [
new HtmlWebpackPlugin({
template: "./src/connectors/webauthn.html",
filename: "webauthn-connector.html",
chunks: ["connectors/webauthn"],
chunks: ["connectors/webauthn", "styles"],
}),
new HtmlWebpackPlugin({
template: "./src/connectors/webauthn-mobile.html",
@ -104,7 +104,7 @@ const plugins = [
new HtmlWebpackPlugin({
template: "./src/connectors/webauthn-fallback.html",
filename: "webauthn-fallback-connector.html",
chunks: ["connectors/webauthn-fallback"],
chunks: ["connectors/webauthn-fallback", "styles"],
}),
new HtmlWebpackPlugin({
template: "./src/connectors/sso.html",