Merge pull request #98 from filips123/fix-privacy

Add password to circulars preview and substitutions

website/.env.sample

@@ -15,3 +15,5 @@ VUE_APP_SENTRY_ENABLED=true
 VUE_APP_SENTRY_MAX_BREADCRUMBS=100
 VUE_APP_SENTRY_TRACE_SAMPLE_RATE=1.0
 VUE_APP_SENTRY_TRACE_PROPAGATION_TARGETS=urnik.gimvic.org
+
+VUE_APP_DOCUMENTS_PASSWORD=YOUR-DOCUMENTS-PASSWORD

website/src/components/documents/DocumentList.vue

@@ -7,7 +7,13 @@
       <v-expansion-panel-content>
         <v-list>
           <v-item-group>
-            <v-list-item v-for="(document, id) in documents" :key="id" :href="tokenizeUrl(document.url)" two-line>
+            <v-list-item
+              v-for="(document, id) in documents"
+              :key="id"
+              @click="handleSubstitutionDocumentsPassword(document.type)"
+              :href="tokenizeUrl(document.url, document.type)"
+              two-line
+            >
               <v-list-item-content>
                 <v-list-item-title class="pl-1">{{ document.title }}</v-list-item-title>
                 <v-list-item-subtitle>{{ displayDate(document) }}</v-list-item-subtitle>
@@ -18,8 +24,9 @@
                     <v-tooltip top>
                       <template #activator="{ on: tooltip }">
                         <v-btn icon
-                          v-on="{ ...tooltip, ...dialog }"
+                          v-on="hasDocumentsPassword() && { ...tooltip, ...dialog }"
                           aria-label="Odpri besedilo dokumenta"
+                          @click="handleDocumentsPassword()"
                           @click.prevent
                           @click.stop
                           @mousedown.stop
@@ -49,6 +56,9 @@
             </v-list-item>
           </v-item-group>
         </v-list>
+        <v-dialog v-model="documentsPasswordDialog" width="35rem">
+          <documents-password v-if="documentsPasswordDialog" @closeDialog=closeDocumentsPasswordDialog />
+        </v-dialog>
       </v-expansion-panel-content>
     </v-expansion-panel>
   </v-expansion-panels>
@@ -88,11 +98,16 @@ import { mdiTextBoxOutline } from '@mdi/js'
 import { Component, Prop, Vue } from 'vue-property-decorator'
 
 import App from '@/App.vue'
+import DocumentsPassword from '@/components/documents/DocumentsPassword.vue'
 import { SettingsModule } from '@/store/modules/settings'
 import { Document } from '@/store/modules/storage'
 import { getWeekDays } from '@/utils/days'
 
-@Component
+@Component({
+  components: {
+    DocumentsPassword
+  }
+})
 export default class DocumentList extends Vue {
   mdiTextBoxOutline = mdiTextBoxOutline
 
@@ -105,6 +120,8 @@ export default class DocumentList extends Vue {
   documentDialogs = {}
   pullToRefresh = true
 
+  documentsPasswordDialog = false
+
   displayDate (document: Document): string {
     let date
 
@@ -134,7 +151,11 @@ export default class DocumentList extends Vue {
     return getWeekDays(new Date(date))[4].toLocaleDateString('sl')
   }
 
-  tokenizeUrl (url: string): string {
+  tokenizeUrl (url: string, type: string): string {
+    if (!this.shouldOpenSubstitution(type)) {
+      return ''
+    }
+
     const pluginFileWebserviceUrl = process.env.VUE_APP_ECLASSROOM_WEBSERVICE
     const pluginFileNormalUrl = process.env.VUE_APP_ECLASSROOM_NORMAL
     const moodleToken = SettingsModule.moodleToken
@@ -152,5 +173,35 @@ export default class DocumentList extends Vue {
     this.pullToRefresh = !this.pullToRefresh;
     (this.$root.$children[0] as App).isPullToRefreshAllowed = this.pullToRefresh
   }
+
+  handleSubstitutionDocumentsPassword (type: string): void {
+    if (!this.shouldOpenSubstitution(type)) {
+      this.handleDocumentsPassword()
+    }
+  }
+
+  shouldOpenSubstitution (type: string): boolean {
+    if (type === 'substitutions' && !this.hasDocumentsPassword()) {
+      return false
+    }
+    return true
+  }
+
+  hasDocumentsPassword (): boolean {
+    if (SettingsModule.documentsPassword === process.env.VUE_APP_DOCUMENTS_PASSWORD) {
+      return true
+    }
+    return false
+  }
+
+  handleDocumentsPassword (): void {
+    if (!this.hasDocumentsPassword()) {
+      this.documentsPasswordDialog = true
+    }
+  }
+
+  closeDocumentsPasswordDialog (): void {
+    this.documentsPasswordDialog = false
+  }
 }
 </script>

website/src/components/documents/DocumentsPassword.vue

@@ -0,0 +1,60 @@
+<template>
+  <v-card width="35rem">
+    <v-toolbar class="text-uppercase" color="#009300" dark>
+      Vpišite geslo
+    </v-toolbar>
+    <v-card-text class="text--primary mt-4">
+      <p>
+        Za ogled okrožnic znotraj aplikacije je potrebno geslo.
+        Geslo je dostopno v <a href="https://ucilnica.gimvic.org/course/view.php?id=118" target="_blank">spletni učilnici</a>.
+      </p>
+    <v-text-field
+        v-model="documentsPassword"
+        label="Geslo"
+        :append-icon="inputShow ? mdiEye : mdiEyeOff"
+        :type="inputShow ? 'text' : 'password'"
+        @click:append="inputShow = !inputShow"
+        @keyup.enter="closeDialog()"
+        autofocus
+        color="green"
+    />
+    </v-card-text>
+    <v-card-actions class="justify-end">
+      <v-btn color="green" text v-on:click=closeDialog>V redu</v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { mdiEye, mdiEyeOff } from '@mdi/js'
+import { Component, Vue } from 'vue-property-decorator'
+
+import { SettingsModule } from '@/store/modules/settings'
+import { displaySnackbar } from '@/utils/snackbar'
+
+@Component
+export default class DocumentsPassword extends Vue {
+  mdiEye = mdiEye
+  mdiEyeOff = mdiEyeOff
+
+  inputShow = false
+
+  get documentsPassword (): string | null {
+    return SettingsModule.documentsPassword
+  }
+
+  set documentsPassword (password: string | null) {
+    SettingsModule.setDocumentsPassword(password || null)
+  }
+
+  closeDialog (): void {
+    if (this.documentsPassword === process.env.VUE_APP_DOCUMENTS_PASSWORD) {
+      displaySnackbar('Geslo je pravilno')
+    } else if (this.documentsPassword) {
+      displaySnackbar('Geslo je napačno')
+      this.documentsPassword = ''
+    }
+    this.$emit('closeDialog')
+  }
+}
+</script>

website/src/store/modules/settings.ts

@@ -70,6 +70,7 @@ class Settings extends VuexModule {
   theme: ThemeType = ThemeType.System
 
   moodleToken: string | null = null
+  documentsPassword: string | null = null
 
   @Mutation
   setSelectedEntity (selectedEntity: SelectedEntity): void {
@@ -147,6 +148,11 @@ class Settings extends VuexModule {
   setMoodleToken (moodleToken: string | null): void {
     this.moodleToken = moodleToken
   }
+
+  @Mutation
+  setDocumentsPassword (documentsPassword: string | null): void {
+    this.documentsPassword = documentsPassword
+  }
 }
 
 export const SettingsModule = getModule(Settings)