Merge remote-tracking branch 'origin/master' into sebin/task/#202-rol…

…es-and-permissions-step1

Gruntfile.js

@@ -17,7 +17,7 @@
 const util = require('util')
 const chalk = require('chalk')
 const crypto = require('crypto')
-const { exec, fork } = require('child_process')
+const { exec, execSync, fork } = require('child_process')
 const execP = util.promisify(exec)
 const { readdir, cp, mkdir, access, rm, copyFile, readFile } = require('fs/promises')
 const fs = require('fs')
@@ -84,6 +84,9 @@ if (!process.env.DB_PATH) {
 module.exports = (grunt) => {
   require('load-grunt-tasks')(grunt)
 
+  const GI_GIT_VERSION = process.env.CI ? process.env.GI_VERSION : execSync('git describe --dirty').toString('utf8').trim()
+  Object.assign(process.env, { GI_GIT_VERSION })
+
   // Ensure API_PORT and API_URL envars are defined and available to subprocesses.
   ;(function defineApiEnvars () {
     const API_PORT = Number.parseInt(grunt.option('port') ?? process.env.API_PORT ?? '8000', 10)
@@ -220,6 +223,7 @@ module.exports = (grunt) => {
         'process.env.CI': `'${CI}'`,
         'process.env.CONTRACTS_VERSION': `'${CONTRACTS_VERSION}'`,
         'process.env.GI_VERSION': `'${GI_VERSION}'`,
+        'process.env.GI_GIT_VERSION': `'${GI_GIT_VERSION}'`,
         'process.env.LIGHTWEIGHT_CLIENT': `'${LIGHTWEIGHT_CLIENT}'`,
         'process.env.MAX_EVENTS_AFTER': `'${MAX_EVENTS_AFTER}'`,
         'process.env.NODE_ENV': `'${NODE_ENV}'`,

frontend/assets/style/_base.scss

@@ -1,3 +1,5 @@
+@use "variables" as *;
+
 html {
   background-color: $general_2;
   min-width: 19rem;

frontend/assets/style/_icons.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 // More fonts icon in node_module/fontawesome
 $icons: (
   arrow-up: "\f062",
@@ -148,7 +150,7 @@ $icons: (
 }
 
 @mixin icon($name) {
-  content: map-get($icons, $name);
+  content: map.get($icons, $name);
   text-rendering: auto;
   line-height: 1;
   font-family: "Font Awesome 5 Free";

frontend/assets/style/_layout.scss

@@ -1,3 +1,5 @@
+@use "variables" as *;
+
 $bannerGeneralHeight: 2.3rem;
 
 .l-no-navigation {

frontend/assets/style/_mixins.scss

@@ -1,3 +1,11 @@
+// Breakpoints
+// // Same as JS breakpoints at breakpoints.js
+// TODO: Redefine the breakpoints with @mmbotelho in a next task.
+$gap: 1rem;
+$tablet: 769px;
+$desktop: 1200px;
+$payment-table-desktop-bp: 1290px;
+
 @mixin fa($size, $dimensions) {
   display: inline-block;
   font-size: $size;
@@ -48,7 +56,6 @@
   }
 }
 
-$payment-table-desktop-bp: 1290px;
 @mixin payment-table-desktop {
   @media screen and (min-width: $payment-table-desktop-bp) {
     @content;

frontend/assets/style/_transitions.scss

@@ -1,4 +1,4 @@
-@import "_variables";
+@use "variables" as *;
 
 @mixin reduce-motion {
   *:not(.force-motion),

frontend/assets/style/_typography.scss

@@ -1,3 +1,6 @@
+@use "variables" as *;
+@use "sass:list";
+
 @font-face {
   src: url(../fonts/Lato/Lato-Bold.ttf);
   font-family: "Lato";
@@ -63,13 +66,13 @@ $lineHeight: 3, 2.25, 1.6875, 1.3125, 1;
 // From line height: 48px, 36px, 27px, 21px, 16px
 
 @each $size in $titles {
-  $i: index($titles, $size);
+  $i: list.index($titles, $size);
 
   .is-title-#{$i} {
     font-family: "Poppins";
     font-weight: bold;
     font-size: $size;
-    line-height: #{nth($lineHeight, $i)}rem;
+    line-height: #{list.nth($lineHeight, $i)}rem;
   }
 }
 
@@ -136,10 +139,6 @@ small {
   text-overflow: ellipsis;
 }
 
-// formerly in _colors.scss, moved here so that
-// @import "_variables"; in scoped styles in vue components
-// doesn't result in repeated CSS generated
-
 .has-text-0 {
   color: $text_0;
 }

frontend/assets/style/_utilities.scss

@@ -1,3 +1,5 @@
+@use "variables" as *;
+
 .is-unstyled {
   background: none;
   border: none;

frontend/assets/style/_variables.scss

@@ -26,13 +26,6 @@ $size_extra-large: $size_1;
 $radius: 3px;
 $radius-large: 5px;
 
-// Breakpoints
-// // Same as JS breakpoints at breakpoints.js
-// TODO: Redefine the breakpoints with @mmbotelho in a next task.
-$gap: 1rem;
-$tablet: 769px;
-$desktop: 1200px;
-
 $transitionSpeed: 300ms;
 
 $rightSideWidth: 16.5rem;
@@ -43,5 +36,5 @@ $rightSideWidth: 16.5rem;
 // tag of .vue components, and so those classes would end up being
 // duplicated across all the injected component CSS
 
-@import "_colors";
-@import "_mixins";
+@forward "colors";
+@forward "mixins";

frontend/assets/style/components/_buttons.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 @mixin buttonState($color, $color_2) {
   @media (hover: hover) {
     &:hover,

frontend/assets/style/components/_cards.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .card {
   padding: 1.5rem 1rem;
   background-color: $background_0;
@@ -26,36 +28,6 @@
   margin-bottom: 0.5rem;
 }
 
-@mixin removeSideCardPadding {
-  width: calc(100% + 2rem);
-  margin-left: -0.5rem;
-  margin-right: -0.5rem;
-
-  @include tablet {
-    width: calc(100% + 3rem);
-    margin-left: -1.5rem;
-    margin-right: -1.5rem;
-  }
-
-  @include desktop {
-    width: calc(100% + 5rem);
-    margin-left: -2.5rem;
-    margin-right: -2.5rem;
-  }
-}
-
-@mixin removeTopCardPadding {
-  margin-top: -1.5rem;
-
-  @include tablet {
-    margin-top: -1.5rem;
-  }
-
-  @include desktop {
-    margin-top: -2.5rem;
-  }
-}
-
 @mixin removeSideCardPadding {
   width: calc(100% + 2rem);
   margin-left: -1rem;

frontend/assets/style/components/_custom-markdowns.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .custom-markdown-content {
   // style declarations for custom markdown html output content
   white-space: initial;

frontend/assets/style/components/_forms.scss

@@ -1,3 +1,6 @@
+@use "../variables" as *;
+@use "../icons" as i;
+
 $inputHeight: 2.75rem;
 
 @mixin placeholder {
@@ -149,7 +152,7 @@ legend.legend {
 .selectbox,
 .selectgroup {
   &::after {
-    @include icon(sort-down);
+    @include i.icon(sort-down);
     position: absolute;
     top: 50%;
     right: 1rem;
@@ -318,7 +321,7 @@ p.error {
   color: var(--danger_0);
 
   &::before {
-    @include icon(times-circle);
+    @include i.icon(times-circle);
     margin-right: 0.25rem;
   }
 
@@ -441,7 +444,7 @@ p.error {
     }
 
     &::after {
-      @include icon(check);
+      @include i.icon(check);
       font-size: 10px;
       position: absolute;
       width: 6px;

frontend/assets/style/components/_links.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .link {
   display: inline; // so border breaks correctly on multiple lines.
   color: $primary_0;

frontend/assets/style/components/_loading.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .loading-box {
   display: flex;
   height: 100%;

frontend/assets/style/components/_pills.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .pill {
   border-radius: $radius;
   padding: 0.125rem 0.25rem;

frontend/assets/style/components/_selectsolo.scss

@@ -1,10 +1,13 @@
+@use "../variables" as *;
+@use "../icons" as i;
+
 .selectsolo {
   position: relative;
   border: none;
   width: max-content;
 
   &::after {
-    @include icon(angle-down);
+    @include i.icon(angle-down);
     position: absolute;
     top: 50%;
     right: 1rem;

frontend/assets/style/components/_steps.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 // Todo move into it"s own component when once created
 .steps {
   display: none;

frontend/assets/style/components/_tables.scss

@@ -1,3 +1,6 @@
+@use "../variables" as *;
+@use "cards" as c;
+
 .table {
   tr {
     box-shadow: inset 0 -2px 0 $general_2;
@@ -31,7 +34,7 @@
 }
 
 .table-in-card {
-  @include removeSideCardPadding;
+  @include c.removeSideCardPadding;
 
   th,
   td {

frontend/assets/style/components/_tabs.scss

@@ -1,3 +1,6 @@
+@use "../variables" as *;
+@use "cards" as c;
+
 .tabs {
   display: flex;
   flex-direction: row;
@@ -6,8 +9,8 @@
   font-family: "Poppins";
   font-size: 0.75rem;
   line-height: 1rem;
-  @include removeSideCardPadding;
-  @include removeTopCardPadding;
+  @include c.removeSideCardPadding;
+  @include c.removeTopCardPadding;
 
   &-link {
     display: flex;

frontend/assets/style/main.scss

@@ -1,24 +1,23 @@
 @charset "utf-8";
 
-@import "_reset";
-@import "_misc";
-@import "_variables";
-@import "_typography"; // make sure this comes after _variables
-@import "_utilities";
-@import "_base";
-@import "_layout";
-@import "_transitions";
+@use "reset";
+@use "misc";
+@use "typography";
+@use "utilities";
+@use "base";
+@use "layout";
+@use "transitions";
 
-@import "_icons";
-@import "_svgs";
-@import "components/_cards";
-@import "components/_buttons";
-@import "components/_links";
-@import "components/_loading";
-@import "components/_forms";
-@import "components/_pills";
-@import "components/_tabs";
-@import "components/_selectsolo";
-@import "components/_steps"; // TODO: MOVE IN COMPONENT ONCE CREATED
-@import "components/_tables";
-@import "components/_custom-markdowns";
+@use "icons";
+@use "svgs";
+@use "components/cards";
+@use "components/buttons";
+@use "components/links";
+@use "components/loading";
+@use "components/forms";
+@use "components/pills";
+@use "components/tabs";
+@use "components/selectsolo";
+@use "components/steps"; // TODO: MOVE IN COMPONENT ONCE CREATED
+@use "components/tables";
+@use "components/custom-markdowns";

frontend/controller/app/identity.js

@@ -8,6 +8,7 @@ import { LOGIN, LOGIN_COMPLETE, LOGIN_ERROR, NEW_PREFERENCES, NEW_UNREAD_MESSAGE
 import { Secret } from '~/shared/domains/chelonia/Secret.js'
 import { EVENT_HANDLED } from '~/shared/domains/chelonia/events.js'
 import { boxKeyPair, buildRegisterSaltRequest, buildUpdateSaltRequestEc, computeCAndHc, decryptContractSalt, hash, hashPassword, randomNonce } from '~/shared/zkpp.js'
+import { SETTING_CHELONIA_STATE } from '@model/database.js'
 // Using relative path to crypto.js instead of ~-path to workaround some esbuild bug
 import { CURVE25519XSALSA20POLY1305, EDWARDS25519SHA512BATCH, deriveKeyFromPassword, serializeKey } from '../../../shared/domains/chelonia/crypto.js'
 import { handleFetchResult } from '../utils/misc.js'
@@ -462,24 +463,35 @@ export default (sbp('sbp/selectors/register', {
   // Unlike the login function, the wrapper for logging out is used using a
   // dedicated selector to allow it to be called from the login selector (if
   // error occurs)
-  'gi.app/identity/_private/logout': async function (errorState: ?Object) {
+  'gi.app/identity/_private/logout': async function (errorState: ?Object, wipeOut?: boolean) {
     try {
       const state = errorState || cloneDeep(sbp('state/vuex/state'))
       if (!state.loggedIn) return
 
       const cheloniaState = await sbp('gi.actions/identity/logout')
 
-      const { encryptionParams } = state.loggedIn
+      const { identityContractID, encryptionParams } = state.loggedIn
       if (encryptionParams) {
         // If we're logging out, save the current Chelonia state under the
         // `.cheloniaState` key. This will be used later when logging in
         // to restore both the Vuex and Chelonia states
-        state.cheloniaState = cheloniaState
+        if (!wipeOut) {
+          state.cheloniaState = cheloniaState
 
-        await sbp('state/vuex/save', true, state)
+          await sbp('state/vuex/save', true, state)
+        }
         await sbp('gi.db/settings/deleteStateEncryptionKey', encryptionParams)
         await sbp('appLogs/pauseCapture', { wipeOut: true }) // clear stored logs to prevent someone else accessing sensitve data
       }
+      // These should already be deleted, but we attempt to delete them again,
+      // just in case.
+      if (wipeOut) {
+        await Promise.all([
+          sbp('gi.db/settings/delete', identityContractID),
+          sbp('gi.db/settings/deleteEncrypted', identityContractID),
+          sbp('gi.db/settings/delete', SETTING_CHELONIA_STATE)
+        ])
+      }
     } catch (e) {
       console.error(`${e.name} during logout: ${e.message}`, e)
     }