Browse Source

update: me page

pull/1397/head
tetuaoro 8 months ago
committed by Bernd Storath
parent
commit
117773e6c7
  1. 8
      src/app/components/panel/head/Title.vue
  2. 108
      src/app/pages/me.vue
  3. 4
      src/locales/en.json

8
src/app/components/panel/head/Title.vue

@ -1,5 +1,11 @@
<script setup lang="ts">
const _props = defineProps<{
text: string;
}>();
</script>
<template> <template>
<h3 class="flex-1 text-2xl font-medium dark:text-neutral-200"> <h3 class="flex-1 text-2xl font-medium dark:text-neutral-200">
<slot /> {{ text }}
</h3> </h3>
</template> </template>

108
src/app/pages/me.vue

@ -2,115 +2,99 @@
<main> <main>
<Panel> <Panel>
<PanelHead> <PanelHead>
<PanelHeadTitle> <PanelHeadTitle :text="$t('pages.me')" />
{{ $t('pages.me') }}
</PanelHeadTitle>
</PanelHead> </PanelHead>
<PanelBody> <PanelBody class="dark:text-neutral-200">
<table> <section class="grid grid-cols-1 gap-4 md:grid-cols-2">
<tbody> <h4 class="text-2xl col-span-full py-6">
<tr> {{ $t('me.sectionGeneral') }}
<td> </h4>
<Label <Label
class="font-semibold dark:text-neutral-200"
for="username" for="username"
class="font-semibold md:align-middle md:leading-10"
> >
{{ $t('username') }} {{ $t('username') }}
</Label> </Label>
</td> <input
<td> id="username"
<input id="username" v-model.trim="username" type="text" /> v-model.trim="username"
</td> type="text"
</tr> class="dark:bg-neutral-700 text-gray-500 dark:text-neutral-200 border-2 border-gray-100 dark:border-neutral-800 rounded-lg focus:border-red-800 dark:placeholder:text-neutral-400 focus:outline-0 focus:ring-0"
<tr> />
<td> <Label for="name" class="font-semibold md:align-middle md:leading-10">
<Label class="font-semibold dark:text-neutral-200" for="name">
{{ $t('name') }} {{ $t('name') }}
</Label> </Label>
</td> <input
<td> id="name"
<input id="name" v-model.trim="name" type="text" /> v-model.trim="name"
</td> type="text"
</tr> class="dark:bg-neutral-700 text-gray-500 dark:text-neutral-200 border-2 border-gray-100 dark:border-neutral-800 rounded-lg focus:border-red-800 dark:placeholder:text-neutral-400 focus:outline-0 focus:ring-0"
<tr> />
<td> <Label
<Label class="font-semibold dark:text-neutral-200" for="name"> for="email"
class="font-semibold md:align-middle md:leading-10"
>
{{ $t('email') }} {{ $t('email') }}
</Label> </Label>
</td> <input
<td> id="email"
<input id="name" v-model.trim="email" type="text" /> v-model.trim="email"
</td> type="email"
</tr> class="dark:bg-neutral-700 text-gray-500 dark:text-neutral-200 border-2 border-gray-100 dark:border-neutral-800 rounded-lg focus:border-red-800 dark:placeholder:text-neutral-400 focus:outline-0 focus:ring-0"
<tr colspan="2"> />
<td> <div class="col-span-full">
<BaseButton @click="submit">{{ $t('save') }}</BaseButton> <BaseButton @click="submit">{{ $t('save') }}</BaseButton>
</td> </div>
</tr> </section>
<tr> <section class="grid grid-cols-1 gap-4 md:grid-cols-2">
<td> <h4 class="text-2xl col-span-full py-6">
{{ $t('me.sectionPassword') }}
</h4>
<Label <Label
class="font-semibold dark:text-neutral-200"
for="current-password" for="current-password"
class="font-semibold md:align-middle md:leading-10"
> >
{{ $t('currentPassword') }} {{ $t('currentPassword') }}
</Label> </Label>
</td>
<td>
<input <input
id="current-password" id="current-password"
v-model.trim="currentPassword" v-model.trim="currentPassword"
type="password" type="password"
autocomplete="current-password" autocomplete="current-password"
class="dark:bg-neutral-700 text-gray-500 dark:text-neutral-200 border-2 border-gray-100 dark:border-neutral-800 rounded-lg focus:border-red-800 dark:placeholder:text-neutral-400 focus:outline-0 focus:ring-0"
/> />
</td>
</tr>
<tr>
<td>
<Label <Label
class="font-semibold dark:text-neutral-200"
for="new-password" for="new-password"
class="font-semibold md:align-middle md:leading-10"
> >
{{ $t('setup.newPassword') }} {{ $t('setup.newPassword') }}
</Label> </Label>
</td>
<td>
<input <input
id="new-password" id="new-password"
v-model.trim="newPassword" v-model.trim="newPassword"
type="password" type="password"
autocomplete="new-password" autocomplete="new-password"
class="dark:bg-neutral-700 text-gray-500 dark:text-neutral-200 border-2 border-gray-100 dark:border-neutral-800 rounded-lg focus:border-red-800 dark:placeholder:text-neutral-400 focus:outline-0 focus:ring-0"
/> />
</td>
</tr>
<tr>
<td>
<Label <Label
class="font-semibold dark:text-neutral-200"
for="confirm-password" for="confirm-password"
class="font-semibold md:align-middle md:leading-10"
> >
{{ $t('confirmPassword') }} {{ $t('confirmPassword') }}
</Label> </Label>
</td>
<td>
<input <input
id="confirm-password" id="confirm-password"
v-model.trim="confirmPassword" v-model.trim="confirmPassword"
type="password" type="password"
autocomplete="new-password" autocomplete="new-password"
class="dark:bg-neutral-700 text-gray-500 dark:text-neutral-200 border-2 border-gray-100 dark:border-neutral-800 rounded-lg focus:border-red-800 dark:placeholder:text-neutral-400 focus:outline-0 focus:ring-0"
/> />
</td> <div class="col-span-full">
</tr>
<tr colspan="2">
<td>
<BaseButton @click="updatePassword">{{ <BaseButton @click="updatePassword">{{
$t('updatePassword') $t('updatePassword')
}}</BaseButton> }}</BaseButton>
</td> </div>
</tr> </section>
</tbody>
</table>
</PanelBody> </PanelBody>
</Panel> </Panel>
</main> </main>

4
src/locales/en.json

@ -3,6 +3,10 @@
"me": "Account", "me": "Account",
"clients": "Clients" "clients": "Clients"
}, },
"me": {
"sectionGeneral": "General",
"sectionPassword": "Password"
},
"email": "E-Mail", "email": "E-Mail",
"save": "Save", "save": "Save",
"updatePassword": "Update Password", "updatePassword": "Update Password",

Loading…
Cancel
Save