update typescript configs, resolve typing errors, and configure packa…

…ge.json

SECURITY.md

@@ -2,17 +2,17 @@ Bitwarden believes that working with security researchers across the globe is cr
 
 # Disclosure Policy
 
--   Let us know as soon as possible upon discovery of a potential security issue, and we'll make every effort to quickly resolve the issue.
--   Provide us a reasonable amount of time to resolve the issue before any disclosure to the public or a third-party. We may publicly disclose the issue before resolving it, if appropriate.
--   Make a good faith effort to avoid privacy violations, destruction of data, and interruption or degradation of our service. Only interact with accounts you own or with explicit permission of the account holder.
--   If you would like to encrypt your report, please use the PGP key with long ID `0xDE6887086F892325FEC04CC0D847525B6931381F` (available in the public keyserver pool).
+- Let us know as soon as possible upon discovery of a potential security issue, and we'll make every effort to quickly resolve the issue.
+- Provide us a reasonable amount of time to resolve the issue before any disclosure to the public or a third-party. We may publicly disclose the issue before resolving it, if appropriate.
+- Make a good faith effort to avoid privacy violations, destruction of data, and interruption or degradation of our service. Only interact with accounts you own or with explicit permission of the account holder.
+- If you would like to encrypt your report, please use the PGP key with long ID `0xDE6887086F892325FEC04CC0D847525B6931381F` (available in the public keyserver pool).
 
 While researching, we'd like to ask you to refrain from:
 
--   Denial of service
--   Spamming
--   Social engineering (including phishing) of Bitwarden staff or contractors
--   Any physical attempts against Bitwarden property or data centers
+- Denial of service
+- Spamming
+- Social engineering (including phishing) of Bitwarden staff or contractors
+- Any physical attempts against Bitwarden property or data centers
 
 # We want to help you!
 

api/app.ts

@@ -2,7 +2,7 @@ import "dotenv/config";
 const fs = require("fs");
 const express = require("express");
 import { Request, Response, NextFunction } from "express-serve-static-core";
-import { DEFAULT_COOKIE_SETTINGS, QUERY_PARAMS, ROUTES } from "./constants";
+import { QUERY_PARAMS, ROUTES } from "./constants";
 
 const port = process.env.SERVE_PORT || 443;
 const insecurePort = process.env.SERVE_INSECURE_PORT || 80;
@@ -50,7 +50,9 @@ function handleRequest(request: Request, response: Response, route: string) {
 
   response.cookie("referrerRequestBody", JSON.stringify(request.body), {
     path: responsePath,
-    ...DEFAULT_COOKIE_SETTINGS,
+    sameSite: "strict",
+    secure: true,
+    maxAge: 1000 * 60 * 5,
   });
 
   try {

api/constants.ts

@@ -1,9 +1,3 @@
-export const DEFAULT_COOKIE_SETTINGS = {
-  sameSite: true,
-  secure: true,
-  maxAge: 1000 * 60 * 5,
-};
-
 export const ROUTES = {
   IDENTITY: "/identity",
   LOGIN: "/login",

api/package.json

@@ -5,9 +5,10 @@
   "main": "app.ts",
   "scripts": {
     "build": "rimraf build && tsc",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "start:watch": "nodemon -x 'npm run start'",
     "start": "npm run build && node build/app.js",
-    "start:watch": "nodemon -x 'npm run start'"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "typecheck": "tsc"
   },
   "dependencies": {
     "dotenv": "16.3.1",

api/tsconfig.json

@@ -1,11 +1,11 @@
 {
   "compilerOptions": {
-    "target": "es2016",
-    "module": "commonjs",
-    "outDir": "./build",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
+    "module": "commonjs",
+    "outDir": "./build",
+    "skipLibCheck": true,
     "strict": true,
-    "skipLibCheck": true
+    "target": "es2016"
   }
 }

client/src/components/InlineSVG.tsx

@@ -1,10 +1,10 @@
 import Link from "@docusaurus/Link";
 
-type InlineSVGProps = {
+export type InlineSVGProps = {
   href?: string;
   Svg: any;
-  width: string | number;
-  height: string | number;
+  width?: string | number;
+  height?: string | number;
   label: string;
   children?: JSX.Element;
   className?: string;

client/src/components/LoginForm.tsx

@@ -8,14 +8,20 @@ const FormSteps = {
 
 type FormSteps = (typeof FormSteps)[keyof typeof FormSteps];
 
+type FormValues = {
+  username?: string;
+  email?: string;
+  password?: string;
+};
+
 export function LoginForm({
   action,
   isMultiStep = false,
 }: {
   action: string;
   isMultiStep?: boolean;
 }): JSX.Element {
-  const [formValues, setFormValues] = useState({});
+  const [formValues, setFormValues] = useState<SetStateAction<FormValues>>({});
   const [currentFormStep, setCurrentFormStep] =
     useState<SetStateAction<FormSteps | undefined>>();
 
@@ -36,10 +42,10 @@ export function LoginForm({
     }
   }, [formValues]);
 
-  function handleFormStep(event) {
+  function handleFormStep(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault();
 
-    const formData = new FormData(event.target);
+    const formData = new FormData(event.currentTarget);
     setFormValues({ ...formValues, ...Object.fromEntries(formData as any) });
   }
 
@@ -126,7 +132,7 @@ function FormButton({ label }: { label: string }) {
   );
 }
 
-function submitFormData(action, data) {
+function submitFormData(action: string, data: FormValues | {}) {
   fetch(action, {
     method: "POST",
     headers: {

client/src/components/StoredRequestValue.tsx

@@ -1,44 +1,37 @@
-import BrowserOnly from "@docusaurus/BrowserOnly";
 import CodeBlock from "@theme/CodeBlock";
+import useIsBrowser from "@docusaurus/useIsBrowser";
 
-function formatStringifiedValue(stringifiedJSON) {
+function formatStringifiedValue(stringifiedJSON: string) {
   const decodedString = decodeURIComponent(stringifiedJSON);
 
   // parse and re-stringify to use stringify's built-in formatting
   return JSON.stringify(JSON.parse(decodedString), null, 2);
 }
 
 export function StoredRequestValue() {
+  const isBrowser = useIsBrowser();
+  let requestBodyValue;
+
+  if (isBrowser) {
+    const cookieKey = "referrerRequestBody";
+    const cookieValue = document.cookie
+      .split("; ")
+      .find((row) => row.startsWith(`${cookieKey}=`))
+      ?.split("=")[1];
+
+    if (!cookieValue) {
+      return null;
+    }
+
+    requestBodyValue = formatStringifiedValue(cookieValue);
+
+    // clear cookie value
+    document.cookie = `${cookieKey}=; SameSite=Strict; Max-Age=0`;
+  }
+
   return (
-    <BrowserOnly>
-      {() => {
-        const cookieKey = "referrerRequestBody";
-        const cookieValue = document.cookie
-          .split("; ")
-          .find((row) => row.startsWith(`${cookieKey}=`))
-          ?.split("=")[1];
-
-        if (!cookieValue) {
-          return null;
-        }
-
-        const requestBodyValue = formatStringifiedValue(cookieValue);
-
-        // clear cookie value
-        document.cookie = `${cookieKey}=; Max-Age=0`;
-
-        return (
-          <>
-            <CodeBlock
-              language="json"
-              title="Request body:"
-              className="margin-top--md"
-            >
-              {requestBodyValue}
-            </CodeBlock>
-          </>
-        );
-      }}
-    </BrowserOnly>
+    <CodeBlock language="json" title="Request body:" className="margin-top--md">
+      {requestBodyValue}
+    </CodeBlock>
   );
 }

client/src/theme/NavbarItem/ComponentTypes.tsx

@@ -1,9 +1,10 @@
 import ComponentTypes from "@theme-original/NavbarItem/ComponentTypes";
-import { InlineSVG } from "@site/src/components/InlineSVG";
+import { InlineSVG, InlineSVGProps } from "@site/src/components/InlineSVG";
 import GithubLogo from "@site/static/img/icons/github.svg";
 import AngleRight from "@site/static/img/icons/angle-right.svg";
+import { Props as NavbarItemType } from "@theme/NavbarItem";
 
-function GithubIcon(props) {
+function GithubIcon(props: NavbarItemType & InlineSVGProps): JSX.Element {
   return <InlineSVG {...{ ...props, Svg: GithubLogo }} />;
 }
 

client/tsconfig.json

@@ -3,6 +3,7 @@
   "extends": "@docusaurus/tsconfig",
   "compilerOptions": {
     "baseUrl": ".",
+    "esModuleInterop": true,
     "jsx": "react-jsx",
     "strict": true
   }

custom-words.txt

@@ -0,0 +1,6 @@
+Bitwarden
+dotfile
+jsmith
+keyserver
+sandboxed
+TOTP

package.json

@@ -1,16 +1,31 @@
 {
-  "name": "test-the-web",
+  "name": "@bitwarden/test-the-web",
   "version": "0.0.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bitwarden/test-the-web.git"
+  },
+  "author": "Bitwarden Inc. <[email protected]> (https://bitwarden.com)",
+  "license": "SEE LICENSE IN LICENSE.txt",
+  "bugs": {
+    "url": "https://github.com/bitwarden/test-the-web/issues"
+  },
   "private": true,
   "scripts": {
-    "prepare": "husky install",
-    "postinstall": "(npm run ci:api) && (npm run ci:client)",
+    "build:api": "cd api && npm run build",
+    "build:client": "cd client && npm run build",
+    "build:watch": "(cd client && npm run build:watch) & (cd api && npm run start:watch)",
+    "build": "(npm run build:api) && (npm run build:client)",
     "ci:api": "cd api && npm ci",
     "ci:client": "cd client && npm ci",
-    "build": "(npm run build:api) && (npm run build:client)",
-    "build:watch": "(cd client && npm run build:watch) & (cd api && npm run start:watch)",
-    "build:api": "cd api && npm run build",
-    "build:client": "cd client && npm run build"
+    "lint": "prettier --check .",
+    "postinstall": "(npm run ci:api) && (npm run ci:client)",
+    "prepare": "husky install",
+    "prettier": "prettier --write .",
+    "spellcheck": "cspell lint \"**/*.md{x,}\"",
+    "typecheck:api": "cd api && npm run typecheck",
+    "typecheck:client": "cd client && npm run typecheck",
+    "typecheck": "(npm run typecheck:api) && (npm run typecheck:client)"
   },
   "devDependencies": {
     "cspell": "8.0.0",
@@ -22,7 +37,23 @@
     "typescript": "5.2.2"
   },
   "lint-staged": {
-    "*": "prettier --cache --write --ignore-unknown"
+    "*": "prettier --cache --write --ignore-unknown",
+    "*.md{x,}": "cspell lint"
+  },
+  "cspell": {
+    "version": "0.2",
+    "useGitignore": true,
+    "dictionaries": [
+      "custom-words"
+    ],
+    "dictionaryDefinitions": [
+      {
+        "name": "custom-words",
+        "path": "./custom-words.txt",
+        "addWords": true
+      }
+    ],
+    "languageId": "typescript,javascript,html,css,markdown,mdx"
   },
   "browserslist": {
     "production": [