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">
-        <p @click="goToLogout" class="btn-login">
-            Выйти
-        </p>
-    </header>
+    <HeaderMenu :add-logout="true"/>
 
     <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>