1
0
mirror of https://github.com/bitwarden/web synced 2025-12-06 00:03:28 +00:00

Compare commits

...

2 Commits

Author SHA1 Message Date
Hinton
a5d3caba65 Set public path to be connectors. Fix webauthn-fallback styling 2022-02-01 10:07:25 +01:00
Hinton
5a2294fb4f Initial attempt at extracting the connectors 2022-02-01 09:29:55 +01:00
26 changed files with 561 additions and 97 deletions

View File

@@ -14,7 +14,7 @@
<body class="layout_frontend">
<div class="row justify-content-md-center mt-5">
<div>
<img src="..//images/logo-dark@2x.png" class="logo mb-2" alt="Bitwarden" />
<img src="../../src/images/logo-dark@2x.png" class="logo mb-2" alt="Bitwarden" />
<p id="captchaRequired" class="lead text-center mx-4 mb-4">Captcha Required</p>
<div id="captcha"></div>
</div>

View File

@@ -0,0 +1,46 @@
@import "../common/styles.scss";
.justify-content-md-center {
justify-content: center !important;
}
.row {
display: flex;
flex-wrap: wrap;
margin-right: -10px;
margin-left: -10px;
}
.mt-5,
.my-5 {
margin-top: 3rem !important;
}
.mb-2,
.my-2 {
margin-bottom: 0.5rem !important;
}
.ml-4,
.mx-4 {
margin-left: 1.5rem !important;
}
.mb-4,
.my-4 {
margin-bottom: 1.5rem !important;
}
.mr-4,
.mx-4 {
margin-right: 1.5rem !important;
}
.lead {
font-size: 1.25rem;
font-weight: normal;
}
.text-center {
text-align: center !important;
}

View File

@@ -1,4 +1,4 @@
import { b64Decode, getQsParam } from "./common";
import { b64Decode, getQsParam } from "../common";
declare var hcaptcha: any;

View File

@@ -0,0 +1,22 @@
@import "~bootstrap/scss/_functions";
@import "~bootstrap/scss/_variables";
@import "~bootstrap/scss/_mixins";
@import "~bootstrap/scss/_root";
@import "~bootstrap/scss/_reboot";
html {
font-size: 14px;
}
html.theme_light body.layout_frontend {
background-color: #ecf0f5;
color: #333;
}
img.logo {
display: block;
height: 43px;
margin: 0 auto;
margin-bottom: 0px;
width: 284px;
}

View File

@@ -5,7 +5,7 @@ body {
}
body {
background: #efeff4 url("../images/loading.svg") 0 0 no-repeat;
background: #efeff4 url("../../../src/images/loading.svg") 0 0 no-repeat;
}
iframe {

View File

@@ -1,5 +1,5 @@
import * as DuoWebSDK from "duo_web_sdk";
import { getQsParam } from "./common";
import { getQsParam } from "../common";
// tslint:disable-next-line
require("./duo.scss");

47
connectors/src/sso.html Normal file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html class="theme_light">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=1010" />
<meta name="theme-color" content="#175DDC" />
<title>Bitwarden</title>
<link
rel="apple-touch-icon"
sizes="180x180"
href="../../src/images/icons/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="../../src/images/icons/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="../../src/images/icons/favicon-16x16.png"
/>
<link rel="mask-icon" href="../../src/images/icons/safari-pinned-tab.svg" color="#175DDC" />
<link rel="manifest" href="../../src/manifest.json" />
</head>
<body class="layout_frontend">
<div class="mt-5 d-flex justify-content-center">
<div>
<img src="../../src/images/logo-dark@2x.png" class="mb-4 logo" alt="Bitwarden" />
<div id="content">
<p class="text-center">
<i
class="bwi bwi-spinner bwi-spin bwi-2x text-muted"
title="Loading"
aria-hidden="true"
></i>
</p>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,82 @@
@import "../common/styles.scss";
.mt-5,
.my-5 {
margin-top: 3rem !important;
}
.d-flex {
display: -ms-flexbox !important;
display: flex !important;
}
.justify-content-center {
-ms-flex-pack: center !important;
justify-content: center !important;
}
.mb-4,
.my-4 {
margin-bottom: 1.5rem !important;
}
.text-center {
text-align: center !important;
}
$icomoon-font-family: "bwi-font" !default;
$icomoon-font-path: "~@bitwarden/jslib-angular/src/scss/bwicons/fonts/" !default;
@font-face {
font-family: "#{$icomoon-font-family}";
src: url($icomoon-font-path + "bwi-font.svg") format("svg"),
url($icomoon-font-path + "bwi-font.ttf") format("truetype"),
url($icomoon-font-path + "bwi-font.woff") format("woff"),
url($icomoon-font-path + "bwi-font.woff2") format("woff2");
font-weight: normal;
font-style: normal;
font-display: block;
}
// Base Class
.bwi {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: "#{$icomoon-font-family}" !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
display: inline-block;
/* Better Font Rendering */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.bwi-2x {
font-size: 2em;
}
// Spin Animations
.bwi-spin {
animation: bwi-spin 2s infinite linear;
}
@keyframes bwi-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
// Rotation
.bwi-rotate-270 {
transform: rotate(270deg);
}
.bwi-spinner:before {
content: "\e937";
}

View File

@@ -1,4 +1,4 @@
import { getQsParam } from "./common";
import { getQsParam } from "../common";
// tslint:disable-next-line
require("./sso.scss");

View File

@@ -9,7 +9,7 @@
<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" />
<img src="../../src/images/logo-dark@2x.png" class="mb-4 logo" alt="Bitwarden" />
<div id="spinner">
<p class="text-center">
<i

View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html class="theme_light">
<head>
<meta charset="utf-8" />
<meta
@@ -14,12 +14,12 @@
<body style="background: transparent">
<div class="row justify-content-md-center mt-5">
<div>
<img src="../images/logo-dark@2x.png" class="logo mb-2" alt="Bitwarden" />
<img src="../../src/images/logo-dark@2x.png" class="logo mb-2" alt="Bitwarden" />
<p id="webauthn-header" class="lead text-center mx-4 mb-4"></p>
<picture>
<source srcset="../images/u2fkey-mobile.avif" type="image/avif" />
<source srcset="../images/u2fkey-mobile.webp" type="image/webp" />
<img src="../images/u2fkey-mobile.jpg" class="rounded img-fluid" />
<source srcset="../../src/images/u2fkey-mobile.avif" type="image/avif" />
<source srcset="../../src/images/u2fkey-mobile.webp" type="image/webp" />
<img src="../../src/images/u2fkey-mobile.jpg" class="rounded img-fluid" />
</picture>
<div class="text-center mt-4">
<button id="webauthn-button" class="btn btn-primary btn-lg"></button>

View File

@@ -7,9 +7,9 @@
<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" />
<source srcset="../../src/images/u2fkey.avif" type="image/avif" />
<source srcset="../../src/images/u2fkey.webp" type="image/webp" />
<img src="../../src/images/u2fkey.jpg" class="rounded img-fluid mb-3" />
</picture>
<div class="text-center">
<button id="webauthn-button" class="btn btn-primary"></button>

View File

@@ -1,4 +1,4 @@
import { b64Decode, getQsParam } from "./common";
import { b64Decode, getQsParam } from "../common";
import { buildDataString, parseWebauthnJson } from "./common-webauthn";
// tslint:disable-next-line
@@ -85,7 +85,7 @@ document.addEventListener("DOMContentLoaded", async () => {
});
async function loadLocales(newLocale: string) {
const filePath = `locales/${newLocale}/messages.json?cache=${process.env.CACHE_TAG}`;
const filePath = `/locales/${newLocale}/messages.json?cache=${process.env.CACHE_TAG}`;
const localesResult = await fetch(filePath);
return await localesResult.json();
}

View File

@@ -0,0 +1,197 @@
@import "../common/styles.scss";
body {
min-width: 0px !important;
}
.mb-3,
.my-3 {
margin-bottom: 1rem !important;
}
.rounded {
border-radius: 0.25rem !important;
}
.img-fluid {
max-width: 100%;
height: auto;
}
.text-center {
text-align: center !important;
}
.btn {
display: inline-block;
font-weight: 600;
color: #333;
text-align: center;
vertical-align: middle;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn-primary {
color: #fff;
background-color: #175ddc;
border-color: #175ddc;
}
.btn:not(:disabled):not(.disabled) {
cursor: pointer;
}
.btn:hover,
.swal2-popup .swal2-actions button:hover {
color: #333;
text-decoration: none;
}
.btn-primary:hover {
color: #fff;
background-color: #134eb9;
border-color: #1249ae;
}
/** Mobile **/
.mt-5,
.my-5 {
margin-top: 3rem !important;
}
.justify-content-center,
.justify-content-md-center {
justify-content: center !important;
}
.row {
display: flex;
flex-wrap: wrap;
margin-right: -10px;
margin-left: -10px;
}
.mb-2,
.my-2 {
margin-bottom: 0.5rem !important;
}
.ml-4,
.mx-4 {
margin-left: 1.5rem !important;
}
.mb-4,
.my-4 {
margin-bottom: 1.5rem !important;
}
.mr-4,
.mx-4 {
margin-right: 1.5rem !important;
}
.lead {
font-size: 1.25rem;
font-weight: normal;
}
/** Fallback **/
.container {
margin: 0 auto;
max-width: 980px;
}
.col-5 {
position: relative;
width: 100%;
padding-right: 10px;
padding-left: 10px;
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%;
}
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem;
}
.d-block {
display: block !important;
}
.card-body {
flex: 1 1 auto;
min-height: 1px;
padding: 1.25rem;
}
.alert {
position: relative;
padding: 0.75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
border-radius: 0.25rem;
}
.alert-danger {
color: #73271e;
background-color: #f8dbd7;
border-color: #f5cdc8;
}
.form-check {
position: relative;
display: block;
padding-left: 1.25rem;
}
.form-check-input {
position: absolute;
margin-top: 0.3rem;
margin-left: -1.25rem;
}
input[type="radio"],
input[type="checkbox"] {
cursor: pointer;
}
.form-check-label {
margin-bottom: 0;
}
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top-color: currentcolor;
border-top-style: none;
border-top-width: 0px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}

View File

@@ -1,4 +1,4 @@
import { b64Decode, getQsParam } from "./common";
import { b64Decode, getQsParam } from "../common";
import { buildDataString, parseWebauthnJson } from "./common-webauthn";
// tslint:disable-next-line

View File

@@ -0,0 +1,150 @@
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const HtmlWebpackInjector = require("html-webpack-injector");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const NODE_ENV = process.env.NODE_ENV == null ? "development" : process.env.NODE_ENV;
const moduleRules = [
{
test: /\.ts$/,
enforce: "pre",
loader: "tslint-loader",
},
{
test: /\.tsx?$/,
use: [
{
loader: "ts-loader",
options: {
transpileOnly: true,
},
},
],
},
{
test: /\.(html)$/,
loader: "html-loader",
},
{
test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
exclude: /loading(|-white).svg/,
generator: {
filename: "fonts/[name].[contenthash][ext]",
},
type: "asset/resource",
},
{
test: /\.(jpe?g|png|gif|svg|webp|avif)$/i,
exclude: /.*(fontawesome-webfont)\.svg/,
generator: {
filename: "images/[name].[contenthash][ext]",
},
type: "asset/resource",
},
{
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
"css-loader",
"sass-loader",
],
},
];
const plugins = [
new HtmlWebpackInjector(),
new HtmlWebpackPlugin({
template: "./src/duo.html",
filename: "duo.html",
chunks: ["duo"],
}),
new HtmlWebpackPlugin({
template: "./src/webauthn.html",
filename: "webauthn.html",
chunks: ["webauthn"],
}),
new HtmlWebpackPlugin({
template: "./src/webauthn-mobile.html",
filename: "webauthn-mobile.html",
chunks: ["webauthn"],
}),
new HtmlWebpackPlugin({
template: "./src/webauthn-fallback.html",
filename: "webauthn-fallback.html",
chunks: ["webauthn-fallback"],
}),
new HtmlWebpackPlugin({
template: "./src/sso.html",
filename: "sso.html",
chunks: ["sso"],
}),
new HtmlWebpackPlugin({
template: "./src/captcha.html",
filename: "captcha.html",
chunks: ["captcha"],
}),
new HtmlWebpackPlugin({
template: "./src/captcha-mobile.html",
filename: "captcha-mobile.html",
chunks: ["captcha"],
}),
new MiniCssExtractPlugin({
filename: "assets/[name].[contenthash].css",
chunkFilename: "assets/[id].[contenthash].css",
}),
new webpack.EnvironmentPlugin({
CACHE_TAG: Math.random().toString(36).substring(7),
}),
new webpack.ProvidePlugin({
process: "process/browser",
}),
];
const webpackConfig = {
mode: NODE_ENV,
devtool: "source-map",
entry: {
webauthn: "./src/webauthn/webauthn.ts",
"webauthn-fallback": "./src/webauthn/webauthn-fallback.ts",
duo: "./src/duo/duo.ts",
sso: "./src/sso/sso.ts",
captcha: "./src/captcha/captcha.ts",
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: "app/vendor",
chunks: (chunk) => {
return chunk.name === "app/main";
},
},
},
},
},
resolve: {
extensions: [".ts", ".js"],
symlinks: false,
modules: [path.resolve("../", "node_modules")],
fallback: {
buffer: false,
util: require.resolve("util/"),
assert: false,
},
},
output: {
filename: "assets/[name].[contenthash].js",
path: path.resolve(__dirname, "build"),
publicPath: "/connectors/",
clean: true,
},
module: { rules: moduleRules },
plugins: plugins,
};
module.exports = webpackConfig;

View File

@@ -1 +0,0 @@
@import "../scss/styles.scss";

View File

@@ -1,33 +0,0 @@
<!DOCTYPE html>
<html class="theme_light">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=1010" />
<meta name="theme-color" content="#175DDC" />
<title>Bitwarden</title>
<link rel="apple-touch-icon" sizes="180x180" href="../images/icons/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="../images/icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="../images/icons/favicon-16x16.png" />
<link rel="mask-icon" href="../images/icons/safari-pinned-tab.svg" color="#175DDC" />
<link rel="manifest" href="../manifest.json" />
</head>
<body class="layout_frontend">
<div class="mt-5 d-flex justify-content-center">
<div>
<img src="../images/logo-dark@2x.png" class="mb-4 logo" alt="Bitwarden" />
<div id="content">
<p class="text-center">
<i
class="bwi bwi-spinner bwi-spin bwi-2x text-muted"
title="Loading"
aria-hidden="true"
></i>
</p>
</div>
</div>
</div>
</body>
</html>

View File

@@ -1 +0,0 @@
@import "../scss/styles.scss";

View File

@@ -1,5 +0,0 @@
@import "../scss/styles.scss";
body {
min-width: 0px !important;
}

View File

@@ -72,41 +72,6 @@ const plugins = [
chunks: ["theme_head", "app/polyfills", "app/vendor", "app/main"],
}),
new HtmlWebpackInjector(),
new HtmlWebpackPlugin({
template: "./src/connectors/duo.html",
filename: "duo-connector.html",
chunks: ["connectors/duo"],
}),
new HtmlWebpackPlugin({
template: "./src/connectors/webauthn.html",
filename: "webauthn-connector.html",
chunks: ["connectors/webauthn"],
}),
new HtmlWebpackPlugin({
template: "./src/connectors/webauthn-mobile.html",
filename: "webauthn-mobile-connector.html",
chunks: ["connectors/webauthn"],
}),
new HtmlWebpackPlugin({
template: "./src/connectors/webauthn-fallback.html",
filename: "webauthn-fallback-connector.html",
chunks: ["connectors/webauthn-fallback"],
}),
new HtmlWebpackPlugin({
template: "./src/connectors/sso.html",
filename: "sso-connector.html",
chunks: ["connectors/sso"],
}),
new HtmlWebpackPlugin({
template: "./src/connectors/captcha.html",
filename: "captcha-connector.html",
chunks: ["connectors/captcha"],
}),
new HtmlWebpackPlugin({
template: "./src/connectors/captcha-mobile.html",
filename: "captcha-mobile-connector.html",
chunks: ["connectors/captcha"],
}),
new CopyWebpackPlugin({
patterns: [
{ from: "./src/.nojekyll" },
@@ -209,11 +174,6 @@ const webpackConfig = {
entry: {
"app/polyfills": "./src/app/polyfills.ts",
"app/main": "./src/app/main.ts",
"connectors/webauthn": "./src/connectors/webauthn.ts",
"connectors/webauthn-fallback": "./src/connectors/webauthn-fallback.ts",
"connectors/duo": "./src/connectors/duo.ts",
"connectors/sso": "./src/connectors/sso.ts",
"connectors/captcha": "./src/connectors/captcha.ts",
theme_head: "./src/theme.js",
},
optimization: {