add menu

src/components/HeaderMenu.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+const props = defineProps({
+    addLogin: {
+        type: Boolean,
+        required: false
+    },
+    addLogout: {
+        type: Boolean,
+        required: false
+    },
+    isFoundKey: {
+        type: Boolean,
+        required: false
+    },
+})
+
+import { getAuthClient } from '@/api/auth_client';
+import { useAuthStore } from '@/stores/auth';
+import { useMessage } from 'naive-ui';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { NIcon } from 'naive-ui'
+import { Key24Regular } from '@vicons/fluent'
+import { DoorOpen } from '@vicons/fa'
+import { h } from 'vue'
+import { DoorFrontFilled } from '@vicons/material'
+
+const authStore = useAuthStore();
+const router = useRouter()
+const client = getAuthClient();
+const message = useMessage()
+
+const permissions = ref<string[]>([]);
+
+
+async function getPermissions() {
+    permissions.value = []
+    const res = await client.GetPermissions({})
+    permissions.value = res.permissions!
+}
+getPermissions()
+
+function hasPermission(permission: string): boolean {
+    return permissions.value.includes(permission)
+}
+
+const goToLogin = () => {
+    if (props.isFoundKey) {
+        router.push('/login')
+        return
+    }
+    message.create(
+        "Дверь закрыта, куда же подевался ключ?",
+        {
+            icon: () => h(NIcon, null, { default: () => h(Key24Regular) })
+        }
+    )
+}
+
+const goToLogout = () => {
+    authStore.logout()
+    router.push('/login')
+}
+</script>
+
+<template>
+    <div class="menu-block">
+        <div class="left-group">
+            <div class="menu-item-block">
+                Кабинет
+            </div>
+            <div class="menu-item-block" v-if="hasPermission('games_page')">
+                Игры
+            </div>
+            <div class="menu-item-block" v-if="hasPermission('scenarios_page')">
+                Мои сценарии
+            </div>
+            <div class="menu-item-block" v-if="hasPermission('users_page')">
+                Пользователи
+            </div>
+        </div>
+
+        <div class="right-group">
+            <div v-if="props.addLogin" class="menu-item-block right" @click="goToLogin">
+                <Icon v-if="isFoundKey" class="door-icon">
+                    <DoorOpen />
+                </Icon>
+                <Icon v-else class="door-icon">
+                    <DoorFrontFilled />
+                </Icon>
+                Войти
+            </div>
+            <div v-if="props.addLogout" class="menu-item-block right" @click="goToLogout">
+                Выйти
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.menu-block {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 70px;
+    /* background-color: brown; */
+
+    padding: 20px;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.menu-item-block {
+    display: inline-block;
+    margin-left: 10px;
+    cursor: pointer;
+    padding: 5px 5px;
+    font-size: 1.1em;
+}
+
+.menu-item-block:hover {
+    color: #63e2b7;
+    opacity: 0.8;
+}
+
+.right {
+    margin-left: auto;
+}
+
+.door-icon {
+    float: left;
+    width: 25px;
+    padding-top: 3px;
+    padding-right: 5px;
+}
+</style>

src/components/LoginPage.vue

@@ -109,7 +109,7 @@ async function signup() {
     message.error(authStore.error)
     return
   }
-  message.error("Пароль отправлен на почту")
+  message.info("Пароль отправлен на почту")
 }
 </script>
 

src/components/OfficePage.vue

@@ -1,9 +1,25 @@
+<script setup lang="ts">
+import { getAuthClient } from '@/api/auth_client';
+import { useAuthStore } from '@/stores/auth';
+import { ref } from 'vue';
+import HeaderMenu from '@/components/HeaderMenu.vue'
+
+const authStore = useAuthStore();
+const client = getAuthClient();
+
+const permissions = ref<string[]>([])
+
+async function getPermissions() {
+    permissions.value = []
+    const res = await client.GetPermissions({})
+    permissions.value = res.permissions!
+}
+
+getPermissions()
+</script>
+
 <template>
-    <header class="header">
+    <HeaderMenu :add-logout="true"/>
-        <p @click="goToLogout" class="btn-login">
-            Выйти
-        </p>
-    </header>
 
     <p>
         Доброго времени суток, {{ authStore.username }}.
@@ -12,33 +28,7 @@
         {{ authStore.userRoles }}
     </p>
 
-    <button @click="getPermissions">Права</button>
     {{ permissions }}
 </template>
 
-<script setup lang="ts">
-import { getAuthClient } from '@/api/auth_client';
-import router from '@/router';
-import { useAuthStore } from '@/stores/auth';
-import { ref } from 'vue';
-
-const authStore = useAuthStore();
-
-const client = getAuthClient()
-
-const permissions = ref<string[]>([])
-
-const goToLogout = () => {
-    authStore.logout()
-
-    router.push('/login')
-}
-
-async function getPermissions() {
-    permissions.value = []
-    const res = await client.GetPermissions({})
-    permissions.value = res.permissions!
-}
-</script>
-
 <style scoped></style>

src/views/HomeView.vue

@@ -1,16 +1,8 @@
 <script setup lang="ts">
-import { DoorFrontFilled } from '@vicons/material'
-import { DoorOpen } from '@vicons/fa'
 import { Key24Regular } from '@vicons/fluent'
 import { Icon } from '@vicons/utils'
 import { computed, ref } from 'vue';
-import { useRouter } from 'vue-router'
+import HeaderMenu from '@/components/HeaderMenu.vue'
-import { NIcon, useMessage } from 'naive-ui'
-import { h } from 'vue'
-
-const router = useRouter()
-
-const message = useMessage()
 
 const isFoundKey = ref(false)
 
@@ -19,38 +11,10 @@ const keyColorClass = computed(() => {
     'gold-color': isFoundKey.value
   }
 })
-
-
-const goToLogin = () => {
-  if (isFoundKey.value) {
-    router.push('/login')
-    return
-  }
-  message.create(
-    "Дверь закрыта, куда же подевался ключ?",
-    {
-      icon: () => h(NIcon, null, { default: () => h(Key24Regular) })
-    }
-  )
-}
 </script>
 
-<!-- Главная страница -->
 <template>
-  <header class="header">
+  <HeaderMenu :add-login="true" :is-found-key="isFoundKey"/>
-    <p @click="goToLogin" class="btn-login">
-
-      <Icon v-if="isFoundKey" class="door-icon">
-        <DoorOpen />
-      </Icon>
-      <Icon v-else class="door-icon">
-        <DoorFrontFilled />
-      </Icon>
-
-      Войти
-    </p>
-  </header>
-
   <main>
     <h1 class="font-text">
       Вечерний детектив
@@ -68,23 +32,6 @@ const goToLogin = () => {
 </template>
 
 <style lang="css">
-.header {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 40px;
-}
-
-.btn-login {
-  position: fixed;
-  top: 0;
-  right: 0;
-  padding: 8px 14px;
-  cursor: pointer;
-  user-select: none;
-}
-
 .font-text {
   font-family: font_old_typer;
 }
@@ -101,11 +48,6 @@ const goToLogin = () => {
   cursor: pointer;
 }
 
-.door-icon {
-  position: relative;
-  top: 3px;
-}
-
 .gold-color {
   color: gold;
 }