@basiq/connect-auth 0.1.76 → 0.1.79

package/dist/helpers/constants.d.ts

@@ -0,0 +1 @@
+export declare const DASHBOARD_API_URL = "https://p4c8zn20r9.execute-api.ap-southeast-2.amazonaws.com/Production_v1/";

package/dist/helpers/hookUtils.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const useFocus: () => (import("react").MutableRefObject<HTMLInputElement> | (() => void))[];

package/dist/helpers/index.d.ts

@@ -0,0 +1,3 @@
+export * from './hookUtils';
+export * from './utils';
+export * from './constants';

package/dist/helpers/utils.d.ts

@@ -0,0 +1,3 @@
+import { SyntheticEvent } from 'react';
+export declare function detectScrollToBottom(event: SyntheticEvent<HTMLDivElement>): boolean;
+export declare const hexToRGBa: (hex: string, opacity: number) => string;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { BasiqConnect } from './BasiqConnect';

package/dist/index.js

@@ -0,0 +1,8 @@
+
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./connect-auth.cjs.production.min.js')
+} else {
+  module.exports = require('./connect-auth.cjs.development.js')
+}

package/dist/locales/i18n.d.ts

@@ -0,0 +1,36 @@
+import i18n from 'i18next';
+export declare const defaultNS = "ns1";
+export declare const resources: {
+    readonly en: {
+        readonly ns1: {
+            back: string;
+            error: string;
+            loading: string;
+            continue: string;
+            to_do_this_we_will_ask_you_to: string;
+            verify_your_mobile_number_bold: string;
+            verify_your_mobile_number: string;
+            consent_to_share_your_data_with_us: string;
+            share_your_financial_data: string;
+            things_you_should_know: string;
+            we_dont_share_your_data_without_your_consent: string;
+            you_can_easily_stop_sharing_your_data_at_any_time: string;
+            you_can_choose_to_delete_shared_data_when_we_no_longer_need_it: string;
+            by_proceeding_you_agree_to_the: string;
+            terms_of_service: string;
+            privacy_notice: string;
+            and: string;
+            use_basiq_to_connect_your_accounts: string;
+            we_use_basiq_to_connect_your_accounts: string;
+            please_enter_the_sms_code_sent_to_your_mobile_number: string;
+            new_sms_code_has_been_sent: string;
+            this_code_doesnt_appear_to_be_valid: string;
+            didnt_receive_the_code: string;
+            resend_sms: string;
+            failed_to_send_sms: string;
+            page_not_found: string;
+            missing_authentication_token: string;
+        };
+    };
+};
+export default i18n;

package/dist/setupTests.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/styledComponents/base.d.ts

@@ -0,0 +1,4 @@
+export declare const Root: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const AppContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const AppContainerWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const AppContainerPage: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/styledComponents/breakpoints.d.ts

@@ -0,0 +1,15 @@
+export declare const devices: {
+    fold: string;
+    phoneXs: string;
+    phone: string;
+    phoneLandscape: string;
+    tabletOnly: string;
+    iPadProLandscape: string;
+    iPadProPortrait: string;
+    iPad: string;
+    tablet: string;
+    desktop: string;
+    laptop: string;
+    laptopRegularScreenWidth: string;
+    bigDesktop: string;
+};

package/dist/styledComponents/index.d.ts

@@ -0,0 +1,4 @@
+export * from './ui';
+export * from './theme';
+export * from './pages';
+export * from './base';

package/dist/styledComponents/pages/auth.d.ts

@@ -0,0 +1,10 @@
+interface IInputStyled {
+    filled: boolean;
+    error: boolean;
+}
+export declare const PageConnectFooterControl: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const PageConnectFooterText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const InputStyled: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, IInputStyled, never>;
+export declare const InputContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const DivAsLink: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export {};

package/dist/styledComponents/pages/basic.d.ts

@@ -0,0 +1,23 @@
+interface IPageStyledProps {
+    buttonCount?: number;
+    horizontal?: boolean;
+}
+interface IStatusMessage {
+    error?: boolean;
+}
+interface IPageControlsSectionProps {
+    notEmpty: boolean;
+}
+interface IHorizontalProps {
+    horizontal?: boolean;
+}
+export declare const PageStyled: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IPageStyledProps, never>;
+export declare const PageSubtitle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const PageMainContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const PageControlsSection: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IPageControlsSectionProps, never>;
+export declare const PageShadowWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IHorizontalProps, never>;
+export declare const PageShadow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const PageHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
+export declare const PageContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StatusMessage: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IStatusMessage, never>;
+export {};

package/dist/styledComponents/pages/index.d.ts

@@ -0,0 +1,4 @@
+export * from './basic';
+export * from './auth';
+export * from './start';
+export * from './notFound';

package/dist/styledComponents/pages/notFound.d.ts

@@ -0,0 +1,9 @@
+interface IStatusScreenCircleContainer {
+    type: 'success' | 'warning' | 'error';
+}
+export declare const PageStatusScreenMain: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const PageStatusScreenContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StatusScreenCircleContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IStatusScreenCircleContainer, never>;
+export declare const StatusScreenErrorCode: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const PageSuccessImgContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export {};

package/dist/styledComponents/pages/start.d.ts

@@ -0,0 +1 @@
+export declare const InnerContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/styledComponents/styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
+export default _default;

package/dist/styledComponents/theme.d.ts

@@ -0,0 +1,45 @@
+export declare const theme: {
+    color: {
+        white: string;
+        porcelain: string;
+        porcelainSecond: string;
+        porcelainLight: string;
+        porcelainSecondLight: string;
+        iron: string;
+        ironSecond: string;
+        casper: string;
+        mercury: string;
+        dodgerBlue: string;
+        dodgerBlueLight: string;
+        royalBlue: string;
+        bostonBlue: string;
+        endeavour: string;
+        congressBlue: string;
+        brilliantBlue: string;
+        curiousBlue: string;
+        iceberg: string;
+        linkWater: string;
+        spindle: string;
+        cyprus: string;
+        gossamer: string;
+        emerald: string;
+        hokeyPokey: string;
+        hokeyPokeyLight: string;
+        anzac: string;
+        cerise: string;
+        sunsetOrange: string;
+        wePeep: string;
+        ebony: string;
+        abbey: string;
+        osloGrey: string;
+        loblolly: string;
+        jumbo: string;
+        blackPearl: string;
+        blueBayoux: string;
+    };
+    mixin: {
+        subtitle: () => string;
+        title: () => string;
+    };
+};
+export declare type ThemeType = typeof theme;

package/dist/styledComponents/ui/basic.d.ts

@@ -0,0 +1,10 @@
+interface IIconWrapper {
+    rotating: boolean;
+}
+export declare const rotate: import("styled-components").Keyframes;
+export declare const SimpleButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const Input: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
+export declare const H4Styled: import("styled-components").StyledComponent<"h4", import("styled-components").DefaultTheme, {}, never>;
+export declare const Spacer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const IconWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, IIconWrapper, never>;
+export {};

package/dist/styledComponents/ui/button.d.ts

@@ -0,0 +1,9 @@
+import { ButtonType } from '../../components/ui/Button';
+export declare const ButtonLabel: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+interface IButtonStyled {
+    buttonType?: ButtonType;
+    disabled: boolean;
+    onClick: () => void;
+}
+export declare const ButtonStyled: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, IButtonStyled, never>;
+export {};

package/dist/styledComponents/ui/index.d.ts

@@ -0,0 +1,3 @@
+export * from './basic';
+export * from './button';
+export * from './modals';

package/dist/styledComponents/ui/modals.d.ts

@@ -0,0 +1,7 @@
+interface IModalStyled {
+    disableTransparency: boolean;
+}
+export declare const ModalStyled: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IModalStyled, never>;
+export declare const LoadingModalStyled: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IModalStyled, never>;
+export declare const LoadingModalText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export {};

package/package.json

@@ -1,100 +1,64 @@
 {
-	"name": "@basiq/connect-auth",
-	"version": "0.1.76",
-	"dependencies": {
-		"@testing-library/jest-dom": "^5.16.4",
-		"@testing-library/react": "^13.2.0",
-		"@testing-library/user-event": "^13.5.0",
-		"@types/jest": "^27.5.0",
-		"@types/node": "^16.11.33",
-		"@types/react": "^18.0.9",
-		"@types/react-dom": "^18.0.3",
-		"@types/styled-components": "^5.1.25",
-		"i18next": "^21.8.1",
-		"react": "^18.1.0",
-		"react-dom": "^18.1.0",
-		"react-i18next": "^11.16.9",
-		"react-router-dom": "^6.3.0",
-		"react-scripts": "5.0.1",
-		"styled-components": "^5.3.5",
-		"ts-loader": "^9.3.0",
-		"typescript": "^4.6.4",
-		"web-vitals": "^2.1.4"
-	},
-	"peerDependencies": {
-		"react": "^18.1.0",
-		"react-dom": "^18.1.0"
-	},
-	"scripts": {
-		"start": "react-scripts start",
-		"build": "webpack --mode production",
-		"test": "react-scripts test",
-		"eject": "react-scripts eject",
-		"lint": "eslint .",
-		"lint:fix": "eslint --fix",
-		"format": "prettier --write './**/*.{js,jsx,ts,tsx,css,scss,json}' --config ./.prettierrc"
-	},
-	"browserslist": {
-		"production": [
-			">0.2%",
-			"not dead",
-			"not op_mini all"
-		],
-		"development": [
-			"last 1 chrome version",
-			"last 1 firefox version",
-			"last 1 safari version"
-		]
-	},
-	"resolutions": {
-		"styled-components": "^5"
-	},
-	"devDependencies": {
-		"@babel/cli": "^7.17.10",
-		"@babel/core": "^7.18.2",
-		"@babel/preset-env": "^7.18.2",
-		"@babel/preset-typescript": "^7.16.7",
-		"@typescript-eslint/eslint-plugin": "^5.26.0",
-		"@typescript-eslint/parser": "^5.26.0",
-		"babel-plugin-styled-components": "^2.0.7",
-		"eslint": "^8.16.0",
-		"eslint-config-airbnb": "^19.0.4",
-		"eslint-config-prettier": "^8.5.0",
-		"eslint-import-resolver-typescript": "^2.7.1",
-		"eslint-plugin-import": "^2.26.0",
-		"eslint-plugin-jsx-a11y": "^6.5.1",
-		"eslint-plugin-prettier": "^4.0.0",
-		"eslint-plugin-react": "^7.30.0",
-		"eslint-plugin-react-hooks": "^4.5.0",
-		"prettier": "^2.6.2",
-		"url-loader": "^4.1.1",
-		"webpack-cli": "^4.9.2"
-	},
-	"babel": {
-		"presets": [
-			"@babel/preset-typescript"
-		],
-		"plugins": [
-			"babel-plugin-styled-components"
-		]
-	},
-	"description": "Basiq sms auth for redirection to basiq consent ui",
-	"main": "dist/main.js",
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/basiqio/connect-code-validaiton.git"
-	},
-	"keywords": [
-		"sms",
-		"code",
-		"validation",
-		"basiq",
-		"connect"
-	],
-	"author": "Basiq",
-	"license": "ISC",
-	"bugs": {
-		"url": "https://github.com/basiqio/connect-code-validaiton/issues"
-	},
-	"homepage": "https://github.com/basiqio/connect-code-validaiton#readme"
-}
+  "version": "0.1.79",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "files": ["dist", "src"],
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "start": "tsdx watch",
+    "build": "tsdx build",
+    "test": "tsdx test --passWithNoTests",
+    "lint": "tsdx lint",
+    "prepare": "tsdx build",
+    "size": "size-limit",
+    "analyze": "size-limit --why"
+  },
+  "peerDependencies": {
+    "react": ">=16"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "tsdx lint"
+    }
+  },
+  "prettier": {
+    "printWidth": 80,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "es5"
+  },
+  "name": "@basiq/connect-auth",
+  "author": "Basiq",
+  "module": "dist/connect-auth.esm.js",
+  "size-limit": [{
+    "path": "dist/connect-auth.cjs.production.min.js",
+    "limit": "10 KB"
+  }, {
+    "path": "dist/connect-auth.esm.js",
+    "limit": "10 KB"
+  }],
+  "devDependencies": {
+    "@size-limit/preset-small-lib": "^7.0.8",
+    "@types/react": "^18.0.10",
+    "@types/react-dom": "^18.0.5",
+    "husky": "^8.0.1",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "size-limit": "^7.0.8",
+    "tsdx": "^0.14.1",
+    "tslib": "^2.4.0",
+    "typescript": "^3.9.10",
+    "rollup-plugin-url": "^3.0.1",
+    "@rollup/plugin-image": "^2.1.1",
+    "@types/styled-components": "^5.1.25",
+    "i18next": "^21.8.1",
+    "react-i18next": "^11.16.9"
+
+  },
+  "dependencies": {
+    "styled-components": "^5.3.5"
+  }
+}

package/src/App.tsx

@@ -0,0 +1,96 @@
+import React, { createRef, SyntheticEvent, useEffect, useState } from 'react';
+import { AppContainer, AppContainerPage, AppContainerWrapper, PageHeader, Root } from './styledComponents';
+import GlobalStyles from './styledComponents/styles';
+import { detectScrollToBottom } from './helpers';
+import {AuthScreen, NotFound, Page, StartScreen} from './components/pages';
+import { authUser } from './actions/actions';
+import { LoadingModal } from './components/modals';
+
+function App() {
+	const ref = createRef<HTMLDivElement>();
+	const [shadow, setShadow] = useState(false);
+	const [currentScreen, setCurrentScreen] = useState(0);
+	const [loading, setLoading] = useState(true);
+	const [authId, setAuthId] = useState('');
+	const [mobile, setMobile] = useState('');
+	const [logo, setLogo] = useState('');
+	const [appName, setAppName] = useState('');
+	const [errorCode, setErrorCode] = useState('');
+
+	const handleConnectionsScroll = (event: SyntheticEvent<HTMLDivElement>) => {
+		setShadow(detectScrollToBottom(event));
+	};
+
+	useEffect(() => {
+		const getData = async () => {
+			const id = window.location.pathname.substring(1);
+			if (id?.length > 0) {
+				setAuthId(id);
+				setLoading(true);
+				const response = await authUser(id, 'GET');
+				if (response?.data?.status === 'code-not-sent') {
+					setCurrentScreen(1);
+					setMobile(response?.data?.mobile);
+					if (response?.data?.appName) {
+						setAppName(response?.data?.appName);
+					}
+					if (response?.data?.partner?.logoUrl) {
+						setLogo(response?.data?.partner?.logoUrl);
+					}
+				} else {
+					showErrorScreen(response?.statusCode.toString());
+				}
+				setLoading(false);
+			} else {
+				showErrorScreen('404');
+			}
+		};
+		getData();
+	}, []);
+
+	const showErrorScreen = (code: string) => {
+		setErrorCode(code);
+		setCurrentScreen(3);
+	};
+
+	const getScreen = () => {
+		switch (currentScreen) {
+			case 0:
+				return <Page shadow={shadow}><LoadingModal isOpen={loading} disableTransparency /></Page>;
+			case 1:
+				return (
+					<StartScreen
+						appName={appName}
+						shadow={shadow}
+						showErrorScreen={showErrorScreen}
+						onContinue={() => setCurrentScreen(2)}
+						authId={authId}
+					/>
+				);
+			case 2:
+				return <AuthScreen number={mobile} onBack={() => setCurrentScreen(1)} shadow={shadow} authId={authId} />;
+			case 3:
+				return <NotFound messageCode={errorCode} />;
+			default:
+				return <NotFound messageCode={errorCode} />;
+		}
+	};
+
+	return (
+		<Root>
+			<GlobalStyles />
+			<AppContainerWrapper>
+				<AppContainer onScroll={handleConnectionsScroll} ref={ref}>
+					{logo && (
+						<PageHeader>
+							<img src={logo} alt="logo" />
+						</PageHeader>
+					)}
+					<AppContainerPage>{getScreen()}</AppContainerPage>
+				</AppContainer>
+			</AppContainerWrapper>
+		</Root>
+	);
+}
+
+export default App;

package/src/BasiqConnect.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import App from './App';
+import './locales/i18n';
+import { theme } from './styledComponents';
+
+export function BasiqConnect() {
+return(
+	<React.StrictMode>
+		<ThemeProvider theme={theme}>
+			<App />
+			</ThemeProvider>
+	</React.StrictMode>
+		);
+
+}
+

package/src/actions/actions.ts

@@ -0,0 +1,72 @@
+import { DASHBOARD_API_URL } from '../helpers';
+
+export const verifySmsCode = async (authRequestId: string, smsCode: string) => {
+	const body = {
+		'sms-code': smsCode
+	};
+
+	const reqData = {
+		headers: {
+			'Content-Type': 'application/json',
+			Authorization: `Basic SMS_CODE:${authRequestId}`
+		},
+		method: 'POST',
+		body: JSON.stringify(body)
+	};
+
+	const result = await fetch(`${DASHBOARD_API_URL}client_auth/${authRequestId}/token`, reqData);
+
+	if (result.status >= 200 && result.status < 300) {
+		const json = result.status === 204 ? null : await result.json();
+		return {
+			data: json,
+			headers: result.headers,
+			statusCode: result.status
+		};
+	}
+	if (result.status >= 400) {
+		return {
+			headers: result.headers,
+			statusCode: result.status,
+			error: result.statusText || 'Something went wrong'
+		};
+	}
+	return {
+		headers: result.headers,
+		statusCode: result.status,
+		error: result.statusText || 'Something went wrong'
+	};
+};
+
+export const authUser = async (authRequestId: string, method: 'POST' | 'GET' = 'POST') => {
+	const reqData = {
+		headers: {
+			'Content-Type': 'application/json'
+		},
+		method
+	};
+
+	const result = await fetch(`${DASHBOARD_API_URL}client_auth/${authRequestId}`, reqData);
+
+	if (result.status >= 200 && result.status < 300) {
+		const json = result.status === 204 ? null : await result.json();
+		return {
+			data: json,
+			headers: result.headers,
+			statusCode: result.status
+		};
+	}
+	if (result.status >= 400) {
+		const json = result.status === 403 ? null : await result.json();
+		return {
+			headers: result.headers,
+			statusCode: result.status,
+			error: json.message || result.statusText || 'Something went wrong'
+		};
+	}
+	return {
+		headers: result.headers,
+		statusCode: result.status,
+		error: result.statusText || 'Something went wrong'
+	};
+};

package/src/components/modals/LoadingModal.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import Modal from '../ui/Modal';
+import { LoadingModalStyled, LoadingModalText } from '../../styledComponents';
+import Icon from '../ui/icon';
+import loadingIndicator from '../../images/loading_indicator.svg';
+
+interface IProps {
+	isOpen: boolean;
+	disableTransparency?: boolean;
+	loadingText?: string;
+}
+
+function LoadingModal(props: IProps) {
+	const { isOpen, disableTransparency, loadingText } = props;
+	const { t } = useTranslation();
+
+	return (
+		<Modal isOpen={isOpen} disableTransparency={!!disableTransparency}>
+			<LoadingModalStyled disableTransparency={!!disableTransparency}>
+				<Icon img={loadingIndicator} rotating />
+				<LoadingModalText>{loadingText || t<string>('loading')}</LoadingModalText>
+			</LoadingModalStyled>
+		</Modal>
+	);
+}
+
+export default LoadingModal;

package/src/components/modals/index.ts

@@ -0,0 +1 @@
+export { default as LoadingModal } from './LoadingModal';