Add role user and history interfaces to pusher mechanic (#36)

README.md

@@ -4,19 +4,21 @@ Ablegram is a free and independent tool designed with Ableton users in mind, alt
 
 As a standalone application, Ablegram requires no installation or online connectivity. It's designed to work effectively across Windows, MacOS and Linux platforms.
 
-![Screenshot of the search result view](website/docs/public/assets/screenshots/overview-v1.4.0.png "Screenshot of the search result view")
+![Screenshot of the search result view](website/docs/public/assets/screenshots/overview-v1.5.1.png "Screenshot of the search result view")
 
 ## Features
 
 - Cross-platform: Ablegram is designed to be platform independent. Whether you're using Windows, MacOS or Linux, you can use the tool with ease.
 
-- No installation required: Just download and run. No installation steps are required, ensuring a hassle-free experience (as far as the OS allows).
+- Open source, no subscription fees. No Internet connection or subscription required.
 
-- Offline functionality: Use Ablegram completely offline. No Internet connection or subscription plans are required.
+- No installation required: Just download and run. No installation steps are required, ensuring a hassle-free experience (as far as the operating system allows).
 
-- Comprehensive indexing: Ablegram creates a full text index of your Ableton files - covering Live Sets, audio tracks and MIDI tracks.
+- Comprehensive indexing: Ablegram creates a full-text index of your Ableton files - including Live Sets, audio and MIDI tracks, and many other elements.
 
-- Search Flexibility: Search your files using text components or tags. Ablegram makes it easy to find what you're looking for in your projects.
+- Search flexibility: Search your files by text components or tags. Ablegram makes it easy to find what you're looking for in your projects.
+
+- Share or collaborate, make your search available to your mobile device or other guests while you work on your current project.
 
 ## Getting Started
 

frontend/package.json

@@ -24,6 +24,7 @@
     "primeicons": "^6.0.1",
     "primevue": "^3.37.0",
     "prismjs": "^1.29.0",
+    "uniqolor": "^1.1.0",
     "vee-validate": "^4.11.8",
     "vue": "^3.3.4",
     "vue-i18n": "^9.5.0",

frontend/src/components/auth/LoginWithPasswordForm.vue

@@ -31,8 +31,8 @@ import PasswordInput from '@/components/structure/form/PasswordInput.vue'
 import { useRouter } from 'vue-router'
 
 const { t } = useI18n()
-const { hello } = useSessionStore()
 const router = useRouter()
+const { reconsider } = useSessionStore()
 
 const isSaved = ref<boolean>(false)
 
@@ -52,7 +52,7 @@ const onFormSubmit = handleSubmit(async (v) => {
       body: JSON.stringify(v)
     })
 
-    await hello()
+    await reconsider()
 
     await router.push({ name: 'app' })
   } catch (e) {

frontend/src/components/auth/LogoutForm.vue

@@ -0,0 +1,24 @@
+<template>
+  <Button :label="t('user-avatar.logout')" @click="logout" v-if="isAdmin" />
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { useI18n } from 'vue-i18n'
+import { useSessionStore } from '@/stores/session'
+import { useRouter } from 'vue-router'
+import { storeToRefs } from 'pinia'
+
+const { t } = useI18n()
+const { goodbye, reconsider } = useSessionStore()
+const router = useRouter()
+
+const { isAdmin } = storeToRefs(useSessionStore())
+
+const logout = async () => {
+  await goodbye()
+  await reconsider()
+
+  await router.push({ name: 'app' })
+}
+</script>

frontend/src/components/auth/MyAvatar.vue

@@ -0,0 +1,43 @@
+<template>
+  <Avatar
+    icon="pi pi-user"
+    class="mr-2"
+    :class="{ 'bg-black-alpha-90 text-white': isAdmin, 'text-black-alpha-90': isGuest }"
+    @click="openUserPanel"
+  />
+  <OverlayPanel ref="userPanel" class="w-full md:w-24rem">
+    <div class="mb-3">
+      <p class="font-semibold">
+        {{ username }} [{{ isAdmin ? t('role.admin') : t('role.guest') }}]
+      </p>
+      <i18n-t keypath="user-avatar.from-ip" tag="p">
+        <template v-slot:ip>
+          <code class="text-sm p-1 bg-black-alpha-10">{{ ip }}</code>
+        </template>
+      </i18n-t>
+    </div>
+
+    <LoginWithPasswordForm v-if="isGuest" />
+    <LogoutForm v-if="!isGuest" />
+  </OverlayPanel>
+</template>
+
+<script setup lang="ts">
+import OverlayPanel from 'primevue/overlaypanel'
+import LoginWithPasswordForm from '@/components/auth/LoginWithPasswordForm.vue'
+import LogoutForm from '@/components/auth/LogoutForm.vue'
+import Avatar from 'primevue/avatar'
+import { useI18n } from 'vue-i18n'
+import { storeToRefs } from 'pinia'
+import { useSessionStore } from '@/stores/session'
+import { ref } from 'vue'
+
+const { t } = useI18n()
+const { username, ip, isGuest, isAdmin } = storeToRefs(useSessionStore())
+
+const userPanel = ref()
+
+const openUserPanel = (event: Event) => {
+  userPanel.value.toggle(event)
+}
+</script>