Introduce admin and guest context (#33)

Implements and fixes #32

frontend/src/assets/primefaces/theme-base/components/menu/_menubar.scss

@@ -35,7 +35,7 @@
   }
 }
 
-@media screen and (max-width: 960px) {
+@media screen and (max-width: 320px) {
   .p-menubar {
     position: relative;
 

frontend/src/assets/primefaces/themes/ablegram/_extensions.scss

@@ -122,3 +122,9 @@
       box-shadow $transitionDuration;
   }
 }
+
+/* fix background for Menubar and MegaMenu in mobile view */
+.p-menubar-root-list,
+.p-megamenu-panel {
+  background-color: white;
+}

frontend/src/components/auth/LoginWithPasswordForm.vue

@@ -0,0 +1,66 @@
+<template>
+  <FormGrid @submit="onFormSubmit" class="mb-3">
+    <FormRow>
+      <PasswordInput
+        :disabled="isSubmitting"
+        name="password"
+        :label="t('user-avatar.form.master-password.title')"
+        :help="t('user-avatar.form.master-password.help')"
+      />
+    </FormRow>
+
+    <SubmitButton :label="t('user-avatar.login')" :loading="isSubmitting" v-model="isSaved" />
+  </FormGrid>
+</template>
+
+<script setup lang="ts">
+import FormRow from '@/components/structure/form/FormRow.vue'
+import FormGrid from '@/components/structure/form/FormGrid.vue'
+import SubmitButton from '@/components/structure/form/SubmitButton.vue'
+import { useForm } from 'vee-validate'
+import { object, string } from 'yup'
+import { useI18n } from 'vue-i18n'
+import { ref } from 'vue'
+import { ApiError, fetchApi } from '@/plugins/api'
+import { useSessionStore } from '@/stores/session'
+import PasswordInput from '@/components/structure/form/PasswordInput.vue'
+
+const { t } = useI18n()
+const { hello } = useSessionStore()
+
+const isSaved = ref<boolean>(false)
+
+const { handleSubmit, isSubmitting, setFieldError } = useForm<{ password: string }>({
+  initialValues: {
+    password: ''
+  },
+  validationSchema: object().shape({
+    password: string().required().label(t('user-avatar.form.master-password.title'))
+  })
+})
+
+const onFormSubmit = handleSubmit(async (v) => {
+  try {
+    await fetchApi<{ password: string }>('/api/auth/password', {
+      method: 'POST',
+      body: JSON.stringify(v)
+    })
+
+    await hello()
+  } catch (e) {
+    if (e instanceof ApiError) {
+      switch (e.statusCode) {
+        case 403:
+          setFieldError('password', t('user-avatar.errors.password-invalid'))
+          return
+        case 405:
+          setFieldError('password', t('user-avatar.errors.master-password-not-set'))
+          return
+        default:
+          setFieldError('password', t('user-avatar.errors.unknown'))
+          return
+      }
+    }
+  }
+})
+</script>

frontend/src/components/auth/UserAvatar.vue

@@ -0,0 +1,46 @@
+<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>
+
+    <Button :label="t('user-avatar.logout')" @click="goodbye" v-if="isAdmin" />
+    <LoginWithPasswordForm v-if="isGuest" />
+  </OverlayPanel>
+</template>
+
+<script setup lang="ts">
+import OverlayPanel from 'primevue/overlaypanel'
+import LoginWithPasswordForm from '@/components/auth/LoginWithPasswordForm.vue'
+import Button from 'primevue/button'
+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 { goodbye } = useSessionStore()
+
+const userPanel = ref()
+
+const openUserPanel = (event: Event) => {
+  userPanel.value.toggle(event)
+}
+</script>
+
+<style scoped lang="scss"></style>