Set public path to be connectors. Fix webauthn-fallback styling

connectors/src/webauthn/webauthn-fallback.ts

@@ -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();
 }

connectors/src/webauthn/webauthn.scss

@@ -65,13 +65,14 @@ body {
   border-color: #1249ae;
 }
 
-/** MOBILE **/
+/** Mobile **/
 
 .mt-5,
 .my-5 {
   margin-top: 3rem !important;
 }
 
+.justify-content-center,
 .justify-content-md-center {
   justify-content: center !important;
 }
@@ -107,3 +108,90 @@ body {
   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);
+}

connectors/webpack.config.js

@@ -1,12 +1,8 @@
 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;
 
@@ -35,7 +31,7 @@ const moduleRules = [
     test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
     exclude: /loading(|-white).svg/,
     generator: {
-      filename: "fonts/[name][ext]",
+      filename: "fonts/[name].[contenthash][ext]",
     },
     type: "asset/resource",
   },
@@ -43,7 +39,7 @@ const moduleRules = [
     test: /\.(jpe?g|png|gif|svg|webp|avif)$/i,
     exclude: /.*(fontawesome-webfont)\.svg/,
     generator: {
-      filename: "images/[name][ext]",
+      filename: "images/[name].[contenthash][ext]",
     },
     type: "asset/resource",
   },
@@ -64,42 +60,47 @@ const plugins = [
   new HtmlWebpackPlugin({
     template: "./src/duo.html",
     filename: "duo.html",
-    chunks: ["connectors/duo"],
+    chunks: ["duo"],
   }),
   new HtmlWebpackPlugin({
     template: "./src/webauthn.html",
     filename: "webauthn.html",
-    chunks: ["connectors/webauthn"],
+    chunks: ["webauthn"],
   }),
   new HtmlWebpackPlugin({
     template: "./src/webauthn-mobile.html",
     filename: "webauthn-mobile.html",
-    chunks: ["connectors/webauthn"],
+    chunks: ["webauthn"],
   }),
   new HtmlWebpackPlugin({
     template: "./src/webauthn-fallback.html",
     filename: "webauthn-fallback.html",
-    chunks: ["connectors/webauthn-fallback"],
+    chunks: ["webauthn-fallback"],
   }),
   new HtmlWebpackPlugin({
     template: "./src/sso.html",
     filename: "sso.html",
-    chunks: ["connectors/sso"],
+    chunks: ["sso"],
   }),
   new HtmlWebpackPlugin({
     template: "./src/captcha.html",
     filename: "captcha.html",
-    chunks: ["connectors/captcha"],
+    chunks: ["captcha"],
   }),
   new HtmlWebpackPlugin({
     template: "./src/captcha-mobile.html",
     filename: "captcha-mobile.html",
-    chunks: ["connectors/captcha"],
+    chunks: ["captcha"],
   }),
-
   new MiniCssExtractPlugin({
-    filename: "[name].[contenthash].css",
+    filename: "assets/[name].[contenthash].css",
-    chunkFilename: "[id].[contenthash].css",
+    chunkFilename: "assets/[id].[contenthash].css",
+  }),
+  new webpack.EnvironmentPlugin({
+    CACHE_TAG: Math.random().toString(36).substring(7),
+  }),
+  new webpack.ProvidePlugin({
+    process: "process/browser",
   }),
 ];
 
@@ -107,11 +108,11 @@ const webpackConfig = {
   mode: NODE_ENV,
   devtool: "source-map",
   entry: {
-    "connectors/webauthn": "./src/webauthn/webauthn.ts",
+    webauthn: "./src/webauthn/webauthn.ts",
-    "connectors/webauthn-fallback": "./src/webauthn/webauthn-fallback.ts",
+    "webauthn-fallback": "./src/webauthn/webauthn-fallback.ts",
-    "connectors/duo": "./src/duo/duo.ts",
+    duo: "./src/duo/duo.ts",
-    "connectors/sso": "./src/sso/sso.ts",
+    sso: "./src/sso/sso.ts",
-    "connectors/captcha": "./src/captcha/captcha.ts",
+    captcha: "./src/captcha/captcha.ts",
   },
   optimization: {
     splitChunks: {
@@ -125,13 +126,6 @@ const webpackConfig = {
         },
       },
     },
-    minimizer: [
-      new TerserPlugin({
-        terserOptions: {
-          safari10: true,
-        },
-      }),
-    ],
   },
   resolve: {
     extensions: [".ts", ".js"],
@@ -144,8 +138,9 @@ const webpackConfig = {
     },
   },
   output: {
-    filename: "[name].[contenthash].js",
+    filename: "assets/[name].[contenthash].js",
     path: path.resolve(__dirname, "build"),
+    publicPath: "/connectors/",
     clean: true,
   },
   module: { rules: moduleRules },