-
-
Notifications
You must be signed in to change notification settings - Fork 3.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adding Two-Step Verification Pages (#1593)
- Loading branch information
Showing
11 changed files
with
617 additions
and
235 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
"@tabler/core": patch | ||
--- | ||
|
||
Adding Two-Step Verification Pages |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,78 @@ | ||
--- | ||
title: 2-Step Verification | ||
layout: single | ||
--- | ||
|
||
<form | ||
class="card card-md" | ||
action="{{ site.base }}/" | ||
method="get" | ||
autocomplete="off" | ||
novalidate | ||
> | ||
<div class="card-body"> | ||
<h2 class="card-title card-title-lg text-center mb-4">Authenticate Your Account</h2> | ||
|
||
<p class="my-4 text-center">Please confirm your account by entering the authorization code sent to <strong>+1 856-672-8552</strong>.</p> | ||
|
||
<div class="my-5"> | ||
<div class="row g-4"> | ||
{% for i in (1..2) %} | ||
<div class="col"> | ||
<div class="row g-2"> | ||
{% for i in (1..3) %} | ||
<div class="col"> | ||
<input type="text" class="form-control form-control-lg text-center py-3" maxlength="1" inputmode="numeric" pattern="[0-9]*" data-code-input /> | ||
</div> | ||
{% endfor %} | ||
</div> | ||
</div> | ||
{% endfor %} | ||
</div> | ||
</div> | ||
|
||
<div class="my-4"> | ||
<label class="form-check"> | ||
<input type="checkbox" class="form-check-input" /> | ||
Dont't ask for codes again on this device | ||
</label> | ||
</div> | ||
|
||
|
||
<div class="form-footer"> | ||
<div class="btn-list flex-nowrap"> | ||
{% include ui/button.html text="Cancel" block=true href="2-step-verification.html" %} | ||
{% include ui/button.html text="Verify" block=true color="primary" %} | ||
</div> | ||
</div> | ||
</div> | ||
</form> | ||
|
||
<div class="text-center text-muted mt-3"> | ||
It may take a minute to receive your code. Haven't received it? <a href="{{ site.base }}/">Resend a new code.</a> | ||
</div> | ||
|
||
{% capture_global scripts %} | ||
<script> | ||
document.addEventListener("DOMContentLoaded", function() { | ||
var inputs = document.querySelectorAll('[data-code-input]'); | ||
|
||
// Attach an event listener to each input element | ||
for(let i = 0; i < inputs.length; i++) { | ||
inputs[i].addEventListener('input', function(e) { | ||
// If the input field has a character, and there is a next input field, focus it | ||
if(e.target.value.length === e.target.maxLength && i + 1 < inputs.length) { | ||
inputs[i + 1].focus(); | ||
} | ||
}); | ||
|
||
inputs[i].addEventListener('keydown', function(e) { | ||
// If the input field is empty and the keyCode for Backspace (8) is detected, and there is a previous input field, focus it | ||
if(e.target.value.length === 0 && e.keyCode === 8 && i > 0) { | ||
inputs[i - 1].focus(); | ||
} | ||
}); | ||
} | ||
}); | ||
</script> | ||
{% endcapture_global %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
--- | ||
title: 2-Step Verification | ||
layout: single | ||
--- | ||
|
||
<form | ||
class="card card-md" | ||
action="{{ site.base }}/2-step-verification-code.html" | ||
method="get" | ||
autocomplete="off" | ||
novalidate | ||
> | ||
<div class="card-body"> | ||
<h2 class="card-title text-center mb-4">2-Step Verification</h2> | ||
|
||
<div class="mb-3"> | ||
<label class="form-label">Country</label> | ||
<select class="form-select"> | ||
{% for country in site.data.countries %} | ||
<option value="{{ country.code }}"{% if country.code == 'US' %} selected{% endif %}>{{ country.name }}</option> | ||
{% endfor %} | ||
</select> | ||
</div> | ||
|
||
<div class="mb-4"> | ||
<label class="form-label">Your Phone Number</label> | ||
<div class="input-group"> | ||
<span class="input-group-text">+1</span> | ||
<input type="text" class="form-control" placeholder="Enter phone number" /> | ||
</div> | ||
</div> | ||
|
||
<div class="text-muted"> | ||
Security is critical in Tabler. to help keep your account safe, we'll | ||
text you a verification code when you sign in on a new device | ||
</div> | ||
|
||
<div class="form-footer"> | ||
{% include ui/button.html element="button" type="submit" text="Send code" block=true color="primary" %} | ||
</div> | ||
</div> | ||
</form> |
Oops, something went wrong.