Added Privacy Policy popup

package.json

@@ -16,7 +16,9 @@
     "@quasar/extras": "^1.0.0",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
+    "js-bbcode-parser": "^3.0.4",
     "quasar": "^2.0.0",
+    "remarkable": "^2.0.1",
     "vue-i18n": "^9.0.0-beta.0",
     "vuex": "^4.0.1"
   },

quasar.conf.js

@@ -103,6 +103,7 @@ module.exports = configure(function (ctx) {
 
       // Quasar plugins
       plugins: [
+        'Dialog',
         'Notify',
         'LocalStorage',
         'SessionStorage'

src/components/Avatar.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-img class="absolute-top" src="https://cdn.quasar.dev/img/material.png" style="height: 150px">
+  <q-img class="absolute-top" src="~assets/bg-md1.jpg" style="height: 150px">
     <div class="absolute-bottom bg-transparent">
       <q-avatar
         v-if="unmanicSession && unmanicSession.level && unmanicSession.level > 0"

src/components/CompletedTasks.vue

@@ -6,7 +6,7 @@
         <div class="col">
           <div class="text-h6 text-blue-10">
             <q-icon name="fas fa-list-ul"/>
-            {{ $t('dashboard.headers.completedTasks') }}
+            {{ $t('headers.completedTasks') }}
           </div>
         </div>
 
@@ -56,7 +56,7 @@
             :key="task.id"
             v-bind="task">
             <q-item-section avatar>
-              <q-icon name="check_circle" class="text-primary" style="opacity: 0.8;"/>
+              <q-icon name="check_circle" class="text-secondary" style="opacity: 0.8;"/>
             </q-item-section>
             <q-item-section>
               <q-item-label>{{ task.label }}</q-item-label>
@@ -98,7 +98,7 @@
               <div class="col">
                 <div class="text-h6 text-blue-10">
                   <q-icon name="fas fa-list-ul"/>
-                  {{ $t('dashboard.headers.completedTasks') }}
+                  {{ $t('headers.completedTasks') }}
                 </div>
               </div>
 

src/components/Drawer.vue

@@ -2,17 +2,7 @@
   <q-scroll-area style="height: calc(100% - 150px); margin-top: 150px; border-right: 1px solid #ddd">
     <q-list padding>
 
-      <!--START LANGUAGE SELECT-->
-      <q-item clickable v-ripple>
-        <q-item-section avatar>
-          <q-icon name="language"/>
-        </q-item-section>
-        <q-item-section>
-          <LanguageSwitch/>
-        </q-item-section>
-      </q-item>
-      <!--END LANGUAGE SELECT-->
-
+      <q-item-label header>Account:</q-item-label>
       <!--START LOGOUT-->
       <q-item
         v-if="unmanicSession && unmanicSession.level && unmanicSession.level > 0"
@@ -47,15 +37,51 @@
           </form>
           Login
         </q-item-section>
-        <div>
-        </div>
       </q-item>
       <!--END LOGOUT-->
 
+      <q-separator spaced/>
+
+      <q-item-label header>Config:</q-item-label>
+      <!--START LANGUAGE SELECT-->
+      <q-item clickable v-ripple>
+        <q-item-section avatar>
+          <q-icon name="language"/>
+        </q-item-section>
+        <q-item-section>
+          <LanguageSwitch/>
+        </q-item-section>
+      </q-item>
+      <!--END LANGUAGE SELECT-->
+      <q-separator spaced/>
+
+      <q-item-label header>Documentation:</q-item-label>
+      <!--START PRIVACY POLICY-->
+      <q-item
+        clickable
+        @click="showPrivacyPolicyDialog"
+        v-ripple>
+        <q-item-section avatar>
+          <q-icon name="subject"/>
+        </q-item-section>
+        <q-item-section>
+          Privacy Policy
+        </q-item-section>
+      </q-item>
+      <!--END PRIVACY POLICY-->
+
     </q-list>
   </q-scroll-area>
 
   <Avatar/>
+
+  <q-img class="absolute-bottom lt-md" src="~assets/bg-md1.jpg" style="height: 120px">
+    <div class="absolute-top bg-transparent text-white">
+      <div class="q-pl-md">
+        <FooterData/>
+      </div>
+    </div>
+  </q-img>
 </template>
 
 <script>
@@ -67,9 +93,12 @@ import unmanicGlobals, { getUnmanicApiUrl } from "src/js/unmanicGlobals";
 import axios from "axios";
 import { useQuasar } from "quasar";
 import { useI18n } from "vue-i18n";
+import FooterData from "components/FooterData";
+import MarkdownDialog from "components/MarkdownDialog";
+import { markdownToHTML } from "src/js/markupParser";
 
 export default {
-  components: { Avatar, LanguageSwitch },
+  components: { Avatar, FooterData, LanguageSwitch },
   setup() {
     const $q = useQuasar();
     const { t: $t } = useI18n();
@@ -82,11 +111,30 @@ export default {
       unmanicSession.value = session;
     })
 
+    function showPrivacyPolicyDialog() {
+
+      unmanicGlobals.getUnmanicPrivacyPolicy().then((privacyPolicy) => {
+        console.log(privacyPolicy)
+        let privacyPolicyHtml = markdownToHTML(privacyPolicy);
+        console.log(privacyPolicyHtml)
+        $q.dialog({
+          component: MarkdownDialog,
+          // props forwarded to your custom component
+          componentProps: {
+            dialogHeader: $t('headers.privacyPolicy'),
+            dialogContent: privacyPolicyHtml
+          }
+        }).onDismiss(() => {
+        })
+      })
+    }
+
     return {
       unmanicSession,
       formAction,
       uuid,
       currentUri,
+      showPrivacyPolicyDialog,
     }
   },
   methods: {

src/components/FooterData.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="row">
+    <div class="col-12 col-md-6">
+      <p class="text-subtitle1">
+        <br>
+        Version - {{ unmanicVersion }}
+        <br>
+        2018 © Unmanic by Josh Sunnex.
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+import unmanicGlobals from "src/js/unmanicGlobals";
+import { onMounted, ref } from "vue";
+
+export default {
+  setup() {
+    const unmanicVersion = ref('UNSET')
+
+    function updateVersion() {
+      unmanicGlobals.getUnmanicVersion().then((version) => {
+        unmanicVersion.value = version;
+      })
+    }
+
+    onMounted(() => {
+      updateVersion();
+    })
+
+    return {
+      unmanicVersion
+    }
+  }
+}
+</script>