TechAndCheck · cguess · May 11, 2023 · Jan 13, 2023 · Jan 25, 2023 · Jan 26, 2023
diff --git a/Gemfile b/Gemfile
@@ -48,6 +48,8 @@ group :development, :test do
   gem "rubocop-sorbet", require: false # Check Sorbet
   gem "rubocop-minitest", require: false # For checking tests
   gem "minitest-hooks" # Used to apply stubs to each test
+
+  gem "hotwire-livereload" # Live reload for JS, HTML and CSS devlopment
 end
 
 group :development do
@@ -186,3 +188,11 @@ gem "dartsass-rails", "~> 0.4.0"
 
 # Comma lets us generate CSV-formatted data from ActiveRecord models
 gem "comma", "~>4.7.0"
+
+# Webauthn Enabling
+gem "webauthn", git: "https://github.com/cedarcode/webauthn-ruby", tag: "v3.0.0.alpha2"
+
+# For TOTP one-time passcode (Firefox doesn't support passkeys)
+gem "rotp", "~> 6.2"
+# For generating the QRCode from the TOTP setup string
+gem "rqrcode", "~> 2.0"
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -17,6 +17,21 @@ GIT
       selenium-webdriver
       typhoeus
 
+GIT
+  remote: https://github.com/cedarcode/webauthn-ruby
+  revision: d7022a9ed5f3050e908ff846fe6ae8143a16fbbe
+  tag: v3.0.0.alpha2
+  specs:
+    webauthn (3.0.0.alpha2)
+      android_key_attestation (~> 0.3.0)
+      awrence (~> 1.1)
+      bindata (~> 2.4)
+      cbor (~> 0.5.9)
+      cose (~> 1.1)
+      openssl (>= 2.2, < 3.1)
+      safety_net_attestation (~> 0.4.0)
+      tpm-key_attestation (~> 0.11.0)
+
 GIT
   remote: https://github.com/cguess/birdsong
   revision: a0363b1a917e2c4ec9083ac71c7ac800cfb8ade1
@@ -95,10 +110,12 @@ GEM
       tzinfo (~> 2.0)
     addressable (2.8.1)
       public_suffix (>= 2.0.2, < 6.0)
+    android_key_attestation (0.3.0)
     apparition (0.6.0)
       capybara (~> 3.13, < 4)
       websocket-driver (>= 0.6.5)
     ast (2.4.2)
+    awrence (1.2.1)
     aws-eventstream (1.2.0)
     aws-partitions (1.637.0)
     aws-sdk-core (3.155.0)
@@ -116,6 +133,7 @@ GEM
     aws-sigv4 (1.5.1)
       aws-eventstream (~> 1, >= 1.0.2)
     bcrypt (3.1.18)
+    bindata (2.4.14)
     bindex (0.8.1)
     blueprinter (0.25.3)
     bootsnap (1.13.0)
@@ -134,7 +152,9 @@ GEM
       rack-test (>= 0.6.3)
       regexp_parser (>= 1.5, < 3.0)
       xpath (~> 3.2)
+    cbor (0.5.9.6)
     childprocess (4.1.0)
+    chunky_png (1.4.0)
     climate_control (0.2.0)
     coderay (1.1.3)
     comma (4.7.0)
@@ -144,6 +164,9 @@ GEM
     concurrent-ruby (1.1.10)
     connection_pool (2.3.0)
     content_disposition (1.0.0)
+    cose (1.3.0)
+      cbor (~> 0.5.9)
+      openssl-signature_algorithm (~> 1.0)
     countries (5.1.2)
       sixarm_ruby_unaccent (~> 1.1)
     country_select (8.0.0)
@@ -188,6 +211,9 @@ GEM
       activesupport (>= 5.0)
     hana (1.3.7)
     highline (2.0.3)
+    hotwire-livereload (1.2.3)
+      listen (>= 3.0.0)
+      rails (>= 6.0.0)
     http-accept (1.7.0)
     http-cookie (1.0.5)
       domain_name (~> 0.5)
@@ -206,6 +232,7 @@ GEM
       hana (~> 1.3)
       regexp_parser (~> 2.0)
       uri_template (~> 0.7)
+    jwt (2.6.0)
     listen (3.7.1)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
@@ -246,6 +273,9 @@ GEM
       racc (~> 1.4)
     oauth (0.5.14)
     oj (3.13.21)
+    openssl (3.0.2)
+    openssl-signature_algorithm (1.2.1)
+      openssl (> 2.0, < 3.1)
     orm_adapter (0.5.0)
     os (1.1.4)
     pagy (5.10.1)
@@ -322,6 +352,11 @@ GEM
       netrc (~> 0.8)
     rexml (3.2.5)
     rolify (6.0.0)
+    rotp (6.2.2)
+    rqrcode (2.1.2)
+      chunky_png (~> 1.0)
+      rqrcode_core (~> 1.0)
+    rqrcode_core (1.2.0)
     rubocop (1.36.0)
       json (~> 2.3)
       parallel (~> 1.10)
@@ -364,6 +399,8 @@ GEM
       tty-screen (~> 0.8.1)
     rubyzip (2.3.2)
     safe_type (1.1.1)
+    safety_net_attestation (0.4.0)
+      jwt (~> 2.0)
     selenium-webdriver (4.4.0)
       childprocess (>= 0.5, < 5.0)
       rexml (~> 3.2, >= 3.2.5)
@@ -430,6 +467,10 @@ GEM
       erubis (~> 2.6)
       thor (~> 1.2.1)
       xdg (~> 2.2, >= 2.2.5)
+    tpm-key_attestation (0.11.0)
+      bindata (~> 2.4)
+      openssl (> 2.0, < 3.1)
+      openssl-signature_algorithm (~> 1.0)
     tty-screen (0.8.1)
     turbo-rails (1.3.0)
       actionpack (>= 6.0.0)
@@ -496,6 +537,7 @@ DEPENDENCIES
   ferrum (~> 0.11)
   figaro
   forki!
+  hotwire-livereload
   importmap-rails
   jbuilder (~> 2.7)
   json_schemer
@@ -513,6 +555,8 @@ DEPENDENCIES
   rake
   redis (~> 4.0)
   rolify (~> 6.0)
+  rotp (~> 6.2)
+  rqrcode (~> 2.0)
   rubocop
   rubocop-minitest
   rubocop-performance
@@ -540,6 +584,7 @@ DEPENDENCIES
   typhoeus
   validate_url
   web-console (>= 4.1.0)
+  webauthn!
   webdrivers
   yard
   youtubearchiver!

diff --git a/app/assets/fonts/sourcecodepro/v22/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevWnsUnxg (1).woff2 b/app/assets/fonts/sourcecodepro/v22/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevWnsUnxg (1).woff2
diff --git a/app/assets/fonts/sourcecodepro/v22/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevWnsUnxg.woff2 b/app/assets/fonts/sourcecodepro/v22/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevWnsUnxg.woff2
diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss
@@ -115,6 +115,7 @@ $line-height--base: 1.5;
 // Font Families
 $font-family--serif: "Source Serif Pro", serif;
 $font-family--sans-serif: "Source Sans Pro", sans-serif;
+$font-family--monospace: "Source Code Pro", monospace;
 
 // Font Weights
 // Weight values based on OpenType weight classes:

diff --git a/app/assets/stylesheets/account.scss b/app/assets/stylesheets/account.scss
@@ -13,13 +13,18 @@ Used for boxes on the account page. Similar to .box in boxes.scss, but has only
 	margin-bottom: var(--box--external-spacing);
 
 	max-width: shared.$screen-2xs-ceiling;
+	height: fit-content;
 	background-color: white;
 	border: 1px solid lightgray;
 	box-shadow: shared.$shadow--3;
 
 	transition-property: margin, padding;
 }
 
+.account-page__box--double-width {
+	max-width: shared.$screen-sm-ceiling;
+}
+
 /*
 A flexbox class for divs holding settings boxes
 */
@@ -47,6 +52,14 @@ Account page settings boxes are segmented 50/50 between headings and forms
 	height: 50%
 }
 
+.account-page__box--settings__list {
+	// height: 50%
+}
+
+.account-page__box--settings__list--section {
+	margin-bottom: 20px;
+}
+
 /* Account page navigation sidebar
 To be restyled in https://github.com/TechAndCheck/zenodotus/issues/506
 */

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -39,6 +39,7 @@
 @use "pages/fact_check_insights_guide";
 @use "pages/fact_check_insights_highlights";
 @use "pages/media_vault";
+@use "pages/accounts";
 
 #site-wrapper {
 	display: flex;

diff --git a/app/assets/stylesheets/fonts.css b/app/assets/stylesheets/fonts.css
@@ -482,3 +482,45 @@ need updating.
 	src: url("sourceserifpro/v15/neIXzD-0qpwxpaWvjeD0X88SAOeasc8btSyqxKcsdrM.woff2") format("woff2");
 	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
+/* Note that for monospace we only have latin characters. However, should you need to add Cyrillic or
+   Greek or whatever you can access the rest at:
+   https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300;400;600;700&family=Source+Code+Pro:wght@300;400;600;700&display=swap
+*/
+
+/* latin */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(sourcecodepro/v22/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevWnsUnxg.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(sourcecodepro/v22/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevWnsUnxg.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(sourcecodepro/v22/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevWnsUnxg.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(sourcecodepro/v22/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevWnsUnxg.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
diff --git a/app/assets/stylesheets/pages/accounts.scss b/app/assets/stylesheets/pages/accounts.scss
@@ -0,0 +1,18 @@
+@use "shared";
+
+#page--accounts--setup_mfa {
+  background-color: shared.$color--brand--fact_check_insights;
+
+  .setup_mfa--lock {
+    height: 400px;
+  }
+
+  .setup_mfa--webauthn_button {
+    top: -75px;
+    position: relative;
+  }
+
+  .setup_mfa--recovery_code {
+    font-family: shared.$font-family--monospace;
+  }
+}