[FLORA-466] two factor authentication (#482)

.github/workflows/backend.yml

@@ -71,6 +71,7 @@ jobs:
         echo "$HOME/.cabal/bin" >> $GITHUB_PATH
         echo "$HOME/.local/bin" >> $GITHUB_PATH
         echo "$HOME/node_modules/.bin" >> $GITHUB_PATH
+        sudo apt install libsodium-dev
         source ./environment.ci.sh
         touch ~/.pgpass
         chmod 0600 ~/.pgpass

CONTRIBUTING.md

@@ -18,8 +18,8 @@ The following Haskell command-line tools will have to be installed:
 
 (Some of the above packages have incompatible dependencies, so don't try to install them all at once with `cabal install`)
 
-You will need the [Soufflé datalog engine v2.3](https://github.com/souffle-lang/souffle/releases/tag/2.3)
-
+* [Soufflé datalog engine v2.3](https://github.com/souffle-lang/souffle/releases/tag/2.3): The datalog engine for package classification
+* `libsodium-1.0.18`: The system library that powers most of the cryptography happening in flora
 * `yarn`: The tool that handles the JavaScript code bases
 * `esbuild`: The tool that handles asset bundling
 

Makefile

@@ -106,6 +106,8 @@ tags: ## Generate ctags for the project with `ghc-tags`
 
 design-system: ## Generate the HTML components used by the design system
 	@cabal run -- flora-cli gen-design-system
+start-design-sysytem: ## Start storybook.js
+	@cd design; yarn storybook
 
 help:
 	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | awk 'BEGIN {FS = ":.* ?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}'

app/cli/DesignSystem.hs

@@ -25,6 +25,7 @@ import Flora.Model.Category
 import Flora.Model.Category qualified as Category
 import Flora.Model.Package
 import Flora.Search
+import FloraWeb.Components.Alert qualified as Component
 import FloraWeb.Components.CategoryCard qualified as Component
 import FloraWeb.Components.PackageListItem qualified as Component
 import FloraWeb.Components.PaginationNav qualified as Component
@@ -69,15 +70,17 @@ components =
       )
     , ("category-card", ComponentTitle "Category", ComponentName "CategoryCard", categoryCardExample)
     , ("pagination-area", ComponentTitle "Pagination Area", ComponentName "Pagination", paginationExample)
+    , ("alerts", ComponentTitle "Alerts", ComponentName "Alert", alertsExample)
     ]
 
 -----------------------
 -- Storybook Helpers --
 -----------------------
 
 storyTemplate :: ComponentTitle -> ComponentName -> TL.Text -> ByteString
-storyTemplate (ComponentTitle title) (ComponentName name) html =
-  [fmt| 
+storyTemplate (ComponentTitle title) (ComponentName name) unprocessedHtml =
+  let html = TL.replace "\n" " " unprocessedHtml
+   in [fmt|
 export default {{
   title: "Components/{title}"
 }};
@@ -124,3 +127,11 @@ paginationExample = div_ $ do
   div_ $ do
     h4_ "Next button"
     Component.paginationNav 32 1 (SearchPackages "text")
+
+alertsExample :: FloraHTML
+alertsExample = div_ $ do
+  div_ $ do
+    h4_ "Info alert"
+    Component.info "Info alert"
+    h4_ "Error alert"
+    Component.exception "Error alert!"

assets/css/1-core/2-variables.css

@@ -31,6 +31,15 @@
   --green-30: hsl(140 100% 30%);
   --green-40: hsl(140 100% 40%);
   --red-60: hsl(358 80% 60%);
+
+  /* Light backgrounds */
+  --light-blue-background: hsl(210 100% 96%);
+  --light-red-background: hsl(355 73% 97%);
+  --light-green: hsl(206 41% 97%);
+
+  /* Dark foregrounds to go with backgrounds */
+  --dark-blue: hsl(220 64% 33%);
+  --dark-red: hsl(0 69% 36%);
   --background-color: var(--gray-100);
   --brand-border: var(--gray-100);
   --category-card-name-color: var(--gray-30);

assets/css/2-components/7-button.css

@@ -0,0 +1,32 @@
+/* stylelint-disable selector-class-pattern */
+/* stylelint-disable declaration-block-no-redundant-longhand-properties */
+
+.button {
+  background-color: var(--main-page-button-background);
+  border-radius: 50rem;
+  border-width: 1px;
+  color: var(--text-color);
+  font-weight: bolder;
+  padding-bottom: 1rem;
+  padding-left: 2rem;
+  padding-right: 2rem;
+  padding-top: 1rem;
+}
+
+.button:hover {
+  border-color: var(--main-page-button-focus-border-color);
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+
+  /* offset-x | offset-y | blur-radius | spread-radius | color */
+  box-shadow: 0 0 4px 2px var(--main-page-button-focus-border-color);
+}
+
+.button:active {
+  border-color: var(--main-page-button-focus-border-color);
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+
+  /* offset-x | offset-y | blur-radius | spread-radius | color */
+  box-shadow: 0 0 4px 2px var(--main-page-button-focus-border-color);
+}

assets/css/2-components/8-alert.css

@@ -0,0 +1,27 @@
+.alert {
+  padding: 1rem;
+  border-radius: 0.5rem;
+  align-items: center;
+  display: flex;
+  margin-bottom: 1rem;
+}
+
+.alert-info {
+  color: var(--dark-blue);
+  background-color: var(--light-blue-background);
+}
+
+.alert-error {
+  color: var(--dark-red);
+  background-color: var(--light-red-background);
+}
+
+svg.alert-icon {
+  flex-shrink: 0;
+  width: 1em;
+  height: 1em;
+}
+
+.alert-message {
+  margin-inline-start: 0.75rem;
+}

assets/css/styles.css

@@ -10,6 +10,8 @@
 @import "2-components/4-license.css";
 @import "2-components/5-primary-search.css";
 @import "2-components/6-secondary-search.css";
+@import "2-components/7-button.css";
+@import "2-components/8-alert.css";
 
 @import "3-screens/1-package/1-package.css";
 @import "3-screens/1-package/2-release-changelog.css";
@@ -54,6 +56,14 @@
     padding: 0.5rem;
     width: 100%;
   }
+
+  .totp-zone {
+    display: none;
+  }
+
+  input[type="checkbox"]:checked + div.totp-zone {
+    display: block;
+  }
 }
 
 .version-list-item {