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

Add dark mode style

pull/469/head
goodbyepavlyi 4 years ago
parent
f571f4391f
commit
93c8bd470e
1 changed files with 196 additions and 198 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. 394
      src/www/index.html

394
src/www/index.html
View File

@ -8,6 +8,12 @@
tailwind.config = { tailwind.config = {
darkMode: 'class', darkMode: 'class',
} }
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
</script> </script>
<!-- <link href="./css/vendor/tailwind.min.css" rel="stylesheet"> --> <!-- <link href="./css/vendor/tailwind.min.css" rel="stylesheet"> -->
<link rel="manifest" href="./manifest.json"> <link rel="manifest" href="./manifest.json">
@ -16,22 +22,38 @@
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
</head> </head>
<style> <style>
[v-cloak] { [v-cloak] {
display: none; display: none;
} }
</style> </style>
<body class="bg-gray-50"> <body class="bg-gray-50 dark:bg-neutral-800">
<div id="app"> <div id="app">
<div v-cloak class="container mx-auto max-w-3xl"> <div class="flex justify-end">
<button v-cloak id="theme-toggle" @click="toggleTheme"
class="mt-5 mr-5 text-gray-500 dark:text-neutral-200 bg-gray-200 dark:bg-neutral-700 hover:bg-gray-300 dark:hover:bg-neutral-600 focus:outline-none rounded-lg text-sm p-2.5 transition">
<svg id="theme-toggle-dark-icon" :class="{ hidden: isDark }" class="w-5 h-5" fill="currentColor"
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
</svg>
<svg id="theme-toggle-light-icon" :class="{ hidden: !isDark }" class="w-5 h-5" fill="currentColor"
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z">
</path>
</svg>
</button>
</div>
<div v-cloak class="container mx-auto max-w-3xl px-5 md:px-0">
<div v-if="authenticated === true"> <div v-if="authenticated === true">
<span v-if="requiresPassword" <span v-if="requiresPassword"
class="text-sm text-gray-400 mb-10 mr-2 mt-3 cursor-pointer hover:underline float-right" @click="logout"> class="text-sm text-gray-400 dark:text-neutral-400 mb-10 mr-2 mt-3 cursor-pointer hover:underline float-right"
@click="logout">
Logout Logout
<svg class="h-3 inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" <svg class="h-3 inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor"> stroke="currentColor">
@ -39,13 +61,14 @@
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" /> 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> </svg>
</span> </span>
<h1 class="text-4xl font-medium mt-10 mb-2"> <h1 class="text-4xl dark:text-neutral-200 font-medium mt-2 mb-2">
<img src="./img/logo.png" width="32" class="inline align-middle" /> <img src="./img/logo.png" width="32" class="inline align-middle dark:bg-neutral-200 py-1 rounded-lg" />
<span class="align-middle">WireGuard</span> <span class="align-middle">WireGuard</span>
</h1> </h1>
<h2 class="text-sm text-gray-400 mb-10"></h2> <h2 class="text-sm text-gray-400 dark:text-neutral-400 mb-10"></h2>
<div v-if="latestRelease" class="bg-red-800 p-4 text-white text-sm font-small mb-10 rounded-md shadow-lg" <div v-if="latestRelease"
class="bg-red-800 dark:bg-green-100 p-4 text-white dark:text-green-600 text-sm font-small mb-10 rounded-md shadow-lg"
:title="`v${currentRelease} → v${latestRelease.version}`"> :title="`v${currentRelease} → v${latestRelease.version}`">
<div class="container mx-auto flex flex-row flex-auto items-center"> <div class="container mx-auto flex flex-row flex-auto items-center">
<div class="flex-grow"> <div class="flex-grow">
@ -54,20 +77,20 @@
</div> </div>
<a href="https://github.com/WeeJeWel/wg-easy#updating" target="_blank" <a href="https://github.com/WeeJeWel/wg-easy#updating" target="_blank"
class="p-3 rounded-md bg-white float-right font-sm font-semibold text-red-800 flex-shrink-0 border-2 border-red-800 hover:border-white hover:text-white hover:bg-red-800 transition-all"> class="p-3 rounded-md bg-white dark:bg-green-100 float-right font-sm font-semibold text-red-800 dark:text-green-600 flex-shrink-0 border-2 border-red-800 dark:border-green-600 hover:border-white dark:hover:border-green-600 hover:text-white dark:hover:text-green-100 hover:bg-red-800 dark:hover:bg-green-600 transition-all">
Update → Update →
</a> </a>
</div> </div>
</div> </div>
<div class="shadow-md rounded-lg bg-white overflow-hidden"> <div class="shadow-md rounded-lg bg-white dark:bg-neutral-700 overflow-hidden">
<div class="flex flex-row flex-auto items-center p-3 px-5 border border-b-2 border-gray-100"> <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-grow"> <div class="flex-grow">
<p class="text-2xl font-medium">Clients</p> <p class="text-2xl font-medium dark:text-neutral-200">Clients</p>
</div> </div>
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<button @click="clientCreate = true; clientCreateName = '';" <button @click="clientCreate = true; clientCreateName = '';"
class="hover:bg-red-800 hover:border-red-800 hover:text-white text-gray-700 border-2 border-gray-100 py-2 px-4 rounded inline-flex items-center transition"> class="hover:bg-red-800 hover:border-red-800 hover:text-white text-gray-700 dark:text-neutral-200 border-2 border-gray-100 dark:border-neutral-600 py-2 px-4 rounded inline-flex items-center transition">
<svg class="w-4 mr-2" inline xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" <svg class="w-4 mr-2" inline xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor"> stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@ -81,113 +104,56 @@
<div> <div>
<!-- Client --> <!-- Client -->
<div v-if="clients && clients.length > 0" v-for="client in clients" :key="client.id" <div v-if="clients && clients.length > 0" v-for="client in clients" :key="client.id"
class="relative overflow-hidden border-b border-gray-100 border-solid"> class="relative overflow-hidden border-b last:border-b-0 border-gray-100 dark:border-neutral-600 border-solid">
<!-- Chart --> <!-- Chart -->
<div class="absolute z-0 bottom-0 left-0 right-0" style="width: 100%; height: 20%;"> <div class="absolute z-0 bottom-0 left-0 right-0" style="top: 60%;">
<!-- Bar --> <apexchart width="100%" height="100%" :options="client.chartOptions" :series="client.transferTxSeries">
<div v-for="(_, index) in client.transferTxHistory" :style="{ </apexchart>
display: 'inline-flex', </div>
alignItems: 'flex-end', <div class="absolute z-0 top-0 left-0 right-0" style="bottom: 60%;">
width: '2%', // 1/100th of client.transferTxHistory.length <apexchart width="100%" height="100%" :options="client.chartOptions" :series="client.transferRxSeries"
height: '100%', style="transform: scaleY(-1);">
padding: '0 3px', </apexchart>
boxSizing: 'border-box',
fontSize: 0,
}">
<!-- TX -->
<div :style="{
minHeight: '0px',
minWidth: '2px',
maxWidth: '4px',
width: '50%',
marginRight: '1px',
height: Math.round((client.transferTxHistory[index]/client.transferMax)*100) + '%',
background: client.hoverTx
? '#992922'
: '#F3F4F6',
transition: 'all 0.2s',
borderRadius: '2px 2px 0 0',
}"></div>
<!-- RX -->
<div :style="{
minHeight: '0px',
minWidth: '2px',
maxWidth: '4px',
width: '50%',
height: Math.round((client.transferRxHistory[index]/client.transferMax)*100) + '%',
background: client.hoverRx
? '#992922'
: '#F0F1F3',
transition: 'all 0.2s',
borderRadius: '2px 2px 0 0',
}"></div>
</div>
</div> </div>
<div class="relative p-5 z-10 flex flex-row"> <div class="relative p-5 z-10 flex flex-col md:flex-row justify-between">
<div class="h-10 w-10 mr-5 rounded-full bg-gray-50 relative"> <div class="flex items-center pb-2 md:pb-0">
<svg class="w-6 m-2 text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" <div class="h-10 w-10 mr-5 rounded-full bg-gray-50 relative">
fill="currentColor"> <svg class="w-6 m-2 text-gray-300" xmlns="http://www.w3.org/2000/svg"
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" viewBox="0 0 20 20" fill="currentColor">
clip-rule="evenodd" /> <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
</svg> clip-rule="evenodd" />
<img v-if="client.avatar" :src="client.avatar" class="w-10 rounded-full absolute top-0 left-0" /> </svg>
<img v-if="client.avatar" :src="client.avatar" class="w-10 rounded-full absolute top-0 left-0" />
<div
v-if="client.latestHandshakeAt && ((new Date() - new Date(client.latestHandshakeAt) < 1000 * 60 * 10))"> <div
<div class="animate-ping w-4 h-4 p-1 bg-red-100 rounded-full absolute -bottom-1 -right-1"></div> v-if="client.latestHandshakeAt && ((new Date() - new Date(client.latestHandshakeAt) < 1000 * 60 * 10))">
<div class="w-2 h-2 bg-red-800 rounded-full absolute bottom-0 right-0"></div> <div
</div> class="animate-ping w-4 h-4 p-1 bg-red-100 dark:bg-green-100 rounded-full absolute -bottom-1 -right-1">
</div> </div>
<div class="w-2 h-2 bg-red-800 dark:bg-green-600 rounded-full absolute bottom-0 right-0"></div>
<div class="flex-grow"> </div>
<!-- Name -->
<div class="text-gray-700 group" :title="'Created on ' + dateTime(new Date(client.createdAt))">
<!-- Show -->
<input v-show="clientEditNameId === client.id" v-model="clientEditName"
v-on:keyup.enter="updateClientName(client, clientEditName); clientEditName = null; clientEditNameId = null;"
v-on:keyup.escape="clientEditName = null; clientEditNameId = null;"
:ref="'client-' + client.id + '-name'"
class="rounded px-1 border-2 border-gray-100 focus:border-gray-200 outline-none w-30" />
<span v-show="clientEditNameId !== client.id"
class="inline-block border-t-2 border-b-2 border-transparent">{{client.name}}</span>
<!-- Edit -->
<span v-show="clientEditNameId !== client.id"
@click="clientEditName = client.name; clientEditNameId = client.id; setTimeout(() => $refs['client-' + client.id + '-name'][0].select(), 1);"
class="cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 inline align-middle opacity-25 hover:opacity-100" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
</span>
</div> </div>
<!-- Info --> <div class="flex-grow">
<div class="text-gray-400 text-xs">
<!-- Address --> <!-- Name -->
<span class="group"> <div class="text-gray-700 dark:text-neutral-200 group"
:title="'Created on ' + dateTime(new Date(client.createdAt))">
<!-- Show --> <!-- Show -->
<input v-show="clientEditAddressId === client.id" v-model="clientEditAddress" <input v-show="clientEditNameId === client.id" v-model="clientEditName"
v-on:keyup.enter="updateClientAddress(client, clientEditAddress); clientEditAddress = null; clientEditAddressId = null;" v-on:keyup.enter="updateClientName(client, clientEditName); clientEditName = null; clientEditNameId = null;"
v-on:keyup.escape="clientEditAddress = null; clientEditAddressId = null;" v-on:keyup.escape="clientEditName = null; clientEditNameId = null;"
:ref="'client-' + client.id + '-address'" :ref="'client-' + client.id + '-name'"
class="rounded border-2 border-gray-100 focus:border-gray-200 outline-none w-20 text-black" /> class="rounded px-1 border-2 dark:bg-neutral-700 border-gray-100 dark:border-neutral-600 focus:border-gray-200 dark:focus:border-neutral-500 dark:placeholder:text-neutral-500 outline-none w-30" />
<span v-show="clientEditAddressId !== client.id" <span v-show="clientEditNameId !== client.id"
class="inline-block border-t-2 border-b-2 border-transparent">{{client.address}}</span> class="inline-block border-t-2 border-b-2 border-transparent">{{client.name}}</span>
<!-- Edit --> <!-- Edit -->
<span v-show="clientEditAddressId !== client.id" <span v-show="clientEditNameId !== client.id"
@click="clientEditAddress = client.address; clientEditAddressId = client.id; setTimeout(() => $refs['client-' + client.id + '-address'][0].select(), 1);" @click="clientEditName = client.name; clientEditNameId = client.id; setTimeout(() => $refs['client-' + client.id + '-name'][0].select(), 1);"
class="cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity"> class="cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity">
<svg xmlns="http://www.w3.org/2000/svg" <svg xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 inline align-middle opacity-25 hover:opacity-100" fill="none" class="h-4 w-4 inline align-middle opacity-25 hover:opacity-100" fill="none"
@ -196,48 +162,71 @@
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /> d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg> </svg>
</span> </span>
</span> </div>
<!-- Transfer TX --> <!-- Info -->
<span v-if="client.transferTx" :title="'Total Download: ' + bytes(client.transferTx)" <div class="text-gray-400 dark:text-neutral-400 text-xs">
@mouseover="client.hoverTx = clientsPersist[client.id].hoverTx = true;"
@mouseleave="client.hoverTx = clientsPersist[client.id].hoverTx = false;" <!-- Address -->
style="cursor: default;"> <span class="group block md:inline-block pb-1 md:pb-0">
·
<svg class="align-middle h-3 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" <!-- Show -->
fill="currentColor"> <input v-show="clientEditAddressId === client.id" v-model="clientEditAddress"
<path fill-rule="evenodd" v-on:keyup.enter="updateClientAddress(client, clientEditAddress); clientEditAddress = null; clientEditAddressId = null;"
d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z" v-on:keyup.escape="clientEditAddress = null; clientEditAddressId = null;"
clip-rule="evenodd" /> :ref="'client-' + client.id + '-address'"
</svg> class="rounded border-2 dark:bg-neutral-700 border-gray-100 dark:border-neutral-600 focus:border-gray-200 dark:focus:border-neutral-500 outline-none w-20 text-black dark:text-neutral-300 dark:placeholder:text-neutral-500" />
{{client.transferTxCurrent | bytes}}/s <span v-show="clientEditAddressId !== client.id"
</span> class="inline-block border-t-2 border-b-2 border-transparent">{{client.address}}</span>
<!-- Transfer RX --> <!-- Edit -->
<span v-if="client.transferRx" :title="'Total Upload: ' + bytes(client.transferRx)" <span v-show="clientEditAddressId !== client.id"
@mouseover="client.hoverRx = clientsPersist[client.id].hoverRx = true;" @click="clientEditAddress = client.address; clientEditAddressId = client.id; setTimeout(() => $refs['client-' + client.id + '-address'][0].select(), 1);"
@mouseleave="client.hoverRx = clientsPersist[client.id].hoverRx = false;" class="cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity">
style="cursor: default;"> <svg xmlns="http://www.w3.org/2000/svg"
· class="h-4 w-4 inline align-middle opacity-25 hover:opacity-100" fill="none"
<svg class="align-middle h-3 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" viewBox="0 0 24 24" stroke="currentColor">
fill="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
<path fill-rule="evenodd" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z" </svg>
clip-rule="evenodd" /> </span>
</svg> </span>
{{client.transferRxCurrent | bytes}}/s
</span> <!-- Transfer TX -->
<span v-if="client.transferTx" :title="'Total Download: ' + bytes(client.transferTx)">
<!-- Last seen --> ·
<span v-if="client.latestHandshakeAt" <svg class="align-middle h-3 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
:title="'Last seen on ' + dateTime(new Date(client.latestHandshakeAt))"> fill="currentColor">
· {{new Date(client.latestHandshakeAt) | timeago}} <path fill-rule="evenodd"
</span> d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z"
clip-rule="evenodd" />
</svg>
{{client.transferTxCurrent | bytes}}/s
</span>
<!-- Transfer RX -->
<span v-if="client.transferRx" :title="'Total Upload: ' + bytes(client.transferRx)">
·
<svg class="align-middle h-3 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
{{client.transferRxCurrent | bytes}}/s
</span>
<!-- Last seen -->
<span v-if="client.latestHandshakeAt"
:title="'Last seen on ' + dateTime(new Date(client.latestHandshakeAt))">
· {{new Date(client.latestHandshakeAt) | timeago}}
</span>
</div>
</div> </div>
</div> </div>
<div class="text-right"> <div class="flex items-center justify-end">
<div class="text-gray-400"> <div class="text-gray-400 dark:text-neutral-400 flex gap-1 items-center justify-between">
<!-- Enable/Disable --> <!-- Enable/Disable -->
<div @click="disableClient(client)" v-if="client.enabled === true" title="Disable Client" <div @click="disableClient(client)" v-if="client.enabled === true" title="Disable Client"
@ -245,12 +234,13 @@
<div class="rounded-full w-4 h-4 m-1 ml-5 bg-white"></div> <div class="rounded-full w-4 h-4 m-1 ml-5 bg-white"></div>
</div> </div>
<div @click="enableClient(client)" v-if="client.enabled === false" title="Enable Client" <div @click="enableClient(client)" v-if="client.enabled === false" title="Enable Client"
class="inline-block align-middle rounded-full w-10 h-6 mr-1 bg-gray-200 cursor-pointer hover:bg-gray-300 transition-all"> class="inline-block align-middle rounded-full w-10 h-6 mr-1 bg-gray-200 dark:bg-neutral-400 cursor-pointer hover:bg-gray-300 dark:hover:bg-neutral-500 transition-all">
<div class="rounded-full w-4 h-4 m-1 bg-white"></div> <div class="rounded-full w-4 h-4 m-1 bg-white"></div>
</div> </div>
<!-- Show QR--> <!-- Show QR-->
<button class="align-middle bg-gray-100 hover:bg-red-800 hover:text-white p-2 rounded transition" <button
class="align-middle bg-gray-100 dark:bg-neutral-600 dark:text-neutral-300 hover:bg-red-800 dark:hover:bg-red-800 hover:text-white dark:hover:text-white p-2 rounded transition"
title="Show QR Code" @click="qrcode = `./api/wireguard/client/${client.id}/qrcode.svg`"> title="Show QR Code" @click="qrcode = `./api/wireguard/client/${client.id}/qrcode.svg`">
<svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor"> stroke="currentColor">
@ -261,7 +251,7 @@
<!-- Download Config --> <!-- Download Config -->
<a :href="'./api/wireguard/client/' + client.id + '/configuration'" download <a :href="'./api/wireguard/client/' + client.id + '/configuration'" download
class="align-middle inline-block bg-gray-100 hover:bg-red-800 hover:text-white p-2 rounded transition" class="align-middle inline-block bg-gray-100 dark:bg-neutral-600 dark:text-neutral-300 hover:bg-red-800 dark:hover:bg-red-800 hover:text-white dark:hover:text-white p-2 rounded transition"
title="Download Configuration"> title="Download Configuration">
<svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor"> stroke="currentColor">
@ -271,7 +261,8 @@
</a> </a>
<!-- Delete --> <!-- Delete -->
<button class="align-middle bg-gray-100 hover:bg-red-800 hover:text-white p-2 rounded transition" <button
class="align-middle bg-gray-100 dark:bg-neutral-600 dark:text-neutral-300 hover:bg-red-800 dark:hover:bg-red-800 hover:text-white dark:hover:text-white p-2 rounded transition"
title="Delete Client" @click="clientDelete = client"> title="Delete Client" @click="clientDelete = client">
<svg class="w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <svg class="w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" <path fill-rule="evenodd"
@ -286,9 +277,10 @@
</div> </div>
<div v-if="clients && clients.length === 0"> <div v-if="clients && clients.length === 0">
<p class="text-center m-10 text-gray-400 text-sm">There are no clients yet.<br /><br /> <p class="text-center m-10 text-gray-400 dark:text-neutral-400 text-sm">
There are no clients yet.<br /><br />
<button @click="clientCreate = true; clientCreateName = '';" <button @click="clientCreate = true; clientCreateName = '';"
class="bg-red-800 text-white hover:bg-red-700 border-2 border-none py-2 px-4 rounded inline-flex items-center transition"> class="bg-red-800 hover:bg-red-700 text-white border-2 border-none py-2 px-4 rounded inline-flex items-center transition">
<svg class="w-4 mr-2" inline xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" <svg class="w-4 mr-2" inline xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor"> stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@ -298,7 +290,7 @@
</button> </button>
</p> </p>
</div> </div>
<div v-if="clients === null" class="text-gray-200 p-5"> <div v-if="clients === null" class="text-gray-200 dark:text-red-300 p-5">
<svg class="w-5 animate-spin mx-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" <svg class="w-5 animate-spin mx-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
fill="currentColor"> fill="currentColor">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
@ -314,7 +306,8 @@
<div v-if="qrcode"> <div v-if="qrcode">
<div class="bg-black bg-opacity-50 fixed top-0 right-0 left-0 bottom-0 flex items-center justify-center z-20"> <div class="bg-black bg-opacity-50 fixed top-0 right-0 left-0 bottom-0 flex items-center justify-center z-20">
<div class="bg-white rounded-md shadow-lg relative p-8"> <div class="bg-white rounded-md shadow-lg relative p-8">
<button @click="qrcode = null" class="absolute right-4 top-4 text-gray-600 hover:text-gray-800"> <button @click="qrcode = null"
class="absolute right-4 top-4 text-gray-600 dark:text-neutral-500 hover:text-gray-800 dark:hover:text-neutral-700">
<svg class="w-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" <svg class="w-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor"> stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
@ -327,7 +320,7 @@
<!-- Create Dialog --> <!-- Create Dialog -->
<div v-if="clientCreate" class="fixed z-10 inset-0 overflow-y-auto"> <div v-if="clientCreate" class="fixed z-10 inset-0 overflow-y-auto">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<!-- <!--
Background overlay, show/hide based on modal state. Background overlay, show/hide based on modal state.
@ -339,7 +332,7 @@
To: "opacity-0" To: "opacity-0"
--> -->
<div class="fixed inset-0 transition-opacity" aria-hidden="true"> <div class="fixed inset-0 transition-opacity" aria-hidden="true">
<div class="absolute inset-0 bg-gray-500 opacity-75"></div> <div class="absolute inset-0 bg-gray-500 dark:bg-black opacity-75 dark:opacity-50"></div>
</div> </div>
<!-- This element is to trick the browser into centering the modal contents. --> <!-- This element is to trick the browser into centering the modal contents. -->
@ -348,49 +341,50 @@
Modal panel, show/hide based on modal state. Modal panel, show/hide based on modal state.
Entering: "ease-out duration-300" Entering: "ease-out duration-300"
From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" From: "opacity-0 tranneutral-y-4 sm:tranneutral-y-0 sm:scale-95"
To: "opacity-100 translate-y-0 sm:scale-100" To: "opacity-100 tranneutral-y-0 sm:scale-100"
Leaving: "ease-in duration-200" Leaving: "ease-in duration-200"
From: "opacity-100 translate-y-0 sm:scale-100" From: "opacity-100 tranneutral-y-0 sm:scale-100"
To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" To: "opacity-0 tranneutral-y-4 sm:tranneutral-y-0 sm:scale-95"
--> -->
<div <div
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full" class="inline-block align-bottom bg-white dark:bg-neutral-700 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg w-full"
role="dialog" aria-modal="true" aria-labelledby="modal-headline"> role="dialog" aria-modal="true" aria-labelledby="modal-headline">
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> <div class="bg-white dark:bg-neutral-700 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start"> <div class="sm:flex sm:items-start">
<div <div
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-800 sm:mx-0 sm:h-10 sm:w-10"> class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-800 sm:mx-0 sm:h-10 sm:w-10">
<svg class="h-6 w-6 text-white" inline xmlns="http://www.w3.org/2000/svg" fill="none" <svg class="h-6 w-6 text-white" inline xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" stroke="currentColor"> fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6" /> d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg> </svg>
</div> </div>
<div class="flex-grow mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> <div class="flex-grow mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-headline"> <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-neutral-200" id="modal-headline">
New Client New Client
</h3> </h3>
<div class="mt-2"> <div class="mt-2">
<p class="text-sm text-gray-500"> <p class="text-sm text-gray-500">
<input class="rounded p-2 border-2 border-gray-100 focus:border-gray-200 outline-none w-full" <input
class="rounded p-2 border-2 dark:bg-neutral-700 dark:text-neutral-200 border-gray-100 dark:border-neutral-600 focus:border-gray-200 focus:dark:border-neutral-500 dark:placeholder:text-neutral-400 outline-none w-full"
type="text" v-model.trim="clientCreateName" placeholder="Name" /> type="text" v-model.trim="clientCreateName" placeholder="Name" />
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> <div class="bg-gray-50 dark:bg-neutral-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button v-if="clientCreateName.length" type="button" @click="createClient(); clientCreate = null" <button v-if="clientCreateName.length" type="button" @click="createClient(); clientCreate = null"
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-800 text-base font-medium text-white hover:bg-red-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm"> class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-800 text-base font-medium text-white hover:bg-red-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
Create Create
</button> </button>
<button v-else type="button" <button v-else type="button"
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-200 text-base font-medium text-white sm:ml-3 sm:w-auto sm:text-sm cursor-not-allowed"> class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-200 dark:bg-neutral-400 text-base font-medium text-white dark:text-neutral-300 sm:ml-3 sm:w-auto sm:text-sm cursor-not-allowed">
Create Create
</button> </button>
<button type="button" @click="clientCreate = null" <button type="button" @click="clientCreate = null"
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-neutral-500 shadow-sm px-4 py-2 bg-white dark:bg-neutral-500 text-base font-medium text-gray-700 dark:text-neutral-50 hover:bg-gray-50 dark:hover:bg-neutral-600 dark:hover:border-neutral-600 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
Cancel Cancel
</button> </button>
</div> </div>
@ -400,7 +394,7 @@
<!-- Delete Dialog --> <!-- Delete Dialog -->
<div v-if="clientDelete" class="fixed z-10 inset-0 overflow-y-auto"> <div v-if="clientDelete" class="fixed z-10 inset-0 overflow-y-auto">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<!-- <!--
Background overlay, show/hide based on modal state. Background overlay, show/hide based on modal state.
@ -412,7 +406,7 @@
To: "opacity-0" To: "opacity-0"
--> -->
<div class="fixed inset-0 transition-opacity" aria-hidden="true"> <div class="fixed inset-0 transition-opacity" aria-hidden="true">
<div class="absolute inset-0 bg-gray-500 opacity-75"></div> <div class="absolute inset-0 bg-gray-500 dark:bg-black opacity-75 dark:opacity-50"></div>
</div> </div>
<!-- This element is to trick the browser into centering the modal contents. --> <!-- This element is to trick the browser into centering the modal contents. -->
@ -421,16 +415,16 @@
Modal panel, show/hide based on modal state. Modal panel, show/hide based on modal state.
Entering: "ease-out duration-300" Entering: "ease-out duration-300"
From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" From: "opacity-0 tranneutral-y-4 sm:tranneutral-y-0 sm:scale-95"
To: "opacity-100 translate-y-0 sm:scale-100" To: "opacity-100 tranneutral-y-0 sm:scale-100"
Leaving: "ease-in duration-200" Leaving: "ease-in duration-200"
From: "opacity-100 translate-y-0 sm:scale-100" From: "opacity-100 tranneutral-y-0 sm:scale-100"
To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" To: "opacity-0 tranneutral-y-4 sm:tranneutral-y-0 sm:scale-95"
--> -->
<div <div
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full" class="inline-block align-bottom bg-white dark:bg-neutral-700 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg w-full"
role="dialog" aria-modal="true" aria-labelledby="modal-headline"> role="dialog" aria-modal="true" aria-labelledby="modal-headline">
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> <div class="bg-white dark:bg-neutral-700 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start"> <div class="sm:flex sm:items-start">
<div <div
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"> class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
@ -442,11 +436,11 @@
</svg> </svg>
</div> </div>
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-headline"> <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-neutral-200" id="modal-headline">
Delete Client Delete Client
</h3> </h3>
<div class="mt-2"> <div class="mt-2">
<p class="text-sm text-gray-500"> <p class="text-sm text-gray-500 dark:text-neutral-300">
Are you sure you want to delete <strong>{{clientDelete.name}}</strong>? Are you sure you want to delete <strong>{{clientDelete.name}}</strong>?
This action cannot be undone. This action cannot be undone.
</p> </p>
@ -454,13 +448,13 @@
</div> </div>
</div> </div>
</div> </div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> <div class="bg-gray-50 dark:bg-neutral-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button type="button" @click="deleteClient(clientDelete); clientDelete = null" <button type="button" @click="deleteClient(clientDelete); clientDelete = null"
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"> class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 dark:bg-red-100 text-base font-medium text-white dark:text-red-600 hover:bg-red-700 dark:hover:bg-red-200 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
Delete Delete
</button> </button>
<button type="button" @click="clientDelete = null" <button type="button" @click="clientDelete = null"
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-neutral-500 shadow-sm px-4 py-2 bg-white dark:bg-neutral-500 text-base font-medium text-gray-700 dark:text-neutral-50 hover:bg-gray-50 dark:hover:bg-neutral-600 dark:hover:border-neutral-600 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
Cancel Cancel
</button> </button>
</div> </div>
@ -470,22 +464,23 @@
</div> </div>
<div v-if="authenticated === false"> <div v-if="authenticated === false">
<h1 class="text-4xl font-medium my-16 text-gray-700 text-center">WireGuard</h1> <h1 class="text-4xl font-medium my-16 text-gray-700 dark:text-neutral-200 text-center">WireGuard</h1>
<form @submit="login" class="shadow rounded-md bg-white mx-auto w-64 p-5 overflow-hidden mt-10"> <form @submit="login"
class="shadow rounded-md bg-white dark:bg-neutral-700 mx-auto w-64 p-5 overflow-hidden mt-10">
<!-- Avatar --> <!-- Avatar -->
<div class="h-20 w-20 mb-10 mt-5 mx-auto rounded-full bg-red-800 relative overflow-hidden"> <div class="h-20 w-20 mb-10 mt-5 mx-auto rounded-full bg-red-800 dark:bg-red-100 relative overflow-hidden">
<svg class="w-10 h-10 m-5 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" <svg class="w-10 h-10 m-5 text-white dark:text-red-600" xmlns="http://www.w3.org/2000/svg"
fill="currentColor"> 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" /> <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> </svg>
</div> </div>
<input type="password" name="password" placeholder="Password" v-model="password" <input type="password" name="password" placeholder="Password" v-model="password"
class="px-3 py-2 text-sm text-gray-500 mb-5 border-2 border-gray-100 rounded-lg w-full focus:border-red-800 outline-none" /> class="px-3 py-2 text-sm dark:bg-neutral-700 text-gray-500 dark:text-neutral-200 mb-5 border-2 border-gray-100 dark:border-neutral-600 rounded-lg w-full focus:border-red-800 dark:focus:border-neutral-500 dark:placeholder:text-neutral-400 outline-none" />
<button v-if="authenticating" <button v-if="authenticating"
class="bg-red-800 w-full rounded shadow py-2 text-sm text-white cursor-not-allowed"> class="bg-red-800 dark:bg-red-100 w-full rounded shadow py-2 text-sm text-white dark:text-red-600 cursor-not-allowed">
<svg class="w-5 animate-spin mx-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" <svg class="w-5 animate-spin mx-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
fill="currentColor"> fill="currentColor">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
@ -495,14 +490,15 @@
</svg> </svg>
</button> </button>
<input v-if="!authenticating && password" type="submit" <input v-if="!authenticating && password" type="submit"
class="bg-red-800 w-full rounded shadow py-2 text-sm text-white hover:bg-red-700 transition cursor-pointer" class="bg-red-800 dark:bg-red-100 w-full rounded shadow py-2 text-sm text-white dark:text-red-600 hover:bg-red-700 dark:hover:bg-red-200 transition cursor-pointer"
value="Sign In"> value="Sign In">
<input v-if="!authenticating && !password" type="submit" <input v-if="!authenticating && !password" type="submit"
class="bg-gray-200 w-full rounded shadow py-2 text-sm text-white cursor-not-allowed" value="Sign In"> class="bg-gray-200 dark:bg-neutral-400 w-full rounded shadow py-2 text-sm text-white dark:text-neutral-300 cursor-not-allowed"
value="Sign In">
</form> </form>
</div> </div>
<div v-if="authenticated === null" class="text-gray-300 pt-24 pb-12"> <div v-if="authenticated === null" class="text-gray-300 dark:text-red-300 pt-24 pb-12">
<svg class="w-5 animate-spin mx-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" <svg class="w-5 animate-spin mx-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
fill="currentColor"> fill="currentColor">
@ -516,15 +512,17 @@
</div> </div>
<p v-cloak class="text-center m-10 text-gray-300 text-xs">Made by <a target="_blank" class="hover:underline" <p v-cloak class="text-center m-10 text-gray-300 dark:text-neutral-600 text-xs">Made by <a target="_blank"
href="https://emilenijssen.nl/?ref=wg-easy">Emile Nijssen</a> · <a class="hover:underline" class="hover:underline" href="https://emilenijssen.nl/?ref=wg-easy">Emile Nijssen</a> · <a
href="https://github.com/sponsors/WeeJeWel" target="_blank">Donate</a> · <a class="hover:underline" class="hover:underline" href="https://github.com/sponsors/WeeJeWel" target="_blank">Donate</a> · <a
href="https://github.com/weejewel/wg-easy" target="_blank">GitHub</a></p> class="hover:underline" href="https://github.com/weejewel/wg-easy" target="_blank">GitHub</a></p>
</div> </div>
<script src="./js/vendor/vue.min.js"></script> <script src="./js/vendor/vue.min.js"></script>
<script src="./js/vendor/apexcharts.min.js"></script>
<script src="./js/vendor/vue-apexcharts.min.js"></script>
<script src="./js/vendor/md5.min.js"></script> <script src="./js/vendor/md5.min.js"></script>
<script src="./js/vendor/timeago.min.js"></script> <script src="./js/vendor/timeago.min.js"></script>
<script src="./js/api.js"></script> <script src="./js/api.js"></script>

Write Preview
Loading…
Cancel
Save