added a sacure version of the profile feature

src/components/editor_components/DocViewer.vue

@@ -2,7 +2,12 @@
   <div>
     <v-card v-if="file" width="800">
       <v-card-title>{{ file.title }}</v-card-title>
-      <v-card-subtitle>Besitzer: {{ file.author }}</v-card-subtitle>
+      <v-card-subtitle>
+        Besitzer: {{ file.author }}
+        <v-btn icon small @click="$emit('profile-click')"
+          ><v-icon>mdi-account-circle</v-icon></v-btn
+        >
+      </v-card-subtitle>
       <v-card-text class="contentBox">{{ file.content }}</v-card-text>
       <v-card-actions v-if="editable">
         <v-spacer></v-spacer>

src/components/editor_components/ProfileViewer_secure.vue

+<template>
+  <v-container>
+    <v-dialog width="500" v-model="opened">
+      <v-card>
+        <v-card-title>{{user.nickname}}</v-card-title>
+        <v-card-subtitle>{{user.email}}</v-card-subtitle>
+        <v-card-text>{{user.status}}</v-card-text>
+      </v-card>
+    </v-dialog>
+
+    <v-snackbar
+      v-model="snackbar.opened"
+      :timeout="snackbar.timeout"
+      :color="snackbarColor"
+      >{{ snackbar.text }}
+    </v-snackbar>
+  </v-container>
+</template>
+
+<script>
+import client from "../../services/Client";
+
+
+export default {
+  name: 'ProfileViwer',
+
+  data: ()=>({
+    script: `
+      <div>Hier komm ein Bild mit Script:
+        <img width="40px" height="40px" src="/a.png" onerror="
+          console.log('bild');
+          window.open('/we_tasks/task14/maliciousSite.html');
+        ">
+      </div>`,
+    opened: false,
+    snackbar: {
+      opened: false,
+      timeout: 3000,
+      success: false,
+      text: "",
+    },
+    user: {
+      accountname: '',
+      nickname: '',
+      email: '',
+      status: ''
+    }
+  }),
+  
+  methods: {
+    showProfile: function(accountname){
+      let payload = new FormData();
+      payload.append("accountname", accountname);
+      client.post(client.URLs.profile, payload).then((result)=>{
+        if (result.success){
+          this.opened = true;
+          this.user = result.user;
+        } else {
+          this.snackbar.success = result.success;
+          this.snackbar.text = result.message;
+          this.snackbar.opened = true;
+          this.opened = false;
+        }
+      });
+    }
+  },
+  computed: {
+    snackbarColor: function() {
+      return this.snackbar.success ? "success" : "error";
+    },
+  },
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/router/index.js

@@ -4,6 +4,7 @@ import Home from "../views/Home.vue";
 import Vuenavigator from "../views/Vuenavigator.vue";
 import Editor from "../views/Editor.vue";
 import Editor_unsecure from "../views/Editor_14_unsecure.vue";
+import Editor_secure from "../views/Editor_14_secure.vue";
 
 Vue.use(VueRouter);
 
@@ -36,6 +37,11 @@ const routes = [
     path: "/contenteditor_unsecure",
     name: "Editor_unsecure",
     component: Editor_unsecure
+  },
+  {
+    path: "/contenteditor_secure",
+    name: "Editor_secure",
+    component: Editor_secure
   }
 ];
 

src/views/Editor_14_secure.vue

+<template>
+  <div>
+    <v-app-bar app clipped-left dark>
+      <div class="d-flex align-center">
+        <v-img
+          alt="Vuetify Logo"
+          class="shrink mr-2"
+          contain
+          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
+          transition="scale-transition"
+          width="40"
+        />
+
+        <h1>WWW-Editor</h1>
+      </div>
+
+      <v-spacer></v-spacer>
+      <span v-if="user">Willkommen {{ user.nickname }}</span>
+      <v-spacer></v-spacer>
+
+      <v-btn
+        outlined
+        color="primary"
+        class="mr-5"
+        @click="$refs.registerDialog.showDialog()"
+        >Registrieren</v-btn
+      >
+      <v-btn
+        v-if="!user"
+        outlined
+        color="primary"
+        @click="$refs.loginDialog.showDialog()"
+        >Anmelden</v-btn
+      >
+      <v-btn
+        v-else
+        outlined
+        color="red"
+        @click="$refs.loginDialog.logout(user.sessionId)"
+        >Abmelden</v-btn
+      >
+    </v-app-bar>
+
+    <Register ref="registerDialog" />
+    <Login
+      ref="loginDialog"
+      @login-successfull="loadUser"
+      @logout-successfull="user = null"
+    />
+
+    <v-main>
+      <DocEditor
+        :user="user"
+        ref="DocEditorDialog"
+        @doc-updated="$refs.TreeView.getFileStructure()"
+        @doc-deleted="docDeletedHandler()"
+      ></DocEditor>
+      <ProfileViwer
+        ref="ProfileViwerDialog"></ProfileViwer>
+
+      <v-navigation-drawer app clipped>
+        <v-btn
+          color="primary"
+          block
+          v-if="user"
+          @click="$refs.DocEditorDialog.showDialog('Dokument', '/')"
+          >Neuer Eintrag</v-btn
+        >
+        <tree-view-explorer
+          ref="TreeView"
+          @item-click="loadFile"
+        ></tree-view-explorer>
+      </v-navigation-drawer>
+      <v-layout align-center justify-center>
+        <DocViewer
+          :editable="docEditable"
+          :file="file"
+          ref="DocViewer"
+          @doc-delete="$refs.DocEditorDialog.deleteDocument(file)"
+          @profile-click="profileClickHandler()"
+          @doc-change="
+            $refs.DocEditorDialog.showDialog(
+              file.title,
+              file.directory,
+              file.content
+            )"
+        ></DocViewer>
+      </v-layout>
+    </v-main>
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-debugger, no-console */
+
+import client from "../services/Client";
+client.setURLs("http://localhost:80/we_tasks/task12/navigator_services");
+
+import Register from "../components/editor_components/Register";
+import Login from "../components/editor_components/Login";
+import TreeViewExplorer from "../components/editor_components/TreeViewExplorer";
+import DocEditor from "../components/editor_components/DocEditor";
+import DocViewer from "../components/editor_components/DocViewer";
+import ProfileViwer from "../components/editor_components/ProfileViewer_secure";
+
+export default {
+  name: "App",
+  created() {
+    this.$vuetify.theme.dark = true;
+  },
+  components: {
+    Register,
+    Login,
+    TreeViewExplorer,
+    DocEditor,
+    DocViewer,
+    ProfileViwer
+  },
+  data: () => ({
+    user: null,
+    file: null,
+  }),
+  computed: {
+    snackbarColor: function() {
+      return this.snackbar.success ? "success" : "error";
+    },
+    docEditable() {
+      if (this.user && this.file) {
+        return this.user.accountname === this.file.author;
+      }
+      return false;
+    },
+  },
+  methods: {
+    loadUser(data) {
+      console.log(data);
+      this.user = data;
+    },
+    loadFile(fileId) {
+      this.$refs.DocViewer.getFile(fileId).then((result) => {
+        this.file = result;
+      });
+    },
+    docDeletedHandler() {
+      this.$refs.TreeView.getFileStructure();
+      this.file = null;
+    },
+    profileClickHandler() {
+      this.$refs.ProfileViwerDialog.showProfile(this.file.author);
+    },
+  },
+};
+</script>

src/views/Editor_14_unsecure.vue

@@ -100,8 +100,8 @@ import Register from "../components/editor_components/Register";
 import Login from "../components/editor_components/Login";
 import TreeViewExplorer from "../components/editor_components/TreeViewExplorer";
 import DocEditor from "../components/editor_components/DocEditor";
-import DocViewer from "../components/editor_components_14_unsecure/DocViewer";
-import ProfileViwer from "../components/editor_components_14_unsecure/ProfileViewer";
+import DocViewer from "../components/editor_components/DocViewer";
+import ProfileViwer from "../components/editor_components/ProfileViewer_unsecure";
 
 export default {
   name: "App",

src/views/Home.vue

@@ -133,7 +133,9 @@
             <v-expansion-panel-content>
               Aufgabe 14.1: XSS
               <br>
-              <router-link to="/contenteditor_unsecure">Unsichere Content-Editor</router-link>
+              <router-link to="/contenteditor_unsecure">Unsicherer Content-Editor</router-link>
+              <br>
+              <router-link to="/contenteditor_secure">Sicherer Content-Editor</router-link>
             </v-expansion-panel-content>
           </v-expansion-panel>
         </v-expansion-panels>