feat: URL navigation in auth (#1603)

* bump to react 18 and install react-router-dom

* Upgrade to react 18 root

* update vite

* add cs api's

* convert state/auth to ts

* add client config context

* add auto discovery context

* add spec version context

* add auth flow context

* add background dot pattern css

* add promise utils

* init url based routing

* update auth route server path as effect

* add auth server hook

* always use server from discovery info in context

* login - WIP

* upgrade jotai to v2

* add atom with localStorage util

* add multi account sessions atom

* add default IGNORE res to auto discovery

* add error type in async callback hook

* handle password login error

* fix async callback hook

* allow password login

* Show custom server not allowed error in mxId login

* add sso login component

* add token login

* fix hardcoded m.login.password in login func

* update server input on url change

* Improve sso login labels

* update folds

* fix async callback batching state update in safari

* wrap async callback set state in queueMicrotask

* wip

* wip - register

* arrange auth file structure

* add error codes

* extract filed error component form password login

* add register util function

* handle register flow - WIP

* update unsupported auth flow method reasons

* improve password input styles

* Improve UIA flow next stage calculation
complete stages can have any order so we will look for first stage which is not in completed

* process register UIA flow stages

* Extract register UIA stages component

* improve register error messages

* add focus trap & step count in UIA stages

* add reset password path and path utils

* add path with origin hook

* fix sso redirect url

* rename register token query param to token

* restyle auth screen header

* add reset password component - WIP

* add reset password form

* add netlify rewrites

* fix netlify file indentation

* test netlify redirect

* fix vite to include netlify toml

* add more netlify redirects

* add splat to public and assets path

* fix vite base name

* add option to use hash router in config and remove appVersion

* add splash screen component

* add client config loading and error screen

* fix server picker bug

* fix reset password email input type

* make auth page small screen responsive

* fix typo in reset password screen

src/app/utils/matrix-uia.ts

@@ -0,0 +1,84 @@
+import { AuthType, IAuthData, UIAFlow } from 'matrix-js-sdk';
+
+export const getSupportedUIAFlows = (uiaFlows: UIAFlow[], supportedStages: string[]): UIAFlow[] => {
+  const supportedUIAFlows = uiaFlows.filter((flow) =>
+    flow.stages.every((stage) => supportedStages.includes(stage))
+  );
+
+  return supportedUIAFlows;
+};
+
+export const getUIACompleted = (authData: IAuthData): string[] => {
+  const completed = authData.completed ?? [];
+  return completed;
+};
+
+export type UIAParams = Record<string, Record<string, unknown>>;
+export const getUIAParams = (authData: IAuthData): UIAParams => {
+  const params = authData.params ?? {};
+  return params;
+};
+
+export const getUIASession = (authData: IAuthData): string | undefined => {
+  const session = authData.session ?? undefined;
+  return session;
+};
+
+export const getUIAErrorCode = (authData: IAuthData): string | undefined => {
+  const errorCode =
+    'errcode' in authData && typeof authData.errcode === 'string' ? authData.errcode : undefined;
+
+  return errorCode;
+};
+
+export const getUIAError = (authData: IAuthData): string | undefined => {
+  const errorCode =
+    'error' in authData && typeof authData.error === 'string' ? authData.error : undefined;
+
+  return errorCode;
+};
+
+export const getUIAFlowForStages = (uiaFlows: UIAFlow[], stages: string[]): UIAFlow | undefined => {
+  const matchedFlows = uiaFlows
+    .filter((flow) => {
+      if (flow.stages.length < stages.length) return false;
+      if (flow.stages.length > stages.length) {
+        // As a valid flow can also have m.login.dummy type,
+        // we will pick one extra length flow only if it has dummy
+        if (flow.stages.length > stages.length + 1) return false;
+        if (stages.includes(AuthType.Dummy)) return false;
+        if (flow.stages.includes(AuthType.Dummy)) return true;
+        return false;
+      }
+      return true;
+    })
+    .filter((flow) => stages.every((stage) => flow.stages.includes(stage)));
+
+  if (matchedFlows.length === 0) return undefined;
+
+  matchedFlows.sort((a, b) => a.stages.length - b.stages.length);
+  return matchedFlows[0];
+};
+
+export const hasStageInFlows = (uiaFlows: UIAFlow[], stage: string) =>
+  uiaFlows.some((flow) => flow.stages.includes(stage));
+
+export const requiredStageInFlows = (uiaFlows: UIAFlow[], stage: string) =>
+  uiaFlows.every((flow) => flow.stages.includes(stage));
+
+export const getLoginTermUrl = (params: UIAParams): string | undefined => {
+  const terms = params[AuthType.Terms];
+  if (terms && 'policies' in terms && typeof terms.policies === 'object') {
+    if (terms.policies === null) return undefined;
+    if ('privacy_policy' in terms.policies && typeof terms.policies.privacy_policy === 'object') {
+      if (terms.policies.privacy_policy === null) return undefined;
+      const langToPolicy = terms.policies.privacy_policy as Record<string, any>;
+      const url = langToPolicy.en?.url;
+      if (typeof url === 'string') return url;
+
+      const firstKey = Object.keys(langToPolicy)[0];
+      return langToPolicy[firstKey]?.url;
+    }
+  }
+  return undefined;
+};