Convert remaining identifier javascript code to typescript

Add types for relevant annotations with packages.

Author: soun059

identifier/package.json

@@ -10,6 +10,7 @@
     "axios": "^0.22.0",
     "classnames": "^2.3.2",
     "glob": "^8.1.0",
+    "history": "^5.3.0",
     "i18next": "^21.10.0",
     "i18next-browser-languagedetector": "^6.1.8",
     "i18next-http-backend": "^1.4.5",

identifier/src/actions/common.js renamed to identifier/src/actions/common.ts

@@ -1,6 +1,6 @@
-import axios from 'axios';
+import axios, { AxiosError, AxiosResponse } from 'axios';
 
-import { newHelloRequest } from '../models/hello';
+import { HelloQuery, newHelloRequest } from '../models/hello';
 import { withClientRequestState } from '../utils';
 import {
   ExtendedError,
@@ -10,8 +10,10 @@ import {
 
 import { handleAxiosError } from './utils';
 import * as types from './types';
+import {  Dispatch } from 'redux';
+import { AppDispatch, PromiseDispatch, RootState } from '../store';
 
-export function receiveError(error) {
+export function receiveError(error?: ExtendedError | AxiosError<never> | null) {
   return {
     type: types.RECEIVE_ERROR,
     error
@@ -24,7 +26,7 @@ export function resetHello() {
   };
 }
 
-export function receiveHello(hello) {
+export function receiveHello(hello: {success?: boolean, username: string, displayName?: string}) {
   const { success, username, displayName } = hello;
 
   return {
@@ -37,12 +39,12 @@ export function receiveHello(hello) {
 }
 
 export function executeHello() {
-  return function(dispatch, getState) {
+  return function(dispatch:Dispatch , getState: () => RootState) {
     dispatch(resetHello());
 
     const { flow, query } = getState().common;
 
-    const r = withClientRequestState(newHelloRequest(flow, query));
+    const r = withClientRequestState(newHelloRequest(flow as string, query as HelloQuery));
     return axios.post('./identifier/_/hello', r, {
       headers: {
         'Kopano-Konnect-XSRF': '1'
@@ -60,7 +62,7 @@ export function executeHello() {
           };
         default:
           // error.
-          throw new ExtendedError(ERROR_HTTP_UNEXPECTED_RESPONSE_STATUS, response);
+          throw new ExtendedError(ERROR_HTTP_UNEXPECTED_RESPONSE_STATUS, response as AxiosResponse<never>);
       }
     }).then(response => {
       if (response.state !== r.state) {
@@ -78,7 +80,7 @@ export function executeHello() {
 }
 
 export function retryHello() {
-  return function(dispatch) {
+  return function(dispatch: PromiseDispatch) {
     dispatch(receiveError(null));
 
     return dispatch(executeHello());
@@ -91,15 +93,15 @@ export function requestLogoff() {
   };
 }
 
-export function receiveLogoff(state) {
+export function receiveLogoff(state: boolean) {
   return {
     type: types.RECEIVE_LOGOFF,
     state
   };
 }
 
 export function executeLogoff() {
-  return function(dispatch) {
+  return function(dispatch: AppDispatch) {
     dispatch(resetHello());
     dispatch(requestLogoff());
 
@@ -115,7 +117,7 @@ export function executeLogoff() {
           return response.data;
         default:
           // error.
-          throw new ExtendedError(ERROR_HTTP_UNEXPECTED_RESPONSE_STATUS, response);
+          throw new ExtendedError(ERROR_HTTP_UNEXPECTED_RESPONSE_STATUS, response as AxiosResponse<never>);
       }
     }).then(response => {
       if (response.state !== r.state) {

identifier/src/actions/login.js renamed to identifier/src/actions/login.ts

@@ -1,7 +1,7 @@
-import axios from 'axios';
+import axios, { AxiosResponse } from 'axios';
 import queryString from 'query-string';
 
-import { newHelloRequest } from '../models/hello';
+import { HelloQuery, newHelloRequest } from '../models/hello';
 import { withClientRequestState } from '../utils';
 import {
   ExtendedError,
@@ -15,35 +15,37 @@ import {
 import * as types from './types';
 import { receiveHello } from './common';
 import { handleAxiosError } from './utils';
+import { AppDispatch, PromiseDispatch, RootState } from '../store';
+import { History } from "history";
 
 // Modes for logon.
 export const ModeLogonUsernameEmptyPasswordCookie = '0';
 export const ModeLogonUsernamePassword = '1';
 
-export function updateInput(name, value) {
+export function updateInput(name: string, value?: string | null) {
   return {
     type: types.UPDATE_INPUT,
     name,
     value
   };
 }
 
-export function receiveValidateLogon(errors) {
+export function receiveValidateLogon(errors: Error | {[key: string]: Error}) {
   return {
     type: types.RECEIVE_VALIDATE_LOGON,
     errors
   };
 }
 
-export function requestLogon(username, password) {
+export function requestLogon(username: string, password: string) {
   return {
     type: types.REQUEST_LOGON,
     username,
     password
   };
 }
 
-export function receiveLogon(logon) {
+export function receiveLogon(logon: {success: boolean, errors: {http: Error}}) {
   const { success, errors } = logon;
 
   return {
@@ -59,7 +61,7 @@ export function requestConsent(allow=false) {
   };
 }
 
-export function receiveConsent(logon) {
+export function receiveConsent(logon: {success: boolean, errors: {http: Error}}) {
   const { success, errors } = logon;
 
   return {
@@ -69,8 +71,8 @@ export function receiveConsent(logon) {
   };
 }
 
-export function executeLogon(username, password, mode=ModeLogonUsernamePassword) {
-  return function(dispatch, getState) {
+export function executeLogon(username: string, password: string, mode=ModeLogonUsernamePassword) {
+  return function(dispatch: AppDispatch, getState: () => RootState) {
     dispatch(requestLogon(username, password));
     dispatch(receiveHello({
       username
@@ -96,7 +98,7 @@ export function executeLogon(username, password, mode=ModeLogonUsernamePassword)
 
     const r = withClientRequestState({
       params: params,
-      hello: newHelloRequest(flow, query)
+      hello: newHelloRequest(flow as string, query as HelloQuery)
     });
     return axios.post('./identifier/_/logon', r, {
       headers: {
@@ -118,7 +120,7 @@ export function executeLogon(username, password, mode=ModeLogonUsernamePassword)
           };
         default:
           // error.
-          throw new ExtendedError(ERROR_HTTP_UNEXPECTED_RESPONSE_STATUS, response);
+          throw new ExtendedError(ERROR_HTTP_UNEXPECTED_RESPONSE_STATUS, response as AxiosResponse<never>);
       }
     }).then(response => {
       if (response.state !== r.state) {
@@ -151,7 +153,7 @@ export function executeLogon(username, password, mode=ModeLogonUsernamePassword)
 }
 
 export function executeConsent(allow=false, scope='') {
-  return function(dispatch, getState) {
+  return function(dispatch: AppDispatch, getState: () => RootState) {
     dispatch(requestConsent(allow));
 
     const { query } = getState().common;
@@ -181,7 +183,7 @@ export function executeConsent(allow=false, scope='') {
           };
         default:
           // error.
-          throw new ExtendedError(ERROR_HTTP_UNEXPECTED_RESPONSE_STATUS, response);
+          throw new ExtendedError(ERROR_HTTP_UNEXPECTED_RESPONSE_STATUS, response as AxiosResponse<never>);
       }
     }).then(response => {
       if (response.state !== r.state) {
@@ -205,10 +207,10 @@ export function executeConsent(allow=false, scope='') {
   };
 }
 
-export function validateUsernamePassword(username, password, isSignedIn) {
-  return function(dispatch) {
+export function validateUsernamePassword(username: string, password: string, isSignedIn: boolean) {
+  return function(dispatch: AppDispatch) {
     return new Promise((resolve, reject) => {
-      const errors = {};
+      const errors:{[key: string]: Error} = {};
 
       if (!username) {
         errors.username = new Error(ERROR_LOGIN_VALIDATE_MISSINGUSERNAME);
@@ -227,14 +229,14 @@ export function validateUsernamePassword(username, password, isSignedIn) {
   };
 }
 
-export function executeLogonIfFormValid(username, password, isSignedIn) {
-  return (dispatch) => {
+export function executeLogonIfFormValid(username: string, password: string, isSignedIn: boolean) {
+  return (dispatch: PromiseDispatch) => {
     return dispatch(
       validateUsernamePassword(username, password, isSignedIn)
     ).then(() => {
       const mode = isSignedIn ? ModeLogonUsernameEmptyPasswordCookie : ModeLogonUsernamePassword;
       return dispatch(executeLogon(username, password, mode));
-    }).catch((errors) => {
+    }).catch((errors: Error | {[key: string]:Error}) => {
       return {
         success: false,
         errors: errors
@@ -243,8 +245,9 @@ export function executeLogonIfFormValid(username, password, isSignedIn) {
   };
 }
 
-export function advanceLogonFlow(success, history, done=false, extraQuery={}) {
-  return (dispatch, getState) => {
+
+export function advanceLogonFlow(success: boolean, history: History, done=false, extraQuery={}) {
+  return (dispatch:AppDispatch, getState: () => RootState) => {
     if (!success) {
       return;
     }
@@ -256,16 +259,16 @@ export function advanceLogonFlow(success, history, done=false, extraQuery={}) {
       case 'oauth':
       case 'consent':
       case 'oidc':
-        if (hello.details.flow !== flow) {
+        if (hello?.details?.flow !== flow) {
           // Ignore requested flow if hello flow does not match.
           break;
         }
 
-        if (!done && hello.details.next === 'consent') {
+        if (!done && hello?.details.next === 'consent') {
           history.replace(`/consent${history.location.search}${history.location.hash}`);
           return;
         }
-        if (hello.details.continue_uri) {
+        if (hello?.details.continue_uri) {
           q.prompt = 'none';
           window.location.replace(hello.details.continue_uri + '?' + queryString.stringify(q));
           return;
@@ -276,7 +279,7 @@ export function advanceLogonFlow(success, history, done=false, extraQuery={}) {
       default:
         // Legacy stupid modes.
         if (q.continue && q.continue.indexOf(document.location.origin) === 0) {
-          window.location.replace(q.continue);
+          window.location.replace(q.continue as string);
           return;
         }
     }

identifier/src/actions/types.js renamed to identifier/src/actions/types.ts

@@ -1,14 +1,15 @@
+import { AxiosError } from 'axios';
 import {
   ExtendedError,
   ERROR_HTTP_NETWORK_ERROR,
   ERROR_HTTP_UNEXPECTED_RESPONSE_STATUS
 } from '../errors';
 
-export function handleAxiosError(error) {
-  if (error.request) {
+export function handleAxiosError(error: AxiosError | ExtendedError) {
+  if ((error as AxiosError).request) {
     // Axios errors.
-    if (error.response) {
-      error = new ExtendedError(ERROR_HTTP_UNEXPECTED_RESPONSE_STATUS, error.response);
+    if ((error as AxiosError).response) {
+      error = new ExtendedError(ERROR_HTTP_UNEXPECTED_RESPONSE_STATUS, (error as AxiosError).response);
     } else {
       error = new ExtendedError(ERROR_HTTP_NETWORK_ERROR);
     }

identifier/src/actions/utils.js renamed to identifier/src/actions/utils.ts

@@ -1,5 +1,7 @@
 /* eslint react/prop-types: 0 */
 
+import { AxiosResponse } from 'axios';
+import { TFunction } from 'i18next';
 import { withTranslation } from 'react-i18next';
 
 export const ERROR_LOGIN_VALIDATE_MISSINGUSERNAME = 'konnect.error.login.validate.missingUsername';
@@ -11,9 +13,9 @@ export const ERROR_HTTP_UNEXPECTED_RESPONSE_STATE = 'konnect.error.http.unexpect
 
 // Error with values.
 export class ExtendedError extends Error {
-  values = undefined;
+  values: { [key: string]: string | null | undefined | Error } | null | undefined | AxiosResponse<never> = undefined;
 
-  constructor(message, values) {
+  constructor(message: string, values?: { [key: string]: string | null | undefined | Error } | null | AxiosResponse<never>) {
     super(message);
     if (Error.captureStackTrace !== undefined) {
       Error.captureStackTrace(this, ExtendedError);
@@ -23,7 +25,7 @@ export class ExtendedError extends Error {
 }
 
 // Component to translate error text with values.
-function ErrorMessageComponent(props) {
+function ErrorMessageComponent(props: { error?: { id: null | undefined | string, message: string | null | undefined, values: { [key: string] : string | boolean | Error } }, t: TFunction, values: {[key:string]: string | boolean} }): JSX.Element | null {
   const { error, t, values } = props;
 
   if (!error) {
@@ -57,7 +59,7 @@ function ErrorMessageComponent(props) {
   }
 
   const f = t;
-  return f(messageDescriptor.defaultMessage, messageDescriptor.values);
+  return f(messageDescriptor.defaultMessage ?? "", messageDescriptor.values);
 }
 
 export const ErrorMessage = withTranslation()(ErrorMessageComponent);

identifier/src/errors/index.js renamed to identifier/src/errors/index.ts

@@ -1,12 +1,16 @@
-export function newHelloRequest(flow, query) {
-  const r = {};
+export type HelloQuery = { scope?: string, client_id?: string, redirect_uri: string, id_token_hint?: string, max_age?: string,claims_scope?: string, prompt?: string }
+
+
+
+export function newHelloRequest(flow: string, query: HelloQuery) {
+  const r:{[key: string]: string} = {};
 
   if (query.prompt) {
     // TODO(longsleep): Validate prompt values?
     r.prompt = query.prompt;
   }
-
-  let selectedFlow = flow;
+  
+  let selectedFlow: string | null = flow;
   switch (flow) {
     case 'oauth':
     case 'consent':