1
0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00

Adding Two-Step Verification Pages (#1593)

This commit is contained in:
Paweł Kuna
2023-05-23 19:26:59 +02:00
committed by GitHub
parent 72f868b617
commit 89c623491a
11 changed files with 617 additions and 235 deletions

View File

@@ -0,0 +1,5 @@
---
"@tabler/core": patch
---
Adding Two-Step Verification Pages

View File

@@ -1,7 +1,7 @@
{ {
"bracketSpacing": true, "bracketSpacing": true,
"jsxSingleQuote": false, "jsxSingleQuote": false,
"printWidth": 80, "printWidth": 240,
"proseWrap": "always", "proseWrap": "always",
"semi": false, "semi": false,
"singleQuote": false, "singleQuote": false,

View File

@@ -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 %}

View File

@@ -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>

View File

@@ -1,229 +1,480 @@
- Aruba - name: Afghanistan
- Afghanistan code: AF
- Angola - name: Åland Islands
- Anguilla code: AX
- Albania - name: Albania
- Andorra code: AL
- United Arab Emirates - name: Algeria
- Argentina code: DZ
- Armenia - name: American Samoa
- American Samoa code: AS
- Antarctica - name: AndorrA
- Antigua and Barbuda code: AD
- Australia - name: Angola
- Austria code: AO
- Azerbaijan - name: Anguilla
- Burundi code: AI
- Belgium - name: Antarctica
- Benin code: AQ
- Burkina Faso - name: Antigua and Barbuda
- Bangladesh code: AG
- Bulgaria - name: Argentina
- Bahrain code: AR
- Bahamas - name: Armenia
- Bosnia and Herzegovina code: AM
- Saint Barthélemy - name: Aruba
- Belarus code: AW
- Belize - name: Australia
- Bermuda code: AU
- Bolivia - name: Austria
- Brazil code: AT
- Barbados - name: Azerbaijan
- Brunei code: AZ
- Bhutan - name: Bahamas
- Botswana code: BS
- Central African Republic - name: Bahrain
- Canada code: BH
- Switzerland - name: Bangladesh
- Chile code: BD
- China - name: Barbados
- Cote d'Ivoire code: BB
- Cameroon - name: Belarus
- Democratic Republic of Congo code: BY
- Congo - name: Belgium
- Colombia code: BE
- Comoros - name: Belize
- Cape Verde code: BZ
- Costa Rica - name: Benin
- Cuba code: BJ
- Christmas Island - name: Bermuda
- Cayman Islands code: BM
- Cyprus - name: Bhutan
- Czech Republic code: BT
- Germany - name: Bolivia
- Djibouti code: BO
- Dominica - name: Bosnia and Herzegovina
- Denmark code: BA
- Dominican Republic - name: Botswana
- Algeria code: BW
- Ecuador - name: Bouvet Island
- Egypt code: BV
- Eritrea - name: Brazil
- Spain code: BR
- Estonia - name: British Indian Ocean Territory
- Ethiopia code: IO
- Finland - name: Brunei Darussalam
- Fiji code: BN
- Falkland Islands - name: Bulgaria
- France code: BG
- Faeroe Islands - name: Burkina Faso
- Micronesia (country) code: BF
- Gabon - name: Burundi
- United Kingdom code: BI
- Georgia - name: Cambodia
- Ghana code: KH
- Gibraltar - name: Cameroon
- Guinea code: CM
- Gambia - name: Canada
- Guinea-Bissau code: CA
- Equatorial Guinea - name: Cape Verde
- Greece code: CV
- Grenada - name: Cayman Islands
- Greenland code: KY
- Guatemala - name: Central African Republic
- French Guiana code: CF
- Guam - name: Chad
- Guyana code: TD
- Hong Kong - name: Chile
- Honduras code: CL
- Croatia - name: China
- Haiti code: CN
- Hungary - name: Christmas Island
- Indonesia code: CX
- Isle of Man - name: Cocos (Keeling) Islands
- India code: CC
- Ireland - name: Colombia
- Iran code: CO
- Iraq - name: Comoros
- Iceland code: KM
- Israel - name: Congo
- Italy code: CG
- Jamaica - name: Congo, The Democratic Republic of the
- Jersey code: CD
- Jordan - name: Cook Islands
- Japan code: CK
- Kazakhstan - name: Costa Rica
- Kenya code: CR
- Kyrgyzstan - name: Croatia
- Cambodia code: HR
- Kiribati - name: Cuba
- Saint Kitts and Nevis code: CU
- South Korea - name: Cyprus
- Kuwait code: CY
- Laos - name: Czech Republic
- Lebanon code: CZ
- Liberia - name: Denmark
- Libya code: DK
- Saint Lucia - name: Djibouti
- Liechtenstein code: DJ
- Sri Lanka - name: Dominica
- Lesotho code: DM
- Lithuania - name: Dominican Republic
- Luxembourg code: DO
- Latvia - name: Ecuador
- Macao code: EC
- Morocco - name: Egypt
- Monaco code: EG
- Moldova - name: El Salvador
- Madagascar code: SV
- Maldives - name: Equatorial Guinea
- Mexico code: GQ
- Marshall Islands - name: Eritrea
- Macedonia code: ER
- Mali - name: Estonia
- Malta code: EE
- Myanmar - name: Ethiopia
- Montenegro code: ET
- Mongolia - name: Falkland Islands (Malvinas)
- Northern Mariana Islands code: FK
- Mozambique - name: Faroe Islands
- Mauritania code: FO
- Martinique - name: Fiji
- Mauritius code: FJ
- Malawi - name: Finland
- Malaysia code: FI
- Mayotte - name: France
- Namibia code: FR
- New Caledonia - name: French Guiana
- Niger code: GF
- Norfolk Island - name: French Polynesia
- Nigeria code: PF
- Nicaragua - name: French Southern Territories
- Niue code: TF
- Netherlands - name: Gabon
- Norway code: GA
- Nepal - name: Gambia
- Nauru code: GM
- New Zealand - name: Georgia
- Oman code: GE
- Pakistan - name: Germany
- Panama code: DE
- Pitcairn - name: Ghana
- Peru code: GH
- Philippines - name: Gibraltar
- Palau code: GI
- Papua New Guinea - name: Greece
- Poland code: GR
- Puerto Rico - name: Greenland
- North Korea code: GL
- Portugal - name: Grenada
- Paraguay code: GD
- Palestine - name: Guadeloupe
- French Polynesia code: GP
- Qatar - name: Guam
- Reunion code: GU
- Romania - name: Guatemala
- Russia code: GT
- Rwanda - name: Guernsey
- Saudi Arabia code: GG
- Sudan - name: Guinea
- Senegal code: GN
- Singapore - name: Guinea-Bissau
- Solomon Islands code: GW
- Sierra Leone - name: Guyana
- El Salvador code: GY
- San Marino - name: Haiti
- Somalia code: HT
- Saint Pierre and Miquelon - name: Heard Island and Mcdonald Islands
- Serbia code: HM
- South Sudan - name: Holy See (Vatican City State)
- Sao Tome and Principe code: VA
- Suriname - name: Honduras
- Slovakia code: HN
- Slovenia - name: Hong Kong
- Sweden code: HK
- Swaziland - name: Hungary
- Seychelles code: HU
- Syria - name: Iceland
- Turks and Caicos Islands code: IS
- Chad - name: India
- Togo code: IN
- Thailand - name: Indonesia
- Tajikistan code: ID
- Tokelau - name: Iran, Islamic Republic Of
- Turkmenistan code: IR
- Timor - name: Iraq
- Tonga code: IQ
- Trinidad and Tobago - name: Ireland
- Tunisia code: IE
- Turkey - name: Isle of Man
- Tuvalu code: IM
- Taiwan - name: Israel
- Tanzania code: IL
- Uganda - name: Italy
- Ukraine code: IT
- Uruguay - name: Jamaica
- United States code: JM
- Uzbekistan - name: Japan
- Vatican code: JP
- Saint Vincent and the Grenadines - name: Jersey
- Venezuela code: JE
- British Virgin Islands - name: Jordan
- United States Virgin Islands code: JO
- Vietnam - name: Kazakhstan
- Vanuatu code: KZ
- Samoa - name: Kenya
- Yemen code: KE
- South Africa - name: Kiribati
- Zambia code: KI
- Zimbabwe - name: Korea, Republic of
code: KR
- name: Kuwait
code: KW
- name: Kyrgyzstan
code: KG
- name: Latvia
code: LV
- name: Lebanon
code: LB
- name: Lesotho
code: LS
- name: Liberia
code: LR
- name: Libyan Arab Jamahiriya
code: LY
- name: Liechtenstein
code: LI
- name: Lithuania
code: LT
- name: Luxembourg
code: LU
- name: Macao
code: MO
- name: North Macedonia
code: MK
- name: Madagascar
code: MG
- name: Malawi
code: MW
- name: Malaysia
code: MY
- name: Maldives
code: MV
- name: Mali
code: ML
- name: Malta
code: MT
- name: Marshall Islands
code: MH
- name: Martinique
code: MQ
- name: Mauritania
code: MR
- name: Mauritius
code: MU
- name: Mayotte
code: YT
- name: Mexico
code: MX
- name: Micronesia, Federated States of
code: FM
- name: Moldova, Republic of
code: MD
- name: Monaco
code: MC
- name: Mongolia
code: MN
- name: Montserrat
code: MS
- name: Morocco
code: MA
- name: Mozambique
code: MZ
- name: Myanmar
code: MM
- name: Namibia
code: NA
- name: Nauru
code: NR
- name: Nepal
code: NP
- name: Netherlands
code: NL
- name: Netherlands Antilles
code: AN
- name: New Caledonia
code: NC
- name: New Zealand
code: NZ
- name: Nicaragua
code: NI
- name: Niger
code: NE
- name: Nigeria
code: NG
- name: Niue
code: NU
- name: Norfolk Island
code: NF
- name: Northern Mariana Islands
code: MP
- name: Norway
code: 'NO'
- name: Oman
code: OM
- name: Pakistan
code: PK
- name: Palau
code: PW
- name: Palestinian Territory, Occupied
code: PS
- name: Panama
code: PA
- name: Papua New Guinea
code: PG
- name: Paraguay
code: PY
- name: Peru
code: PE
- name: Philippines
code: PH
- name: Pitcairn Islands
code: PN
- name: Poland
code: PL
- name: Portugal
code: PT
- name: Puerto Rico
code: PR
- name: Qatar
code: QA
- name: Reunion
code: RE
- name: Romania
code: RO
- name: Russian Federation
code: RU
- name: Rwanda
code: RW
- name: Saint Helena
code: SH
- name: Saint Kitts and Nevis
code: KN
- name: Saint Lucia
code: LC
- name: Saint Pierre and Miquelon
code: PM
- name: Saint Vincent and the Grenadines
code: VC
- name: Samoa
code: WS
- name: San Marino
code: SM
- name: Sao Tome and Principe
code: ST
- name: Saudi Arabia
code: SA
- name: Senegal
code: SN
- name: Serbia and Montenegro
code: CS
- name: Seychelles
code: SC
- name: Sierra Leone
code: SL
- name: Singapore
code: SG
- name: Slovakia
code: SK
- name: Slovenia
code: SI
- name: Solomon Islands
code: SB
- name: Somalia
code: SO
- name: South Africa
code: ZA
- name: South Georgia and the South Sandwich Islands
code: GS
- name: Spain
code: ES
- name: Sri Lanka
code: LK
- name: Sudan
code: SD
- name: Suriname
code: SR
- name: Svalbard and Jan Mayen
code: SJ
- name: Swaziland
code: SZ
- name: Sweden
code: SE
- name: Switzerland
code: CH
- name: Syrian Arab Republic
code: SY
- name: Taiwan
code: TW
- name: Tajikistan
code: TJ
- name: Tanzania, United Republic of
code: TZ
- name: Thailand
code: TH
- name: Timor-Leste
code: TL
- name: Togo
code: TG
- name: Tokelau
code: TK
- name: Tonga
code: TO
- name: Trinidad and Tobago
code: TT
- name: Tunisia
code: TN
- name: Turkey
code: TR
- name: Turkmenistan
code: TM
- name: Turks and Caicos Islands
code: TC
- name: Tuvalu
code: TV
- name: Uganda
code: UG
- name: Ukraine
code: UA
- name: United Arab Emirates
code: AE
- name: United Kingdom
code: GB
- name: United States
code: US
- name: United States Minor Outlying Islands
code: UM
- name: Uruguay
code: UY
- name: Uzbekistan
code: UZ
- name: Vanuatu
code: VU
- name: Venezuela
code: VE
- name: Vietnam
code: VN
- name: Virgin Islands, British
code: VG
- name: Virgin Islands, U.S.
code: VI
- name: Wallis and Futuna
code: WF
- name: Western Sahara
code: EH
- name: Yemen
code: YE
- name: Zambia
code: ZM
- name: Zimbabwe
code: ZN

View File

@@ -38,6 +38,12 @@ base:
auth-lock: auth-lock:
title: Lock screen title: Lock screen
url: auth-lock.html url: auth-lock.html
2-step-verification:
title: 2 step verification
url: 2-step-verification.html
2-step-verification-code:
title: 2 step verification code
url: 2-step-verification-code.html
blank: blank:
title: Blank page title: Blank page
url: blank.html url: blank.html

View File

@@ -3,6 +3,6 @@
<input class="form-control" list="datalistOptions" placeholder="Type to search..."/> <input class="form-control" list="datalistOptions" placeholder="Type to search..."/>
<datalist id="datalistOptions"> <datalist id="datalistOptions">
{% for country in site.data.countries limit: 10 %} {% for country in site.data.countries limit: 10 %}
<option value="{{ country | escape }}"/>{% endfor %} <option value="{{ country.name | escape }}"/>{% endfor %}
</datalist> </datalist>
</div> </div>

View File

@@ -8,7 +8,7 @@ body-class: d-flex flex-column
{% unless page.hide-logo %} {% unless page.hide-logo %}
<div class="text-center mb-4"> <div class="text-center mb-4">
<a href="{{ site.base }}" class="navbar-brand navbar-brand-autodark"><img src="{{ site.base }}/static/logo{% if page.logo-small %}-small{% endif %}.svg" height="36" alt=""></a> {% include layout/navbar-logo.html %}
</div> </div>
{% endunless %} {% endunless %}

View File

@@ -613,7 +613,7 @@ $dropdown-max-width: 25rem !default;
$dropdown-scrollable-height: 13rem !default; $dropdown-scrollable-height: 13rem !default;
$dropdown-link-active-color: var(--#{$prefix}primary) !default; $dropdown-link-active-color: var(--#{$prefix}primary) !default;
$dropdown-link-active-bg: var(--#{$prefix}active-bg) !default; $dropdown-link-active-bg: var(--#{$prefix}active-bg) !default;
$dropdown-box-shadow: var(--#{$prefix}shadow-dropdown) !default; $dropdown-box-shadow: var(--#{$prefix}box-shadow-dropdown) !default;
$dropdown-divider-bg: $dropdown-border-color !default; $dropdown-divider-bg: $dropdown-border-color !default;
$dropdown-divider-margin-y: var(--#{$prefix}spacer) !default; $dropdown-divider-margin-y: var(--#{$prefix}spacer) !default;

View File

@@ -1,5 +1,5 @@
.clr-picker { .clr-picker {
box-shadow: var(--#{$prefix}shadow-dropdown); box-shadow: var(--#{$prefix}box-shadow-dropdown);
background-color: var(--#{$prefix}bg-surface); background-color: var(--#{$prefix}bg-surface);
} }

View File

@@ -41,7 +41,7 @@ $input-border-width: 1px;
.ts-dropdown { .ts-dropdown {
background: var(--#{$prefix}bg-surface); background: var(--#{$prefix}bg-surface);
color: var(--#{$prefix}body-color); color: var(--#{$prefix}body-color);
box-shadow: var(--#{$prefix}shadow-dropdown); box-shadow: var(--#{$prefix}box-shadow-dropdown);
.option { .option {
padding: $dropdown-item-padding-y $dropdown-item-padding-x; padding: $dropdown-item-padding-y $dropdown-item-padding-x;