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

improved styling

pull/160/head
ApexioDaCoder 3 years ago
parent
1b036c3b4c
commit
039ee208ff
4 changed files with 275 additions and 190 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. 2
      package.json
  2. 1
      src/www/css/vendor/tailwind.min.css
  3. 454
      src/www/index.html
  4. 8
      src/www/js/app.js

2
package.json
View File

@ -1,5 +1,5 @@
{ {
"version": "1.0.0", "version": "1.0.1",
"scripts": { "scripts": {
"build": "docker build --tag wg-easy .", "build": "docker build --tag wg-easy .",
"serve": "docker-compose -f docker-compose.yml -f docker-compose.dev.yml up", "serve": "docker-compose -f docker-compose.yml -f docker-compose.dev.yml up",

1
src/www/css/vendor/tailwind.min.css
View File

File diff suppressed because one or more lines are too long

454
src/www/index.html
View File

@ -3,19 +3,98 @@
<head> <head>
<title>WireGuard</title> <title>WireGuard</title>
<link href="/css/vendor/tailwind.min.css" rel="stylesheet">
<link rel="manifest" href="manifest.json"> <link rel="manifest" href="manifest.json">
<link rel="icon" type="image/png" href="img/favicon.png"> <link rel="icon" type="image/png" href="img/favicon.png">
<link rel="apple-touch-icon" href="img/apple-touch-icon.png"> <link rel="apple-touch-icon" href="img/apple-touch-icon.png">
<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">
<script src="https://cdn.tailwindcss.com"></script>
<style>
.popper {
width: auto;
background-color: #fafafa;
color: #212121;
text-align: center;
padding: 2px;
display: inline-block;
border-radius: 3px;
position: absolute;
font-size: 14px;
font-weight: 400;
border: 1px #ebebeb solid;
z-index: 200000;
-moz-box-shadow: #3a3a3a 0 0 6px 0;
-webkit-box-shadow: #3a3a3a 0 0 6px 0;
box-shadow: #3a3a3a 0 0 6px 0
}
.popper .popper__arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px
}
.popper[x-placement^=top] {
margin-bottom: 5px
}
.popper[x-placement^=top] .popper__arrow {
border-width: 5px 5px 0 5px;
border-color: #fafafa transparent transparent transparent;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0
}
.popper[x-placement^=bottom] {
margin-top: 5px
}
.popper[x-placement^=bottom] .popper__arrow {
border-width: 0 5px 5px 5px;
border-color: transparent transparent #fafafa transparent;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0
}
.popper[x-placement^=right] {
margin-left: 5px
}
.popper[x-placement^=right] .popper__arrow {
border-width: 5px 5px 5px 0;
border-color: transparent #fafafa transparent transparent;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0
}
.popper[x-placement^=left] {
margin-right: 5px
}
.popper[x-placement^=left] .popper__arrow {
border-width: 5px 0 5px 5px;
border-color: transparent transparent transparent #fafafa;
right: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0
}
</style>
</head> </head>
<body class="bg-gray-50"> <body class="bg-gray-50">
<div id="app"> <div id="app">
<div class="container mx-auto max-w-3xl"> <div class="container mx-auto max-w-sm md:max-w-2xl lg:max-w-3xl">
<div v-if="authenticated === true"> <div v-if="authenticated === true">
<span v-if="requiresPassword" <span v-if="requiresPassword"
@ -154,7 +233,7 @@
</span> </span>
<!-- Transfer TX --> <!-- Transfer TX -->
<span v-if="client.transferTx":title="'Total Download: ' + bytes(client.transferTx)"> <span v-if="client.transferTx" :title="'Total Download: ' + bytes(client.transferTx)">
· ·
<svg class="align-middle h-3 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" <svg class="align-middle h-3 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor"> fill="currentColor">
@ -189,13 +268,12 @@
<div class="text-gray-400"> <div class="text-gray-400">
<!-- Enable/Disable --> <!-- Enable/Disable -->
<div @click="disableClient(client)" v-if="client.enabled === true" title="Disable Client" <div class="relative inline-block align-middle group m-1 ml-5" title="Disable Client">
class="inline-block align-middle rounded-full w-10 h-6 mr-1 bg-red-800 cursor-pointer hover:bg-red-700 transition-all"> <input type="checkbox"
<div class="rounded-full w-4 h-4 m-1 ml-5 bg-white"></div> class="z-20 cursor-pointer absolute left-1/2 -translate-x-1/2 w-full h-full peer appearance-none rounded-md"
</div> :checked="client.enabled === true" @input="switchClientStatus(client)" />
<div @click="enableClient(client)" v-if="client.enabled === false" title="Enable Client" <span
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="z-10 after:z-10 w-10 h-6 flex items-center flex-shrink-0 p-1 bg-gray-200 rounded-full duration-200 ease-in-out peer-checked:bg-red-800 group-hover:bg-gray-300 after:w-4 after:h-4 after:bg-white after:rounded-full after:duration-200 peer-checked:after:translate-x-4"></span>
<div class="rounded-full w-4 h-4 m-1 bg-white"></div>
</div> </div>
<!-- Show QR--> <!-- Show QR-->
@ -232,52 +310,52 @@
</div> </div>
</div> </div>
<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 />
<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">
<svg class="w-4 mr-2" 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="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
<span class="text-sm">New Client</span>
</button>
</p>
</div>
<div v-if="clients === null" class="text-gray-200 p-5">
<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"></circle>
<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">
</path>
</svg>
</div>
</div> </div>
<div v-if="clients && clients.length === 0"> </div>
<p class="text-center m-10 text-gray-400 text-sm">There are no clients yet.<br /><br />
<button @click="clientCreate = true; clientCreateName = '';" <!-- QR Code-->
class="bg-red-800 text-white hover:bg-red-700 border-2 border-none py-2 px-4 rounded inline-flex items-center transition"> <div v-if="qrcode" class="">
<svg class="w-4 mr-2" inline xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" <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="max-w-sm md:max-w-2xl lg:max-w-3xl bg-white rounded-md shadow-lg relative p-8">
<button @click="qrcode = null"
class="absolute right-3 top-3 transition hover:bg-red-800 hover:text-white text-gray-700 p-1 rounded inline-flex items-center transitio">
<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" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg> </svg>
<span class="text-sm">New Client</span>
</button> </button>
</p> <img :src="qrcode" />
</div> </div>
<div v-if="clients === null" class="text-gray-200 p-5">
<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"></circle>
<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">
</path>
</svg>
</div>
</div>
</div>
<!-- QR Code-->
<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-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">
<svg class="w-8" 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="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<img :src="qrcode" />
</div> </div>
</div> </div>
</div>
<!-- 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.
Entering: "ease-out duration-300" Entering: "ease-out duration-300"
@ -287,13 +365,13 @@
From: "opacity-100" From: "opacity-100"
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 opacity-75"></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. -->
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span> <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
<!-- <!--
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"
@ -303,54 +381,54 @@
From: "opacity-100 translate-y-0 sm:scale-100" From: "opacity-100 translate-y-0 sm:scale-100"
To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" To: "opacity-0 translate-y-4 sm:translate-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 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm: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 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" fill="none"
viewBox="0 0 24 24" stroke="currentColor"> 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" 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 border-gray-100 focus:border-gray-200 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 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 text-base font-medium text-white 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 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"> Cancel
Cancel </button>
</button> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- 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.
Entering: "ease-out duration-300" Entering: "ease-out duration-300"
@ -360,13 +438,13 @@
From: "opacity-100" From: "opacity-100"
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 opacity-75"></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. -->
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span> <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
<!-- <!--
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"
@ -376,110 +454,110 @@
From: "opacity-100 translate-y-0 sm:scale-100" From: "opacity-100 translate-y-0 sm:scale-100"
To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" To: "opacity-0 translate-y-4 sm:translate-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 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm: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 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">
<!-- Heroicon name: outline/exclamation --> <!-- Heroicon name: outline/exclamation -->
<svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" <svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none"
stroke="currentColor" aria-hidden="true"> viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /> d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</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" 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">
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>
</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 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 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"> 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 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"> Cancel
Cancel </button>
</button> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </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 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 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 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" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor"> 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 text-gray-500 mb-5 border-2 border-gray-100 rounded-lg w-full focus:border-red-800 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 w-full rounded shadow py-2 text-sm 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" <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>
<path class="opacity-75" fill="currentColor" <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"> 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">
</path> </path>
</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 w-full rounded shadow py-2 text-sm text-white hover:bg-red-700 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 w-full rounded shadow py-2 text-sm text-white 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 pt-24 pb-12"> <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"></circle>
<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">
</path>
</svg>
<svg class="w-5 animate-spin mx-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" </div>
fill="currentColor">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<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">
</path>
</svg>
</div> </div>
</div> <p class="text-center m-10 text-gray-300 text-xs">Made by <a target="_blank" class="hover:underline"
href="https://emilenijssen.nl/?ref=wg-easy">Emile Nijssen</a> · <a class="hover:underline"
href="https://github.com/sponsors/WeeJeWel" target="_blank">Donate</a> · <a class="hover:underline"
href="https://github.com/weejewel/wg-easy" target="_blank">GitHub</a></p>
<p class="text-center m-10 text-gray-300 text-xs">Made by <a target="_blank" class="hover:underline"
href="https://emilenijssen.nl/?ref=wg-easy">Emile Nijssen</a> · <a class="hover:underline"
href="https://github.com/sponsors/WeeJeWel" target="_blank">Donate</a> · <a 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/apexcharts.min.js"></script>
<script src="/js/vendor/vue.min.js"></script> <script src="/js/vendor/vue-apexcharts.min.js"></script>
<script src="/js/vendor/apexcharts.min.js"></script> <script src="/js/vendor/md5.min.js"></script>
<script src="/js/vendor/vue-apexcharts.min.js"></script> <script src="/js/vendor/timeago.min.js"></script>
<script src="/js/vendor/md5.min.js"></script> <script src="/js/api.js"></script>
<script src="/js/vendor/timeago.min.js"></script> <script src="/js/app.js"></script>
<script src="/js/api.js"></script>
<script src="/js/app.js"></script>
</body> </body>
</html> </html>

8
src/www/js/app.js
View File

@ -92,6 +92,14 @@ new Vue({
}, },
}, },
methods: { methods: {
switchClientStatus(client) {
if (client.enabled === true) {
this.disableClient(client)
}
else {
this.enableClient(client);
}
},
dateTime: value => { dateTime: value => {
return new Intl.DateTimeFormat(undefined, { return new Intl.DateTimeFormat(undefined, {
year: 'numeric', year: 'numeric',

Write Preview
Loading…
Cancel
Save