code cleanup, fix errors

resources/scripts/components/auth/ForgotPasswordContainer.tsx

@@ -18,18 +18,18 @@ interface Values {
 }
 
 export default () => {
-    const ref = useRef<Reaptcha>(null);
+    const ref = useRef<Reaptcha | null>(null);
     const [ token, setToken ] = useState('');
 
     const { clearFlashes, addFlash } = useFlash();
     const { enabled: recaptchaEnabled, siteKey } = useStoreState(state => state.settings.data!.recaptcha);
 
     useEffect(() => {
-        clearFlashes();
+        clearFlashes(undefined);
     }, []);
 
     const handleSubmission = ({ email }: Values, { setSubmitting, resetForm }: FormikHelpers<Values>) => {
-        clearFlashes();
+        clearFlashes(undefined);
 
         // If there is no token in the state yet, request the token and then abort this submit request
         // since it will be re-submitted when the recaptcha data is returned by the component.

resources/scripts/components/auth/LoginContainer.tsx

@@ -17,18 +17,18 @@ interface Values {
 }
 
 const LoginContainer = ({ history }: RouteComponentProps) => {
-    const ref = useRef<Reaptcha>(null);
+    const ref = useRef<Reaptcha | null>(null);
     const [ token, setToken ] = useState('');
 
     const { clearFlashes, clearAndAddHttpError } = useFlash();
     const { enabled: recaptchaEnabled, siteKey } = useStoreState(state => state.settings.data!.recaptcha);
 
     useEffect(() => {
-        clearFlashes();
+        clearFlashes(undefined);
     }, []);
 
     const onSubmit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
-        clearFlashes();
+        clearFlashes(undefined);
 
         // If there is no token in the state yet, request the token and then abort this submit request
         // since it will be re-submitted when the recaptcha data is returned by the component.
@@ -54,7 +54,7 @@ const LoginContainer = ({ history }: RouteComponentProps) => {
                     history.replace('/auth/login/key', {
                         token: response.confirmationToken,
                         publicKey: response.publicKey,
-                        hasTotp: response.methods.includes('totp'),
+                        hasTotp: response.methods?.includes('totp'),
                     });
                     return;
                 }
@@ -63,11 +63,11 @@ const LoginContainer = ({ history }: RouteComponentProps) => {
                     history.replace('/auth/login/checkpoint', { token: response.confirmationToken });
                 }
             })
-            .catch(error => {
+            .catch(async (error) => {
                 console.error(error);
 
                 setToken('');
-                if (ref.current) ref.current.reset();
+                if (ref.current) await ref.current?.reset();
 
                 setSubmitting(false);
                 clearAndAddHttpError({ error });
@@ -111,9 +111,9 @@ const LoginContainer = ({ history }: RouteComponentProps) => {
                         ref={ref}
                         size={'invisible'}
                         sitekey={siteKey || '_invalid_key'}
-                        onVerify={response => {
+                        onVerify={async (response) => {
                             setToken(response);
-                            submitForm();
+                            await submitForm();
                         }}
                         onExpire={() => {
                             setSubmitting(false);

resources/scripts/components/auth/ResetPasswordContainer.tsx

@@ -30,7 +30,7 @@ export default ({ match, location }: RouteComponentProps<{ token: string }>) =>
     }
 
     const submit = ({ password, passwordConfirmation }: Values, { setSubmitting }: FormikHelpers<Values>) => {
-        clearFlashes();
+        clearFlashes(undefined);
         performPasswordReset(email, { token: match.params.token, password, passwordConfirmation })
             .then(() => {
                 // @ts-ignore

resources/scripts/components/server/databases/DatabaseRow.tsx

@@ -41,7 +41,7 @@ export default ({ database, className }: Props) => {
     });
 
     const submit = (values: { confirm: string }, { setSubmitting }: FormikHelpers<{ confirm: string }>) => {
-        clearFlashes();
+        clearFlashes(undefined);
         deleteServerDatabase(uuid, database.id)
             .then(() => {
                 setVisible(false);

resources/scripts/components/server/databases/RotatePasswordButton.tsx

@@ -22,7 +22,7 @@ export default ({ databaseId, onUpdate }: {
 
     const rotate = () => {
         setLoading(true);
-        clearFlashes();
+        clearFlashes(undefined);
 
         rotateDatabasePassword(server.uuid, databaseId)
             .then(database => onUpdate(database))

resources/scripts/components/server/settings/ReinstallServerBox.tsx

@@ -38,7 +38,7 @@ export default () => {
     };
 
     useEffect(() => {
-        clearFlashes();
+        clearFlashes(undefined);
     }, []);
 
     return (

resources/scripts/state/flashes.ts

@@ -6,7 +6,7 @@ export interface FlashStore {
     items: FlashMessage[];
     addFlash: Action<FlashStore, FlashMessage>;
     addError: Action<FlashStore, { message: string; key?: string }>;
-    clearAndAddHttpError: Action<FlashStore, { error: any, key?: string }>;
+    clearAndAddHttpError: Action<FlashStore, { error: any; key?: string }>;
     clearFlashes: Action<FlashStore, string | void>;
 }
 
@@ -29,8 +29,8 @@ const flashes: FlashStore = {
         state.items.push({ type: 'error', title: 'Error', ...payload });
     }),
 
-    clearAndAddHttpError: action((state, { key, error }) => {
-        state.items = [ { type: 'error', title: 'Error', key, message: httpErrorToHuman(error) } ];
+    clearAndAddHttpError: action((state, payload) => {
+        state.items = [ { type: 'error', title: 'Error', key: payload.key, message: httpErrorToHuman(payload.error) } ];
     }),
 
     clearFlashes: action((state, payload) => {

tsconfig.json

@@ -1,44 +1,45 @@
 {
-  "compilerOptions": {
-    "target": "es2015",
-    "module": "es2020",
-    "jsx": "react",
-    "moduleResolution": "node",
-    "lib": [
-      "es2015",
-      "dom"
-    ],
-    "strict": true,
-    "noEmit": true,
-    "sourceMap": true,
-    "noImplicitReturns": true,
-    "skipLibCheck": true,
-    "skipDefaultLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "baseUrl": ".",
-    "importsNotUsedAsValues": "preserve",
-    "paths": {
-      "@/*": [
-        "./resources/scripts/*"
-      ],
-      "@feature/*": [
-        "./resources/scripts/components/server/features/*"
-      ]
+    "compilerOptions": {
+        "target": "ES2020",
+        "module": "ES2020",
+        "jsx": "react",
+        "moduleResolution": "Node",
+        "lib": [
+            "ES2020",
+            "DOM",
+            "DOM.Iterable"
+        ],
+        "strict": true,
+        "noEmit": true,
+        "sourceMap": true,
+        "noImplicitReturns": true,
+        "skipLibCheck": true,
+        "skipDefaultLibCheck": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "baseUrl": ".",
+        "importsNotUsedAsValues": "preserve",
+        "paths": {
+            "@/*": [
+                "./resources/scripts/*"
+            ],
+            "@feature/*": [
+                "./resources/scripts/components/server/features/*"
+            ]
+        },
+        "plugins": [
+            {
+                "name": "typescript-plugin-tw-template"
+            }
+        ],
+        "typeRoots": [
+            "node_modules/@types"
+        ]
     },
-    "plugins": [
-      {
-        "name": "typescript-plugin-tw-template"
-      }
+    "include": [
+        "./resources/scripts/**/*"
     ],
-    "typeRoots": [
-      "node_modules/@types"
+    "exclude": [
+        "/node_modules/"
     ]
-  },
-  "include": [
-    "./resources/scripts/**/*"
-  ],
-  "exclude": [
-    "/node_modules/"
-  ]
 }