Adding Two-Step Verification Pages (#1593)

.changeset/fluffy-insects-lay.md

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

.prettierrc

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

src/pages/2-step-verification-code.html

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

src/pages/2-step-verification.html

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

src/pages/_data/countries.yml

@@ -1,229 +1,480 @@
-- Aruba
-- Afghanistan
-- Angola
-- Anguilla
-- Albania
-- Andorra
-- United Arab Emirates
-- Argentina
-- Armenia
-- American Samoa
-- Antarctica
-- Antigua and Barbuda
-- Australia
-- Austria
-- Azerbaijan
-- Burundi
-- Belgium
-- Benin
-- Burkina Faso
-- Bangladesh
-- Bulgaria
-- Bahrain
-- Bahamas
-- Bosnia and Herzegovina
-- Saint Barthélemy
-- Belarus
-- Belize
-- Bermuda
-- Bolivia
-- Brazil
-- Barbados
-- Brunei
-- Bhutan
-- Botswana
-- Central African Republic
-- Canada
-- Switzerland
-- Chile
-- China
-- Cote d'Ivoire
-- Cameroon
-- Democratic Republic of Congo
-- Congo
-- Colombia
-- Comoros
-- Cape Verde
-- Costa Rica
-- Cuba
-- Christmas Island
-- Cayman Islands
-- Cyprus
-- Czech Republic
-- Germany
-- Djibouti
-- Dominica
-- Denmark
-- Dominican Republic
-- Algeria
-- Ecuador
-- Egypt
-- Eritrea
-- Spain
-- Estonia
-- Ethiopia
-- Finland
-- Fiji
-- Falkland Islands
-- France
-- Faeroe Islands
-- Micronesia (country)
-- Gabon
-- United Kingdom
-- Georgia
-- Ghana
-- Gibraltar
-- Guinea
-- Gambia
-- Guinea-Bissau
-- Equatorial Guinea
-- Greece
-- Grenada
-- Greenland
-- Guatemala
-- French Guiana
-- Guam
-- Guyana
-- Hong Kong
-- Honduras
-- Croatia
-- Haiti
-- Hungary
-- Indonesia
-- Isle of Man
-- India
-- Ireland
-- Iran
-- Iraq
-- Iceland
-- Israel
-- Italy
-- Jamaica
-- Jersey
-- Jordan
-- Japan
-- Kazakhstan
-- Kenya
-- Kyrgyzstan
-- Cambodia
-- Kiribati
-- Saint Kitts and Nevis
-- South Korea
-- Kuwait
-- Laos
-- Lebanon
-- Liberia
-- Libya
-- Saint Lucia
-- Liechtenstein
-- Sri Lanka
-- Lesotho
-- Lithuania
-- Luxembourg
-- Latvia
-- Macao
-- Morocco
-- Monaco
-- Moldova
-- Madagascar
-- Maldives
-- Mexico
-- Marshall Islands
-- Macedonia
-- Mali
-- Malta
-- Myanmar
-- Montenegro
-- Mongolia
-- Northern Mariana Islands
-- Mozambique
-- Mauritania
-- Martinique
-- Mauritius
-- Malawi
-- Malaysia
-- Mayotte
-- Namibia
-- New Caledonia
-- Niger
-- Norfolk Island
-- Nigeria
-- Nicaragua
-- Niue
-- Netherlands
-- Norway
-- Nepal
-- Nauru
-- New Zealand
-- Oman
-- Pakistan
-- Panama
-- Pitcairn
-- Peru
-- Philippines
-- Palau
-- Papua New Guinea
-- Poland
-- Puerto Rico
-- North Korea
-- Portugal
-- Paraguay
-- Palestine
-- French Polynesia
-- Qatar
-- Reunion
-- Romania
-- Russia
-- Rwanda
-- Saudi Arabia
-- Sudan
-- Senegal
-- Singapore
-- Solomon Islands
-- Sierra Leone
-- El Salvador
-- San Marino
-- Somalia
-- Saint Pierre and Miquelon
-- Serbia
-- South Sudan
-- Sao Tome and Principe
-- Suriname
-- Slovakia
-- Slovenia
-- Sweden
-- Swaziland
-- Seychelles
-- Syria
-- Turks and Caicos Islands
-- Chad
-- Togo
-- Thailand
-- Tajikistan
-- Tokelau
-- Turkmenistan
-- Timor
-- Tonga
-- Trinidad and Tobago
-- Tunisia
-- Turkey
-- Tuvalu
-- Taiwan
-- Tanzania
-- Uganda
-- Ukraine
-- Uruguay
-- United States
-- Uzbekistan
-- Vatican
-- Saint Vincent and the Grenadines
-- Venezuela
-- British Virgin Islands
-- United States Virgin Islands
-- Vietnam
-- Vanuatu
-- Samoa
-- Yemen
-- South Africa
-- Zambia
-- Zimbabwe
+- name: Afghanistan
+  code: AF
+- name: Åland Islands
+  code: AX
+- name: Albania
+  code: AL
+- name: Algeria
+  code: DZ
+- name: American Samoa
+  code: AS
+- name: AndorrA
+  code: AD
+- name: Angola
+  code: AO
+- name: Anguilla
+  code: AI
+- name: Antarctica
+  code: AQ
+- name: Antigua and Barbuda
+  code: AG
+- name: Argentina
+  code: AR
+- name: Armenia
+  code: AM
+- name: Aruba
+  code: AW
+- name: Australia
+  code: AU
+- name: Austria
+  code: AT
+- name: Azerbaijan
+  code: AZ
+- name: Bahamas
+  code: BS
+- name: Bahrain
+  code: BH
+- name: Bangladesh
+  code: BD
+- name: Barbados
+  code: BB
+- name: Belarus
+  code: BY
+- name: Belgium
+  code: BE
+- name: Belize
+  code: BZ
+- name: Benin
+  code: BJ
+- name: Bermuda
+  code: BM
+- name: Bhutan
+  code: BT
+- name: Bolivia
+  code: BO
+- name: Bosnia and Herzegovina
+  code: BA
+- name: Botswana
+  code: BW
+- name: Bouvet Island
+  code: BV
+- name: Brazil
+  code: BR
+- name: British Indian Ocean Territory
+  code: IO
+- name: Brunei Darussalam
+  code: BN
+- name: Bulgaria
+  code: BG
+- name: Burkina Faso
+  code: BF
+- name: Burundi
+  code: BI
+- name: Cambodia
+  code: KH
+- name: Cameroon
+  code: CM
+- name: Canada
+  code: CA
+- name: Cape Verde
+  code: CV
+- name: Cayman Islands
+  code: KY
+- name: Central African Republic
+  code: CF
+- name: Chad
+  code: TD
+- name: Chile
+  code: CL
+- name: China
+  code: CN
+- name: Christmas Island
+  code: CX
+- name: Cocos (Keeling) Islands
+  code: CC
+- name: Colombia
+  code: CO
+- name: Comoros
+  code: KM
+- name: Congo
+  code: CG
+- name: Congo, The Democratic Republic of the
+  code: CD
+- name: Cook Islands
+  code: CK
+- name: Costa Rica
+  code: CR
+- name: Croatia
+  code: HR
+- name: Cuba
+  code: CU
+- name: Cyprus
+  code: CY
+- name: Czech Republic
+  code: CZ
+- name: Denmark
+  code: DK
+- name: Djibouti
+  code: DJ
+- name: Dominica
+  code: DM
+- name: Dominican Republic
+  code: DO
+- name: Ecuador
+  code: EC
+- name: Egypt
+  code: EG
+- name: El Salvador
+  code: SV
+- name: Equatorial Guinea
+  code: GQ
+- name: Eritrea
+  code: ER
+- name: Estonia
+  code: EE
+- name: Ethiopia
+  code: ET
+- name: Falkland Islands (Malvinas)
+  code: FK
+- name: Faroe Islands
+  code: FO
+- name: Fiji
+  code: FJ
+- name: Finland
+  code: FI
+- name: France
+  code: FR
+- name: French Guiana
+  code: GF
+- name: French Polynesia
+  code: PF
+- name: French Southern Territories
+  code: TF
+- name: Gabon
+  code: GA
+- name: Gambia
+  code: GM
+- name: Georgia
+  code: GE
+- name: Germany
+  code: DE
+- name: Ghana
+  code: GH
+- name: Gibraltar
+  code: GI
+- name: Greece
+  code: GR
+- name: Greenland
+  code: GL
+- name: Grenada
+  code: GD
+- name: Guadeloupe
+  code: GP
+- name: Guam
+  code: GU
+- name: Guatemala
+  code: GT
+- name: Guernsey
+  code: GG
+- name: Guinea
+  code: GN
+- name: Guinea-Bissau
+  code: GW
+- name: Guyana
+  code: GY
+- name: Haiti
+  code: HT
+- name: Heard Island and Mcdonald Islands
+  code: HM
+- name: Holy See (Vatican City State)
+  code: VA
+- name: Honduras
+  code: HN
+- name: Hong Kong
+  code: HK
+- name: Hungary
+  code: HU
+- name: Iceland
+  code: IS
+- name: India
+  code: IN
+- name: Indonesia
+  code: ID
+- name: Iran, Islamic Republic Of
+  code: IR
+- name: Iraq
+  code: IQ
+- name: Ireland
+  code: IE
+- name: Isle of Man
+  code: IM
+- name: Israel
+  code: IL
+- name: Italy
+  code: IT
+- name: Jamaica
+  code: JM
+- name: Japan
+  code: JP
+- name: Jersey
+  code: JE
+- name: Jordan
+  code: JO
+- name: Kazakhstan
+  code: KZ
+- name: Kenya
+  code: KE
+- name: Kiribati
+  code: KI
+- 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

src/pages/_data/menu.yml

@@ -38,6 +38,12 @@ base:
         auth-lock:
           title: Lock screen
           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:
       title: Blank page
       url: blank.html

src/pages/_includes/parts/form/input-datalist.html

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

src/pages/_layouts/single.html

@@ -8,7 +8,7 @@ body-class: d-flex flex-column
 
 		{% unless page.hide-logo %}
 		<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>
 		{% endunless %}
 

src/scss/_variables.scss

@@ -613,7 +613,7 @@ $dropdown-max-width: 25rem !default;
 $dropdown-scrollable-height: 13rem !default;
 $dropdown-link-active-color: var(--#{$prefix}primary) !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-margin-y: var(--#{$prefix}spacer) !default;

src/scss/vendor/_coloris.scss

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

src/scss/vendor/_tom-select.scss

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