@basiq/connect-auth 0.1.89 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/README.md +40 -140
  2. package/dist/actions/actions.d.ts +6 -0
  3. package/dist/connect-auth.cjs.development.js +119 -69
  4. package/dist/connect-auth.cjs.development.js.map +1 -1
  5. package/dist/connect-auth.cjs.production.min.js +1 -1
  6. package/dist/connect-auth.cjs.production.min.js.map +1 -1
  7. package/dist/connect-auth.esm.js +120 -70
  8. package/dist/connect-auth.esm.js.map +1 -1
  9. package/dist/helpers/utils.d.ts +1 -0
  10. package/dist/styledComponents/pages/auth.d.ts +4 -1
  11. package/package.json +2 -4
package/README.md CHANGED
@@ -1,160 +1,60 @@
1
- # TSDX React User Guide
1
+ # BASIQ CONNECT COMPONENT
2
2
 
3
- Congrats! You just saved yourself hours of work by bootstrapping this project with TSDX. Let’s get you oriented with what’s here and how to use it.
3
+ The Basiq Connect Auth is a ReactJS UI component exposed to partners who prefer to implement the auth flow as an external component with an SMS OTP built in. When rendered, it will take the user through an SMS OTP flow and then proceed to redirect them to the [Basiq Consent UI](https://api.basiq.io/docs/consent-ui) flow to connect their accounts.
4
4
 
5
- > This TSDX setup is meant for developing React component libraries (not apps!) that can be published to NPM. If you’re looking to build a React-based app, you should use `create-react-app`, `razzle`, `nextjs`, `gatsby`, or `react-static`.
5
+ Note: This has been offered as interim solution for partners who require access to v3 of the API before we have released the upgrades to `https://connect.basiq.io/`. If you have any questions regarding this please reach out to support@basiq.io.
6
6
 
7
- > If you’re new to TypeScript and React, checkout [this handy cheatsheet](https://github.com/sw-yx/react-typescript-cheatsheet/)
7
+ ## Setup
8
8
 
9
- ## Commands
9
+ 1. Install `@basiq/connect-auth` and import the component
10
10
 
11
- TSDX scaffolds your new library inside `/src`, and also sets up a [Parcel-based](https://parceljs.org) playground for it inside `/example`.
12
-
13
- The recommended workflow is to run TSDX in one terminal:
14
-
15
- ```bash
16
- npm start # or yarn start
17
11
  ```
18
-
19
- This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.
20
-
21
- Then run the example inside another:
22
-
23
- ```bash
24
- cd example
25
- npm i # or yarn to install dependencies
26
- npm start # or yarn start
12
+ $ npm install @basiq/basiq-connect-control
27
13
  ```
28
14
 
29
- The default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. **No symlinking required**, we use [Parcel's aliasing](https://parceljs.org/module_resolution.html#aliases).
30
-
31
- To do a one-off build, use `npm run build` or `yarn build`.
32
-
33
- To run tests, use `npm test` or `yarn test`.
34
-
35
- ## Configuration
36
-
37
- Code quality is set up for you with `prettier`, `husky`, and `lint-staged`. Adjust the respective fields in `package.json` accordingly.
38
-
39
- ### Jest
40
-
41
- Jest tests are set up to run with `npm test` or `yarn test`.
42
-
43
- ### Bundle analysis
44
-
45
- Calculates the real cost of your library using [size-limit](https://github.com/ai/size-limit) with `npm run size` and visulize it with `npm run analyze`.
46
-
47
- #### Setup Files
48
-
49
- This is the folder structure we set up for you:
50
-
51
- ```txt
52
- /example
53
- index.html
54
- index.tsx # test your component here in a demo app
55
- package.json
56
- tsconfig.json
57
- /src
58
- index.tsx # EDIT THIS
59
- /test
60
- blah.test.tsx # EDIT THIS
61
- .gitignore
62
- package.json
63
- README.md # EDIT THIS
64
- tsconfig.json
65
- ```
66
-
67
- #### React Testing Library
68
-
69
- We do not set up `react-testing-library` for you yet, we welcome contributions and documentation on this.
70
-
71
- ### Rollup
72
-
73
- TSDX uses [Rollup](https://rollupjs.org) as a bundler and generates multiple rollup configs for various module formats and build settings. See [Optimizations](#optimizations) for details.
74
-
75
- ### TypeScript
76
-
77
- `tsconfig.json` is set up to interpret `dom` and `esnext` types, as well as `react` for `jsx`. Adjust according to your needs.
78
-
79
- ## Continuous Integration
80
-
81
- ### GitHub Actions
82
-
83
- Two actions are added by default:
84
-
85
- - `main` which installs deps w/ cache, lints, tests, and builds on all pushes against a Node and OS matrix
86
- - `size` which comments cost comparison of your library on every pull request using [`size-limit`](https://github.com/ai/size-limit)
87
-
88
- ## Optimizations
89
-
90
- Please see the main `tsdx` [optimizations docs](https://github.com/palmerhq/tsdx#optimizations). In particular, know that you can take advantage of development-only optimizations:
91
-
92
15
  ```js
93
- // ./types/index.d.ts
94
- declare var __DEV__: boolean;
95
-
96
- // inside your code...
97
- if (__DEV__) {
98
- console.log('foo');
99
- }
16
+ import { BasiqConnect } from "@basiq/connect-auth";
100
17
  ```
101
18
 
102
- You can also choose to install and use [invariant](https://github.com/palmerhq/tsdx#invariant) and [warning](https://github.com/palmerhq/tsdx#warning) functions.
103
-
104
- ## Module Formats
105
-
106
- CJS, ESModules, and UMD module formats are supported.
107
-
108
- The appropriate paths are configured in `package.json` and `dist/index.js` accordingly. Please report if any issues are found.
109
-
110
- ## Deploying the Example Playground
111
-
112
- The Playground is just a simple [Parcel](https://parceljs.org) app, you can deploy it anywhere you would normally deploy that. Here are some guidelines for **manually** deploying with the Netlify CLI (`npm i -g netlify-cli`):
19
+ 2. Generate a new Auth Link, and retrieve the auth link ID from the public URL that is returned.
113
20
 
114
- ```bash
115
- cd example # if not already in the example folder
116
- npm run build # builds to dist
117
- netlify deploy # deploy the dist folder
118
- ```
119
-
120
- Alternatively, if you already have a git repo connected, you can set up continuous deployment with Netlify:
21
+ ```js
22
+
23
+ try {
24
+ const { data } = await axios.get(
25
+ `https://au-api.basiq.io/users/{userId}/auth_link`,
26
+ {
27
+ method: 'post',
28
+ headers: {
29
+ Authorization: `Bearer ${YOUR_SERVER_ACCESS_TOKEN}`,
30
+ Accept: 'application/json',
31
+ 'Content-Type': 'application/json',
32
+ },
33
+ }
34
+ );
35
+
36
+ let auth_id = data.links.public.replace('https://connect.basiq.io/','');
37
+
38
+ return auth_id;
39
+
40
+ } catch (error) {
41
+ console.log(error)
42
+ }
121
43
 
122
- ```bash
123
- netlify init
124
- # build command: yarn build && cd example && yarn && yarn build
125
- # directory to deploy: example/dist
126
- # pick yes for netlify.toml
127
44
  ```
128
45
 
129
- ## Named Exports
130
-
131
- Per Palmer Group guidelines, [always use named exports.](https://github.com/palmerhq/typescript#exports) Code split inside your React app instead of your React library.
132
-
133
- ## Including Styles
134
-
135
- There are many ways to ship styles, including with CSS-in-JS. TSDX has no opinion on this, configure how you like.
46
+ 3. Drop the component in your code on the page you wish to call it. The component will retrieve the auth_id from the URL so failing to include it there will result in an error. **Note** that the component is full page and will eventually handle the redirect to the Basiq Consent UI, so it should be rendered on it's own page (or conditionally, after appending an auth_link ID)
136
47
 
137
- For vanilla CSS, you can include it at the root directory and add it to the `files` section in your `package.json`, so that it can be imported separately by your users and run through their bundler's loader.
138
48
 
139
- ## Publishing to NPM
49
+ ```jsx
140
50
 
141
- We recommend using [np](https://github.com/sindresorhus/np).
51
+ // Component rendered at /auth-link/:auth_id
142
52
 
143
- ## Usage with Lerna
144
-
145
- When creating a new package with TSDX within a project set up with Lerna, you might encounter a `Cannot resolve dependency` error when trying to run the `example` project. To fix that you will need to make changes to the `package.json` file _inside the `example` directory_.
146
-
147
- The problem is that due to the nature of how dependencies are installed in Lerna projects, the aliases in the example project's `package.json` might not point to the right place, as those dependencies might have been installed in the root of your Lerna project.
148
-
149
- Change the `alias` to point to where those packages are actually installed. This depends on the directory structure of your Lerna project, so the actual path might be different from the diff below.
150
-
151
- ```diff
152
- "alias": {
153
- - "react": "../node_modules/react",
154
- - "react-dom": "../node_modules/react-dom"
155
- + "react": "../../../node_modules/react",
156
- + "react-dom": "../../../node_modules/react-dom"
157
- },
53
+ export default function Auth() {
54
+ return (
55
+ <main>
56
+ <BasiqConnect />
57
+ </main>
58
+ );
59
+ }
158
60
  ```
159
-
160
- An alternative to fixing this problem would be to remove aliases altogether and define the dependencies referenced as aliases as dev dependencies instead. [However, that might cause other problems.](https://github.com/palmerhq/tsdx/issues/64)
package/dist/actions/actions.d.ts CHANGED
@@ -31,4 +31,10 @@ export declare const authUser: ({ authRequestId, method, test }: {
31
31
  error: any;
32
32
  ok: boolean;
33
33
  data?: undefined;
34
+ } | {
35
+ statusCode: number;
36
+ error: string;
37
+ ok: boolean;
38
+ data?: undefined;
39
+ headers?: undefined;
34
40
  }>;
package/dist/connect-auth.cjs.development.js CHANGED
@@ -474,6 +474,13 @@ var hexToRGBa = function hexToRGBa(hex, opacity) {
474
474
  var opp = opacity > 1 && opacity < 0 ? 1 : opacity;
475
475
  return "rgba(" + (hexToRGBA == null ? void 0 : hexToRGBA.concat(opp).join()) + ")";
476
476
  };
477
+ var handleUserKeyPress = function handleUserKeyPress(e, onEnter) {
478
+ var keyCode = e.keyCode;
479
+
480
+ if (keyCode === 13) {
481
+ onEnter();
482
+ }
483
+ };
477
484
 
478
485
  var DASHBOARD_API_URL_TEST = 'https://c9joivz12f.execute-api.ap-southeast-2.amazonaws.com/Development/';
479
486
  var DASHBOARD_API_URL = 'https://p4c8zn20r9.execute-api.ap-southeast-2.amazonaws.com/Production_v1/';
@@ -535,10 +542,10 @@ var theme = {
535
542
  },
536
543
  mixin: {
537
544
  subtitle: function subtitle() {
538
- return " margin-top: 8px;\n margin-bottom: 4px;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;";
545
+ return " margin-top: 32px;\n margin-bottom: 4px;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;";
539
546
  },
540
547
  title: function title() {
541
- return " font-size: 26px;\n line-height: 30px;\n letter-spacing: -0.2px;\n margin-top: 0;\n margin-bottom: 24px;\n color: #130f26;\n white-space: pre-line;\n ";
548
+ return " font-size: 26px;\n line-height: 30px;\n letter-spacing: -0.2px;\n margin-top: 0;\n margin-bottom: 0;\n color: #130f26;\n white-space: pre-line;\n ";
542
549
  }
543
550
  }
544
551
  };
@@ -602,18 +609,15 @@ var PageShadowWrapper = /*#__PURE__*/styled__default.div(_templateObject5$2 || (
602
609
  return horizontal && styled.css(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: space-between;\n\n\t\t\t", " {\n\t\t\t\tmargin-bottom: 0;\n\t\t\t\tmargin-right: 16px;\n\n\t\t\t\t&:last-child {\n\t\t\t\t\tmargin-right: unset;\n\t\t\t\t}\n\t\t\t}\n\t\t"])), ButtonStyled);
603
610
  });
604
611
  var PageShadow = /*#__PURE__*/styled__default.div(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n\tposition: absolute;\n\theight: 71px;\n\tleft: 0;\n\tright: 0;\n\ttop: -71px;\n\tbackground: linear-gradient(180deg, #cecece 0%, ", " 100%);\n\topacity: 0.8;\n\ttransform: rotate(-180deg);\n\tpointer-events: none;\n"])), /*#__PURE__*/hexToRGBa('#cecece', 0));
605
- var PageHeader = /*#__PURE__*/styled__default.header(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n\tmargin-bottom: 32px;\n\twidth: 100%;\n\tborder-radius: 8px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground-color: ", ";\n\tpadding: 16px;\n\tbox-sizing: border-box;\n\theight: 150px;\n\t", " {\n\t\tbackground-color: unset;\n\t\toverflow: initial;\n\t\theight: 150px;\n\t\tpadding: 16px;\n\t}\n\timg {\n\t\tborder-radius: 4px;\n\t\twidth: auto !important;\n\t\theight: auto;\n\t\tmax-width: 100%;\n\t\tmax-height: 100%;\n\t\t", " {\n\t\t\twidth: 100%;\n\t\t\tpadding: 16px;\n\t\t}\n\t}\n"])), function (_ref7) {
606
- var theme = _ref7.theme;
607
- return theme.color.porcelainSecond;
608
- }, devices.phone, devices.phone);
612
+ var PageHeader = /*#__PURE__*/styled__default.header(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n\tmargin-bottom: 32px;\n\twidth: 100%;\n\tborder-radius: 8px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground-color: unset;\n\tpadding: 16px 0;\n\tbox-sizing: border-box;\n\theight: 150px;\n\t", " {\n\t\toverflow: initial;\n\t\theight: 150px;\n\t\tmargin-bottom: 0;\n\t}\n\timg {\n\t\tborder-radius: 4px;\n\t\twidth: auto !important;\n\t\theight: auto;\n\t\tmax-width: 100%;\n\t\tmax-height: 100%;\n\t\t", " {\n\t\t\twidth: 100%;\n\t\t\tpadding: 16px;\n\t\t}\n\t}\n"])), devices.phone, devices.phone);
609
613
  var PageContent = /*#__PURE__*/styled__default.div(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n\twidth: 100%;\n"])));
610
- var StatusMessage = /*#__PURE__*/styled__default.div(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n\twidth: 100%;\n\tbackground: ", ";\n\tborder-radius: 4px;\n\tpadding: 11px;\n\tbox-sizing: border-box;\n\ttext-align: center;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tfont-weight: 400;\n\tfont-size: 14px;\n\tcolor: ", ";\n\tmargin-bottom: 16px;\n"])), function (_ref8) {
614
+ var StatusMessage = /*#__PURE__*/styled__default.div(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n\twidth: 100%;\n\tbackground: ", ";\n\tborder-radius: 4px;\n\tpadding: 11px;\n\tbox-sizing: border-box;\n\ttext-align: center;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tfont-weight: 400;\n\tfont-size: 14px;\n\tcolor: ", ";\n\tmargin-bottom: 16px;\n"])), function (_ref7) {
615
+ var theme = _ref7.theme,
616
+ error = _ref7.error;
617
+ return error ? theme.color.wePeep : theme.color.iceberg;
618
+ }, function (_ref8) {
611
619
  var theme = _ref8.theme,
612
620
  error = _ref8.error;
613
- return error ? theme.color.wePeep : theme.color.iceberg;
614
- }, function (_ref9) {
615
- var theme = _ref9.theme,
616
- error = _ref9.error;
617
621
  return error ? theme.color.cerise : theme.color.gossamer;
618
622
  });
619
623
 
@@ -634,13 +638,17 @@ var InputStyled = /*#__PURE__*/styled__default.input(_templateObject3$3 || (_tem
634
638
  return error ? theme.color.cerise : theme.color.endeavour;
635
639
  });
636
640
  var InputContainer = /*#__PURE__*/styled__default.div(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n\twidth: 100%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n"])));
637
- var DivAsLink = /*#__PURE__*/styled__default.div(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n\tcolor: ", ";\n\tdisplay: inherit;\n\tcursor: pointer;\n"])), function (_ref4) {
638
- var theme = _ref4.theme;
639
- return theme.color.endeavour;
641
+ var DivAsLink = /*#__PURE__*/styled__default.div(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n\tcolor: ", ";\n\tdisplay: inherit;\n\tcursor: ", ";\n"])), function (_ref4) {
642
+ var theme = _ref4.theme,
643
+ disabled = _ref4.disabled;
644
+ return disabled ? theme.color.casper : theme.color.endeavour;
645
+ }, function (_ref5) {
646
+ var disabled = _ref5.disabled;
647
+ return disabled ? 'not-allowed' : 'pointer';
640
648
  });
641
649
 
642
650
  var _templateObject$5;
643
- var InnerContainer = /*#__PURE__*/styled__default.div(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n\tmargin-top: 16px;\n\twidth: 100%;\n"])));
651
+ var InnerContainer = /*#__PURE__*/styled__default.div(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n\twidth: 100%;\n"])));
644
652
 
645
653
  var _templateObject$6, _templateObject2$5, _templateObject3$4, _templateObject4$4;
646
654
  var PageStatusScreenMain = /*#__PURE__*/styled__default(PageMainContainer)(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n\theight: 100%;\n"])));
@@ -699,7 +707,7 @@ var MarkW1GBold = "data:font/otf;base64,T1RUTwANAIAAAwBQQ0ZGICwMZMIAACp0AAFDmERT
699
707
  var _templateObject$8;
700
708
  var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$8 || (_templateObject$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n \n@font-face {\n font-family: MarkW1G;\n src: url(", ") format('opentype');\n }\n @font-face {\n font-family: MarkW1G;\n font-weight: bold;\n src: url(", ") format('opentype');\n }\n\nbody{\n font-family: 'MarkW1G', sans-serif;\n}\nbody * {\n font-family: 'MarkW1G', sans-serif;\n font-size: 14px;\n font-style: normal;\n}\n"])), MarkW1GBook, MarkW1GBold);
701
709
 
702
- var img = "data:image/svg+xml,%3c!-- Generated by IcoMoon.io --%3e%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='1024' height='1024' viewBox='0 0 1024 1024'%3e%3ctitle%3e%3c/title%3e%3cg id='icomoon-ignore'%3e%3c/g%3e%3cpath fill='black' d='M682.667 469.333h-241.493l53.333-55.893c7.287-7.645 11.77-18.019 11.77-29.44 0-23.584-19.119-42.703-42.703-42.703-12.164 0-23.139 5.085-30.917 13.246l-0.016 0.017-122.027 128c-1.338 1.628-2.607 3.44-3.731 5.347l-0.109 0.199c-1.886 2.326-3.467 5.004-4.62 7.899l-0.073 0.207c-1.426 3.52-2.347 7.596-2.557 11.859l-0.003 0.088-0.853 3.84c0.073 5.873 1.322 11.435 3.52 16.489l-0.107-0.275c2.2 5.299 5.227 9.831 8.968 13.662l127.992 127.992c7.733 7.795 18.45 12.621 30.293 12.621s22.56-4.826 30.291-12.618l0.003-0.003c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003-55.467-54.613h238.507c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667v0z'%3e%3c/path%3e%3cpath fill='black' d='M512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0zM512 853.333c-188.513 0-341.333-152.82-341.333-341.333s152.82-341.333 341.333-341.333c188.513 0 341.333 152.82 341.333 341.333v0c0 188.513-152.82 341.333-341.333 341.333v0z'%3e%3c/path%3e%3c/svg%3e";
710
+ var img = "data:image/svg+xml,%3csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.25 1.75C5.55621 1.75 1.75 5.55621 1.75 10.25C1.75 14.9447 5.55616 18.75 10.25 18.75C14.9438 18.75 18.75 14.9447 18.75 10.25C18.75 5.55621 14.9438 1.75 10.25 1.75ZM0.25 10.25C0.25 4.72779 4.72779 0.25 10.25 0.25C15.7722 0.25 20.25 4.72779 20.25 10.25C20.25 15.7733 15.7722 20.25 10.25 20.25C4.72784 20.25 0.25 15.7733 0.25 10.25ZM12.2238 6.25001C12.516 6.54354 12.515 7.01841 12.2215 7.31067L9.26925 10.2502L12.2215 13.1897C12.515 13.482 12.516 13.9569 12.2238 14.2504C11.9315 14.5439 11.4566 14.5449 11.1631 14.2527L7.67711 10.7817C7.53576 10.6409 7.4563 10.4497 7.4563 10.2502C7.4563 10.0507 7.53576 9.85947 7.67711 9.71873L11.1631 6.24773C11.4566 5.95547 11.9315 5.95649 12.2238 6.25001Z' fill='black'/%3e%3c/svg%3e";
703
711
 
704
712
  function Button(props) {
705
713
  var onClick = props.onClick,
@@ -883,34 +891,35 @@ var authUser = /*#__PURE__*/function () {
883
891
  },
884
892
  method: method || 'POST'
885
893
  };
886
- _context2.next = 4;
894
+ _context2.prev = 2;
895
+ _context2.next = 5;
887
896
  return fetch((test ? DASHBOARD_API_URL_TEST : DASHBOARD_API_URL) + "client_auth/" + authRequestId, reqData);
888
897
 
889
- case 4:
898
+ case 5:
890
899
  result = _context2.sent;
891
900
 
892
901
  if (!(result.status >= 200 && result.status < 300)) {
893
- _context2.next = 15;
902
+ _context2.next = 16;
894
903
  break;
895
904
  }
896
905
 
897
906
  if (!(result.status === 204)) {
898
- _context2.next = 10;
907
+ _context2.next = 11;
899
908
  break;
900
909
  }
901
910
 
902
911
  _context2.t0 = null;
903
- _context2.next = 13;
912
+ _context2.next = 14;
904
913
  break;
905
914
 
906
- case 10:
907
- _context2.next = 12;
915
+ case 11:
916
+ _context2.next = 13;
908
917
  return result.json();
909
918
 
910
- case 12:
919
+ case 13:
911
920
  _context2.t0 = _context2.sent;
912
921
 
913
- case 13:
922
+ case 14:
914
923
  json = _context2.t0;
915
924
  return _context2.abrupt("return", {
916
925
  data: json,
@@ -919,29 +928,29 @@ var authUser = /*#__PURE__*/function () {
919
928
  ok: true
920
929
  });
921
930
 
922
- case 15:
931
+ case 16:
923
932
  if (!(result.status >= 400)) {
924
- _context2.next = 25;
933
+ _context2.next = 26;
925
934
  break;
926
935
  }
927
936
 
928
937
  if (![403, 404].includes(result.status)) {
929
- _context2.next = 20;
938
+ _context2.next = 21;
930
939
  break;
931
940
  }
932
941
 
933
942
  _context2.t1 = null;
934
- _context2.next = 23;
943
+ _context2.next = 24;
935
944
  break;
936
945
 
937
- case 20:
938
- _context2.next = 22;
946
+ case 21:
947
+ _context2.next = 23;
939
948
  return result.json();
940
949
 
941
- case 22:
950
+ case 23:
942
951
  _context2.t1 = _context2.sent;
943
952
 
944
- case 23:
953
+ case 24:
945
954
  _json = _context2.t1;
946
955
  return _context2.abrupt("return", {
947
956
  headers: result.headers,
@@ -950,7 +959,7 @@ var authUser = /*#__PURE__*/function () {
950
959
  ok: false
951
960
  });
952
961
 
953
- case 25:
962
+ case 26:
954
963
  return _context2.abrupt("return", {
955
964
  headers: result.headers,
956
965
  statusCode: result.status,
@@ -958,12 +967,21 @@ var authUser = /*#__PURE__*/function () {
958
967
  ok: false
959
968
  });
960
969
 
961
- case 26:
970
+ case 29:
971
+ _context2.prev = 29;
972
+ _context2.t2 = _context2["catch"](2);
973
+ return _context2.abrupt("return", {
974
+ statusCode: 500,
975
+ error: 'Something went wrong',
976
+ ok: false
977
+ });
978
+
979
+ case 32:
962
980
  case "end":
963
981
  return _context2.stop();
964
982
  }
965
983
  }
966
- }, _callee2);
984
+ }, _callee2, null, [[2, 29]]);
967
985
  }));
968
986
 
969
987
  return function authUser(_x2) {
@@ -1026,6 +1044,17 @@ function StartScreen(props) {
1026
1044
  var _useTranslation = reactI18next.useTranslation(),
1027
1045
  t = _useTranslation.t;
1028
1046
 
1047
+ React.useEffect(function () {
1048
+ window.addEventListener('keydown', function (e) {
1049
+ return handleUserKeyPress(e, onContinue);
1050
+ });
1051
+ return function () {
1052
+ window.removeEventListener('keydown', function (e) {
1053
+ return handleUserKeyPress(e, onContinue);
1054
+ });
1055
+ };
1056
+ }, []);
1057
+
1029
1058
  var handleContinue = /*#__PURE__*/function () {
1030
1059
  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
1031
1060
  var response;
@@ -1113,9 +1142,13 @@ function StartScreen(props) {
1113
1142
  bold: React__default.createElement("strong", null)
1114
1143
  }
1115
1144
  }))), React__default.createElement(H4Styled, null, t('things_you_should_know')), React__default.createElement("ul", null, React__default.createElement("li", null, t('we_dont_share_your_data_without_your_consent')), React__default.createElement("li", null, t('you_can_easily_stop_sharing_your_data_at_any_time')), React__default.createElement("li", null, t('you_can_choose_to_delete_shared_data_when_we_no_longer_need_it'))), React__default.createElement(Spacer, null), React__default.createElement("span", null, React__default.createElement(React__default.Fragment, null, t('by_proceeding_you_agree_to_the'), ' ', React__default.createElement("a", {
1116
- href: "https://docs.basiq.io/en/articles/415750-basiq-terms-of-service"
1145
+ href: "https://docs.basiq.io/en/articles/415750-basiq-terms-of-service",
1146
+ rel: "noreferrer",
1147
+ target: "_blank"
1117
1148
  }, t('terms_of_service')), " ", t('and'), ' ', React__default.createElement("a", {
1118
- href: "https://docs.basiq.io/en/articles/382581-basiq-privacy-policy"
1149
+ href: "https://docs.basiq.io/en/articles/382581-basiq-privacy-policy",
1150
+ rel: "noreferrer",
1151
+ target: "_blank"
1119
1152
  }, t('privacy_notice')))), React__default.createElement(LoadingModal, {
1120
1153
  isOpen: loading
1121
1154
  })));
@@ -1144,36 +1177,43 @@ function AuthScreen(_ref) {
1144
1177
  setResend = _useState3[1];
1145
1178
 
1146
1179
  var _useState4 = React.useState(false),
1147
- loading = _useState4[0],
1148
- setLoading = _useState4[1];
1180
+ resendLoading = _useState4[0],
1181
+ setResendLoading = _useState4[1];
1149
1182
 
1150
- var handleCodeApply = /*#__PURE__*/function () {
1151
- var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
1152
- var _response$data;
1183
+ var _useState5 = React.useState(false),
1184
+ loading = _useState5[0],
1185
+ setLoading = _useState5[1];
1153
1186
 
1154
- var response, _response$data2;
1187
+ var handleCodeApply = React.useCallback( /*#__PURE__*/function () {
1188
+ var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
1189
+ var _response$data, response, _response$data2;
1155
1190
 
1156
1191
  return _regeneratorRuntime().wrap(function _callee$(_context) {
1157
1192
  while (1) {
1158
1193
  switch (_context.prev = _context.next) {
1159
1194
  case 0:
1195
+ if (!(smsCode.length === 4 && error.length === 0 && (!e || (e == null ? void 0 : e.charCode) === 13))) {
1196
+ _context.next = 7;
1197
+ break;
1198
+ }
1199
+
1160
1200
  setLoading(true);
1161
- _context.next = 3;
1201
+ _context.next = 4;
1162
1202
  return verifySmsCode({
1163
1203
  authRequestId: authRequestId,
1164
1204
  smsCode: smsCode,
1165
1205
  test: test
1166
1206
  });
1167
1207
 
1168
- case 3:
1208
+ case 4:
1169
1209
  response = _context.sent;
1170
- setLoading(false);
1171
1210
 
1172
1211
  if (response != null && (_response$data = response.data) != null && _response$data.access_token) {
1173
- window.open("https://consent.basiq.io/home?token=" + (response == null ? void 0 : (_response$data2 = response.data) == null ? void 0 : _response$data2.access_token));
1212
+ window.open("https://consent.basiq.io/home?token=" + (response == null ? void 0 : (_response$data2 = response.data) == null ? void 0 : _response$data2.access_token), "_self");
1174
1213
  }
1175
1214
 
1176
1215
  if (response != null && response.error) {
1216
+ setLoading(false);
1177
1217
  setError(t('this_code_doesnt_appear_to_be_valid'));
1178
1218
  }
1179
1219
 
@@ -1185,16 +1225,16 @@ function AuthScreen(_ref) {
1185
1225
  }, _callee);
1186
1226
  }));
1187
1227
 
1188
- return function handleCodeApply() {
1228
+ return function (_x) {
1189
1229
  return _ref2.apply(this, arguments);
1190
1230
  };
1191
- }();
1192
-
1231
+ }(), [smsCode, error, authRequestId]);
1193
1232
  var buttons = [{
1194
1233
  label: t('continue'),
1195
1234
  onClick: function onClick() {
1196
1235
  return handleCodeApply();
1197
- }
1236
+ },
1237
+ disabled: smsCode.length < 4 || !!error
1198
1238
  }];
1199
1239
 
1200
1240
  var handleResend = /*#__PURE__*/function () {
@@ -1206,16 +1246,17 @@ function AuthScreen(_ref) {
1206
1246
  case 0:
1207
1247
  setError('');
1208
1248
  setSmsCode('');
1209
- setLoading(true);
1210
- _context2.next = 5;
1249
+ setResend(false);
1250
+ setResendLoading(true);
1251
+ _context2.next = 6;
1211
1252
  return authUser({
1212
1253
  authRequestId: authRequestId,
1213
1254
  test: test
1214
1255
  });
1215
1256
 
1216
- case 5:
1257
+ case 6:
1217
1258
  response = _context2.sent;
1218
- setLoading(false);
1259
+ setResendLoading(false);
1219
1260
 
1220
1261
  if (response.error) {
1221
1262
  setError(t('failed_to_send_sms'));
@@ -1223,7 +1264,7 @@ function AuthScreen(_ref) {
1223
1264
  setResend(true);
1224
1265
  }
1225
1266
 
1226
- case 8:
1267
+ case 9:
1227
1268
  case "end":
1228
1269
  return _context2.stop();
1229
1270
  }
@@ -1239,7 +1280,10 @@ function AuthScreen(_ref) {
1239
1280
  var handleInput = function handleInput(e) {
1240
1281
  setError('');
1241
1282
  setResend(false);
1242
- setSmsCode(e.target.value);
1283
+
1284
+ if (/^([0-9]+)$/.test(e.target.value) || e.target.value === '') {
1285
+ setSmsCode(e.target.value);
1286
+ }
1243
1287
  };
1244
1288
 
1245
1289
  return React__default.createElement(Page, {
@@ -1259,12 +1303,16 @@ function AuthScreen(_ref) {
1259
1303
  onChange: handleInput,
1260
1304
  value: smsCode,
1261
1305
  filled: smsCode.length === 4,
1262
- error: !!error
1306
+ error: !!error,
1307
+ onKeyPress: function onKeyPress(e) {
1308
+ return handleCodeApply(e);
1309
+ }
1263
1310
  })), React__default.createElement(PageConnectFooterControl, null, resend && React__default.createElement(StatusMessage, null, t('new_sms_code_has_been_sent')), !!error && React__default.createElement(StatusMessage, {
1264
1311
  error: true
1265
1312
  }, error), React__default.createElement(PageConnectFooterText, null, React__default.createElement("span", null, React__default.createElement(React__default.Fragment, null, t('didnt_receive_the_code'), " ", React__default.createElement(DivAsLink, {
1313
+ disabled: resendLoading,
1266
1314
  onClick: function onClick() {
1267
- return handleResend();
1315
+ return !resendLoading && handleResend();
1268
1316
  }
1269
1317
  }, t('resend_sms')))))), React__default.createElement(LoadingModal, {
1270
1318
  isOpen: loading
@@ -1272,6 +1320,7 @@ function AuthScreen(_ref) {
1272
1320
  }
1273
1321
 
1274
1322
  function App(props) {
1323
+ var test = props.test;
1275
1324
  var ref = React.createRef();
1276
1325
 
1277
1326
  var _useState = React.useState(false),
@@ -1310,6 +1359,11 @@ function App(props) {
1310
1359
  setShadow(detectScrollToBottom(event));
1311
1360
  };
1312
1361
 
1362
+ var showErrorScreen = function showErrorScreen(code) {
1363
+ setErrorCode(code);
1364
+ setCurrentScreen(3);
1365
+ };
1366
+
1313
1367
  React.useEffect(function () {
1314
1368
  var getData = /*#__PURE__*/function () {
1315
1369
  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
@@ -1332,7 +1386,7 @@ function App(props) {
1332
1386
  return authUser({
1333
1387
  authRequestId: id,
1334
1388
  method: 'GET',
1335
- test: props.test
1389
+ test: test
1336
1390
  });
1337
1391
 
1338
1392
  case 6:
@@ -1378,11 +1432,6 @@ function App(props) {
1378
1432
  getData();
1379
1433
  }, []);
1380
1434
 
1381
- var showErrorScreen = function showErrorScreen(code) {
1382
- setErrorCode(code);
1383
- setCurrentScreen(3);
1384
- };
1385
-
1386
1435
  var getScreen = function getScreen() {
1387
1436
  switch (currentScreen) {
1388
1437
  case 0:
@@ -1402,7 +1451,7 @@ function App(props) {
1402
1451
  return setCurrentScreen(2);
1403
1452
  },
1404
1453
  authRequestId: authId,
1405
- test: props.test
1454
+ test: test
1406
1455
  });
1407
1456
 
1408
1457
  case 2:
@@ -1413,7 +1462,7 @@ function App(props) {
1413
1462
  },
1414
1463
  shadow: shadow,
1415
1464
  authRequestId: authId,
1416
- test: props.test
1465
+ test: test
1417
1466
  });
1418
1467
 
1419
1468
  case 3:
@@ -1511,10 +1560,11 @@ i18n.use(reactI18next.initReactI18next) // passes i18n down to react-i18next
1511
1560
  });
1512
1561
 
1513
1562
  function BasiqConnect(props) {
1563
+ var test = props.test;
1514
1564
  return React__default.createElement(React__default.StrictMode, null, React__default.createElement(styled.ThemeProvider, {
1515
1565
  theme: theme
1516
1566
  }, React__default.createElement(App, {
1517
- test: props.test
1567
+ test: test
1518
1568
  })));
1519
1569
  }
1520
1570