@basiq/connect-auth 0.1.89 → 0.1.91

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.
package/README.md CHANGED
@@ -1,160 +1,7 @@
1
- # TSDX React User Guide
1
+ # BASIQ CONNECT AUTH
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
+ This is a code for npm package that is used in basiq-connect project. It is a new version and it has just sms code verification part.
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
+ ## Implementation
6
6
 
7
- > If you’re new to TypeScript and React, checkout [this handy cheatsheet](https://github.com/sw-yx/react-typescript-cheatsheet/)
8
-
9
- ## Commands
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
- ```
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
27
- ```
28
-
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
- ```js
93
- // ./types/index.d.ts
94
- declare var __DEV__: boolean;
95
-
96
- // inside your code...
97
- if (__DEV__) {
98
- console.log('foo');
99
- }
100
- ```
101
-
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`):
113
-
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:
121
-
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
- ```
128
-
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.
136
-
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
-
139
- ## Publishing to NPM
140
-
141
- We recommend using [np](https://github.com/sindresorhus/np).
142
-
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
- },
158
- ```
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)
7
+ import `<BasiqConnect />` to the desired place in the project. If you want to test it, use `test` property and set it to `true`
@@ -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
  }>;
@@ -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
  };
@@ -634,13 +641,17 @@ var InputStyled = /*#__PURE__*/styled__default.input(_templateObject3$3 || (_tem
634
641
  return error ? theme.color.cerise : theme.color.endeavour;
635
642
  });
636
643
  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;
644
+ var DivAsLink = /*#__PURE__*/styled__default.div(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n\tcolor: ", ";\n\tdisplay: inherit;\n\tcursor: ", ";\n"])), function (_ref4) {
645
+ var theme = _ref4.theme,
646
+ disabled = _ref4.disabled;
647
+ return disabled ? theme.color.casper : theme.color.endeavour;
648
+ }, function (_ref5) {
649
+ var disabled = _ref5.disabled;
650
+ return disabled ? 'not-allowed' : 'pointer';
640
651
  });
641
652
 
642
653
  var _templateObject$5;
643
- var InnerContainer = /*#__PURE__*/styled__default.div(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n\tmargin-top: 16px;\n\twidth: 100%;\n"])));
654
+ var InnerContainer = /*#__PURE__*/styled__default.div(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n\twidth: 100%;\n"])));
644
655
 
645
656
  var _templateObject$6, _templateObject2$5, _templateObject3$4, _templateObject4$4;
646
657
  var PageStatusScreenMain = /*#__PURE__*/styled__default(PageMainContainer)(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n\theight: 100%;\n"])));
@@ -699,7 +710,7 @@ var MarkW1GBold = "data:font/otf;base64,T1RUTwANAIAAAwBQQ0ZGICwMZMIAACp0AAFDmERT
699
710
  var _templateObject$8;
700
711
  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
712
 
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";
713
+ 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
714
 
704
715
  function Button(props) {
705
716
  var onClick = props.onClick,
@@ -883,34 +894,35 @@ var authUser = /*#__PURE__*/function () {
883
894
  },
884
895
  method: method || 'POST'
885
896
  };
886
- _context2.next = 4;
897
+ _context2.prev = 2;
898
+ _context2.next = 5;
887
899
  return fetch((test ? DASHBOARD_API_URL_TEST : DASHBOARD_API_URL) + "client_auth/" + authRequestId, reqData);
888
900
 
889
- case 4:
901
+ case 5:
890
902
  result = _context2.sent;
891
903
 
892
904
  if (!(result.status >= 200 && result.status < 300)) {
893
- _context2.next = 15;
905
+ _context2.next = 16;
894
906
  break;
895
907
  }
896
908
 
897
909
  if (!(result.status === 204)) {
898
- _context2.next = 10;
910
+ _context2.next = 11;
899
911
  break;
900
912
  }
901
913
 
902
914
  _context2.t0 = null;
903
- _context2.next = 13;
915
+ _context2.next = 14;
904
916
  break;
905
917
 
906
- case 10:
907
- _context2.next = 12;
918
+ case 11:
919
+ _context2.next = 13;
908
920
  return result.json();
909
921
 
910
- case 12:
922
+ case 13:
911
923
  _context2.t0 = _context2.sent;
912
924
 
913
- case 13:
925
+ case 14:
914
926
  json = _context2.t0;
915
927
  return _context2.abrupt("return", {
916
928
  data: json,
@@ -919,29 +931,29 @@ var authUser = /*#__PURE__*/function () {
919
931
  ok: true
920
932
  });
921
933
 
922
- case 15:
934
+ case 16:
923
935
  if (!(result.status >= 400)) {
924
- _context2.next = 25;
936
+ _context2.next = 26;
925
937
  break;
926
938
  }
927
939
 
928
940
  if (![403, 404].includes(result.status)) {
929
- _context2.next = 20;
941
+ _context2.next = 21;
930
942
  break;
931
943
  }
932
944
 
933
945
  _context2.t1 = null;
934
- _context2.next = 23;
946
+ _context2.next = 24;
935
947
  break;
936
948
 
937
- case 20:
938
- _context2.next = 22;
949
+ case 21:
950
+ _context2.next = 23;
939
951
  return result.json();
940
952
 
941
- case 22:
953
+ case 23:
942
954
  _context2.t1 = _context2.sent;
943
955
 
944
- case 23:
956
+ case 24:
945
957
  _json = _context2.t1;
946
958
  return _context2.abrupt("return", {
947
959
  headers: result.headers,
@@ -950,7 +962,7 @@ var authUser = /*#__PURE__*/function () {
950
962
  ok: false
951
963
  });
952
964
 
953
- case 25:
965
+ case 26:
954
966
  return _context2.abrupt("return", {
955
967
  headers: result.headers,
956
968
  statusCode: result.status,
@@ -958,12 +970,21 @@ var authUser = /*#__PURE__*/function () {
958
970
  ok: false
959
971
  });
960
972
 
961
- case 26:
973
+ case 29:
974
+ _context2.prev = 29;
975
+ _context2.t2 = _context2["catch"](2);
976
+ return _context2.abrupt("return", {
977
+ statusCode: 500,
978
+ error: 'Something went wrong',
979
+ ok: false
980
+ });
981
+
982
+ case 32:
962
983
  case "end":
963
984
  return _context2.stop();
964
985
  }
965
986
  }
966
- }, _callee2);
987
+ }, _callee2, null, [[2, 29]]);
967
988
  }));
968
989
 
969
990
  return function authUser(_x2) {
@@ -1026,6 +1047,17 @@ function StartScreen(props) {
1026
1047
  var _useTranslation = reactI18next.useTranslation(),
1027
1048
  t = _useTranslation.t;
1028
1049
 
1050
+ React.useEffect(function () {
1051
+ window.addEventListener('keydown', function (e) {
1052
+ return handleUserKeyPress(e, onContinue);
1053
+ });
1054
+ return function () {
1055
+ window.removeEventListener('keydown', function (e) {
1056
+ return handleUserKeyPress(e, onContinue);
1057
+ });
1058
+ };
1059
+ }, []);
1060
+
1029
1061
  var handleContinue = /*#__PURE__*/function () {
1030
1062
  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
1031
1063
  var response;
@@ -1113,9 +1145,13 @@ function StartScreen(props) {
1113
1145
  bold: React__default.createElement("strong", null)
1114
1146
  }
1115
1147
  }))), 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"
1148
+ href: "https://docs.basiq.io/en/articles/415750-basiq-terms-of-service",
1149
+ rel: "noreferrer",
1150
+ target: "_blank"
1117
1151
  }, t('terms_of_service')), " ", t('and'), ' ', React__default.createElement("a", {
1118
- href: "https://docs.basiq.io/en/articles/382581-basiq-privacy-policy"
1152
+ href: "https://docs.basiq.io/en/articles/382581-basiq-privacy-policy",
1153
+ rel: "noreferrer",
1154
+ target: "_blank"
1119
1155
  }, t('privacy_notice')))), React__default.createElement(LoadingModal, {
1120
1156
  isOpen: loading
1121
1157
  })));
@@ -1144,36 +1180,43 @@ function AuthScreen(_ref) {
1144
1180
  setResend = _useState3[1];
1145
1181
 
1146
1182
  var _useState4 = React.useState(false),
1147
- loading = _useState4[0],
1148
- setLoading = _useState4[1];
1183
+ resendLoading = _useState4[0],
1184
+ setResendLoading = _useState4[1];
1149
1185
 
1150
- var handleCodeApply = /*#__PURE__*/function () {
1151
- var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
1152
- var _response$data;
1186
+ var _useState5 = React.useState(false),
1187
+ loading = _useState5[0],
1188
+ setLoading = _useState5[1];
1153
1189
 
1154
- var response, _response$data2;
1190
+ var handleCodeApply = React.useCallback( /*#__PURE__*/function () {
1191
+ var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
1192
+ var _response$data, response, _response$data2;
1155
1193
 
1156
1194
  return _regeneratorRuntime().wrap(function _callee$(_context) {
1157
1195
  while (1) {
1158
1196
  switch (_context.prev = _context.next) {
1159
1197
  case 0:
1198
+ if (!(smsCode.length === 4 && error.length === 0 && (!e || (e == null ? void 0 : e.charCode) === 13))) {
1199
+ _context.next = 7;
1200
+ break;
1201
+ }
1202
+
1160
1203
  setLoading(true);
1161
- _context.next = 3;
1204
+ _context.next = 4;
1162
1205
  return verifySmsCode({
1163
1206
  authRequestId: authRequestId,
1164
1207
  smsCode: smsCode,
1165
1208
  test: test
1166
1209
  });
1167
1210
 
1168
- case 3:
1211
+ case 4:
1169
1212
  response = _context.sent;
1170
- setLoading(false);
1171
1213
 
1172
1214
  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));
1215
+ 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
1216
  }
1175
1217
 
1176
1218
  if (response != null && response.error) {
1219
+ setLoading(false);
1177
1220
  setError(t('this_code_doesnt_appear_to_be_valid'));
1178
1221
  }
1179
1222
 
@@ -1185,16 +1228,16 @@ function AuthScreen(_ref) {
1185
1228
  }, _callee);
1186
1229
  }));
1187
1230
 
1188
- return function handleCodeApply() {
1231
+ return function (_x) {
1189
1232
  return _ref2.apply(this, arguments);
1190
1233
  };
1191
- }();
1192
-
1234
+ }(), [smsCode, error, authRequestId]);
1193
1235
  var buttons = [{
1194
1236
  label: t('continue'),
1195
1237
  onClick: function onClick() {
1196
1238
  return handleCodeApply();
1197
- }
1239
+ },
1240
+ disabled: smsCode.length < 4 || !!error
1198
1241
  }];
1199
1242
 
1200
1243
  var handleResend = /*#__PURE__*/function () {
@@ -1206,16 +1249,17 @@ function AuthScreen(_ref) {
1206
1249
  case 0:
1207
1250
  setError('');
1208
1251
  setSmsCode('');
1209
- setLoading(true);
1210
- _context2.next = 5;
1252
+ setResend(false);
1253
+ setResendLoading(true);
1254
+ _context2.next = 6;
1211
1255
  return authUser({
1212
1256
  authRequestId: authRequestId,
1213
1257
  test: test
1214
1258
  });
1215
1259
 
1216
- case 5:
1260
+ case 6:
1217
1261
  response = _context2.sent;
1218
- setLoading(false);
1262
+ setResendLoading(false);
1219
1263
 
1220
1264
  if (response.error) {
1221
1265
  setError(t('failed_to_send_sms'));
@@ -1223,7 +1267,7 @@ function AuthScreen(_ref) {
1223
1267
  setResend(true);
1224
1268
  }
1225
1269
 
1226
- case 8:
1270
+ case 9:
1227
1271
  case "end":
1228
1272
  return _context2.stop();
1229
1273
  }
@@ -1239,7 +1283,10 @@ function AuthScreen(_ref) {
1239
1283
  var handleInput = function handleInput(e) {
1240
1284
  setError('');
1241
1285
  setResend(false);
1242
- setSmsCode(e.target.value);
1286
+
1287
+ if (/^([0-9]+)$/.test(e.target.value) || e.target.value === '') {
1288
+ setSmsCode(e.target.value);
1289
+ }
1243
1290
  };
1244
1291
 
1245
1292
  return React__default.createElement(Page, {
@@ -1259,12 +1306,16 @@ function AuthScreen(_ref) {
1259
1306
  onChange: handleInput,
1260
1307
  value: smsCode,
1261
1308
  filled: smsCode.length === 4,
1262
- error: !!error
1309
+ error: !!error,
1310
+ onKeyPress: function onKeyPress(e) {
1311
+ return handleCodeApply(e);
1312
+ }
1263
1313
  })), React__default.createElement(PageConnectFooterControl, null, resend && React__default.createElement(StatusMessage, null, t('new_sms_code_has_been_sent')), !!error && React__default.createElement(StatusMessage, {
1264
1314
  error: true
1265
1315
  }, 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, {
1316
+ disabled: resendLoading,
1266
1317
  onClick: function onClick() {
1267
- return handleResend();
1318
+ return !resendLoading && handleResend();
1268
1319
  }
1269
1320
  }, t('resend_sms')))))), React__default.createElement(LoadingModal, {
1270
1321
  isOpen: loading
@@ -1272,6 +1323,7 @@ function AuthScreen(_ref) {
1272
1323
  }
1273
1324
 
1274
1325
  function App(props) {
1326
+ var test = props.test;
1275
1327
  var ref = React.createRef();
1276
1328
 
1277
1329
  var _useState = React.useState(false),
@@ -1310,6 +1362,11 @@ function App(props) {
1310
1362
  setShadow(detectScrollToBottom(event));
1311
1363
  };
1312
1364
 
1365
+ var showErrorScreen = function showErrorScreen(code) {
1366
+ setErrorCode(code);
1367
+ setCurrentScreen(3);
1368
+ };
1369
+
1313
1370
  React.useEffect(function () {
1314
1371
  var getData = /*#__PURE__*/function () {
1315
1372
  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
@@ -1332,7 +1389,7 @@ function App(props) {
1332
1389
  return authUser({
1333
1390
  authRequestId: id,
1334
1391
  method: 'GET',
1335
- test: props.test
1392
+ test: test
1336
1393
  });
1337
1394
 
1338
1395
  case 6:
@@ -1378,11 +1435,6 @@ function App(props) {
1378
1435
  getData();
1379
1436
  }, []);
1380
1437
 
1381
- var showErrorScreen = function showErrorScreen(code) {
1382
- setErrorCode(code);
1383
- setCurrentScreen(3);
1384
- };
1385
-
1386
1438
  var getScreen = function getScreen() {
1387
1439
  switch (currentScreen) {
1388
1440
  case 0:
@@ -1402,7 +1454,7 @@ function App(props) {
1402
1454
  return setCurrentScreen(2);
1403
1455
  },
1404
1456
  authRequestId: authId,
1405
- test: props.test
1457
+ test: test
1406
1458
  });
1407
1459
 
1408
1460
  case 2:
@@ -1413,7 +1465,7 @@ function App(props) {
1413
1465
  },
1414
1466
  shadow: shadow,
1415
1467
  authRequestId: authId,
1416
- test: props.test
1468
+ test: test
1417
1469
  });
1418
1470
 
1419
1471
  case 3:
@@ -1511,10 +1563,11 @@ i18n.use(reactI18next.initReactI18next) // passes i18n down to react-i18next
1511
1563
  });
1512
1564
 
1513
1565
  function BasiqConnect(props) {
1566
+ var test = props.test;
1514
1567
  return React__default.createElement(React__default.StrictMode, null, React__default.createElement(styled.ThemeProvider, {
1515
1568
  theme: theme
1516
1569
  }, React__default.createElement(App, {
1517
- test: props.test
1570
+ test: test
1518
1571
  })));
1519
1572
  }
1520
1573