Transfered files from flaschengeist main tree
This commit is contained in:
parent
a108cbdbbd
commit
5a5bbd0dbd
|
|
@ -0,0 +1,40 @@
|
|||
{
|
||||
"private": true,
|
||||
"license": "MIT",
|
||||
"version": "1.0.0-alpha.1",
|
||||
"name": "@flaschengeist/users",
|
||||
"author": "Ferdinand <rpm@fthiessen.de>",
|
||||
"homepage": "https://flaschengeist.dev/Flaschengeist",
|
||||
"description": "Flaschengeist users plugin",
|
||||
"bugs": {
|
||||
"url": "https://flaschengeist.dev/Flaschengeist/flaschengeist/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://flaschengeist.dev/Flaschengeist/flaschengeist-users"
|
||||
},
|
||||
"main": "src/index.ts",
|
||||
"types": "src/index.ts",
|
||||
"scripts": {
|
||||
"valid": "tsc --noEmit",
|
||||
"pretty": "prettier --config ./package.json --write '{,!(node_modules)/**/}*.ts'"
|
||||
},
|
||||
"devDependencies": {
|
||||
"prettier": "^2.3.0",
|
||||
"typescript": "^4.2.4",
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@flaschengeist/types": "^0.0.1-alpha.1",
|
||||
"@flaschengeist/api": "^1.0.0-alpha.1",
|
||||
"pinia": "^2.0.0-alpha.18",
|
||||
"quasar": "^2.0.0-beta.17",
|
||||
"@quasar/app": "^3.0.0-beta.25"
|
||||
},
|
||||
"prettier": {
|
||||
"singleQuote": true,
|
||||
"semi": true,
|
||||
"printWidth": 100,
|
||||
"arrowParens": "always"
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<template>
|
||||
<q-card class="12">
|
||||
<q-card-section class="fit row justify-start content-center items-center">
|
||||
<div class="col-xs-12 col-sm-6 text-center text-h6">Neues Mitglied</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<MainUserSettings :user="user" :new-user="true" @update:user="setUser" />
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import MainUserSettings from './settings/MainUserSettings.vue';
|
||||
import { useUserStore } from '@flaschengeist/api';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'NewUser',
|
||||
components: { MainUserSettings },
|
||||
setup() {
|
||||
const userStore = useUserStore();
|
||||
const user = ref<FG.User>({
|
||||
userid: '',
|
||||
display_name: '',
|
||||
firstname: '',
|
||||
lastname: '',
|
||||
mail: '',
|
||||
roles: [],
|
||||
});
|
||||
|
||||
async function setUser(value: FG.User) {
|
||||
await userStore.createUser(value);
|
||||
}
|
||||
return { user, setUser };
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<template>
|
||||
<q-card class="col-12">
|
||||
<q-card-section class="fit row justify-start content-center items-center">
|
||||
<div class="col-xs-12 col-sm-6 text-center text-h6">Benutzereinstellungen</div>
|
||||
<div class="col-xs-12 col-sm-6 q-pa-sm">
|
||||
<UserSelector v-model="user" />
|
||||
</div>
|
||||
</q-card-section>
|
||||
<MainUserSettings :user="user" @update:user="updateUser" />
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import MainUserSettings from './settings/MainUserSettings.vue';
|
||||
import UserSelector from './UserSelector.vue';
|
||||
import { useMainStore, useUserStore } from '@flaschengeist/api';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'UpdateUser',
|
||||
components: { UserSelector, MainUserSettings },
|
||||
setup() {
|
||||
const mainStore = useMainStore();
|
||||
const userStore = useUserStore();
|
||||
const user = ref(mainStore.currentUser);
|
||||
|
||||
async function updateUser(value: FG.User) {
|
||||
await userStore.updateUser(value);
|
||||
user.value = value
|
||||
}
|
||||
|
||||
return {
|
||||
user,
|
||||
updateUser,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<template>
|
||||
<q-select
|
||||
v-model="selected"
|
||||
filled
|
||||
:label="label"
|
||||
:options="users"
|
||||
option-label="display_name"
|
||||
option-value="userid"
|
||||
map-options
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, PropType, onBeforeMount } from 'vue';
|
||||
import { useUserStore } from '@flaschengeist/api';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'UserSelector',
|
||||
props: {
|
||||
label: { type: String, default: 'Benutzer' },
|
||||
modelValue: { default: undefined, type: Object as PropType<FG.User | undefined> },
|
||||
},
|
||||
emits: { 'update:modelValue': (user: FG.User) => !!user },
|
||||
setup(props, { emit }) {
|
||||
const userStore = useUserStore();
|
||||
|
||||
onBeforeMount(() => {
|
||||
void userStore.getUsers(false);
|
||||
});
|
||||
|
||||
const users = computed(() => userStore.users);
|
||||
const selected = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (value: FG.User | undefined) => (value ? emit('update:modelValue', value) : undefined),
|
||||
});
|
||||
|
||||
return {
|
||||
selected,
|
||||
users,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<template>
|
||||
<q-card style="text-align: center">
|
||||
<q-card-section class="row justify-center content-stretch">
|
||||
<div v-if="avatar" class="col-4">
|
||||
<div style="width: 100%; padding-bottom: 100%; position: relative">
|
||||
<q-avatar style="position: absolute; top: 0; left: 0; width: 100%; height: 100%">
|
||||
<img :src="avatarLink" :onerror="error" />
|
||||
</q-avatar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<span class="text-h6">Hallo {{ name }}</span
|
||||
><br />
|
||||
<span v-if="hasBirthday">Herzlichen Glückwunsch zum Geburtstag!<br /></span>
|
||||
<span v-if="birthday.length > 0"
|
||||
>Heute <span v-if="birthday.length === 1">hat </span><span v-else>haben </span
|
||||
><span v-for="(user, index) in birthday" :key="index"
|
||||
>{{ user.display_name }}<span v-if="index < birthday.length - 1">, </span></span
|
||||
>
|
||||
Geburtstag.</span
|
||||
>
|
||||
<span v-else>Heute stehen keine Geburtstage an</span>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { useMainStore, useUserStore } from '@flaschengeist/api';
|
||||
import { computed, defineComponent, onMounted, ref } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Greeting',
|
||||
setup() {
|
||||
const mainStore = useMainStore();
|
||||
const userStore = useUserStore();
|
||||
|
||||
// Ensure users are loaded,so we can query birthdays
|
||||
onMounted(() => userStore.getUsers(false));
|
||||
|
||||
const avatar = ref(true);
|
||||
const name = ref(mainStore.currentUser.firstname);
|
||||
const avatarLink = ref(mainStore.currentUser.avatar_url);
|
||||
|
||||
function error() {
|
||||
avatar.value = false;
|
||||
}
|
||||
|
||||
function userHasBirthday(user: FG.User) {
|
||||
const today = new Date();
|
||||
return (
|
||||
user.birthday &&
|
||||
user.birthday.getMonth() === today.getMonth() &&
|
||||
user.birthday.getDate() === today.getDate()
|
||||
);
|
||||
}
|
||||
|
||||
const hasBirthday = computed(() => {
|
||||
return userHasBirthday(mainStore.currentUser);
|
||||
});
|
||||
|
||||
const birthday = computed(() =>
|
||||
userStore.users
|
||||
.filter(userHasBirthday)
|
||||
.filter((user) => user.userid !== mainStore.currentUser.userid)
|
||||
);
|
||||
|
||||
return { avatar, avatarLink, error, name, hasBirthday, birthday };
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,210 @@
|
|||
<template>
|
||||
<q-form @submit="save" @reset="reset">
|
||||
<q-card-section class="fit row justify-start content-center items-center">
|
||||
<q-input
|
||||
v-model="userModel.firstname"
|
||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||
label="Vorname"
|
||||
:rules="[notEmpty]"
|
||||
autocomplete="given-name"
|
||||
filled
|
||||
/>
|
||||
<q-input
|
||||
v-model="userModel.lastname"
|
||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||
label="Nachname"
|
||||
:rules="[notEmpty]"
|
||||
autocomplete="family-name"
|
||||
filled
|
||||
/>
|
||||
<q-input
|
||||
v-model="userModel.display_name"
|
||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||
label="Angezeigter Name"
|
||||
:rules="[notEmpty]"
|
||||
autocomplete="nickname"
|
||||
filled
|
||||
/>
|
||||
<q-input
|
||||
v-model="userModel.mail"
|
||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||
label="E-Mail"
|
||||
:rules="[isEmail, notEmpty]"
|
||||
autocomplete="email"
|
||||
filled
|
||||
/>
|
||||
<q-input
|
||||
v-model="userModel.userid"
|
||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||
label="Benutzername"
|
||||
:readonly="!newUser"
|
||||
:rules="newUser ? [isFreeUID, notEmpty] : []"
|
||||
autocomplete="username"
|
||||
filled
|
||||
/>
|
||||
<q-select
|
||||
v-model="userModel.roles"
|
||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||
label="Rollen"
|
||||
filled
|
||||
multiple
|
||||
use-chips
|
||||
:readonly="!canSetRoles"
|
||||
:options="allRoles"
|
||||
option-label="name"
|
||||
option-value="name"
|
||||
/>
|
||||
<IsoDateInput
|
||||
v-model="userModel.birthday"
|
||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||
label="Geburtstag"
|
||||
autocomplete="bday"
|
||||
/>
|
||||
<q-file
|
||||
v-model="avatar"
|
||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||
filled
|
||||
label="Avatar"
|
||||
accept=".jpg, image/*"
|
||||
max-file-size="204800"
|
||||
hint="Bilddateien, max. 200 KiB"
|
||||
@rejected="onAvatarRejected"
|
||||
>
|
||||
<template #append>
|
||||
<q-icon name="mdi-file-image" @click.stop />
|
||||
</template>
|
||||
</q-file>
|
||||
</q-card-section>
|
||||
<q-separator v-if="!newUser" />
|
||||
<q-card-section v-if="!newUser" class="fit row justify-start content-center items-center">
|
||||
<PasswordInput
|
||||
v-if="isCurrentUser"
|
||||
v-model="password"
|
||||
:rules="[notEmpty]"
|
||||
filled
|
||||
label="Passwort"
|
||||
autocomplete="current-password"
|
||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||
hint="Passwort muss immer eingetragen werden"
|
||||
/>
|
||||
<PasswordInput
|
||||
v-model="newPassword"
|
||||
filled
|
||||
label="Neues Password"
|
||||
autocomplete="new-password"
|
||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-card-actions align="right">
|
||||
<q-btn label="Reset" type="reset" />
|
||||
<q-btn color="primary" type="submit" label="Speichern" />
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Notify } from 'quasar';
|
||||
import { IsoDateInput, PasswordInput } from '@flaschengeist/api/components';
|
||||
import { defineComponent, computed, ref, onBeforeMount, PropType, watchEffect } from 'vue';
|
||||
import { hasPermission, notEmpty, isEmail, useMainStore, useUserStore } from '@flaschengeist/api';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'MainUserSettings',
|
||||
components: { IsoDateInput, PasswordInput },
|
||||
props: {
|
||||
user: {
|
||||
required: true,
|
||||
type: Object as PropType<FG.User>,
|
||||
},
|
||||
newUser: { type: Boolean, default: false },
|
||||
},
|
||||
emits: {
|
||||
'update:user': (payload: FG.User) => !!payload,
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const userStore = useUserStore();
|
||||
const mainStore = useMainStore();
|
||||
|
||||
onBeforeMount(() => {
|
||||
void userStore.getRoles(false);
|
||||
});
|
||||
|
||||
const password = ref('');
|
||||
const newPassword = ref('');
|
||||
const avatar = ref<File | FileList | string[]>();
|
||||
const userModel = ref(Object.assign({}, props.user));
|
||||
|
||||
const canSetRoles = computed(() => hasPermission('users_set_roles'));
|
||||
const allRoles = computed(() => userStore.roles.map((role) => role.name));
|
||||
const isCurrentUser = computed(() => userModel.value.userid === mainStore.currentUser.userid);
|
||||
|
||||
/* Reset model if props changed */
|
||||
watchEffect(() => {if(props.user.userid && props.user.userid !== userModel.value.userid) reset()})
|
||||
|
||||
function onAvatarRejected() {
|
||||
Notify.create({
|
||||
group: false,
|
||||
type: 'negative',
|
||||
message: 'Datei zu groß oder keine gültige Bilddatei.',
|
||||
timeout: 10000,
|
||||
progress: true,
|
||||
actions: [{ icon: 'mdi-close', color: 'white' }],
|
||||
});
|
||||
avatar.value = undefined;
|
||||
}
|
||||
|
||||
function save() {
|
||||
let changed = userModel.value;
|
||||
if (typeof changed.birthday === 'string') changed.birthday = new Date(changed.birthday);
|
||||
changed = Object.assign(changed, {
|
||||
password: password.value,
|
||||
});
|
||||
if (newPassword.value != '') {
|
||||
changed = Object.assign(changed, {
|
||||
new_password: newPassword.value,
|
||||
});
|
||||
}
|
||||
|
||||
emit('update:user', changed);
|
||||
|
||||
if (avatar.value)
|
||||
userStore
|
||||
.uploadAvatar(changed, avatar.value instanceof File ? avatar.value : avatar.value[0])
|
||||
.catch((response: Response) => {
|
||||
if (response && response.status == 400) {
|
||||
onAvatarRejected();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function reset() {
|
||||
userModel.value = Object.assign({}, props.user);
|
||||
password.value = '';
|
||||
newPassword.value = '';
|
||||
}
|
||||
|
||||
function isFreeUID(val: string) {
|
||||
return (
|
||||
userStore.users.findIndex((user) => user.userid === val) === -1 ||
|
||||
'Benutzername ist schon vergeben'
|
||||
);
|
||||
}
|
||||
|
||||
return {
|
||||
allRoles,
|
||||
avatar,
|
||||
canSetRoles,
|
||||
isCurrentUser,
|
||||
isEmail,
|
||||
isFreeUID,
|
||||
newPassword,
|
||||
notEmpty,
|
||||
onAvatarRejected,
|
||||
password,
|
||||
reset,
|
||||
save,
|
||||
userModel,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
<template>
|
||||
<div>
|
||||
<q-card class="col-12">
|
||||
<q-form @submit="save" @reset="reset">
|
||||
<q-card-section class="fit row justify-start content-center items-center">
|
||||
<span class="col-xs-12 col-sm-6 text-center text-h6"> Rollen und Berechtigungen </span>
|
||||
<q-select
|
||||
filled
|
||||
use-input
|
||||
label="Rolle"
|
||||
input-debounce="0"
|
||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||
:model-value="role"
|
||||
:options="roles"
|
||||
option-label="name"
|
||||
option-value="name"
|
||||
map-options
|
||||
clearable
|
||||
@new-value="createRole"
|
||||
@update:modelValue="updateRole"
|
||||
@clear="removeRole"
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-section v-if="role">
|
||||
<q-input v-if="role.id !== -1" v-model="newRoleName" filled label="neuer Name" />
|
||||
<q-scroll-area style="height: 40vh; width: 100%" class="background-like-input">
|
||||
<q-option-group
|
||||
:model-value="role.permissions"
|
||||
:options="permissions"
|
||||
color="primary"
|
||||
type="checkbox"
|
||||
@update:modelValue="updatePermissions"
|
||||
/>
|
||||
</q-scroll-area>
|
||||
</q-card-section>
|
||||
<q-card-actions v-if="role" align="right">
|
||||
<q-btn label="Löschen" color="negative" @click="remove" />
|
||||
<q-btn label="Reset" type="reset" />
|
||||
<q-btn color="primary" type="submit" label="Speichern" />
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, ref, onBeforeMount } from 'vue';
|
||||
import { useUserStore } from '@flaschengeist/api';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'RoleSettings',
|
||||
setup() {
|
||||
const userStore = useUserStore();
|
||||
|
||||
onBeforeMount(() => {
|
||||
void userStore.getRoles();
|
||||
void userStore.getPermissions();
|
||||
});
|
||||
|
||||
const role = ref<FG.Role | null>(null);
|
||||
const roles = computed(() => userStore.roles);
|
||||
const permissions = computed(() =>
|
||||
userStore.permissions.map((perm) => {
|
||||
return {
|
||||
value: perm,
|
||||
label: perm,
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
const newRoleName = ref<string>('');
|
||||
|
||||
function createRole(name: string, done: (arg0: string, arg1: string) => void): void {
|
||||
role.value = { name: name, permissions: [], id: -1 };
|
||||
done(name, 'add-unique');
|
||||
}
|
||||
|
||||
function removeRole(): void {
|
||||
role.value = null;
|
||||
}
|
||||
|
||||
function updatePermissions(permissions: string[]) {
|
||||
if (role.value) {
|
||||
role.value.permissions = permissions;
|
||||
}
|
||||
}
|
||||
|
||||
function updateRole(rl: FG.Role | string | null) {
|
||||
if (typeof rl === 'string' || rl === null) return;
|
||||
role.value = {
|
||||
id: rl.id,
|
||||
name: rl.name,
|
||||
permissions: Array.from(rl.permissions),
|
||||
};
|
||||
}
|
||||
|
||||
function save() {
|
||||
if (role.value) {
|
||||
if (role.value.id === -1)
|
||||
void userStore.newRole(role.value).then((createdRole: FG.Role) => {
|
||||
role.value = createdRole;
|
||||
});
|
||||
else {
|
||||
if (newRoleName.value !== '') role.value.name = newRoleName.value;
|
||||
void userStore.updateRole(role.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function reset() {
|
||||
if (role.value && role.value.id !== -1) {
|
||||
const original = roles.value.find((value) => value.name === role.value?.name);
|
||||
if (original) updateRole(original);
|
||||
} else {
|
||||
role.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
function remove() {
|
||||
if (role.value) {
|
||||
if (role.value.id === -1) {
|
||||
role.value = null;
|
||||
} else {
|
||||
void userStore.deleteRole(role.value).then(() => (role.value = null));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
roles,
|
||||
role,
|
||||
permissions,
|
||||
createRole,
|
||||
updateRole,
|
||||
updatePermissions,
|
||||
save,
|
||||
reset,
|
||||
removeRole,
|
||||
remove,
|
||||
newRoleName,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
// Same colors like qinput with filled attribute set
|
||||
.body--light .background-like-input
|
||||
background-color: rgba(0, 0, 0, 0.05)
|
||||
&:hover
|
||||
background: rgba(0,0,0,.1)
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.42)
|
||||
|
||||
.body--dark .background-like-input
|
||||
background-color: rgba(255, 255, 255, 0.07)
|
||||
&:hover
|
||||
background: rgba(255, 255, 255, 0.14)
|
||||
border-bottom: 1px solid #fff
|
||||
</style>
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
<template>
|
||||
<q-card class="col-12" height="">
|
||||
<q-card-section v-if="isThisSession(modelValue.token)" class="text-caption">
|
||||
Diese Session.
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
Browser:
|
||||
<q-icon :name="getBrowserIcon(modelValue.browser)" size="24px" />
|
||||
{{ modelValue.browser }}
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
Plattform:
|
||||
<q-icon :name="getPlatformIcon(modelValue.platform)" size="24px" />
|
||||
{{ modelValue.platform }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!isEdit" class="row">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
Lebenszeit:
|
||||
{{ modelValue.lifetime }}
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6">Läuft aus: {{ dateTime(modelValue.expires) }}</div>
|
||||
</div>
|
||||
<div v-else class="row q-my-sm">
|
||||
<q-input
|
||||
v-model="computedLifetime"
|
||||
class="col-xs-12 col-sm-6 q-px-sm"
|
||||
type="number"
|
||||
label="Zeit"
|
||||
filled
|
||||
/>
|
||||
<q-select v-model="option" class="col-xs-12 col-sm-6 q-px-sm" :options="options" filled />
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-actions v-if="!isEdit" align="right">
|
||||
<q-btn flat round dense icon="mdi-pencil" @click="edit(true)" />
|
||||
<q-btn flat round dense icon="mdi-delete" @click="deleteSession(modelValue.token)" />
|
||||
</q-card-actions>
|
||||
<q-card-actions v-else align="right">
|
||||
<q-btn flat dense label="Abbrechen" @click="edit(false)" />
|
||||
<q-btn flat dense label="Speichern" @click="save" />
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, computed, PropType } from 'vue';
|
||||
import { formatDateTime, useMainStore, useSessionStore } from '@flaschengeist/api';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Session',
|
||||
props: {
|
||||
modelValue: {
|
||||
required: true,
|
||||
type: Object as PropType<FG.Session>,
|
||||
},
|
||||
},
|
||||
emits: {
|
||||
'update:modelValue': (s: FG.Session) => !!s,
|
||||
delete: () => true,
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const sessionStore = useSessionStore();
|
||||
const mainStore = useMainStore();
|
||||
|
||||
const dateTime = (date: Date) => formatDateTime(date, true);
|
||||
|
||||
const options = ref(['Minuten', 'Stunden', 'Tage']);
|
||||
const option = ref<string>(options.value[0]);
|
||||
const lifetime = ref(0);
|
||||
function getBrowserIcon(browser: string) {
|
||||
return browser == 'firefox'
|
||||
? 'mdi-firefox'
|
||||
: browser == 'chrome'
|
||||
? 'mdi-google-chrome'
|
||||
: browser == 'safari'
|
||||
? 'mdi-apple-safari'
|
||||
: 'mdi-help';
|
||||
}
|
||||
|
||||
function getPlatformIcon(platform: string) {
|
||||
return platform == 'linux'
|
||||
? 'mdi-linux'
|
||||
: platform == 'windows'
|
||||
? 'mdi-microsoft-windows'
|
||||
: platform == 'macos'
|
||||
? 'mdi-apple'
|
||||
: platform == 'iphone'
|
||||
? 'mdi-cellphone-iphone'
|
||||
: platform == 'android'
|
||||
? 'mdi-cellphone-android'
|
||||
: 'mdi-help';
|
||||
}
|
||||
|
||||
async function deleteSession(token: string) {
|
||||
await sessionStore.deleteSession(token);
|
||||
emit('delete');
|
||||
}
|
||||
function isThisSession(token: string) {
|
||||
return mainStore.session?.token === token;
|
||||
}
|
||||
|
||||
const isEdit = ref(false);
|
||||
|
||||
const computedLifetime = computed({
|
||||
get: () => {
|
||||
switch (option.value) {
|
||||
case options.value[0]:
|
||||
return (lifetime.value / 60).toFixed(2);
|
||||
case options.value[1]:
|
||||
return (lifetime.value / (60 * 60)).toFixed(2);
|
||||
case options.value[2]:
|
||||
return (lifetime.value / (60 * 60 * 24)).toFixed(2);
|
||||
}
|
||||
throw 'Invalid option';
|
||||
},
|
||||
set: (val) => {
|
||||
if (val) {
|
||||
switch (option.value) {
|
||||
case options.value[0]:
|
||||
lifetime.value = parseFloat(val) * 60;
|
||||
break;
|
||||
case options.value[1]:
|
||||
lifetime.value = parseFloat(val) * 60 * 60;
|
||||
break;
|
||||
case options.value[2]:
|
||||
lifetime.value = parseFloat(val) * 60 * 60 * 24;
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
function edit(value: boolean) {
|
||||
lifetime.value = props.modelValue.lifetime;
|
||||
isEdit.value = value;
|
||||
}
|
||||
|
||||
async function save() {
|
||||
isEdit.value = false;
|
||||
await sessionStore.updateSession(lifetime.value, props.modelValue.token);
|
||||
emit(
|
||||
'update:modelValue',
|
||||
Object.assign(Object.assign({}, props.modelValue), { lifetime: lifetime.value })
|
||||
);
|
||||
}
|
||||
|
||||
return {
|
||||
getBrowserIcon,
|
||||
getPlatformIcon,
|
||||
isThisSession,
|
||||
deleteSession,
|
||||
isEdit,
|
||||
dateTime,
|
||||
edit,
|
||||
options,
|
||||
option,
|
||||
lifetime,
|
||||
computedLifetime,
|
||||
save,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import { FG_Plugin } from '@flaschengeist/types';
|
||||
import { defineAsyncComponent } from 'vue';
|
||||
import routes from './routes';
|
||||
|
||||
const plugin: FG_Plugin.Plugin = {
|
||||
id: 'users',
|
||||
name: 'User',
|
||||
innerRoutes: routes,
|
||||
requiredModules: [['auth'], ['users'], ['roles']],
|
||||
version: '0.0.1',
|
||||
widgets: [
|
||||
{
|
||||
priority: 1,
|
||||
name: 'greeting',
|
||||
permissions: [],
|
||||
widget: defineAsyncComponent(() => import('./components/Widget.vue')),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default plugin
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
export interface LoginData {
|
||||
userid: string;
|
||||
password: string;
|
||||
}
|
||||
|
||||
export interface LoginResponse {
|
||||
user: FG.User;
|
||||
session: FG.Session;
|
||||
permissions: FG.Permission[];
|
||||
}
|
||||
|
||||
export interface CurrentUserResponse extends FG.User {
|
||||
permissions: FG.Permission[];
|
||||
}
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<template>
|
||||
<q-page padding class="fit row justify-center content-start items-start q-gutter-sm">
|
||||
<q-tabs v-if="$q.screen.gt.sm" v-model="tab">
|
||||
<q-tab
|
||||
v-for="(tabindex, index) in tabs"
|
||||
:key="'tab' + index"
|
||||
:name="tabindex.name"
|
||||
:label="tabindex.label"
|
||||
/>
|
||||
</q-tabs>
|
||||
<div v-else class="fit row justify-end">
|
||||
<q-btn flat round icon="mdi-menu" @click="showDrawer = !showDrawer" />
|
||||
</div>
|
||||
<q-drawer v-model="showDrawer" side="right" behavior="mobile" @click="showDrawer = !showDrawer">
|
||||
<q-list v-model="tab">
|
||||
<q-item
|
||||
v-for="(tabindex, index) in tabs"
|
||||
:key="'tab' + index"
|
||||
:active="tab == tabindex.name"
|
||||
clickable
|
||||
@click="tab = tabindex.name"
|
||||
>
|
||||
<q-item-label>{{ tabindex.label }}</q-item-label>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-drawer>
|
||||
<q-tab-panels
|
||||
v-model="tab"
|
||||
style="background-color: transparent"
|
||||
class="q-ma-none q-pa-none fit row justify-center content-start items-start"
|
||||
animated
|
||||
>
|
||||
<q-tab-panel name="user">
|
||||
<UpdateUser />
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="newUser">
|
||||
<NewUser />
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="roles">
|
||||
<RoleSettings v-if="canEditRoles" />
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Screen } from 'quasar';
|
||||
import { PERMISSIONS } from '../permissions';
|
||||
import NewUser from '../components/NewUser.vue';
|
||||
import { hasPermission } from '@flaschengeist/api';
|
||||
import { computed, defineComponent, ref } from 'vue';
|
||||
import UpdateUser from '../components/UpdateUser.vue';
|
||||
import RoleSettings from '../components/settings/RoleSettings.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'AdminSettings',
|
||||
components: { RoleSettings, UpdateUser, NewUser },
|
||||
setup() {
|
||||
const canEditRoles = computed(() => hasPermission(PERMISSIONS.ROLES_EDIT));
|
||||
|
||||
interface Tab {
|
||||
name: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
const tabs: Tab[] = [
|
||||
{ name: 'user', label: 'Mitglieder' },
|
||||
{ name: 'newUser', label: 'Neues Mitglied' },
|
||||
{ name: 'roles', label: 'Rollen' },
|
||||
];
|
||||
|
||||
const drawer = ref<boolean>(false);
|
||||
|
||||
const showDrawer = computed({
|
||||
get: () => {
|
||||
return !Screen.gt.sm && drawer.value;
|
||||
},
|
||||
set: (val: boolean) => {
|
||||
drawer.value = val;
|
||||
},
|
||||
});
|
||||
|
||||
const tab = ref<string>('user');
|
||||
|
||||
return {
|
||||
canEditRoles,
|
||||
showDrawer,
|
||||
tab,
|
||||
tabs,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<template>
|
||||
<div>
|
||||
<q-page padding class="fit row justify-center content-center items-center q-gutter-sm">
|
||||
<q-card class="col-12">
|
||||
<q-card-section class="fit row justify-start content-center items-center">
|
||||
<div class="col-12 text-center text-h6">Benutzereinstellungen</div>
|
||||
</q-card-section>
|
||||
<MainUserSettings :user="currentUser" @update:user="updateUser" />
|
||||
</q-card>
|
||||
<div class="col-12 text-left text-h6">Aktive Sessions:</div>
|
||||
<Session
|
||||
v-for="(session, index) in sessions"
|
||||
:key="'session' + index"
|
||||
v-model="sessions[index]"
|
||||
@delete="removeSession(session)"
|
||||
/>
|
||||
</q-page>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { useMainStore, useUserStore, useSessionStore } from '@flaschengeist/api';
|
||||
import MainUserSettings from '../components/settings/MainUserSettings.vue';
|
||||
import { defineComponent, onBeforeMount, ref } from 'vue';
|
||||
import Session from '../components/settings/Session.vue';
|
||||
|
||||
export default defineComponent({
|
||||
// name: 'PageName'
|
||||
components: { Session, MainUserSettings },
|
||||
setup() {
|
||||
const mainStore = useMainStore();
|
||||
const sessionStore = useSessionStore();
|
||||
const userStore = useUserStore();
|
||||
|
||||
onBeforeMount(() => sessionStore.getSessions().then((s) => (sessions.value = s)));
|
||||
const currentUser = ref(mainStore.currentUser);
|
||||
const sessions = ref([] as FG.Session[]);
|
||||
|
||||
async function updateUser(value: FG.User) {
|
||||
await userStore.updateUser(value);
|
||||
}
|
||||
|
||||
function removeSession(s: FG.Session) {
|
||||
sessions.value = sessions.value.filter((ss) => ss.token !== s.token);
|
||||
}
|
||||
|
||||
return {
|
||||
currentUser,
|
||||
sessions,
|
||||
updateUser,
|
||||
removeSession,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
export const PERMISSIONS = {
|
||||
// Kann andere Nutzer bearbeiten
|
||||
EDIT_OTHER: 'users_edit_other',
|
||||
// Kann Rollen von Nutzern setzen
|
||||
SET_ROLES: 'users_set_roles',
|
||||
// Kann Nutzer löschen
|
||||
DELETE: 'users_delete_other',
|
||||
// Kann neue Nutzer hinzufügen
|
||||
REGISTER: 'users_register',
|
||||
// Kann Rollen löschen oder bearbeiten, z.b. Rechte hinzufügen etc
|
||||
ROLES_EDIT: 'roles_edit',
|
||||
};
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
import { pinia, useMainStore } from '@flaschengeist/api';
|
||||
import { FG_Plugin } from '@flaschengeist/types';
|
||||
|
||||
const mainRoutes: FG_Plugin.MenuRoute[] = [
|
||||
{
|
||||
get title() {
|
||||
return () => useMainStore(pinia.value).currentUser.display_name;
|
||||
},
|
||||
icon: 'mdi-account',
|
||||
permissions: ['user'],
|
||||
route: { path: 'user', name: 'user', redirect: { name: 'user-settings' } },
|
||||
children: [
|
||||
{
|
||||
title: 'Einstellungen',
|
||||
icon: 'mdi-account-edit',
|
||||
shortcut: true,
|
||||
permissions: ['user'],
|
||||
route: {
|
||||
path: 'settings',
|
||||
name: 'user-settings',
|
||||
component: () => import('../pages/Settings.vue'),
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Admin',
|
||||
icon: 'mdi-cog',
|
||||
shortcut: false,
|
||||
permissions: ['users_edit_other'],
|
||||
route: {
|
||||
path: 'admin',
|
||||
name: 'admin-settings',
|
||||
component: () => import('../pages/AdminSettings.vue'),
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default mainRoutes;
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
declare module '*.vue' {
|
||||
import Vue from 'vue';
|
||||
export default Vue;
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"extends": "@quasar/app/tsconfig-preset",
|
||||
"target": "esnext",
|
||||
"compilerOptions": {
|
||||
"baseUrl": "src/",
|
||||
"lib": [
|
||||
"es2020",
|
||||
"dom"
|
||||
],
|
||||
"types": [
|
||||
"@flaschengeist/types",
|
||||
"@quasar/app",
|
||||
"node"
|
||||
]
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue