From 14a7fedf7f6fe97af1f3934d1d3a01aa9e6596e2 Mon Sep 17 00:00:00 2001
From: Johannes Baum <4518664+Annoraaq@users.noreply.github.com>
Date: Fri, 1 Nov 2024 17:50:39 +0000
Subject: [PATCH] add user avatar to app bar

---
 timesketch/frontend-v3/package.json           |  3 ++-
 timesketch/frontend-v3/src/filters.js         | 22 +++++++++++++++++++
 timesketch/frontend-v3/src/layouts/AppBar.vue | 17 ++++++++++++--
 .../src/layouts/{default.vue => Default.vue}  |  0
 timesketch/frontend-v3/src/main.js            |  6 +++++
 5 files changed, 45 insertions(+), 3 deletions(-)
 create mode 100644 timesketch/frontend-v3/src/filters.js
 rename timesketch/frontend-v3/src/layouts/{default.vue => Default.vue} (100%)

diff --git a/timesketch/frontend-v3/package.json b/timesketch/frontend-v3/package.json
index 758f143fd1..078620c10b 100644
--- a/timesketch/frontend-v3/package.json
+++ b/timesketch/frontend-v3/package.json
@@ -13,7 +13,8 @@
     "dayjs": "^1.11.13",
     "roboto-fontface": "*",
     "vue": "^3.4.31",
-    "vuetify": "^3.6.11"
+    "vuetify": "^3.6.11",
+    "axios": "^1.7.7"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.5",
diff --git a/timesketch/frontend-v3/src/filters.js b/timesketch/frontend-v3/src/filters.js
new file mode 100644
index 0000000000..6743ae6a7f
--- /dev/null
+++ b/timesketch/frontend-v3/src/filters.js
@@ -0,0 +1,22 @@
+/*
+Copyright 2024 Google Inc. All rights reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+export const initialLetter = (input) => {
+  if (!input) return '';
+  input = input.toString();
+  return input.charAt(0).toUpperCase();
+};
+
diff --git a/timesketch/frontend-v3/src/layouts/AppBar.vue b/timesketch/frontend-v3/src/layouts/AppBar.vue
index f3399004d5..ae1327ddb4 100644
--- a/timesketch/frontend-v3/src/layouts/AppBar.vue
+++ b/timesketch/frontend-v3/src/layouts/AppBar.vue
@@ -29,17 +29,30 @@ limitations under the License.
       >
       </v-img>
     </template>
-    <template v-slot:append> Right hand side </template>
+    <template v-slot:append>
+      <v-avatar color="grey lighten-1" size="25" class="ml-3">
+        <span class="white--text">{{ $filters.initialLetter(currentUser) }}</span>
+      </v-avatar>
+    </template>
   </v-toolbar>
   <v-divider></v-divider>
 </template>
 
 <script>
+import ApiClient from '../utils/RestApiClient.js'
 export default {
   data() {
-    return {};
+    return {
+      currentUser: '',
+    };
   },
   computed: {},
   methods: {},
+  created: function () {
+    ApiClient.getLoggedInUser().then((response) => {
+      let currentUser = response.data.objects[0].username;
+      this.currentUser = currentUser;
+    });
+  },
 };
 </script>
diff --git a/timesketch/frontend-v3/src/layouts/default.vue b/timesketch/frontend-v3/src/layouts/Default.vue
similarity index 100%
rename from timesketch/frontend-v3/src/layouts/default.vue
rename to timesketch/frontend-v3/src/layouts/Default.vue
diff --git a/timesketch/frontend-v3/src/main.js b/timesketch/frontend-v3/src/main.js
index 8bbc3a1e89..0de2781a50 100644
--- a/timesketch/frontend-v3/src/main.js
+++ b/timesketch/frontend-v3/src/main.js
@@ -10,6 +10,8 @@ import { registerPlugins } from "@/plugins";
 // Components
 import App from "./App.vue";
 
+import {initialLetter} from "./filters.js";
+
 // Composables
 import { createApp } from "vue";
 
@@ -18,3 +20,7 @@ const app = createApp(App);
 registerPlugins(app);
 
 app.mount("#app");
+
+app.config.globalProperties.$filters = {
+  initialLetter
+}