From 5a2294fb4fd1acfdcd97a80bf72fe32c3779686a Mon Sep 17 00:00:00 2001 From: Hinton Date: Tue, 1 Feb 2022 09:29:55 +0100 Subject: [PATCH] Initial attempt at extracting the connectors --- .../src}/captcha-mobile.html | 2 +- .../src}/captcha.html | 0 connectors/src/captcha/captcha-mobile.scss | 46 ++++++ .../src/captcha}/captcha.scss | 0 .../src/captcha}/captcha.ts | 2 +- .../src/common/index.ts | 0 connectors/src/common/styles.scss | 22 +++ {src/connectors => connectors/src}/duo.html | 0 .../src/duo}/duo.scss | 2 +- {src/connectors => connectors/src/duo}/duo.ts | 2 +- connectors/src/sso.html | 47 ++++++ connectors/src/sso/sso.scss | 82 +++++++++ {src/connectors => connectors/src/sso}/sso.ts | 2 +- .../src}/webauthn-fallback.html | 2 +- .../src}/webauthn-mobile.html | 10 +- .../src}/webauthn.html | 6 +- .../src/webauthn}/common-webauthn.ts | 0 .../src/webauthn}/webauthn-fallback.ts | 2 +- connectors/src/webauthn/webauthn.scss | 109 ++++++++++++ .../src/webauthn}/webauthn.ts | 2 +- connectors/webpack.config.js | 155 ++++++++++++++++++ src/connectors/captcha-mobile.scss | 1 - src/connectors/sso.html | 33 ---- src/connectors/sso.scss | 1 - src/connectors/webauthn.scss | 5 - webpack.config.js | 40 ----- 26 files changed, 477 insertions(+), 96 deletions(-) rename {src/connectors => connectors/src}/captcha-mobile.html (87%) rename {src/connectors => connectors/src}/captcha.html (100%) create mode 100644 connectors/src/captcha/captcha-mobile.scss rename {src/connectors => connectors/src/captcha}/captcha.scss (100%) rename {src/connectors => connectors/src/captcha}/captcha.ts (98%) rename src/connectors/common.ts => connectors/src/common/index.ts (100%) create mode 100644 connectors/src/common/styles.scss rename {src/connectors => connectors/src}/duo.html (100%) rename {src/connectors => connectors/src/duo}/duo.scss (67%) rename {src/connectors => connectors/src/duo}/duo.ts (96%) create mode 100644 connectors/src/sso.html create mode 100644 connectors/src/sso/sso.scss rename {src/connectors => connectors/src/sso}/sso.ts (97%) rename {src/connectors => connectors/src}/webauthn-fallback.html (92%) rename {src/connectors => connectors/src}/webauthn-mobile.html (66%) rename {src/connectors => connectors/src}/webauthn.html (58%) rename {src/connectors => connectors/src/webauthn}/common-webauthn.ts (100%) rename {src/connectors => connectors/src/webauthn}/webauthn-fallback.ts (98%) create mode 100644 connectors/src/webauthn/webauthn.scss rename {src/connectors => connectors/src/webauthn}/webauthn.ts (98%) create mode 100644 connectors/webpack.config.js delete mode 100644 src/connectors/captcha-mobile.scss delete mode 100644 src/connectors/sso.html delete mode 100644 src/connectors/sso.scss delete mode 100644 src/connectors/webauthn.scss diff --git a/src/connectors/captcha-mobile.html b/connectors/src/captcha-mobile.html similarity index 87% rename from src/connectors/captcha-mobile.html rename to connectors/src/captcha-mobile.html index 74932639..add70eb7 100644 --- a/src/connectors/captcha-mobile.html +++ b/connectors/src/captcha-mobile.html @@ -14,7 +14,7 @@
- +

Captcha Required

diff --git a/src/connectors/captcha.html b/connectors/src/captcha.html similarity index 100% rename from src/connectors/captcha.html rename to connectors/src/captcha.html diff --git a/connectors/src/captcha/captcha-mobile.scss b/connectors/src/captcha/captcha-mobile.scss new file mode 100644 index 00000000..fbc93c3c --- /dev/null +++ b/connectors/src/captcha/captcha-mobile.scss @@ -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; +} diff --git a/src/connectors/captcha.scss b/connectors/src/captcha/captcha.scss similarity index 100% rename from src/connectors/captcha.scss rename to connectors/src/captcha/captcha.scss diff --git a/src/connectors/captcha.ts b/connectors/src/captcha/captcha.ts similarity index 98% rename from src/connectors/captcha.ts rename to connectors/src/captcha/captcha.ts index e66d6b07..b13378cb 100644 --- a/src/connectors/captcha.ts +++ b/connectors/src/captcha/captcha.ts @@ -1,4 +1,4 @@ -import { b64Decode, getQsParam } from "./common"; +import { b64Decode, getQsParam } from "../common"; declare var hcaptcha: any; diff --git a/src/connectors/common.ts b/connectors/src/common/index.ts similarity index 100% rename from src/connectors/common.ts rename to connectors/src/common/index.ts diff --git a/connectors/src/common/styles.scss b/connectors/src/common/styles.scss new file mode 100644 index 00000000..1e9e2067 --- /dev/null +++ b/connectors/src/common/styles.scss @@ -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; +} diff --git a/src/connectors/duo.html b/connectors/src/duo.html similarity index 100% rename from src/connectors/duo.html rename to connectors/src/duo.html diff --git a/src/connectors/duo.scss b/connectors/src/duo/duo.scss similarity index 67% rename from src/connectors/duo.scss rename to connectors/src/duo/duo.scss index 0fa97956..05ec8774 100644 --- a/src/connectors/duo.scss +++ b/connectors/src/duo/duo.scss @@ -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 { diff --git a/src/connectors/duo.ts b/connectors/src/duo/duo.ts similarity index 96% rename from src/connectors/duo.ts rename to connectors/src/duo/duo.ts index c4e6cec3..4662216f 100644 --- a/src/connectors/duo.ts +++ b/connectors/src/duo/duo.ts @@ -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"); diff --git a/connectors/src/sso.html b/connectors/src/sso.html new file mode 100644 index 00000000..3e325aa2 --- /dev/null +++ b/connectors/src/sso.html @@ -0,0 +1,47 @@ + + + + + + + + Bitwarden + + + + + + + + + +
+
+ +
+

+ +

+
+
+
+ + diff --git a/connectors/src/sso/sso.scss b/connectors/src/sso/sso.scss new file mode 100644 index 00000000..06da6581 --- /dev/null +++ b/connectors/src/sso/sso.scss @@ -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"; +} diff --git a/src/connectors/sso.ts b/connectors/src/sso/sso.ts similarity index 97% rename from src/connectors/sso.ts rename to connectors/src/sso/sso.ts index 63b76461..fc418e80 100644 --- a/src/connectors/sso.ts +++ b/connectors/src/sso/sso.ts @@ -1,4 +1,4 @@ -import { getQsParam } from "./common"; +import { getQsParam } from "../common"; // tslint:disable-next-line require("./sso.scss"); diff --git a/src/connectors/webauthn-fallback.html b/connectors/src/webauthn-fallback.html similarity index 92% rename from src/connectors/webauthn-fallback.html rename to connectors/src/webauthn-fallback.html index 4c532885..93a71891 100644 --- a/src/connectors/webauthn-fallback.html +++ b/connectors/src/webauthn-fallback.html @@ -9,7 +9,7 @@
- +

- +

- +

- - - + + +
diff --git a/src/connectors/webauthn.html b/connectors/src/webauthn.html similarity index 58% rename from src/connectors/webauthn.html rename to connectors/src/webauthn.html index 2e77cc0d..eef78df8 100644 --- a/src/connectors/webauthn.html +++ b/connectors/src/webauthn.html @@ -7,9 +7,9 @@ - - - + + +
diff --git a/src/connectors/common-webauthn.ts b/connectors/src/webauthn/common-webauthn.ts similarity index 100% rename from src/connectors/common-webauthn.ts rename to connectors/src/webauthn/common-webauthn.ts diff --git a/src/connectors/webauthn-fallback.ts b/connectors/src/webauthn/webauthn-fallback.ts similarity index 98% rename from src/connectors/webauthn-fallback.ts rename to connectors/src/webauthn/webauthn-fallback.ts index e4020431..090c913c 100644 --- a/src/connectors/webauthn-fallback.ts +++ b/connectors/src/webauthn/webauthn-fallback.ts @@ -1,4 +1,4 @@ -import { b64Decode, getQsParam } from "./common"; +import { b64Decode, getQsParam } from "../common"; import { buildDataString, parseWebauthnJson } from "./common-webauthn"; // tslint:disable-next-line diff --git a/connectors/src/webauthn/webauthn.scss b/connectors/src/webauthn/webauthn.scss new file mode 100644 index 00000000..42dbd942 --- /dev/null +++ b/connectors/src/webauthn/webauthn.scss @@ -0,0 +1,109 @@ +@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-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; +} diff --git a/src/connectors/webauthn.ts b/connectors/src/webauthn/webauthn.ts similarity index 98% rename from src/connectors/webauthn.ts rename to connectors/src/webauthn/webauthn.ts index 32097c0a..fa42e08f 100644 --- a/src/connectors/webauthn.ts +++ b/connectors/src/webauthn/webauthn.ts @@ -1,4 +1,4 @@ -import { b64Decode, getQsParam } from "./common"; +import { b64Decode, getQsParam } from "../common"; import { buildDataString, parseWebauthnJson } from "./common-webauthn"; // tslint:disable-next-line diff --git a/connectors/webpack.config.js b/connectors/webpack.config.js new file mode 100644 index 00000000..85f9a5d3 --- /dev/null +++ b/connectors/webpack.config.js @@ -0,0 +1,155 @@ +const path = require("path"); +const webpack = require("webpack"); +const { CleanWebpackPlugin } = require("clean-webpack-plugin"); +const HtmlWebpackPlugin = require("html-webpack-plugin"); +const HtmlWebpackInjector = require("html-webpack-injector"); +const CopyWebpackPlugin = require("copy-webpack-plugin"); +const MiniCssExtractPlugin = require("mini-css-extract-plugin"); +const TerserPlugin = require("terser-webpack-plugin"); +const pjson = require("../package.json"); + +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][ext]", + }, + type: "asset/resource", + }, + { + test: /\.(jpe?g|png|gif|svg|webp|avif)$/i, + exclude: /.*(fontawesome-webfont)\.svg/, + generator: { + filename: "images/[name][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: ["connectors/duo"], + }), + new HtmlWebpackPlugin({ + template: "./src/webauthn.html", + filename: "webauthn.html", + chunks: ["connectors/webauthn"], + }), + new HtmlWebpackPlugin({ + template: "./src/webauthn-mobile.html", + filename: "webauthn-mobile.html", + chunks: ["connectors/webauthn"], + }), + new HtmlWebpackPlugin({ + template: "./src/webauthn-fallback.html", + filename: "webauthn-fallback.html", + chunks: ["connectors/webauthn-fallback"], + }), + new HtmlWebpackPlugin({ + template: "./src/sso.html", + filename: "sso.html", + chunks: ["connectors/sso"], + }), + new HtmlWebpackPlugin({ + template: "./src/captcha.html", + filename: "captcha.html", + chunks: ["connectors/captcha"], + }), + new HtmlWebpackPlugin({ + template: "./src/captcha-mobile.html", + filename: "captcha-mobile.html", + chunks: ["connectors/captcha"], + }), + + new MiniCssExtractPlugin({ + filename: "[name].[contenthash].css", + chunkFilename: "[id].[contenthash].css", + }), +]; + +const webpackConfig = { + mode: NODE_ENV, + devtool: "source-map", + entry: { + "connectors/webauthn": "./src/webauthn/webauthn.ts", + "connectors/webauthn-fallback": "./src/webauthn/webauthn-fallback.ts", + "connectors/duo": "./src/duo/duo.ts", + "connectors/sso": "./src/sso/sso.ts", + "connectors/captcha": "./src/captcha/captcha.ts", + }, + optimization: { + splitChunks: { + cacheGroups: { + commons: { + test: /[\\/]node_modules[\\/]/, + name: "app/vendor", + chunks: (chunk) => { + return chunk.name === "app/main"; + }, + }, + }, + }, + minimizer: [ + new TerserPlugin({ + terserOptions: { + safari10: true, + }, + }), + ], + }, + resolve: { + extensions: [".ts", ".js"], + symlinks: false, + modules: [path.resolve("../", "node_modules")], + fallback: { + buffer: false, + util: require.resolve("util/"), + assert: false, + }, + }, + output: { + filename: "[name].[contenthash].js", + path: path.resolve(__dirname, "build"), + clean: true, + }, + module: { rules: moduleRules }, + plugins: plugins, +}; + +module.exports = webpackConfig; diff --git a/src/connectors/captcha-mobile.scss b/src/connectors/captcha-mobile.scss deleted file mode 100644 index a4c7f9b2..00000000 --- a/src/connectors/captcha-mobile.scss +++ /dev/null @@ -1 +0,0 @@ -@import "../scss/styles.scss"; diff --git a/src/connectors/sso.html b/src/connectors/sso.html deleted file mode 100644 index b2ebc782..00000000 --- a/src/connectors/sso.html +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - - - Bitwarden - - - - - - - - - -
-
- -
-

- -

-
-
-
- - diff --git a/src/connectors/sso.scss b/src/connectors/sso.scss deleted file mode 100644 index a4c7f9b2..00000000 --- a/src/connectors/sso.scss +++ /dev/null @@ -1 +0,0 @@ -@import "../scss/styles.scss"; diff --git a/src/connectors/webauthn.scss b/src/connectors/webauthn.scss deleted file mode 100644 index 5cca0413..00000000 --- a/src/connectors/webauthn.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import "../scss/styles.scss"; - -body { - min-width: 0px !important; -} diff --git a/webpack.config.js b/webpack.config.js index db713362..dfdad194 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -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: {