2 Commits

Author SHA1 Message Date
TeamCity
7c8cf6503b ci: bump version to v0.11.0 2025-12-10 16:09:56 +00:00
f05f10ea56 feat(ui): FRO-13 User Component (#18)
Added possibility to log off as a user

Co-authored-by: LQ63 <lkhermann@web.de>
Reviewed-on: #18
Reviewed-by: Janis <janis-e@gmx.de>
Co-authored-by: lq64 <lq@blackhole.local>
Co-committed-by: lq64 <lq@blackhole.local>
2025-12-10 17:08:23 +01:00
4 changed files with 102 additions and 10 deletions

View File

@@ -93,3 +93,8 @@
### Features ### Features
* FRO-24 Create Played Cards Component ([#17](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/17)) ([21db939](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/21db939d342c72f5ad5fad3b4f873e902d1e5a0f)) * FRO-24 Create Played Cards Component ([#17](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/17)) ([21db939](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/21db939d342c72f5ad5fad3b4f873e902d1e5a0f))
## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.10.0...0.0.0) (2025-12-10)
### Features
* **ui:** FRO-13 User Component ([#18](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/18)) ([f05f10e](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/f05f10ea56b21f15cefbc76277ead5806eb1cf18))

81
src/components/User.vue Normal file
View File

@@ -0,0 +1,81 @@
<script setup lang="ts">
import { useUserInfo } from "@/composables/useUserInfo.ts";
import { useRouter } from 'vue-router';
import {useQuasar} from "quasar";
import axios from "axios";
const api = window?.__RUNTIME_CONFIG__?.API_URL;
const $q = useQuasar()
let userinfo = useUserInfo();
const router = useRouter();
const handleLogoff = () => {
axios.post(`${api}/logout`, {}, {withCredentials: true}).then((response) => {
const responseData = response.data
console.log("Response" + responseData.status)
$q.notify({
message: `You successfully logged out!`,
color: 'green-6',
icon: 'check_circle',
position: 'top'
});
router.push({ name: 'login' });
}).catch((err) => {
console.log("ERROR:" + err)
$q.notify({
message: `Something went wrong`,
color: 'red-6',
icon: 'cancel',
position: 'top'
});
})
}
</script>
<template>
<div class="row items-center q-gutter-x-md">
<div
v-if="userinfo.username"
class="text-body1 text-weight-medium row items-center q-gutter-x-sm cursor-pointer relative-position"
>
<div id="user-menu-target" class="row items-center q-gutter-x-sm" style="min-width: 150px">
<q-icon name="account_circle" size="md" />
<span>{{ userinfo.username }}</span>
<q-icon name="arrow_drop_down" size="sm" />
</div>
<q-menu
target="#user-menu-target"
anchor="bottom right"
self="top right"
>
<q-list style="max-width: 150px" class="bg-dark">
<q-item
clickable
v-close-popup
@click="handleLogoff"
class="text-negative"
>
<q-item-section avatar>
<q-icon name="logout" color="negative" />
</q-item-section>
<q-item-section>Log Off</q-item-section>
</q-item>
</q-list>
</q-menu>
</div>
<div v-else class="text-caption text-grey-4">
Not Logged In
</div>
</div>
</template>
<style scoped>
#user-menu-target:hover {
opacity: 0.8;
}
</style>

View File

@@ -1,18 +1,24 @@
<script setup lang="ts"> <script setup lang="ts">
import MainMenuBoxes from "@/components/MainMenuBoxes.vue"; import UserStatusArea from '../components/User.vue'
</script> </script>
<template> <template>
<q-layout view="hHh lpR fFf" class="font-roboto"> <q-layout view="hHh lpR fFf" class="font-roboto">
<q-page-container> <q-header elevated class="bg-dark text-white">
<q-page class="flex justify-start items-center column"> <q-toolbar>
<q-toolbar-title class="q-ml-md">
</q-toolbar-title>
<header class="text-center q-mb-xl"> <UserStatusArea />
<h1 class="game-title text-white q-my-none"> </q-toolbar>
KnockOutWhist </q-header>
</h1>
</header> <q-page-container>
<router-view></router-view> <q-page class="flex justify-start items-center column q-pa-md"> <header class="text-center q-mb-xl q-mt-md"> <h1 class="game-title text-white q-my-none">
KnockOutWhist
</h1>
</header>
<router-view></router-view>
</q-page> </q-page>
</q-page-container> </q-page-container>
</q-layout> </q-layout>

View File

@@ -1,3 +1,3 @@
MAJOR=0 MAJOR=0
MINOR=10 MINOR=11
PATCH=0 PATCH=0