mirror of https://github.com/wg-easy/wg-easy
Browse Source
* update: starting split components * upd: rebase & continue splitting components - layouts: header & footer - components: basic buttton - pages: login page * update: login page * package.json: remove dev:pass scriptpull/1244/head
tetuaoro
10 months ago
committed by
Bernd Storath
Bernd Storath
12 changed files with 476 additions and 343 deletions
@ -0,0 +1,45 @@ |
|||
<template> |
|||
<NuxtLayout> |
|||
<NuxtLayout name="header" /> |
|||
<main> |
|||
<NuxtPage /> |
|||
</main> |
|||
<NuxtLayout name="footer" /> |
|||
</NuxtLayout> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import '~/assets/css/app.css'; |
|||
|
|||
useHead({ |
|||
bodyAttrs: { |
|||
class: 'bg-gray-50 dark:bg-neutral-800', |
|||
}, |
|||
link: [ |
|||
{ |
|||
rel: 'manifest', |
|||
href: '/manifest.json', |
|||
}, |
|||
{ |
|||
rel: 'icon', |
|||
type: 'image/png', |
|||
href: '/favicon.png', |
|||
}, |
|||
{ |
|||
rel: 'apple-touch-icon', |
|||
href: '/apple-touch-icon.png', |
|||
}, |
|||
], |
|||
meta: [ |
|||
{ |
|||
name: 'apple-mobile-web-app-capable', |
|||
content: 'yes', |
|||
}, |
|||
{ |
|||
name: 'apple-mobile-web-app-status-bar-style', |
|||
content: 'black-translucent', |
|||
}, |
|||
], |
|||
title: 'WireGuard', |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,34 @@ |
|||
<template> |
|||
<component :is="elementType" role="button" :class="btnClasses" v-bind="attrs"> |
|||
<slot /> |
|||
</component> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
const props = defineProps({ |
|||
as: { |
|||
type: String, |
|||
default: 'button', |
|||
}, |
|||
class: { |
|||
type: String, |
|||
default: '', |
|||
}, |
|||
}); |
|||
|
|||
const elementType = computed(() => props.as); |
|||
|
|||
const attrs = computed(() => { |
|||
const { as, class: _, ...attrs } = props; |
|||
return attrs; |
|||
}); |
|||
|
|||
const btnClasses = |
|||
props.class || |
|||
` |
|||
py-2 px-4 transition-colors |
|||
hover:bg-primary hover:border-primary |
|||
hover:text-white text-gray-700 dark:text-neutral-200 |
|||
max-md:border-l-0 border-2 border-gray-100 dark:border-neutral-600 |
|||
`.replaceAll('\n', ' '); |
|||
</script> |
|||
@ -0,0 +1,42 @@ |
|||
<template> |
|||
<footer> |
|||
<p |
|||
v-cloak |
|||
class="text-center m-10 text-gray-300 dark:text-neutral-600 text-xs" |
|||
> |
|||
<a |
|||
class="hover:underline" |
|||
target="_blank" |
|||
href="https://github.com/wg-easy/wg-easy" |
|||
>WireGuard Easy</a |
|||
> |
|||
© 2021-2024 by |
|||
<a |
|||
class="hover:underline" |
|||
target="_blank" |
|||
href="https://emilenijssen.nl/?ref=wg-easy" |
|||
>Emile Nijssen</a |
|||
> |
|||
is licensed under |
|||
<a |
|||
class="hover:underline" |
|||
target="_blank" |
|||
href="http://creativecommons.org/licenses/by-nc-sa/4.0/" |
|||
>CC BY-NC-SA 4.0</a |
|||
> |
|||
· |
|||
<a |
|||
class="hover:underline" |
|||
href="https://github.com/sponsors/WeeJeWel" |
|||
target="_blank" |
|||
>{{ $t('donate') }}</a |
|||
> |
|||
</p> |
|||
</footer> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
definePageMeta({ |
|||
layout: 'footer', |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,218 @@ |
|||
<template> |
|||
<header class="container mx-auto max-w-3xl"> |
|||
<div |
|||
class="flex flex-col-reverse xxs:flex-row flex-auto items-center gap-3" |
|||
> |
|||
<h1 |
|||
class="text-4xl dark:text-neutral-200 font-medium flex-grow self-start mb-4" |
|||
> |
|||
<img |
|||
src="/logo.png" |
|||
width="32" |
|||
class="inline align-middle dark:bg mr-2" |
|||
/><span class="align-middle">WireGuard</span> |
|||
</h1> |
|||
<div class="flex items-center grow-0 gap-3 self-end xxs:self-center"> |
|||
<!-- Dark / light theme --> |
|||
<button |
|||
class="flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 hover:bg-gray-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 transition" |
|||
:title="$t(`theme.${theme.preference}`)" |
|||
@click="toggleTheme" |
|||
> |
|||
<svg |
|||
v-if="theme.preference === 'light'" |
|||
xmlns="http://www.w3.org/2000/svg" |
|||
fill="none" |
|||
viewBox="0 0 24 24" |
|||
stroke-width="1.5" |
|||
stroke="currentColor" |
|||
class="w-5 h-5" |
|||
> |
|||
<path |
|||
stroke-linecap="round" |
|||
stroke-linejoin="round" |
|||
d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" |
|||
/> |
|||
</svg> |
|||
<svg |
|||
v-else-if="theme.preference === 'dark'" |
|||
xmlns="http://www.w3.org/2000/svg" |
|||
fill="none" |
|||
viewBox="0 0 24 24" |
|||
stroke-width="1.5" |
|||
stroke="currentColor" |
|||
class="w-5 h-5 text-neutral-400" |
|||
> |
|||
<path |
|||
stroke-linecap="round" |
|||
stroke-linejoin="round" |
|||
d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" |
|||
/> |
|||
</svg> |
|||
<svg |
|||
v-else |
|||
xmlns="http://www.w3.org/2000/svg" |
|||
fill="currentColor" |
|||
viewBox="0 0 24 24" |
|||
class="w-5 h-5 fill-gray-600 dark:fill-neutral-400" |
|||
> |
|||
<path |
|||
d="M12,2.2c-5.4,0-9.8,4.4-9.8,9.8s4.4,9.8,9.8,9.8s9.8-4.4,9.8-9.8S17.4,2.2,12,2.2z M3.8,12c0-4.5,3.7-8.2,8.2-8.2v16.5C7.5,20.2,3.8,16.5,3.8,12z" |
|||
/> |
|||
</svg> |
|||
<path |
|||
stroke-linecap="round" |
|||
stroke-linejoin="round" |
|||
d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25" |
|||
/> |
|||
</button> |
|||
<!-- Show / hide charts --> |
|||
<label |
|||
v-if="uiChartType > 0" |
|||
class="inline-flex items-center justify-center cursor-pointer w-8 h-8 rounded-full bg-gray-200 hover:bg-gray-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 whitespace-nowrap transition group" |
|||
:title="$t('toggleCharts')" |
|||
> |
|||
<input |
|||
v-model="uiShowCharts" |
|||
type="checkbox" |
|||
value="" |
|||
class="sr-only peer" |
|||
@change="toggleCharts" |
|||
/> |
|||
<svg |
|||
xmlns="http://www.w3.org/2000/svg" |
|||
viewBox="0 0 24 24" |
|||
stroke-width="1.5" |
|||
fill="currentColor" |
|||
class="w-5 h-5 peer fill-gray-400 peer-checked:fill-gray-600 dark:fill-neutral-600 peer-checked:dark:fill-neutral-400 group-hover:dark:fill-neutral-500 transition" |
|||
> |
|||
<path |
|||
d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75ZM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 0 1-1.875-1.875V8.625ZM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 0 1 3 19.875v-6.75Z" |
|||
/> |
|||
</svg> |
|||
</label> |
|||
<span |
|||
v-if="requiresPassword && authenticated" |
|||
class="text-sm text-gray-400 dark:text-neutral-400 cursor-pointer hover:underline" |
|||
@click="logout" |
|||
> |
|||
{{ $t('logout') }} |
|||
<svg |
|||
class="h-3 inline" |
|||
xmlns="http://www.w3.org/2000/svg" |
|||
fill="none" |
|||
viewBox="0 0 24 24" |
|||
stroke="currentColor" |
|||
> |
|||
<path |
|||
stroke-linecap="round" |
|||
stroke-linejoin="round" |
|||
stroke-width="2" |
|||
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" |
|||
/> |
|||
</svg> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
<div class="text-sm text-gray-400 dark:text-neutral-400 mb-5" /> |
|||
<div |
|||
v-if="latestRelease" |
|||
class="bg-red-800 dark:bg-red-100 p-4 text-white dark:text-red-600 text-sm font-small mb-10 rounded-md shadow-lg" |
|||
:title="`v${currentRelease} → v${latestRelease.version}`" |
|||
> |
|||
<div class="container mx-auto flex flex-row flex-auto items-center"> |
|||
<div class="flex-grow"> |
|||
<p class="font-bold">{{ $t('updateAvailable') }}</p> |
|||
<p>{{ latestRelease.changelog }}</p> |
|||
</div> |
|||
|
|||
<a |
|||
href="https://github.com/wg-easy/wg-easy#updating" |
|||
target="_blank" |
|||
class="p-3 rounded-md bg-white dark:bg-red-100 float-right font-sm font-semibold text-red-800 dark:text-red-600 flex-shrink-0 border-2 border-red-800 dark:border-red-600 hover:border-white dark:hover:border-red-600 hover:text-white dark:hover:text-red-100 hover:bg-red-800 dark:hover:bg-red-600 transition-all" |
|||
> |
|||
{{ $t('update') }} → |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</header> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
definePageMeta({ |
|||
layout: 'header', |
|||
}); |
|||
|
|||
type ClientPersist = { |
|||
transferRxHistory: number[]; |
|||
transferRxPrevious: number; |
|||
transferRxCurrent: number; |
|||
transferRxSeries: { name: string; data: number[] }[]; |
|||
hoverRx?: unknown; |
|||
transferTxHistory: number[]; |
|||
transferTxPrevious: number; |
|||
transferTxCurrent: number; |
|||
transferTxSeries: { name: string; data: number[] }[]; |
|||
hoverTx?: unknown; |
|||
}; |
|||
|
|||
type LocalClient = WGClient & { |
|||
avatar?: string; |
|||
transferMax?: number; |
|||
} & Omit<ClientPersist, 'transferRxPrevious' | 'transferTxPrevious'>; |
|||
|
|||
const authenticated = ref<null | boolean>(null); |
|||
const requiresPassword = ref<null | boolean>(null); |
|||
|
|||
const clients = ref<null | LocalClient[]>(null); |
|||
|
|||
const currentRelease = ref<null | number>(null); |
|||
const latestRelease = ref<null | { version: number; changelog: string }>(null); |
|||
|
|||
const theme = useTheme(); |
|||
|
|||
const uiChartType = ref(0); |
|||
const uiShowCharts = ref(getItem('uiShowCharts') === '1'); |
|||
|
|||
function toggleTheme() { |
|||
const themeCycle = { |
|||
system: 'light', |
|||
light: 'dark', |
|||
dark: 'system', |
|||
} as const; |
|||
|
|||
theme.preference = themeCycle[theme.preference]; |
|||
} |
|||
|
|||
function toggleCharts() { |
|||
setItem('uiShowCharts', uiShowCharts.value ? '1' : '0'); |
|||
} |
|||
|
|||
function logout(e: Event) { |
|||
e.preventDefault(); |
|||
|
|||
api |
|||
.deleteSession() |
|||
.then(() => { |
|||
authenticated.value = false; |
|||
clients.value = null; |
|||
|
|||
window.location.replace('/login'); |
|||
}) |
|||
.catch((err) => { |
|||
alert(err.message || err.toString()); |
|||
}); |
|||
} |
|||
|
|||
onMounted(() => { |
|||
api |
|||
.getSession() |
|||
.then((session) => { |
|||
authenticated.value = session.authenticated; |
|||
requiresPassword.value = session.requiresPassword; |
|||
}) |
|||
.catch((err) => { |
|||
alert(err.message || err.toString()); |
|||
}); |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,122 @@ |
|||
<template> |
|||
<section> |
|||
<h1 |
|||
class="text-4xl font-medium my-16 text-gray-700 dark:text-neutral-200 text-center" |
|||
> |
|||
<img src="/logo.png" width="32" class="inline align-middle dark:bg" /> |
|||
<span class="align-middle">WireGuard</span> |
|||
</h1> |
|||
|
|||
<form |
|||
class="shadow rounded-md bg-white dark:bg-neutral-700 mx-auto w-64 p-5 overflow-hidden mt-10" |
|||
@submit="login" |
|||
> |
|||
<!-- Avatar --> |
|||
<div |
|||
class="h-20 w-20 mb-10 mt-5 mx-auto rounded-full bg-red-800 dark:bg-red-800 relative overflow-hidden" |
|||
> |
|||
<svg |
|||
class="w-10 h-10 m-5 text-white dark:text-white" |
|||
xmlns="http://www.w3.org/2000/svg" |
|||
viewBox="0 0 20 20" |
|||
fill="currentColor" |
|||
> |
|||
<path |
|||
fill-rule="evenodd" |
|||
d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" |
|||
clip-rule="evenodd" |
|||
/> |
|||
</svg> |
|||
</div> |
|||
|
|||
<input |
|||
v-model="password" |
|||
type="password" |
|||
name="password" |
|||
:placeholder="$t('password')" |
|||
autocomplete="current-password" |
|||
class="px-3 py-2 text-sm dark:bg-neutral-700 text-gray-500 dark:text-gray-500 mb-5 border-2 border-gray-100 dark:border-neutral-800 rounded-lg w-full focus:border-red-800 dark:focus:border-red-800 dark:placeholder:text-neutral-400 outline-none" |
|||
/> |
|||
|
|||
<button |
|||
v-if="authenticating" |
|||
class="bg-red-800 dark:bg-red-800 w-full rounded shadow py-2 text-sm text-white dark:text-white cursor-not-allowed" |
|||
> |
|||
<svg |
|||
class="w-5 animate-spin mx-auto" |
|||
xmlns="http://www.w3.org/2000/svg" |
|||
viewBox="0 0 24 24" |
|||
fill="currentColor" |
|||
> |
|||
<circle |
|||
class="opacity-25" |
|||
cx="12" |
|||
cy="12" |
|||
r="10" |
|||
stroke="currentColor" |
|||
stroke-width="4" |
|||
/> |
|||
<path |
|||
class="opacity-75" |
|||
fill="currentColor" |
|||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" |
|||
/> |
|||
</svg> |
|||
</button> |
|||
<input |
|||
v-if="!authenticating && password" |
|||
type="submit" |
|||
class="bg-red-800 dark:bg-red-800 w-full rounded shadow py-2 text-sm text-white dark:text-white hover:bg-red-700 dark:hover:bg-red-700 transition cursor-pointer" |
|||
:value="$t('signIn')" |
|||
/> |
|||
<input |
|||
v-if="!authenticating && !password" |
|||
type="submit" |
|||
class="bg-gray-200 dark:bg-neutral-800 w-full rounded shadow py-2 text-sm text-white dark:text-white cursor-not-allowed" |
|||
:value="$t('signIn')" |
|||
/> |
|||
</form> |
|||
</section> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
const authenticated = ref<null | boolean>(null); |
|||
const authenticating = ref(false); |
|||
const password = ref<null | string>(null); |
|||
const requiresPassword = ref<null | boolean>(null); |
|||
|
|||
function login(e: Event) { |
|||
e.preventDefault(); |
|||
|
|||
if (!password.value) return; |
|||
if (authenticating.value) return; |
|||
|
|||
authenticating.value = true; |
|||
api |
|||
.createSession({ |
|||
password: password.value, |
|||
}) |
|||
.then(async () => { |
|||
const session = await api.getSession(); |
|||
authenticated.value = session.authenticated; |
|||
requiresPassword.value = session.requiresPassword; |
|||
window.location.replace('/'); |
|||
}) |
|||
.catch((err) => { |
|||
// TODO: replace alert with actual ui error message |
|||
alert(err.message || err.toString()); |
|||
}) |
|||
.finally(() => { |
|||
authenticating.value = false; |
|||
password.value = null; |
|||
}); |
|||
} |
|||
|
|||
onMounted(() => { |
|||
api.getSession().then((session) => { |
|||
if (session.authenticated || !session.requiresPassword) { |
|||
window.location.replace('/'); |
|||
} |
|||
}); |
|||
}); |
|||
</script> |
|||
Loading…
Reference in new issue