web/satellite: server side encryption acknowledge checkbox added

Change-Id: If57ab6e8fddc34c142d19f754caf1338dfdb0bf6

web/satellite/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "lint": "vue-cli-service lint && stylelint --max-warnings 100 \"**/*.{vue,css,sss,less,scss,sass}\" --fix",
+    "lint": "vue-cli-service lint --fix && stylelint --max-warnings 100 \"**/*.{vue,css,sss,less,scss,sass}\" --fix",
     "build": "vue-cli-service build",
     "wasm": "chmod +x ./scripts/build-wasm.sh && ./scripts/build-wasm.sh",
     "dev": "vue-cli-service build --mode development --watch",

web/satellite/src/components/objects/WarningView.vue

@@ -11,6 +11,10 @@
                     If you want to use our product with only end-to-end encryption, you may want to skip this feature.
                 </p>
             </div>
+            <div class="warning-view__container__checkbox-area">
+                <v-checkbox @setData="setNotAskMeAgain"/>
+                <p class="warning-view__container__checkbox-area__message">Do not ask me again</p>
+            </div>
             <div class="warning-view__container__buttons-area">
                 <VButton
                     class="warning-view__container__buttons-area__left-button"
@@ -35,15 +39,34 @@
 import { Component, Vue } from 'vue-property-decorator';
 
 import VButton from '@/components/common/VButton.vue';
+import VCheckbox from '@/components/common/VCheckbox.vue';
 
 import { RouteConfig } from '@/router';
+import { LocalData } from '@/utils/localData';
 
 @Component({
     components: {
+        VCheckbox,
         VButton,
     },
 })
 export default class WarningView extends Vue {
+    // Used for remembering confirmation of acknowledge.
+    public isNotAskMeAgain = false;
+
+    public setNotAskMeAgain(value: boolean): void {
+        this.isNotAskMeAgain = value;
+    }
+
+    /**
+     * Checks if user already acknowledged information and redirects if so.
+     */
+    public beforeMount(): void {
+        if (LocalData.getServerSideEncryptionAcknowledge()) {
+            this.$router.push(RouteConfig.CreatePassphrase.path);
+        }
+    }
+
     /**
      * Redirects to project dashboard page.
      */
@@ -55,6 +78,10 @@ export default class WarningView extends Vue {
      * Proceeds further into file browser flow.
      */
     public proceed(): void {
+        if (this.isNotAskMeAgain) {
+            LocalData.setServerSideEncryptionAcknowledge();
+        }
+
         this.$router.push(RouteConfig.CreatePassphrase.path);
     }
 }
@@ -115,8 +142,33 @@ export default class WarningView extends Vue {
                 }
             }
 
+            &__checkbox-area {
+                margin-top: 20px;
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+
+                ::v-deep.checkmark {
+                    height: 20px;
+                    width: 20px;
+
+                    &:after {
+                        left: 6px;
+                        top: 2px;
+                    }
+                }
+
+                &__message {
+                    font-weight: normal;
+                    font-size: 16px;
+                    line-height: 24px;
+                    text-align: center;
+                    color: #1b2533;
+                }
+            }
+
             &__buttons-area {
-                margin-top: 35px;
+                margin-top: 20px;
                 display: flex;
                 align-items: center;
                 justify-content: space-between;

web/satellite/src/store/index.ts

@@ -19,7 +19,7 @@ import { makeNotificationsModule, NotificationsState } from '@/store/modules/not
 import { makeObjectsModule, ObjectsState } from '@/store/modules/objects';
 import { makePaymentsModule, PaymentsState } from '@/store/modules/payments';
 import { makeProjectMembersModule, ProjectMembersState } from '@/store/modules/projectMembers';
-import { makeProjectsModule, ProjectsState, PROJECTS_MUTATIONS } from '@/store/modules/projects';
+import { makeProjectsModule, PROJECTS_MUTATIONS, ProjectsState } from '@/store/modules/projects';
 import { makeUsersModule } from '@/store/modules/users';
 import { User } from '@/types/users';
 

web/satellite/src/utils/localData.ts

@@ -8,6 +8,7 @@ export class LocalData {
     private static userId = 'userId';
     private static selectedProjectId = 'selectedProjectId';
     private static userIdPassSalt = 'userIdPassSalt';
+    private static serverSideEncryptionAcknowledge = 'serverSideEncryptionAcknowledge';
 
     public static getUserId(): string | null {
         return localStorage.getItem(LocalData.userId);
@@ -49,6 +50,14 @@ export class LocalData {
 
         localStorage.setItem(LocalData.userIdPassSalt, JSON.stringify(data));
     }
+
+    public static getServerSideEncryptionAcknowledge(): boolean {
+        return Boolean(localStorage.getItem(LocalData.serverSideEncryptionAcknowledge));
+    }
+
+    public static setServerSideEncryptionAcknowledge(): void {
+        localStorage.setItem(LocalData.serverSideEncryptionAcknowledge, 'true');
+    }
 }
 
 /**