Merge pull request #1040 from ONLYOFFICE/bugfix/login

Bugfix/login
2022-11-17 20:25:28 +03:00 · 2022-11-17 20:25:28 +03:00 · 53fcee2b83
commit 53fcee2b83
parent 5583ca0467 31db809bd0
21 changed files with 231 additions and 312 deletions
--- a/build/install/docker/Dockerfile.app
+++ b/build/install/docker/Dockerfile.app
@ -171,15 +171,17 @@ RUN chown nginx:nginx /etc/nginx/* -R && \
 FROM noderun as doceditor
 WORKDIR ${BUILD_PATH}/products/ASC.Files/editor

+COPY --chown=onlyoffice:onlyoffice docker-entrypoint.py ./docker-entrypoint.py
 COPY --from=base --chown=onlyoffice:onlyoffice ${SRC_PATH}/build/deploy/editor/ .
-ENTRYPOINT ["node", "server.js"]
+CMD ["node", "server.js"]

 ## Login ##
 FROM noderun as login
 WORKDIR ${BUILD_PATH}/products/ASC.Login/login

+COPY --chown=onlyoffice:onlyoffice docker-entrypoint.py ./docker-entrypoint.py
 COPY --from=base --chown=onlyoffice:onlyoffice ${SRC_PATH}/build/deploy/login/ .
-ENTRYPOINT ["node", "server.js"]
+CMD ["node", "server.js"]

 ## ASC.Data.Backup.BackgroundTasks ##
 FROM dotnetrun AS backup_background
--- a/packages/client/package.json
+++ b/packages/client/package.json
@ -8,7 +8,7 @@
    "clean": "shx rm -rf dist",
    "deploy": "shx --silent mkdir -p ../../build/deploy/client && shx cp -r dist/* ../../build/deploy/client",
    "start": "NODE_OPTIONS=--openssl-legacy-provider webpack-cli serve",
-    "start-prod": "NODE_OPTIONS=--openssl-legacy-provider webpack --mode production && serve dist -p 5001"
+    "start-prod": "NODE_OPTIONS=--openssl-legacy-provider webpack --mode production && serve dist -s -p 5001"
  },
  "old-scripts": {
    "build:test": "webpack --env minimize=false --mode production",
@ -71,7 +71,7 @@
    "playwright": "^1.18.1",
    "sass": "^1.39.2",
    "sass-loader": "^12.1.0",
-    "serve": "12.0.1",
+    "serve": "14.1.1",
    "shx": "^0.3.3",
    "source-map-loader": "^3.0.0",
    "style-loader": "3.2.1",
--- a/packages/client/src/pages/Confirm/sub-components/StyledConfirm.js
+++ b/packages/client/src/pages/Confirm/sub-components/StyledConfirm.js
@ -57,10 +57,6 @@ export const StyledBody = styled.div`
    width: 100%;
  }

-  .form-field {
-    height: 48px;
-  }
-
  .password-field-wrapper {
    width: 100%;
  }
--- a/packages/client/src/pages/Confirm/sub-components/createUser.js
+++ b/packages/client/src/pages/Confirm/sub-components/createUser.js
@ -28,7 +28,7 @@ import {
 } from "@docspace/common/utils";
 import { providersData } from "@docspace/common/constants";
 import withLoader from "../withLoader";
-//import MoreLoginModal from "login/moreLogin";
+import MoreLoginModal from "@docspace/common/components/MoreLoginModal";
 import AppLoader from "@docspace/common/components/AppLoader";
 import EmailInput from "@docspace/components/email-input";
 import { hugeMobile, tablet } from "@docspace/components/utils/device";
@ -184,10 +184,6 @@ const RegisterContainer = styled.div`
    margin-top: 32px;
    width: 100%;

-    .form-field {
-      height: 48px;
-    }
-
    @media (max-width: 768px) {
      margin: 32px 0 0 0;
      width: 100%;
@ -778,7 +774,7 @@ const Confirm = (props) => {
            />
          </form>

-          {/* <MoreLoginModal
+          <MoreLoginModal
            t={t}
            visible={moreAuthVisible}
            onClose={moreAuthClose}
@ -786,7 +782,7 @@ const Confirm = (props) => {
            onSocialLoginClick={onSocialButtonClick}
            ssoLabel={ssoLabel}
            ssoUrl={ssoUrl}
-          /> */}
+          />
        </RegisterContainer>
      </FormWrapper>
    </ConfirmContainer>
--- a/packages/login/src/client/components/sub-components/more-login.tsx
+++ b/packages/login/src/client/components/sub-components/more-login.tsx
--- a/packages/common/index.d.ts
+++ b/packages/common/index.d.ts
@ -0,0 +1,12 @@
+type TFuncType = (key: string) => string;
+
+type HTMLElementEvent<T extends HTMLElement> = Event & {
+    target: T;
+};
+
+interface IProvider {
+    linked: boolean;
+    provider: string;
+    url: string;
+}
+type ProvidersType = IProvider[];
--- a/packages/components/code-input/styled-code-input.js
+++ b/packages/components/code-input/styled-code-input.js
@ -1,4 +1,5 @@
 import styled from "styled-components";
+import Base from "../themes/base";

 const InputWrapper = styled.div`
  display: flex;
@ -9,8 +10,9 @@ const InputWrapper = styled.div`
    height: 120px;
    width: 100px;
    display: block;
-    background: #ffffff;
-    border: 1px solid #d0d5da;
+    background: ${(props) => props.theme.codeInput.background};
+    border: ${(props) => props.theme.codeInput.border};
+    color: ${(props) => props.theme.codeInput.color};
    box-sizing: border-box;
    border-radius: 8px;
    margin: 0 4px;
@ -35,20 +37,21 @@ const InputWrapper = styled.div`
  }

  input:focus {
-    border: 1px solid #3b72a7;
+    border: 1px solid #5299e0;
+    outline: none;
  }

  input:disabled {
-    color: #a3a9ae;
-    background: #f8f9f9;
-    border: 1px solid #eceef1;
+    color: ${(props) => props.theme.codeInput.disabledColor};
+    background: ${(props) => props.theme.codeInput.disabledBackground};
+    border: ${(props) => props.theme.codeInput.disabledBorder};
    outline: none;
  }

  hr {
    width: 24px;
    height: 1px;
-    background: #c4c4c4;
+    background: ${(props) => props.theme.codeInput.lineColor};
    border: none;
    margin: 0 16px;

@ -58,4 +61,6 @@ const InputWrapper = styled.div`
  }
 `;

+InputWrapper.defaultProps = { theme: Base };
+
 export default InputWrapper;
--- a/packages/components/themes/base.js
+++ b/packages/components/themes/base.js
@ -801,7 +801,7 @@ const Base = {
    },

    fontSize: {
-      base: "14px",
+      base: "13px",
      middle: "14px",
      big: "16px",
      huge: "18px",
@ -2742,6 +2742,9 @@ const Base = {
    navBackground: "#F8F9F9",
    headerColor: black,
    helpButton: "#A3A9AE",
+    orLineColor: "#ECEEF1",
+    orTextColor: "#A3A9AE",
+    titleColor: black,

    register: {
      backgroundColor: grayLight,
@ -2995,6 +2998,16 @@ const Base = {
    background: white,
    boxShadow: "0px 5px 20px rgba(4, 15, 27, 0.07)",
  },
+
+  codeInput: {
+    background: white,
+    border: "1px solid #d0d5da",
+    color: black,
+    lineColor: "#C4C4C4",
+    disabledBackground: "#F8F9F9",
+    disabledBorder: "1px solid #ECEEF1",
+    disabledColor: "#A3A9AE",
+  },
 };

 export default Base;
--- a/packages/components/themes/dark.js
+++ b/packages/components/themes/dark.js
@ -793,7 +793,7 @@ const Dark = {
    },

    fontSize: {
-      base: "14px",
+      base: "13px",
      middle: "14px",
      big: "16px",
      huge: "18px",
@ -2744,6 +2744,9 @@ const Dark = {
    navBackground: "#282828",
    headerColor: white,
    helpButton: "#D8D8D8",
+    orLineColor: "#474747",
+    orTextColor: "#858585",
+    titleColor: white,

    register: {
      backgroundColor: "#292929",
@ -2996,6 +2999,16 @@ const Dark = {
    background: black,
    boxShadow: "0px 5px 20px rgba(0, 0, 0, 0.16);",
  },
+
+  codeInput: {
+    background: "#282828",
+    border: "1px solid #474747",
+    color: white,
+    lineColor: "#858585",
+    disabledBackground: "#474747",
+    disabledBorder: "1px solid #474747",
+    disabledColor: "#858585",
+  },
 };

 export default Dark;
--- a/packages/components/tooltip/styled-tooltip.js
+++ b/packages/components/tooltip/styled-tooltip.js
@ -28,6 +28,8 @@ const StyledTooltip = styled.div`
    }
    &:after {
      border: ${(props) => props.theme.tooltip.after.border};
+      background-color: ${(props) =>
+        props.color ? props.color : props.theme.tooltip.color} !important;
    }
  }

--- a/packages/login/package.json
+++ b/packages/login/package.json
@ -89,7 +89,7 @@
    "playwright": "^1.17.1",
    "sass": "^1.39.2",
    "sass-loader": "^12.1.0",
-    "serve": "12.0.1",
+    "serve": "14.1.1",
    "shx": "^0.3.3",
    "source-map-loader": "^3.0.0",
    "style-loader": "3.2.1",
--- a/packages/login/src/client/App.tsx
+++ b/packages/login/src/client/App.tsx
@ -20,7 +20,7 @@ const App: React.FC<ILoginProps> = (props) => {
          <InvalidRoute />
        </Route>
        <Route path="/login/code">
-          <CodeLogin />
+          <CodeLogin {...props} />
        </Route>
        <Route path="/login">
          <Login {...props} />
--- a/packages/login/src/client/components/CodeLogin.tsx
+++ b/packages/login/src/client/components/CodeLogin.tsx
@ -1,12 +1,17 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { inject, observer } from "mobx-react";
 import Text from "@docspace/components/text";
 import Link from "@docspace/components/link";
 import CodeInput from "@docspace/components/code-input";
 import { Trans } from "react-i18next";
+import { ReactSVG } from "react-svg";
 import { LoginContainer, LoginFormWrapper } from "./StyledLogin";
 import BarLogo from "../../../../../public/images/danger.alert.react.svg";
-import DocspaceLogo from "../../../../../public/images/docspace.big.react.svg";
+import { Dark, Base } from "@docspace/components/themes";
+import { getBgPattern } from "@docspace/common/utils";
+import { useMounted } from "../helpers/useMounted";
+
 interface IBarProp {
  t: TFuncType;
  expired: boolean;
@ -25,7 +30,7 @@ const Bar: React.FC<IBarProp> = (props) => {
  );
 };

-const Form: React.FC = () => {
+const Form: React.FC = ({ theme, setTheme, logoUrls }) => {
  const { t } = useTranslation("Login");
  const [invalidCode, setInvalidCode] = useState(false);
  const [expiredCode, setExpiredCode] = useState(false);
@ -34,6 +39,15 @@ const Form: React.FC = () => {
  const email = "test@onlyoffice.com"; //TODO: get email from form
  const validCode = "123456"; //TODO: get from api

+  useEffect(() => {
+    const theme =
+      window.matchMedia &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? Dark
+        : Base;
+    setTheme(theme);
+  }, []);
+
  const onSubmit = (code: number | string) => {
    if (code !== validCode) {
      setInvalidCode(true);
@ -48,11 +62,19 @@ const Form: React.FC = () => {
    setInvalidCode(false);
  };

+  const loginLogo = Object.values(logoUrls)[1];
+  const isSvgLogo = loginLogo.includes(".svg");
+
  return (
-    <LoginContainer>
-      <DocspaceLogo className="logo-wrapper" />
+    <LoginContainer id="code-page" theme={theme}>
+      {isSvgLogo ? (
+        <ReactSVG src={loginLogo} className="logo-wrapper" />
+      ) : (
+        <img src={loginLogo} className="logo-wrapper" />
+      )}

      <Text
+        id="workspace-title"
        fontSize="23px"
        fontWeight={700}
        textAlign="center"
@ -61,7 +83,12 @@ const Form: React.FC = () => {
        {t("CodeTitle")}
      </Text>

-      <Text fontSize="12px" fontWeight={400} textAlign="center" color="#A3A9AE">
+      <Text
+        className="code-description"
+        fontSize="12px"
+        fontWeight={400}
+        textAlign="center"
+      >
        <Trans t={t} i18nKey="CodeSubtitle" ns="Login" key={email}>
          We sent a 6-digit code to {{ email }}. The code has a limited validity
          period, enter it as soon as possible.{" "}
@ -70,6 +97,7 @@ const Form: React.FC = () => {

      <div className="code-input-container">
        <CodeInput
+          theme={theme}
          onSubmit={onSubmit}
          handleChange={handleChange}
          isDisabled={isLoading}
@ -89,8 +117,7 @@ const Form: React.FC = () => {
        )}

        <Text
-          className="not-found-code"
-          color="#A3A9AE"
+          className="not-found-code code-description"
          fontSize="12px"
          textAlign="center"
        >
@ -102,11 +129,20 @@ const Form: React.FC = () => {
 };

 const CodeLogin: React.FC<ICodeProps> = (props) => {
+  const bgPattern = getBgPattern(props.currentColorScheme.id);
+  const mounted = useMounted();
+
+  if (!mounted) return <></>;
  return (
-    <LoginFormWrapper>
+    <LoginFormWrapper bgPattern={bgPattern}>
      <Form {...props} />
    </LoginFormWrapper>
  );
 };

-export default CodeLogin;
+export default inject(({ loginStore }) => {
+  return {
+    theme: loginStore.theme,
+    setTheme: loginStore.setTheme,
+  };
+})(observer(CodeLogin));
--- a/packages/login/src/client/components/Login.tsx
+++ b/packages/login/src/client/components/Login.tsx
@ -14,7 +14,7 @@ import { providersData } from "@docspace/common/constants";
 import Link from "@docspace/components/link";
 import Toast from "@docspace/components/toast";
 import LoginForm from "./sub-components/LoginForm";
-import MoreLoginModal from "./sub-components/more-login";
+import MoreLoginModal from "@docspace/common/components/MoreLoginModal";
 import RecoverAccessModalDialog from "@docspace/common/components/Dialogs/RecoverAccessModalDialog";
 import FormWrapper from "@docspace/components/form-wrapper";
 import Register from "./sub-components/register-container";
@ -44,7 +44,7 @@ const Login: React.FC<ILoginProps> = ({
  const [moreAuthVisible, setMoreAuthVisible] = useState(false);
  const [recoverDialogVisible, setRecoverDialogVisible] = useState(false);

-  const { enabledJoin, greetingSettings } = portalSettings;
+  const { enabledJoin, greetingSettings, enableAdmMess } = portalSettings;
  const { ssoLabel, ssoUrl } = capabilities;

  const { t } = useTranslation(["Login", "Common"]);
@ -53,7 +53,7 @@ const Login: React.FC<ILoginProps> = ({
  useEffect(() => {
    const theme =
      window.matchMedia &&
-        window.matchMedia("(prefers-color-scheme: dark)").matches
+      window.matchMedia("(prefers-color-scheme: dark)").matches
        ? Dark
        : Base;
    setTheme(theme);
@ -108,10 +108,10 @@ const Login: React.FC<ILoginProps> = ({
        const tokenGetterWin = isDesktopEditor
          ? (window.location.href = url)
          : window.open(
-            url,
-            "login",
-            "width=800,height=500,status=no,toolbar=no,menubar=no,resizable=yes,scrollbars=no"
-          );
+              url,
+              "login",
+              "width=800,height=500,status=no,toolbar=no,menubar=no,resizable=yes,scrollbars=no"
+            );

        getOAuthToken(tokenGetterWin).then((code: string) => {
          const token = window.btoa(
@ -224,9 +224,7 @@ const Login: React.FC<ILoginProps> = ({
          )}
          {(oauthDataExists() || ssoExists()) && (
            <div className="line">
-              <Text color="#A3A9AE" className="or-label">
-                {t("Or")}
-              </Text>
+              <Text className="or-label">{t("Or")}</Text>
            </div>
          )}
          <LoginForm
@ -236,6 +234,7 @@ const Login: React.FC<ILoginProps> = ({
            setIsLoading={setIsLoading}
            onRecoverDialogVisible={onRecoverDialogVisible}
            match={match}
+            enableAdmMess={enableAdmMess}
          />
        </FormWrapper>
        <Toast />
--- a/packages/login/src/client/components/StyledLogin.ts
+++ b/packages/login/src/client/components/StyledLogin.ts
@ -49,6 +49,10 @@ export const LoginContainer = styled.div`
    min-height: 18px;
  }

+  .login-or-access-text{
+    text-transform: lowercase;
+  }
+
  .recover-link {
    min-height: 19px;
  }
@ -69,6 +73,7 @@ export const LoginContainer = styled.div`
  }

  .or-label {
+    color: ${(props) => props.theme.login.orTextColor};
    margin: 0 32px;
  }

@ -76,8 +81,8 @@ export const LoginContainer = styled.div`
    display: flex;
    width: 320px;
    align-items: center;
-    color: #eceef1;
-    padding-top: 35px;
+    color: ${(props) => props.theme.login.orLineColor};
+    padding: 32px 0;

    @media ${tablet} {
      width: 480px;
@ -92,7 +97,7 @@ export const LoginContainer = styled.div`
  .line:after {
    content: "";
    flex-grow: 1;
-    background: #eceef1;
+    background: ${(props) => props.theme.login.orLineColor};
    height: 1px;
    font-size: 0px;
    line-height: 0px;
@ -119,6 +124,7 @@ export const LoginContainer = styled.div`
    font-weight: 600;
    font-size: 11px;
    line-height: 12px;
+    color: #333;
    svg {
      margin: 8px;
    }
@ -145,6 +151,7 @@ export const LoginContainer = styled.div`
    }

    .field-body{
+      height: 48px;
      input, .password-input > div {
        background: ${(props) => props.theme.input.backgroundColor};
        color: ${(props) => props.theme.input.color};
@ -226,7 +233,10 @@ export const LoginContainer = styled.div`
      flex-direction: column;
      align-items: center;
      gap: 6px;
-      margin-top: 24px;
+      
+      & > :first-child {
+        margin-top: 24px;
+      }
    }
  }

@ -248,6 +258,19 @@ export const LoginContainer = styled.div`
      display: none;
    }
  }
+
+  .workspace-title{
+    color: ${(props) => props.theme.login.titleColor};
+    margin-bottom: 16px;
+
+    @media ${hugeMobile} {
+      margin-top: 32px;
+    }
+  }
+
+  .code-description{
+    color: ${(props) => props.theme.login.textColor};
+  }
 `;

 interface ILoginFormWrapperProps {
--- a/packages/login/src/client/components/sub-components/LoginForm.tsx
+++ b/packages/login/src/client/components/sub-components/LoginForm.tsx
@ -23,6 +23,7 @@ interface ILoginFormProps {
  isDesktop: boolean;
  match: MatchType;
  onRecoverDialogVisible: () => void;
+  enableAdmMess: boolean;
 }

 const settings = {
@ -39,6 +40,7 @@ const LoginForm: React.FC<ILoginFormProps> = ({
  match,
  setIsLoading,
  onRecoverDialogVisible,
+  enableAdmMess,
 }) => {
  const [isEmailErrorShow, setIsEmailErrorShow] = useState(false);
  const [errorText, setErrorText] = useState("");
@ -347,22 +349,25 @@ const LoginForm: React.FC<ILoginFormProps> = ({
                >
                  {t("SignInWithCode")}
                </Link>*/}
-
-          <Text color="#A3A9AE" className="login-or-access-text">
-            {t("Or")}
-          </Text>
-          <Link
-            id="login_recover-link"
-            fontWeight="600"
-            fontSize="13px"
-            color="#316DAA"
-            type="action"
-            isHovered={true}
-            className="login-link recover-link"
-            onClick={onRecoverDialogVisible}
-          >
-            {t("RecoverAccess")}
-          </Link>
+          {enableAdmMess && (
+            <>
+              <Text color="#A3A9AE" className="login-or-access-text">
+                {t("Or")}
+              </Text>
+              <Link
+                id="login_recover-link"
+                fontWeight="600"
+                fontSize="13px"
+                color="#316DAA"
+                type="action"
+                isHovered={true}
+                className="login-link recover-link"
+                onClick={onRecoverDialogVisible}
+              >
+                {t("RecoverAccess")}
+              </Link>
+            </>
+          )}
        </div>
      )}

--- a/packages/login/src/client/components/sub-components/SimpleNav.tsx
+++ b/packages/login/src/client/components/sub-components/SimpleNav.tsx
@ -23,7 +23,7 @@ const StyledNav = styled.div`

 const SimpleNav = ({ theme }) => {
  return (
-    <StyledNav theme={theme}>
+    <StyledNav id="login-header" theme={theme}>
      <ReactSVG src="/static/images/logo.docspace.react.svg" />
    </StyledNav>
  );
--- a/packages/login/src/client/components/sub-components/register-container.tsx
+++ b/packages/login/src/client/components/sub-components/register-container.tsx
@ -44,7 +44,7 @@ const Register: React.FC<IRegisterProps> = (props) => {
    trustedDomains,
    theme,
    currentColorScheme,
-    id
+    id,
  } = props;
  const [visible, setVisible] = useState(false);
  const [loading, setLoading] = useState(false);
@ -112,7 +112,9 @@ const Register: React.FC<IRegisterProps> = (props) => {
  return enabledJoin && !isAuthenticated ? (
    <>
      <StyledRegister id={id} onClick={onRegisterClick}>
-        <Text color={currentColorScheme.accentColor}>{t("Register")}</Text>
+        <Text as="span" color={currentColorScheme.accentColor}>
+          {t("Register")}
+        </Text>
      </StyledRegister>

      {visible && (
--- a/packages/login/src/server/lib/template.ts
+++ b/packages/login/src/server/lib/template.ts
@ -90,6 +90,10 @@ const template: Template = (
            background-color: #fff;
          }

+          #login-header{
+            background-color: #f8f9f9;
+          }
+
          #login-page > div > svg > path:last-child {
            fill: #333;
          }
@ -116,6 +120,24 @@ const template: Template = (
          #login-checkbox > div > span {
            color: #333;
          }
+
+          #code-page > div > svg > path:last-child {
+            fill: #333;
+          }
+
+          #workspace-title {
+            color: #333;
+          }
+
+          #code-page > div > div > input {
+            background: #fff;
+            border-color: #d0d5da;
+          }
+
+          #code-page > div > div > input:disabled {
+            background: #F8F9F9;
+            border-color: #ECEEF1;
+          }
        }

        @media (prefers-color-scheme: dark) {
@ -123,6 +145,10 @@ const template: Template = (
            background-color: #333;
          }

+          #login-header{
+            background-color: #282828;
+          }
+
          #login-page > div > svg > path:last-child {
            fill: #fff;
          }
@ -149,6 +175,24 @@ const template: Template = (
          #login-checkbox > div > span {
            color: #fff;
          }
+
+          #code-page > div > svg > path:last-child {
+            fill: #fff;
+          }
+
+          #workspace-title {
+            color: #fff;
+          }
+
+          #code-page > div > div > input {
+            background: #282828;
+            border-color: #474747;
+          }
+
+          #code-page > div > div > input:disabled {
+            background: #474747;
+            border-color: #474747;
+          }
        }        
        </style>

--- a/packages/login/webpack/webpack.client.js
+++ b/packages/login/webpack/webpack.client.js
@ -82,7 +82,6 @@ const clientConfig = {
      exposes: {
        "./login": "./src/client/components/Login.tsx",
        "./codeLogin": "./src/client/components/CodeLogin.tsx",
-        "./moreLogin": "./src/client/components/sub-components/more-login.tsx",
      },
      shared: { ...sharedDeps, ...deps },
    }),
--- a/yarn.lock
+++ b/yarn.lock
@ -2802,7 +2802,7 @@ __metadata:
    react-string-format: ^0.1.4
    sass: ^1.39.2
    sass-loader: ^12.1.0
-    serve: 12.0.1
+    serve: 14.1.1
    shx: ^0.3.3
    source-map-loader: ^3.0.0
    style-loader: 3.2.1
@ -3055,7 +3055,7 @@ __metadata:
    playwright: ^1.17.1
    sass: ^1.39.2
    sass-loader: ^12.1.0
-    serve: 12.0.1
+    serve: 14.1.1
    shx: ^0.3.3
    source-map-loader: ^3.0.0
    style-loader: 3.2.1
@ -7252,13 +7252,6 @@ __metadata:
  languageName: node
  linkType: hard

-"@zeit/schemas@npm:2.6.0":
-  version: 2.6.0
-  resolution: "@zeit/schemas@npm:2.6.0"
-  checksum: 7f2175ee34fad1a37da20882f9cda038ebb43a99ceaf30877f1676044669adde714ee56de6f1fcb57214dfa4479995a63fb2d053fe9f877b6852cdc1e4da574c
-  languageName: node
-  linkType: hard
-
 "abab@npm:^2.0.0, abab@npm:^2.0.5, abab@npm:^2.0.6":
  version: 2.0.6
  resolution: "abab@npm:2.0.6"
@ -7499,18 +7492,6 @@ __metadata:
  languageName: node
  linkType: hard

-"ajv@npm:6.12.6, ajv@npm:^6.1.0, ajv@npm:^6.10.0, ajv@npm:^6.10.2, ajv@npm:^6.12.2, ajv@npm:^6.12.3, ajv@npm:^6.12.4, ajv@npm:^6.12.5":
-  version: 6.12.6
-  resolution: "ajv@npm:6.12.6"
-  dependencies:
-    fast-deep-equal: ^3.1.1
-    fast-json-stable-stringify: ^2.0.0
-    json-schema-traverse: ^0.4.1
-    uri-js: ^4.2.2
-  checksum: 874972efe5c4202ab0a68379481fbd3d1b5d0a7bd6d3cc21d40d3536ebff3352a2a1fabb632d4fd2cc7fe4cbdcd5ed6782084c9bbf7f32a1536d18f9da5007d4
-  languageName: node
-  linkType: hard
-
 "ajv@npm:8.11.0, ajv@npm:^8.0.0, ajv@npm:^8.8.0":
  version: 8.11.0
  resolution: "ajv@npm:8.11.0"
@ -7523,12 +7504,15 @@ __metadata:
  languageName: node
  linkType: hard

-"ansi-align@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "ansi-align@npm:2.0.0"
+"ajv@npm:^6.1.0, ajv@npm:^6.10.0, ajv@npm:^6.10.2, ajv@npm:^6.12.2, ajv@npm:^6.12.3, ajv@npm:^6.12.4, ajv@npm:^6.12.5":
+  version: 6.12.6
+  resolution: "ajv@npm:6.12.6"
  dependencies:
-    string-width: ^2.0.0
-  checksum: fecefb3b4a128aaad52ed1d2ee2f999968acc77573645be49666273ec2952840e27aed8cb9c2e48cd0c2d5a088389223eabb6d09aa74bceba3b931d242288c97
+    fast-deep-equal: ^3.1.1
+    fast-json-stable-stringify: ^2.0.0
+    json-schema-traverse: ^0.4.1
+    uri-js: ^4.2.2
+  checksum: 874972efe5c4202ab0a68379481fbd3d1b5d0a7bd6d3cc21d40d3536ebff3352a2a1fabb632d4fd2cc7fe4cbdcd5ed6782084c9bbf7f32a1536d18f9da5007d4
  languageName: node
  linkType: hard

@ -7697,7 +7681,7 @@ __metadata:
  languageName: node
  linkType: hard

-"arch@npm:^2.1.1, arch@npm:^2.2.0":
+"arch@npm:^2.2.0":
  version: 2.2.0
  resolution: "arch@npm:2.2.0"
  checksum: e21b7635029fe8e9cdd5a026f9a6c659103e63fff423834323cdf836a1bb240a72d0c39ca8c470f84643385cf581bd8eda2cad8bf493e27e54bd9783abe9101f
@ -7734,13 +7718,6 @@ __metadata:
  languageName: node
  linkType: hard

-"arg@npm:2.0.0":
-  version: 2.0.0
-  resolution: "arg@npm:2.0.0"
-  checksum: eeadcfa6160847452ac1973d1c6990e2133e50972d56f80f3601f83a465daa88431cb430cc12101d90b01719361a55a166b03f489143b6ba2acd2304714ebe74
-  languageName: node
-  linkType: hard
-
 "arg@npm:5.0.2":
  version: 5.0.2
  resolution: "arg@npm:5.0.2"
@ -8700,21 +8677,6 @@ __metadata:
  languageName: node
  linkType: hard

-"boxen@npm:1.3.0":
-  version: 1.3.0
-  resolution: "boxen@npm:1.3.0"
-  dependencies:
-    ansi-align: ^2.0.0
-    camelcase: ^4.0.0
-    chalk: ^2.0.1
-    cli-boxes: ^1.0.0
-    string-width: ^2.0.0
-    term-size: ^1.2.0
-    widest-line: ^2.0.0
-  checksum: 8dad2081bfaf5a86cb85685882b5f22027c5c430ee0974894078f521a44d92a90222fb4391b41fc4575aa1215c9133ea2c6b7feadcd1cb2fae8f4e97c05dbf11
-  languageName: node
-  linkType: hard
-
 "boxen@npm:7.0.0":
  version: 7.0.0
  resolution: "boxen@npm:7.0.0"
@ -9194,13 +9156,6 @@ __metadata:
  languageName: node
  linkType: hard

-"camelcase@npm:^4.0.0":
-  version: 4.1.0
-  resolution: "camelcase@npm:4.1.0"
-  checksum: 9683356daf9b64fae4b30c91f8ceb1f34f22746e03d1804efdbe738357d38b47f206cdd71efcf2ed72018b2e88eeb8ec3f79adb09c02f1253a4b6d5d405ff2ae
-  languageName: node
-  linkType: hard
-
 "camelcase@npm:^5.0.0, camelcase@npm:^5.3.1":
  version: 5.3.1
  resolution: "camelcase@npm:5.3.1"
@ -9291,17 +9246,6 @@ __metadata:
  languageName: node
  linkType: hard

-"chalk@npm:2.4.1":
-  version: 2.4.1
-  resolution: "chalk@npm:2.4.1"
-  dependencies:
-    ansi-styles: ^3.2.1
-    escape-string-regexp: ^1.0.5
-    supports-color: ^5.3.0
-  checksum: 196eb8e99a0c00c6fcef216c794b109fd071931b10ec0f8f305c368fb6d776d0d4857d0028d2cc3561632428d6d94a41d7edf33b506f7540b7c8492f4224d89e
-  languageName: node
-  linkType: hard
-
 "chalk@npm:5.0.1":
  version: 5.0.1
  resolution: "chalk@npm:5.0.1"
@ -9566,13 +9510,6 @@ __metadata:
  languageName: node
  linkType: hard

-"cli-boxes@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "cli-boxes@npm:1.0.0"
-  checksum: 101cfd6464a418a76523c332665eaf0641522f30ecc2492de48263ada6b0852333b2ed47b2998ddda621e7008471c51f597f813be798db237c33ba45b27e802a
-  languageName: node
-  linkType: hard
-
 "cli-boxes@npm:^2.2.1":
  version: 2.2.1
  resolution: "cli-boxes@npm:2.2.1"
@ -9611,17 +9548,6 @@ __metadata:
  languageName: node
  linkType: hard

-"clipboardy@npm:2.3.0":
-  version: 2.3.0
-  resolution: "clipboardy@npm:2.3.0"
-  dependencies:
-    arch: ^2.1.1
-    execa: ^1.0.0
-    is-wsl: ^2.1.1
-  checksum: 2733790bc8bbb76a5be7706fa4632f655010774e579a9d3ebe31dc10cf44a2b82cf07b0b6f74162e63048ce32d912193c08c5b5311dce5c19fc641a3bda1292b
-  languageName: node
-  linkType: hard
-
 "clipboardy@npm:3.0.0":
  version: 3.0.0
  resolution: "clipboardy@npm:3.0.0"
@ -9939,7 +9865,7 @@ __metadata:
  languageName: node
  linkType: hard

-"compressible@npm:~2.0.14, compressible@npm:~2.0.16":
+"compressible@npm:~2.0.16":
  version: 2.0.18
  resolution: "compressible@npm:2.0.18"
  dependencies:
@ -9948,21 +9874,6 @@ __metadata:
  languageName: node
  linkType: hard

-"compression@npm:1.7.3":
-  version: 1.7.3
-  resolution: "compression@npm:1.7.3"
-  dependencies:
-    accepts: ~1.3.5
-    bytes: 3.0.0
-    compressible: ~2.0.14
-    debug: 2.6.9
-    on-headers: ~1.0.1
-    safe-buffer: 5.1.2
-    vary: ~1.1.2
-  checksum: f1c24d9d3f30f6ae7ac57a41078ec90ca514112e6d21fc992d1d79d904a2eedb2a96620806f8de9ab85a75dbec94ef9b6dded9a06a6d72faa9bc8c4e3c375072
-  languageName: node
-  linkType: hard
-
 "compression@npm:1.7.4, compression@npm:^1.7.4":
  version: 1.7.4
  resolution: "compression@npm:1.7.4"
@ -10394,17 +10305,6 @@ __metadata:
  languageName: node
  linkType: hard

-"cross-spawn@npm:^5.0.1":
-  version: 5.1.0
-  resolution: "cross-spawn@npm:5.1.0"
-  dependencies:
-    lru-cache: ^4.0.1
-    shebang-command: ^1.2.0
-    which: ^1.2.9
-  checksum: 726939c9954fc70c20e538923feaaa33bebc253247d13021737c3c7f68cdc3e0a57f720c0fe75057c0387995349f3f12e20e9bfdbf12274db28019c7ea4ec166
-  languageName: node
-  linkType: hard
-
 "cross-spawn@npm:^6.0.0, cross-spawn@npm:^6.0.5":
  version: 6.0.5
  resolution: "cross-spawn@npm:6.0.5"
@ -12226,21 +12126,6 @@ __metadata:
  languageName: node
  linkType: hard

-"execa@npm:^0.7.0":
-  version: 0.7.0
-  resolution: "execa@npm:0.7.0"
-  dependencies:
-    cross-spawn: ^5.0.1
-    get-stream: ^3.0.0
-    is-stream: ^1.1.0
-    npm-run-path: ^2.0.0
-    p-finally: ^1.0.0
-    signal-exit: ^3.0.0
-    strip-eof: ^1.0.0
-  checksum: dd70206d74b7217bf678ec9f04dddedc82f425df4c1d70e34c9f429d630ec407819e4bd42e3af2618981a4a3a1be000c9b651c0637be486cdab985160c20337c
-  languageName: node
-  linkType: hard
-
 "execa@npm:^1.0.0":
  version: 1.0.0
  resolution: "execa@npm:1.0.0"
@ -13306,13 +13191,6 @@ __metadata:
  languageName: node
  linkType: hard

-"get-stream@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "get-stream@npm:3.0.0"
-  checksum: 36142f46005ed74ce3a45c55545ec4e7da8e243554179e345a786baf144e5c4a35fb7bdc49fadfa9f18bd08000589b6fe364abdadfc4e1eb0e1b9914a6bb9c56
-  languageName: node
-  linkType: hard
-
 "get-stream@npm:^4.0.0":
  version: 4.1.0
  resolution: "get-stream@npm:4.1.0"
@ -16770,16 +16648,6 @@ __metadata:
  languageName: node
  linkType: hard

-"lru-cache@npm:^4.0.1":
-  version: 4.1.5
-  resolution: "lru-cache@npm:4.1.5"
-  dependencies:
-    pseudomap: ^1.0.2
-    yallist: ^2.1.2
-  checksum: 4bb4b58a36cd7dc4dcec74cbe6a8f766a38b7426f1ff59d4cf7d82a2aa9b9565cd1cb98f6ff60ce5cd174524868d7bc9b7b1c294371851356066ca9ac4cf135a
-  languageName: node
-  linkType: hard
-
 "lru-cache@npm:^5.1.1":
  version: 5.1.1
  resolution: "lru-cache@npm:5.1.1"
@ -17533,15 +17401,6 @@ __metadata:
  languageName: node
  linkType: hard

-"minimatch@npm:3.0.4":
-  version: 3.0.4
-  resolution: "minimatch@npm:3.0.4"
-  dependencies:
-    brace-expansion: ^1.1.7
-  checksum: 66ac295f8a7b59788000ea3749938b0970344c841750abd96694f80269b926ebcafad3deeb3f1da2522978b119e6ae3a5869b63b13a7859a456b3408bd18a078
-  languageName: node
-  linkType: hard
-
 "minimatch@npm:3.1.2, minimatch@npm:^3.0.2, minimatch@npm:^3.0.4, minimatch@npm:^3.0.5, minimatch@npm:^3.1.1, minimatch@npm:^3.1.2":
  version: 3.1.2
  resolution: "minimatch@npm:3.1.2"
@ -18613,7 +18472,7 @@ __metadata:
  languageName: node
  linkType: hard

-"on-headers@npm:~1.0.1, on-headers@npm:~1.0.2":
+"on-headers@npm:~1.0.2":
  version: 1.0.2
  resolution: "on-headers@npm:1.0.2"
  checksum: 2bf13467215d1e540a62a75021e8b318a6cfc5d4fc53af8e8f84ad98dbcea02d506c6d24180cd62e1d769c44721ba542f3154effc1f7579a8288c9f7873ed8e5
@ -19879,13 +19738,6 @@ __metadata:
  languageName: node
  linkType: hard

-"pseudomap@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "pseudomap@npm:1.0.2"
-  checksum: 856c0aae0ff2ad60881168334448e898ad7a0e45fe7386d114b150084254c01e200c957cf378378025df4e052c7890c5bd933939b0e0d2ecfcc1dc2f0b2991f5
-  languageName: node
-  linkType: hard
-
 "psl@npm:^1.1.28":
  version: 1.9.0
  resolution: "psl@npm:1.9.0"
@ -22090,22 +21942,6 @@ __metadata:
  languageName: node
  linkType: hard

-"serve-handler@npm:6.1.3":
-  version: 6.1.3
-  resolution: "serve-handler@npm:6.1.3"
-  dependencies:
-    bytes: 3.0.0
-    content-disposition: 0.5.2
-    fast-url-parser: 1.1.3
-    mime-types: 2.1.18
-    minimatch: 3.0.4
-    path-is-inside: 1.0.2
-    path-to-regexp: 2.2.1
-    range-parser: 1.2.0
-  checksum: 384c1bc10add07a554207f918acaa75af47fcfd8fb89e070faa3468ab45ec5bbc9f976e62d659b6b63404edcf5c54efb7e0a48f3f55946eec83b62b283b9837e
-  languageName: node
-  linkType: hard
-
 "serve-handler@npm:6.1.5":
  version: 6.1.5
  resolution: "serve-handler@npm:6.1.5"
@ -22149,26 +21985,7 @@ __metadata:
  languageName: node
  linkType: hard

-"serve@npm:12.0.1":
-  version: 12.0.1
-  resolution: "serve@npm:12.0.1"
-  dependencies:
-    "@zeit/schemas": 2.6.0
-    ajv: 6.12.6
-    arg: 2.0.0
-    boxen: 1.3.0
-    chalk: 2.4.1
-    clipboardy: 2.3.0
-    compression: 1.7.3
-    serve-handler: 6.1.3
-    update-check: 1.5.2
-  bin:
-    serve: bin/serve.js
-  checksum: 6069981c603003b2bfff6fc789780b52595ad7a3752ab9aff309d8e094fa577a20467b54cd192431031e30c6d65bf04286c36955fc54bacec9bd00efc9c388db
-  languageName: node
-  linkType: hard
-
-"serve@npm:^14.1.1":
+"serve@npm:14.1.1, serve@npm:^14.1.1":
  version: 14.1.1
  resolution: "serve@npm:14.1.1"
  dependencies:
@ -22962,16 +22779,6 @@ __metadata:
  languageName: node
  linkType: hard

-"string-width@npm:^2.0.0, string-width@npm:^2.1.1":
-  version: 2.1.1
-  resolution: "string-width@npm:2.1.1"
-  dependencies:
-    is-fullwidth-code-point: ^2.0.0
-    strip-ansi: ^4.0.0
-  checksum: d6173abe088c615c8dffaf3861dc5d5906ed3dc2d6fd67ff2bd2e2b5dce7fd683c5240699cf0b1b8aa679a3b3bd6b28b5053c824cb89b813d7f6541d8f89064a
-  languageName: node
-  linkType: hard
-
 "string-width@npm:^3.0.0, string-width@npm:^3.1.0":
  version: 3.1.0
  resolution: "string-width@npm:3.1.0"
@ -23519,15 +23326,6 @@ __metadata:
  languageName: node
  linkType: hard

-"term-size@npm:^1.2.0":
-  version: 1.2.0
-  resolution: "term-size@npm:1.2.0"
-  dependencies:
-    execa: ^0.7.0
-  checksum: 833aeb21c74d735c6ab63859fec6a7308d8724089b23b6f58e1a21c015058383529222a63074cbf0814a1812621bf11f01e60d5c5afbbfedcc31d115bf54631a
-  languageName: node
-  linkType: hard
-
 "terser-webpack-plugin@npm:^1.4.3":
  version: 1.4.5
  resolution: "terser-webpack-plugin@npm:1.4.5"
@ -24446,16 +24244,6 @@ __metadata:
  languageName: node
  linkType: hard

-"update-check@npm:1.5.2":
-  version: 1.5.2
-  resolution: "update-check@npm:1.5.2"
-  dependencies:
-    registry-auth-token: 3.3.2
-    registry-url: 3.1.0
-  checksum: 82b42978610ef616afd374153bcbff5055c6482454f3391fe5df48c0bd9fe63de16733f100f8b8d12cea7b33d094d15bdd01ef329ff123f127ca3dcf2b7dfce5
-  languageName: node
-  linkType: hard
-
 "update-check@npm:1.5.4":
  version: 1.5.4
  resolution: "update-check@npm:1.5.4"
@ -25350,15 +25138,6 @@ __metadata:
  languageName: node
  linkType: hard

-"widest-line@npm:^2.0.0":
-  version: 2.0.1
-  resolution: "widest-line@npm:2.0.1"
-  dependencies:
-    string-width: ^2.1.1
-  checksum: 6245b1f2cff418107f937691d1cafd0e416b9e350aa79e3853dc0759ad20849451d7126c2f06d0a13286d37b44b8e79e4220df09630bce1e4722d9808bc7bfd2
-  languageName: node
-  linkType: hard
-
 "widest-line@npm:^3.1.0":
  version: 3.1.0
  resolution: "widest-line@npm:3.1.0"
@ -25716,13 +25495,6 @@ __metadata:
  languageName: node
  linkType: hard

-"yallist@npm:^2.1.2":
-  version: 2.1.2
-  resolution: "yallist@npm:2.1.2"
-  checksum: 9ba99409209f485b6fcb970330908a6d41fa1c933f75e08250316cce19383179a6b70a7e0721b89672ebb6199cc377bf3e432f55100da6a7d6e11902b0a642cb
-  languageName: node
-  linkType: hard
-
 "yallist@npm:^3.0.0, yallist@npm:^3.0.2, yallist@npm:^3.1.1":
  version: 3.1.1
  resolution: "yallist@npm:3.1.1"