Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit d8d1bec

Browse files
add loading state on OTP flows
1 parent 4205770 commit d8d1bec

File tree

2 files changed

+83
-6
lines changed

2 files changed

+83
-6
lines changed

‎src/cbLoginSignup/Component.svelte‎

Lines changed: 49 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,18 +28,42 @@
2828
{#if loginFlow === 'email'}
2929
{#if otpId}
3030
<input type="number" placeholder="Enter OTP" class="w-100 mb-4" bind:value={otp}/>
31-
<button type="button" class="btn btn-primary w-100" disabled={!!!otp} on:click={verifyOtp}>Verify OTP</button>
31+
<button type="button" class="btn btn-primary w-100 {verifyOtp ? 'dot-loader' : ''}" disabled={!!!otp} on:click={verifyOtp}>
32+
{#if verifyOtp}
33+
Verifying OTP
34+
{:else}
35+
Verify OTP
36+
{/if}
37+
</button>
3238
{:else}
3339
<input type="email" placeholder="Enter Email" class="w-100 mb-4" bind:value={email}/>
34-
<button type="button" class="btn btn-primary w-100" disabled={!!!email} on:click={sendOtp}>Send OTP</button>
40+
<button type="button" class="btn btn-primary w-100 {sendingOtp ? 'dot-loader' : ''}" disabled={!!!email} on:click={sendOtp}>
41+
{#if sendingOtp}
42+
Sending OTP
43+
{:else}
44+
Send Otp
45+
{/if}
46+
</button>
3547
{/if}
3648
{:else}
3749
{#if otpId}
3850
<input type="number" placeholder="Enter OTP" class="w-100 mb-4" bind:value={otp}/>
39-
<button type="button" class="btn btn-primary w-100" disabled={!!!otp} on:click={verifyOtp}>Verify OTP</button>
51+
<button type="button" class="btn btn-primary w-100 {verifyOtp ? 'dot-loader' : ''}" disabled={!!!otp} on:click={verifyOtp}>
52+
{#if verifyingOtp}
53+
Verifying OTP
54+
{:else}
55+
Verify OTP
56+
{/if}
57+
</button>
4058
{:else}
4159
<input type="number" placeholder="Enter 10 digit Mobile Number" class="w-100 mb-4" bind:value={mobile}/>
42-
<button type="button" class="btn btn-primary w-100" disabled={!!!mobile} on:click={sendOtp}>Send OTP</button>
60+
<button type="button" class="btn btn-primary w-100 {sendingOtp ? 'dot-loader' : ''}" disabled={!!!mobile} on:click={sendOtp}>
61+
{#if sendingOtp}
62+
Sending OTP
63+
{:else}
64+
Send Otp
65+
{/if}
66+
</button>
4367
{/if}
4468
{/if}
4569

@@ -129,13 +153,16 @@
129153
let otp = null
130154
let otpId = null;
131155
let errorMessage = null
156+
let sendingOtp = false
157+
let verifyingOtp = false
132158
let loginFlow = 'email'
133159
let showLoginPrompt = localStorage.getItem('cb_login_prompt') === 'true' ? true : false
134160
let googleLoginUrl = appSubdomain.includes('localhost') ? `http://localhost:3838/login/google/v2?redirect_uri=http://${appSubdomain}${pathname}&client=localhost&client_id=1234567890` : isStaging ? `https://account.codingblocks.xyz/login/google/v2?redirect_uri=https://${appSubdomain}.codingblocks.xyz${pathname}&client=${appSubdomain}-codingblocks&client_id=1` : `https://account.codingblocks.com/login/google/v2?redirect_uri=https://${appSubdomain}.codingblocks.com${pathname}&client=${appSubdomain === 'cricket' ? 'cricket-quiz-iccwc23' : appSubdomain}-codingblocks&client_id=${clientIdMap[appSubdomain]}`
135161
let facebookLoginUrl = appSubdomain.includes('localhost') ? `http://localhost:3838/login/facebook/v2?redirect_uri=http://${appSubdomain}${pathname}&client=localhost&client_id=1234567890` : isStaging ? `https://account.codingblocks.xyz/login/facebook/v2?redirect_uri=https://${appSubdomain}.codingblocks.xyz${pathname}&client=${appSubdomain}-codingblocks&client_id=1` : `https://account.codingblocks.com/login/facebook/v2?redirect_uri=https://${appSubdomain}.codingblocks.com${pathname}&client=${appSubdomain === 'cricket' ? 'cricket-quiz-iccwc23': appSubdomain}-codingblocks&client_id=${clientIdMap[appSubdomain]}`
136162
137163
async function sendOtp() {
138164
errorMessage = null
165+
sendingOtp = true
139166
const response = await fetch((loginFlow === 'email' ? apiMap.sendOtpEmail[appSubdomain] : apiMap.sendOtpMobile[appSubdomain]) || 'http://localhost:3000/api/jwt/otp', {
140167
method: 'POST',
141168
headers: {
@@ -148,9 +175,11 @@
148175
})
149176
})
150177
if(response.ok) {
178+
sendingOtp = false
151179
let { id, Details } = await response.json()
152180
otpId = id || Details
153181
} else {
182+
sendingOtp = false
154183
const { message, Details } = await response.json()
155184
if(message || Details) {
156185
errorMessage = message || Details
@@ -160,6 +189,7 @@
160189
161190
async function verifyOtp() {
162191
errorMessage = null
192+
verifyingOtp = true
163193
164194
const response = await fetch((loginFlow === 'email' ? apiMap.verifyOtpEmail[appSubdomain] : apiMap.verifyOtpMobile[appSubdomain]) || 'http://localhost:3000/api/jwt/otp/verify', {
165195
method: 'POST',
@@ -176,8 +206,10 @@
176206
})
177207
178208
if(response.ok) {
209+
verifyingOtp = false
179210
window.location = window.location.origin + '?flow=login'
180211
} else {
212+
verifyingOtp = false
181213
const { message, Details } = await response.json()
182214
if(message || Details) {
183215
errorMessage = message || Details
@@ -295,4 +327,17 @@
295327
.social-media-logo {
296328
width: 15px;
297329
}
330+
331+
.dot-loader::after{
332+
animation: dots 3s linear infinite;
333+
content: '';
334+
}
335+
336+
@keyframes dots {
337+
25% {content: '.'}
338+
50% { content: '..'}
339+
75% {content: '...'}
340+
100% { content: ''}
341+
}
342+
298343
</style>

‎src/cbMobileVerification/Component.svelte‎

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,22 @@
1919

2020
{#if otpId}
2121
<input type="number" placeholder="Enter OTP" class="w-100 mb-4" bind:value={otp}/>
22-
<button class="btn btn-primary w-100" disabled={!!!otp} on:click={verifyOtp}>Verify OTP</button>
22+
<button class="btn btn-primary w-100" disabled={!!!otp} on:click={verifyOtp}>
23+
{#if verifyingOtp}
24+
Verifying OTP
25+
{:else}
26+
Verify OTP
27+
{/if}
28+
</button>
2329
{:else}
2430
<input type="number" placeholder="Enter 10 digit Mobile Number" class="w-100 mb-4" bind:value={mobile}/>
25-
<button class="btn btn-primary w-100" disabled={!!!mobile} on:click={sendOtp}>Send OTP</button>
31+
<button class="btn btn-primary w-100" disabled={!!!mobile} on:click={sendOtp}>
32+
{#if sendingOtp}
33+
Sending OTP
34+
{:else}
35+
Send Otp
36+
{/if}
37+
</button>
2638
{/if}
2739

2840
{#if showLogoutButton}
@@ -88,12 +100,15 @@
88100
let otpId = null;
89101
let errorMessage = null
90102
let showLogoutButton = false
103+
let sendingOtp = false
104+
let verifyingOtp = false
91105
92106
onMount(() => {
93107
authCookie = document.cookie.split('; ').filter(_ => _.split('=')[0] === 'cb_auth')[0].split('=')[1]
94108
})
95109
96110
async function sendOtp() {
111+
sendingOtp = true
97112
const response = await fetch(apiMap.sendOtpMobile[appSubdomain] + '?flow=mobile-verification' || 'http://localhost:3000/api/jwt/otp', {
98113
method: 'POST',
99114
headers: {
@@ -105,9 +120,11 @@
105120
})
106121
})
107122
if(response.ok) {
123+
sendingOtp = false
108124
let { id, Details } = await response.json()
109125
otpId = id || Details
110126
} else {
127+
sendingOtp = false
111128
const { message, Details } = await response.json()
112129
if(message || Details) {
113130
errorMessage = message || Details
@@ -120,6 +137,7 @@
120137
121138
async function verifyOtp() {
122139
errorMessage = null
140+
verifyingOtp = true
123141
124142
const response = await fetch(apiMap.verifyOtpMobile[appSubdomain] + '?flow=mobile-verification' || 'http://localhost:3000/api/jwt/otp/verify', {
125143
method: 'POST',
@@ -136,8 +154,10 @@
136154
})
137155
138156
if(response.ok) {
157+
verifyingOtp = false
139158
window.location.reload()
140159
} else {
160+
verifyingOtp = false
141161
const { message, Details } = await response.json()
142162
if(message || Details) {
143163
errorMessage = message || Details
@@ -246,4 +266,16 @@
246266
.social-media-logo {
247267
width: 15px;
248268
}
269+
270+
.dot-loader::after{
271+
animation: dots 3s linear infinite;
272+
content: '';
273+
}
274+
275+
@keyframes dots {
276+
25% {content: '.'}
277+
50% { content: '..'}
278+
75% {content: '...'}
279+
100% { content: ''}
280+
}
249281
</style>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /