Skip to content

Commit cb32641

Browse files
rockwellllrockwellll
authored
Otp adjustments (#11)
* 1.6.4 * adjust the OTP footer to also include a button for submitting * disable all input and buttons for OTP once attempting a verification * focus the OTP controller once mounted and once otp is invalid * run code inside a timeout * disable the submit OTP button by default * return an invalid alert when attempting to submit an OTP that is not of length 6 * 1.6.5
1 parent 5531b39 commit cb32641

File tree

10 files changed

+82
-25
lines changed

10 files changed

+82
-25
lines changed

‎dist/hellotext.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/builders/otp_builder.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ var OTPBuilder = /*#__PURE__*/function () {
3232
}();
3333
exports.OTPBuilder = OTPBuilder;
3434
function _template2(submissionId, label) {
35-
return "\n <article \n data-controller=\"hellotext--otp\" \n data-hellotext--otp-submission-id-value=\"".concat(submissionId, "\"\n data-hellotext--form-target=\"otpContainer\"\n data-form-otp\n >\n <header data-otp-header>\n <p>").concat(label, "</p>\n <input \n type=\"text\"\n name=\"otp\"\n data-hellotext--otp-target=\"input\"\n placeholder=\"").concat(_hellotext.default.business.locale.otp.placeholder, "\"\n maxlength=\"6\"\n />\n </header>\n \n <footer data-otp-footer>\n <button type=\"button\" data-hellotext--otp-target=\"resendButton\" data-action=\"hellotext--otp#resend\">\n ").concat(_hellotext.default.business.locale.otp.resend, "\n </button>\n </footer>\n </article>\n ");
35+
return "\n <article \n data-controller=\"hellotext--otp\" \n data-hellotext--otp-submission-id-value=\"".concat(submissionId, "\"\n data-hellotext--form-target=\"otpContainer\"\n data-form-otp\n >\n <header data-otp-header>\n <p>").concat(label, "</p>\n <input \n type=\"text\"\n name=\"otp\"\n data-hellotext--otp-target=\"input\"\n placeholder=\"").concat(_hellotext.default.business.locale.otp.placeholder, "\"\n maxlength=\"6\"\n />\n </header>\n \n <footer data-otp-footer>\n <button type=\"button\" data-hellotext--otp-target=\"submitButton\" data-action=\"hellotext--otp#submit\">\n ").concat(_hellotext.default.business.locale.otp.submit, "\n </button>\n \n <button type=\"button\" data-hellotext--otp-target=\"resendButton\" data-action=\"hellotext--otp#resend\">\n ").concat(_hellotext.default.business.locale.otp.resend, "\n </button>\n </footer>\n </article>\n ");
3636
}
3737
Object.defineProperty(OTPBuilder, _template, {
3838
value: _template2

‎lib/controllers/otp_controller.js

+36-11
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,9 @@ var _default = /*#__PURE__*/function (_Controller) {
4444
}, {
4545
key: "connect",
4646
value: function connect() {
47-
_get(_getPrototypeOf(_default.prototype), "connect", this).call(this);
4847
this.inputTarget.addEventListener('input', this.onInputChange);
48+
this.inputTarget.focus();
49+
_get(_getPrototypeOf(_default.prototype), "connect", this).call(this);
4950
}
5051
}, {
5152
key: "disconnect",
@@ -76,11 +77,18 @@ var _default = /*#__PURE__*/function (_Controller) {
7677
}()
7778
}, {
7879
key: "onInputChange",
80+
value: function onInputChange() {
81+
if (this.inputTarget.value.length !== 6) return;
82+
this.submit();
83+
}
84+
}, {
85+
key: "submit",
7986
value: function () {
80-
var _onInputChange = _asyncToGenerator(function* () {
81-
if (this.inputTarget.value.length !== 6) return;
82-
this.inputTarget.disabled = true;
83-
this.resendButtonTarget.disabled = true;
87+
var _submit = _asyncToGenerator(function* () {
88+
if (this.inputTarget.value.length !== 6) {
89+
return alert(_hellotext.default.business.locale.otp.invalid);
90+
}
91+
this.disable();
8492
var response = yield _submissions.default.verifyOTP(this.submissionIdValue, this.inputTarget.value);
8593
if (response.succeeded) {
8694
this.dispatch('verified', {
@@ -90,15 +98,32 @@ var _default = /*#__PURE__*/function (_Controller) {
9098
});
9199
} else {
92100
alert(_hellotext.default.business.locale.otp.invalid);
101+
setTimeout(() => {
102+
this.inputTarget.value = '';
103+
this.inputTarget.focus();
104+
});
93105
}
94-
this.inputTarget.disabled = false;
95-
this.resendButtonTarget.disabled = false;
106+
this.enable();
96107
});
97-
function onInputChange() {
98-
return _onInputChange.apply(this, arguments);
108+
function submit() {
109+
return _submit.apply(this, arguments);
99110
}
100-
return onInputChange;
111+
return submit;
101112
}() // private
113+
}, {
114+
key: "disable",
115+
value: function disable() {
116+
this.inputTarget.disabled = true;
117+
this.resendButtonTarget.disabled = true;
118+
this.submitButtonTarget.disabled = true;
119+
}
120+
}, {
121+
key: "enable",
122+
value: function enable() {
123+
this.inputTarget.disabled = false;
124+
this.resendButtonTarget.disabled = false;
125+
this.submitButtonTarget.disabled = false;
126+
}
102127
}, {
103128
key: "throttled",
104129
get: function get() {
@@ -111,4 +136,4 @@ exports.default = _default;
111136
_default.values = {
112137
submissionId: String
113138
};
114-
_default.targets = ['input', 'resendButton'];
139+
_default.targets = ['input', 'submitButton', 'resendButton'];

‎lib/locales/en.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ var _default = {
1010
sent_to_phone: 'An One-Time Password has been sent to your phone number',
1111
resend_successful: 'The One-Time Password has been resent successfully',
1212
invalid: 'Invalid One-Time Password',
13-
resend: 'Resend OTP',
13+
resend: 'Resend',
14+
submit: 'Submit',
1415
throttled: 'You have reached the maximum number of attempts. Please try again in 1 minute.',
1516
placeholder: 'Enter the code here'
1617
},

‎lib/locales/es.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ var _default = {
1010
sent_to_phone: 'Un código de un solo uso ha sido enviado a tu número de teléfono',
1111
resend_successful: 'El código de un solo uso ha sido reenviado exitosamente',
1212
invalid: 'Código de un solo uso inválido',
13-
resend: 'Reenviar OTP',
13+
resend: 'Reenviar',
14+
submit: 'Enviar',
1415
throttled: 'Has alcanzado el número máximo de intentos. Por favor intenta de nuevo en 1 minuto.',
1516
placeholder: 'Ingresa el código aquí'
1617
},

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@hellotext/hellotext",
3-
"version": "1.6.3",
3+
"version": "1.6.5",
44
"description": "Hellotext JavaScript Client",
55
"source": "src/index.js",
66
"main": "lib/index.js",

‎src/builders/otp_builder.js

+4
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,10 @@ class OTPBuilder {
3030
</header>
3131
3232
<footer data-otp-footer>
33+
<button type="button" data-hellotext--otp-target="submitButton" data-action="hellotext--otp#submit">
34+
${Hellotext.business.locale.otp.submit}
35+
</button>
36+
3337
<button type="button" data-hellotext--otp-target="resendButton" data-action="hellotext--otp#resend">
3438
${Hellotext.business.locale.otp.resend}
3539
</button>

‎src/controllers/otp_controller.js

+31-7
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export default class extends Controller {
88
submissionId: String,
99
}
1010

11-
static targets = ['input', 'resendButton']
11+
static targets = ['input', 'submitButton', 'resendButton']
1212

1313
initialize() {
1414
super.initialize()
@@ -22,8 +22,10 @@ export default class extends Controller {
2222
}
2323

2424
connect() {
25-
super.connect()
2625
this.inputTarget.addEventListener('input', this.onInputChange)
26+
this.inputTarget.focus()
27+
28+
super.connect()
2729
}
2830

2931
disconnect() {
@@ -49,11 +51,17 @@ export default class extends Controller {
4951
this.attempts += 1
5052
}
5153

52-
async onInputChange() {
54+
onInputChange() {
5355
if (this.inputTarget.value.length !== 6) return
56+
this.submit()
57+
}
5458

55-
this.inputTarget.disabled = true
56-
this.resendButtonTarget.disabled = true
59+
async submit() {
60+
if(this.inputTarget.value.length !== 6) {
61+
return alert(Hellotext.business.locale.otp.invalid)
62+
}
63+
64+
this.disable()
5765

5866
const response = await SubmissionsAPI.verifyOTP(this.submissionIdValue, this.inputTarget.value)
5967

@@ -63,14 +71,30 @@ export default class extends Controller {
6371
})
6472
} else {
6573
alert(Hellotext.business.locale.otp.invalid)
74+
75+
setTimeout(() => {
76+
this.inputTarget.value = ''
77+
this.inputTarget.focus()
78+
})
6679
}
6780

68-
this.inputTarget.disabled = false
69-
this.resendButtonTarget.disabled = false
81+
this.enable()
7082
}
7183

7284
// private
7385

86+
disable() {
87+
this.inputTarget.disabled = true
88+
this.resendButtonTarget.disabled = true
89+
this.submitButtonTarget.disabled = true
90+
}
91+
92+
enable() {
93+
this.inputTarget.disabled = false
94+
this.resendButtonTarget.disabled = false
95+
this.submitButtonTarget.disabled = false
96+
}
97+
7498
get throttled() {
7599
return this.attempts >= 3
76100
}

‎src/locales/en.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ export default {
44
sent_to_phone: 'An One-Time Password has been sent to your phone number',
55
resend_successful: 'The One-Time Password has been resent successfully',
66
invalid: 'Invalid One-Time Password',
7-
resend: 'Resend OTP',
7+
resend: 'Resend',
8+
submit: 'Submit',
89
throttled: 'You have reached the maximum number of attempts. Please try again in 1 minute.',
910
placeholder: 'Enter the code here',
1011
},

‎src/locales/es.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ export default {
44
sent_to_phone: 'Un código de un solo uso ha sido enviado a tu número de teléfono',
55
resend_successful: 'El código de un solo uso ha sido reenviado exitosamente',
66
invalid: 'Código de un solo uso inválido',
7-
resend: 'Reenviar OTP',
7+
resend: 'Reenviar',
8+
submit: 'Enviar',
89
throttled: 'Has alcanzado el número máximo de intentos. Por favor intenta de nuevo en 1 minuto.',
910
placeholder: 'Ingresa el código aquí'
1011
},

0 commit comments

Comments
 (0)