mirror of
https://github.com/HangarMC/Hangar.git
synced 2024-11-27 06:01:08 +08:00
Some settings page changes
This commit is contained in:
Nassim Jahnke
parent
bbd05644c4
commit
e616de04cf
@ -9,6 +9,7 @@ import Button from "~/components/design/Button.vue";
|
||||
import InputPassword from "~/components/ui/InputPassword.vue";
|
||||
import InputText from "~/components/ui/InputText.vue";
|
||||
import { definePageMeta } from "#imports";
|
||||
import PageTitle from "~/components/design/PageTitle.vue";
|
||||
|
||||
definePageMeta({
|
||||
globalPermsRequired: ["EDIT_OWN_USER_SETTINGS"],
|
||||
@ -45,7 +46,7 @@ function saveAccount() {
|
||||
|
||||
<template>
|
||||
<div v-if="auth.user">
|
||||
<h2 class="text-xl font-bold mb-4">{{ t("auth.settings.account.header") }}</h2>
|
||||
<PageTitle>{{ t("auth.settings.account.header") }}</PageTitle>
|
||||
<form class="flex flex-col gap-2">
|
||||
<InputText v-model="accountForm.username" label="Username" />
|
||||
<InputText v-model="accountForm.email" label="Email" autofill="username" autocomplete="username" />
|
||||
|
||||
@ -99,10 +99,9 @@ function copy(event: any) {
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Alert>
|
||||
<Card>
|
||||
<template #header>
|
||||
<PageTitle>{{ i18n.t("apiKeys.createNew") }}</PageTitle>
|
||||
</template>
|
||||
<PageTitle>{{ i18n.t("auth.settings.apiKeys.header") }}</PageTitle>
|
||||
<div>
|
||||
<h3 class="text-lg font-bold mb-2">{{ i18n.t("apiKeys.createNew") }}</h3>
|
||||
<div class="flex items-center">
|
||||
<div class="flex-grow mr-2">
|
||||
<InputText v-model="name" :label="i18n.t('apiKeys.name')" :rules="[required(), minLength()(5), maxLength()(36), validApiKeyName()(auth.user.name)]" />
|
||||
@ -111,17 +110,15 @@ function copy(event: any) {
|
||||
{{ i18n.t("apiKeys.createKey") }}
|
||||
</Button>
|
||||
</div>
|
||||
<InputGroup v-model="selectedPerms" :label="i18n.t('apiKeys.permissions')" class="mt-4 text-xl font-bold" full-width>
|
||||
<InputGroup v-model="selectedPerms" :label="i18n.t('apiKeys.permissions')" class="mt-4 text-lg font-bold" full-width>
|
||||
<div class="grid autofix mt-2">
|
||||
<InputCheckbox v-for="perm in possiblePerms" :key="perm" v-model="selectedPerms" :label="perm" :value="perm" />
|
||||
</div>
|
||||
<div v-if="selectedPerms.length === 0" class="text-red font-bold mt-2">{{ i18n.t("apiKeys.permissionRequired") }}</div>
|
||||
</InputGroup>
|
||||
</Card>
|
||||
<Card>
|
||||
<template #header>
|
||||
<PageTitle>{{ i18n.t("apiKeys.existing") }}</PageTitle>
|
||||
</template>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-bold mb-2">{{ i18n.t("apiKeys.existing") }}</h3>
|
||||
<Table>
|
||||
<thead>
|
||||
<tr>
|
||||
@ -155,7 +152,7 @@ function copy(event: any) {
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -11,6 +11,7 @@ import InputText from "~/components/ui/InputText.vue";
|
||||
import InputSelect from "~/components/ui/InputSelect.vue";
|
||||
import Button from "~/components/design/Button.vue";
|
||||
import { definePageMeta } from "#imports";
|
||||
import PageTitle from "~/components/design/PageTitle.vue";
|
||||
|
||||
definePageMeta({
|
||||
globalPermsRequired: ["EDIT_OWN_USER_SETTINGS"],
|
||||
@ -62,34 +63,38 @@ async function saveProfile() {
|
||||
|
||||
<template>
|
||||
<div v-if="auth.user">
|
||||
<h2 class="text-xl font-bold mb-4">{{ t("auth.settings.profile.header") }}</h2>
|
||||
<form class="flex flex-col gap-2">
|
||||
<div class="relative mr-3">
|
||||
<UserAvatar :username="auth.user.name" :avatar-url="auth.user.avatarUrl" />
|
||||
<AvatarChangeModal :avatar="auth.user.avatarUrl" :action="`users/${auth.user.name}/settings/avatar`">
|
||||
<template #activator="{ on }">
|
||||
<Button class="absolute bottom-0" @click.prevent="on.click"><IconMdiPencil /></Button>
|
||||
</template>
|
||||
</AvatarChangeModal>
|
||||
</div>
|
||||
<PageTitle>{{ t("auth.settings.profile.header") }}</PageTitle>
|
||||
|
||||
<InputText v-model="profileForm.tagline" label="Tagline" />
|
||||
<h3 class="text-lg font-bold mb-2">Avatar</h3>
|
||||
<div class="relative">
|
||||
<UserAvatar :username="auth.user.name" :avatar-url="auth.user.avatarUrl" />
|
||||
<AvatarChangeModal :avatar="auth.user.avatarUrl" :action="`users/${auth.user.name}/settings/avatar`">
|
||||
<template #activator="{ on }">
|
||||
<Button class="absolute bottom-0" @click.prevent="on.click"><IconMdiPencil /></Button>
|
||||
</template>
|
||||
</AvatarChangeModal>
|
||||
</div>
|
||||
|
||||
<h3 class="text-lg font-bold mt-2">Social</h3>
|
||||
<div v-for="(link, idx) in profileForm.socials" :key="link[0]" class="flex gap-2 items-center">
|
||||
<span class="basis-1/3">{{ linkTypes.find((e) => e.value === link[0])?.text }}</span>
|
||||
<h3 class="text-lg font-bold mt-4 mb-2">Tagline</h3>
|
||||
<InputText v-model="profileForm.tagline" label="Tagline" />
|
||||
|
||||
<h3 class="text-lg font-bold mt-4">Social</h3>
|
||||
<div v-for="(link, idx) in profileForm.socials" :key="link[0]" class="flex items-center">
|
||||
<span class="w-25">{{ linkTypes.find((e) => e.value === link[0])?.text }}</span>
|
||||
<div class="w-75">
|
||||
<InputText v-model="link[1]" label="Username" :rules="[required()]" />
|
||||
<IconMdiBin class="w-8 h-8 cursor-pointer" @click="removeLink(idx)" />
|
||||
</div>
|
||||
<div class="flex gap-2 items-center">
|
||||
<div class="basis-1/3">
|
||||
<Button button-type="secondary" @click.prevent="addLink">Add link</Button>
|
||||
</div>
|
||||
<IconMdiBin class="ml-2 w-8 h-8 cursor-pointer" @click="removeLink(idx)" />
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="w-25">
|
||||
<Button button-type="secondary" @click.prevent="addLink">Add link</Button>
|
||||
</div>
|
||||
<div class="w-75">
|
||||
<InputSelect v-model="linkType" :values="linkTypes" label="Type" />
|
||||
<span class="w-8 h-8" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button type="submit" class="w-max mt-2" :disabled="loading" @click.prevent="saveProfile">Save</Button>
|
||||
</form>
|
||||
<Button type="submit" class="w-max mt-2" :disabled="loading" @click.prevent="saveProfile">Save</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -11,6 +11,7 @@ import ComingSoon from "~/components/design/ComingSoon.vue";
|
||||
import Button from "~/components/design/Button.vue";
|
||||
import InputText from "~/components/ui/InputText.vue";
|
||||
import { definePageMeta } from "#imports";
|
||||
import PageTitle from "~/components/design/PageTitle.vue";
|
||||
|
||||
definePageMeta({
|
||||
globalPermsRequired: ["EDIT_OWN_USER_SETTINGS"],
|
||||
@ -150,7 +151,7 @@ async function generateNewCodes() {
|
||||
|
||||
<template>
|
||||
<div v-if="auth.user">
|
||||
<h2 class="text-xl font-bold mb-4">{{ t("auth.settings.security.header") }}</h2>
|
||||
<PageTitle>{{ t("auth.settings.security.header") }}</PageTitle>
|
||||
<h3 class="text-lg font-bold mb-2">Authenticator App</h3>
|
||||
<Button v-if="hasTotp" :disabled="loading" @click="unlinkTotp">Unlink totp</Button>
|
||||
<Button v-else-if="!totpData" :disabled="loading" @click="setupTotp">Setup 2FA via authenticator app</Button>
|
||||
@ -167,7 +168,7 @@ async function generateNewCodes() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="text-lg font-bold mt-6 mb-2">Security Keys</h3>
|
||||
<h3 class="text-lg font-bold mt-4 mb-2">Security Keys</h3>
|
||||
<ul v-if="settings?.authenticators">
|
||||
<li v-for="authenticator in settings.authenticators" :key="authenticator.id" class="my-1">
|
||||
{{ authenticator.displayName }} <small class="mr-2">(added at {{ authenticator.addedAt }})</small>
|
||||
@ -179,7 +180,7 @@ async function generateNewCodes() {
|
||||
</div>
|
||||
<Button :disabled="loading" @click="addAuthenticator">Setup 2FA via security key</Button>
|
||||
|
||||
<h3 class="text-lg font-bold mt-6 mb-2">Backup Codes</h3>
|
||||
<h3 class="text-lg font-bold mt-4 mb-2">Backup Codes</h3>
|
||||
<div v-if="(hasCodes && showCodes) || (!hasCodes && codes)" class="flex flex-wrap mt-2 mb-2">
|
||||
<div v-for="code in codes" :key="code.code" class="basis-3/12">
|
||||
<code>{{ code["used_at"] ? "Used" : code.code }}</code>
|
||||
@ -192,7 +193,7 @@ async function generateNewCodes() {
|
||||
<Button v-else-if="!codes" :disabled="loading" @click="setupCodes">Add</Button>
|
||||
<Button v-else :disabled="loading" @click="confirmCodes">Confirm codes</Button>
|
||||
|
||||
<h3 class="text-lg font-bold mt-6 mb-2">Devices</h3>
|
||||
<h3 class="text-lg font-bold mt-4 mb-2">Devices</h3>
|
||||
<ComingSoon>
|
||||
last login<br />
|
||||
on revoke iphone<br />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user