mirror
/
wg-easy
mirror of https://github.com/wg-easy/wg-easy
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

update: admin ui 

- add: common panel components to get same UI
- i18n: french
pull/1397/head
tetuaoro 7 months ago
committed by Bernd Storath
parent
814624bc65
commit
4891cb3f1b
10 changed files with 196 additions and 76 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      src/app/components/panel/Body.vue
  2. 9
      src/app/components/panel/Panel.vue
  3. 5
      src/app/components/panel/head/Boat.vue
  4. 9
      src/app/components/panel/head/Head.vue
  5. 5
      src/app/components/panel/head/Title.vue
  6. 58
      src/app/pages/index.vue
  7. 156
      src/app/pages/me.vue
  8. 6
      src/app/pages/setup.vue
  9. 10
      src/locales/en.json
  10. 9
      src/locales/fr.json

5
src/app/components/panel/Body.vue
View File

@ -0,0 +1,5 @@
<template>
<div class="m-4">
<slot />
</div>
</template>

9
src/app/components/panel/Panel.vue
View File

@ -0,0 +1,9 @@
<template>
<div class="container mx-auto max-w-3xl px-3 md:px-0">
<div
class="shadow-md rounded-lg bg-white dark:bg-neutral-700 overflow-hidden"
>
<slot />
</div>
</div>
</template>

5
src/app/components/panel/head/Boat.vue
View File

@ -0,0 +1,5 @@
<template>
<div class="flex md:block md:flex-shrink-0 space-x-1">
<slot />
</div>
</template>

9
src/app/components/panel/head/Head.vue
View File

@ -0,0 +1,9 @@
<template>
<div
class="flex flex-row flex-auto items-center p-3 px-5 border-b-2 border-gray-100 dark:border-neutral-600"
>
<div class="flex flex-grow">
<slot />
</div>
</div>
</template>

5
src/app/components/panel/head/Title.vue
View File

@ -0,0 +1,5 @@
<template>
<h3 class="flex-1 text-2xl font-medium dark:text-neutral-200">
<slot />
</h3>
</template>

58
src/app/pages/index.vue
View File

@ -1,41 +1,33 @@
<template> <template>
<main> <main>
<div class="container mx-auto max-w-3xl px-3 md:px-0"> <Panel>
<div <PanelHead>
class="shadow-md rounded-lg bg-white dark:bg-neutral-700 overflow-hidden" <PanelHeadTitle>
> {{ $t('pages.clients') }}
<div </PanelHeadTitle>
class="flex flex-row flex-auto items-center p-3 px-5 border-b-2 border-gray-100 dark:border-neutral-600" <PanelHeadBoat>
> <ClientsRestoreConfig />
<div class="flex-grow"> <ClientsBackupConfig />
<p class="text-2xl font-medium dark:text-neutral-200"> <ClientsSort />
{{ $t('clients') }} <ClientsNew />
</p> </PanelHeadBoat>
</div> </PanelHead>
<div class="flex md:block md:flex-shrink-0 space-x-1">
<ClientsRestoreConfig />
<ClientsBackupConfig />
<ClientsSort />
<ClientsNew />
</div>
</div>
<div> <div>
<Clients <Clients
v-if="clientsStore.clients && clientsStore.clients.length > 0" v-if="clientsStore.clients && clientsStore.clients.length > 0"
/>
</div>
<ClientsEmpty
v-if="clientsStore.clients && clientsStore.clients.length === 0"
/> />
<div
v-if="clientsStore.clients === null"
class="text-gray-200 dark:text-red-300 p-5"
>
<IconsLoading class="w-5 animate-spin mx-auto" />
</div>
</div> </div>
</div> <ClientsEmpty
v-if="clientsStore.clients && clientsStore.clients.length === 0"
/>
<div
v-if="clientsStore.clients === null"
class="text-gray-200 dark:text-red-300 p-5"
>
<IconsLoading class="w-5 animate-spin mx-auto" />
</div>
</Panel>
<ClientsQRCodeDialog /> <ClientsQRCodeDialog />
<ClientsCreateDialog /> <ClientsCreateDialog />

156
src/app/pages/me.vue
View File

@ -1,42 +1,118 @@
<template> <template>
<main> <main>
<div class="container mx-auto max-w-3xl px-3 md:px-0"> <Panel>
<div <PanelHead>
class="shadow-md rounded-lg bg-white dark:bg-neutral-700 overflow-hidden" <PanelHeadTitle>
> {{ $t('pages.me') }}
<div </PanelHeadTitle>
class="flex flex-row flex-auto items-center p-3 px-5 border-b-2 border-gray-100 dark:border-neutral-600" </PanelHead>
> <PanelBody>
<div class="flex-grow"> <table>
<p class="text-2xl font-medium dark:text-neutral-200">Account</p> <tbody>
</div> <tr>
</div> <td>
<div class="space-y-2"> <Label
<div class="flex flex-wrap items-center gap-[15px] px-5"> class="font-semibold dark:text-neutral-200"
<Label class="font-semibold dark:text-neutral-200" for="username"> for="username"
Username >
</Label> {{ $t('username') }}
<input id="username" v-model.trim="username" type="text" /> </Label>
</div> </td>
<div class="flex flex-wrap items-center gap-[15px] px-5"> <td>
<Label class="font-semibold dark:text-neutral-200" for="name"> <input id="username" v-model.trim="username" type="text" />
Name </td>
</Label> </tr>
<input id="name" v-model.trim="name" type="text" /> <tr>
</div> <td>
<div class="flex flex-wrap items-center gap-[15px] px-5"> <Label class="font-semibold dark:text-neutral-200" for="name">
<Label class="font-semibold dark:text-neutral-200" for="name"> {{ $t('name') }}
E-Mail </Label>
</Label> </td>
<input id="name" v-model.trim="email" type="text" /> <td>
</div> <input id="name" v-model.trim="name" type="text" />
<BaseButton class="self-end" @click="openPasswordModal"> </td>
Change Password </tr>
</BaseButton> <tr>
<BaseButton class="self-end" @click="submit">Save</BaseButton> <td>
</div> <Label class="font-semibold dark:text-neutral-200" for="name">
</div> {{ $t('email') }}
</div> </Label>
</td>
<td>
<input id="name" v-model.trim="email" type="text" />
</td>
</tr>
<tr colspan="2">
<td>
<BaseButton @click="submit">{{ $t('save') }}</BaseButton>
</td>
</tr>
<tr>
<td>
<Label
class="font-semibold dark:text-neutral-200"
for="current-password"
>
{{ $t('currentPassword') }}
</Label>
</td>
<td>
<input
id="current-password"
v-model.trim="currentPassword"
type="password"
autocomplete="current-password"
/>
</td>
</tr>
<tr>
<td>
<Label
class="font-semibold dark:text-neutral-200"
for="new-password"
>
{{ $t('setup.newPassword') }}
</Label>
</td>
<td>
<input
id="new-password"
v-model.trim="newPassword"
type="password"
autocomplete="new-password"
/>
</td>
</tr>
<tr>
<td>
<Label
class="font-semibold dark:text-neutral-200"
for="confirm-password"
>
{{ $t('confirmPassword') }}
</Label>
</td>
<td>
<input
id="confirm-password"
v-model.trim="confirmPassword"
type="password"
autocomplete="new-password"
/>
</td>
</tr>
<tr colspan="2">
<td>
<BaseButton @click="updatePassword">{{
$t('updatePassword')
}}</BaseButton>
</td>
</tr>
</tbody>
</table>
</PanelBody>
</Panel>
</main> </main>
</template> </template>
@ -48,7 +124,11 @@ const username = ref(authStore.userData?.username);
const name = ref(authStore.userData?.name); const name = ref(authStore.userData?.name);
const email = ref(authStore.userData?.email); const email = ref(authStore.userData?.email);
const currentPassword = ref(authStore.userData?.email);
const newPassword = ref(authStore.userData?.email);
const confirmPassword = ref(authStore.userData?.email);
function submit() {} function submit() {}
function openPasswordModal() {} function updatePassword() {}
</script> </script>

6
src/app/pages/setup.vue
View File

@ -15,7 +15,7 @@
{{ $t('setup.welcome') }} {{ $t('setup.welcome') }}
</h2> </h2>
<p class="text-lg p-8">{{ $t('setup.msg') }}</p> <p class="text-lg p-8">{{ $t('setup.msg') }}</p>
<form class="mb-8" @submit="newAccount"> <form class="mb-8" @submit.prevent="newAccount">
<div> <div>
<label for="username" class="inline-block py-2">{{ <label for="username" class="inline-block py-2">{{
$t('username') $t('username')
@ -85,9 +85,7 @@ const authStore = useAuthStore();
const errorCU = ref(false); const errorCU = ref(false);
const errorPWD = ref(false); const errorPWD = ref(false);
async function newAccount(e: Event) { async function newAccount() {
e.preventDefault();
if (!username.value || !password.value) return; if (!username.value || !password.value) return;
try { try {

10
src/locales/en.json
View File

@ -1,4 +1,13 @@
{ {
"pages": {
"me": "Account",
"clients": "Clients"
},
"email": "E-Mail",
"save": "Save",
"updatePassword": "Update Password",
"currentPassword": "Current Password",
"confirmPassword": "Confirm Password",
"setup": { "setup": {
"welcome": "Welcome to your first setup of wg-easy !", "welcome": "Welcome to your first setup of wg-easy !",
"msg": "Please first enter an admin username and a strong secure password. This information will be used to log in to your administration panel.", "msg": "Please first enter an admin username and a strong secure password. This information will be used to log in to your administration panel.",
@ -17,7 +26,6 @@
"logout": "Logout", "logout": "Logout",
"updateAvailable": "There is an update available!", "updateAvailable": "There is an update available!",
"update": "Update", "update": "Update",
"clients": "Clients",
"new": "New", "new": "New",
"deleteClient": "Delete Client", "deleteClient": "Delete Client",
"deleteDialog1": "Are you sure you want to delete", "deleteDialog1": "Are you sure you want to delete",

9
src/locales/fr.json
View File

@ -1,4 +1,13 @@
{ {
"pages": {
"me": "Compte",
"clients": "Clients"
},
"email": "E-Mail",
"save": "Enregistrer",
"updatePassword": "Changer le mot de passe",
"currentPassword": "Mot de passe actuel",
"confirmPassword": "Confirmer le mot de passse",
"setup": { "setup": {
"welcome": "Bienvenue à la page de configuration de votre wg-easy !", "welcome": "Bienvenue à la page de configuration de votre wg-easy !",
"msg": "Veuillez renseigner votre nom d'utilisateur et votre mot de passe. Ces informations seront utilisées pour vous connecter à votre page d'administration.", "msg": "Veuillez renseigner votre nom d'utilisateur et votre mot de passe. Ces informations seront utilisées pour vous connecter à votre page d'administration.",

Write Preview
Loading…
Cancel
Save