Convert remaining identifier javascript code to typescript

Convert remaining identifier javascript code to typescript and add all possible type notations as installation packages.

identifier/src/actions/common.js → identifier/src/actions/common.ts

@@ -10,8 +10,10 @@ import {
 
 import { handleAxiosError } from './utils';
 import * as types from './types';
+import {  Dispatch } from 'redux';
+import { AppDispatch, RootState } from '../store';
 
-export function receiveError(error) {
+export function receiveError(error: any) {
   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,7 +39,7 @@ export function receiveHello(hello) {
 }
 
 export function executeHello() {
-  return function(dispatch, getState) {
+  return function(dispatch:Dispatch , getState: () => RootState) {
     dispatch(resetHello());
 
     const { flow, query } = getState().common;
@@ -78,7 +80,7 @@ export function executeHello() {
 }
 
 export function retryHello() {
-  return function(dispatch) {
+  return function(dispatch: AppDispatch) {
     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());
 

identifier/src/actions/login.js → identifier/src/actions/login.ts

@@ -15,35 +15,36 @@ import {
 import * as types from './types';
 import { receiveHello } from './common';
 import { handleAxiosError } from './utils';
+import { AppDispatch, PromiseDispatch, RootState } from '../store';
 
 // 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: {[key: string]: any}) {
   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: any}}) {
   const { success, errors } = logon;
 
   return {
@@ -59,7 +60,7 @@ export function requestConsent(allow=false) {
   };
 }
 
-export function receiveConsent(logon) {
+export function receiveConsent(logon: {success: boolean, errors: {http: any}}) {
   const { success, errors } = logon;
 
   return {
@@ -69,8 +70,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
@@ -151,7 +152,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;
@@ -205,10 +206,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]: any} = {};
 
       if (!username) {
         errors.username = new Error(ERROR_LOGIN_VALIDATE_MISSINGUSERNAME);
@@ -227,14 +228,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: any) => {
       return {
         success: false,
         errors: errors
@@ -243,8 +244,9 @@ export function executeLogonIfFormValid(username, password, isSignedIn) {
   };
 }
 
-export function advanceLogonFlow(success, history, done=false, extraQuery={}) {
-  return (dispatch, getState) => {
+
+export function advanceLogonFlow(success: boolean, history: any, done=false, extraQuery={}) {
+  return (dispatch:AppDispatch, getState: () => RootState) => {
     if (!success) {
       return;
     }
@@ -256,16 +258,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 +278,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/utils.js → identifier/src/actions/utils.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/errors/index.js → identifier/src/errors/index.ts

@@ -1,5 +1,7 @@
 /* eslint react/prop-types: 0 */
 
+import { TFunction } from 'i18next';
+import { ComponentType } from 'react';
 import { withTranslation } from 'react-i18next';
 
 export const ERROR_LOGIN_VALIDATE_MISSINGUSERNAME = 'konnect.error.login.validate.missingUsername';
@@ -13,7 +15,7 @@ export const ERROR_HTTP_UNEXPECTED_RESPONSE_STATE = 'konnect.error.http.unexpect
 export class ExtendedError extends Error {
   values = undefined;
 
-  constructor(message, values) {
+  constructor(message: string, values: any) {
     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?:any, t: TFunction, values: any }) {
   const { error, t, values } = props;
 
   if (!error) {
@@ -60,4 +62,4 @@ function ErrorMessageComponent(props) {
   return f(messageDescriptor.defaultMessage, messageDescriptor.values);
 }
 
-export const ErrorMessage = withTranslation()(ErrorMessageComponent);
+export const ErrorMessage = withTranslation()(ErrorMessageComponent as ComponentType<any>);

identifier/src/models/hello.js → identifier/src/models/hello.ts

@@ -1,12 +1,12 @@
-export function newHelloRequest(flow, query) {
-  const r = {};
+export function newHelloRequest(flow: string, query: {scope?: string, client_id?: string, redirect_uri: string, id_token_hint?: string, max_age?: string,claims_scope?: string, prompt?: any }) {
+  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':

identifier/src/reducers/common.js → identifier/src/reducers/common.ts

@@ -20,7 +20,22 @@ const defaultPathPrefix = (() => {
   return pathPrefix;
 })();
 
-const defaultState = {
+type commonStateType =  {
+  hello: {
+    state: any,
+    username: string,
+    displayName: string,
+    details: any
+  } | null,
+  branding: string | null,
+  error: any,
+  flow: string | (string | null)[],
+  query: queryString.ParsedQuery<string>,
+  pathPrefix: string,
+  updateAvailable: boolean
+}  
+
+const defaultState:commonStateType = {
   hello: null,
   branding: null,
   error: null,
@@ -30,7 +45,7 @@ const defaultState = {
   pathPrefix: defaultPathPrefix
 };
 
-function commonReducer(state = defaultState, action) {
+function commonReducer(state = defaultState, action: {type: string, error: any, state: any, username: string, displayName: string, hello: any}) {
   switch (action.type) {
     case RECEIVE_ERROR:
       return Object.assign({}, state, {

identifier/src/reducers/login.js → identifier/src/reducers/login.ts

@@ -9,12 +9,20 @@ import {
   UPDATE_INPUT
 } from '../actions/types';
 
-function loginReducer(state = {
+
+type loginState = {
+  loading: string,
+  username: string,
+  password: string,
+  errors: {[key: string] : string}
+}
+
+function loginReducer(state:loginState = {
   loading: '',
   username: '',
   password: '',
   errors: {}
-}, action) {
+}, action: {errors: any, type: string, success?: boolean, name: string, value: any}) {
   switch (action.type) {
     case RECEIVE_VALIDATE_LOGON:
       return Object.assign({}, state, {

identifier/src/store.ts

@@ -0,0 +1,34 @@
+import { createStore, applyMiddleware, compose, Middleware, AnyAction, Action, Dispatch } from 'redux';
+import thunkMiddleware, { ThunkAction, ThunkDispatch, ThunkMiddleware } from 'redux-thunk';
+import { createLogger } from 'redux-logger';
+
+import rootReducer from './reducers';
+
+declare global {
+  interface Window {
+    __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose;
+  }
+}
+
+const middlewares: (Middleware<{}, any, any> | (ThunkMiddleware<any, AnyAction, undefined> & { withExtraArgument<ExtraThunkArg, State = any, BasicAction extends Action<any> = AnyAction>(extraArgument: ExtraThunkArg): ThunkMiddleware<any>; }))[] = [
+  thunkMiddleware
+];
+
+if (process.env.NODE_ENV !== 'development') { // eslint-disable-line no-undef
+  middlewares.push(createLogger()); // must be last middleware in the chain.
+}
+
+const composeEnhancers = (window['__REDUX_DEVTOOLS_EXTENSION_COMPOSE__'] as typeof compose) || compose || compose;
+
+const store = createStore(
+  rootReducer,
+  composeEnhancers(applyMiddleware(
+    ...middlewares,
+  ))
+);
+
+export type RootState = ReturnType<typeof store.getState>
+export type AppDispatch = typeof store.dispatch;
+export type PromiseDispatch = ThunkDispatch<RootState, any, Action>;
+
+export default store;