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

Move modals into separate components

pull/937/head
Sergei Birukov 2 years ago
parent
7a554de087
commit
64803783c7
5 changed files with 222 additions and 171 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. 32
      .gitignore
  2. 167
      webui/src/App.vue
  3. 79
      webui/src/components/ModalCreateClient.vue
  4. 66
      webui/src/components/ModalDeleteClient.vue
  5. 23
      webui/src/components/ModalQRCode.vue

32
.gitignore
View File

@ -4,3 +4,35 @@
/src/node_modules /src/node_modules
.DS_Store .DS_Store
*.swp *.swp
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
.DS_Store
dist
dist-ssr
coverage
*.local
/cypress/videos/
/cypress/screenshots/
# Editor directories and files
.vscode/*
*.vscode-workspace
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
*.tsbuildinfo

167
webui/src/App.vue
View File

@ -26,15 +26,13 @@
<div v-for="client in clients" :key="client.id"> <div v-for="client in clients" :key="client.id">
<Client :client="client" /> <Client :client="client" />
</div> </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 dark:text-neutral-400 text-sm"> <p class="text-center m-10 text-gray-400 dark:text-neutral-400 text-sm">
There are no clients yet.<br /><br /> There are no clients yet.<br /><br />
<button <button
class="bg-red-800 hover:bg-red-700 text-white 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"
@click=" @click="handleNewClient()"
clientCreateShowModal = true;
clientCreateName = '';
"
> >
<IconNew class="w-4 mr-2" /> <IconNew class="w-4 mr-2" />
<span class="text-sm">New Client</span> <span class="text-sm">New Client</span>
@ -45,166 +43,20 @@
<LoadingSpinner /> <LoadingSpinner />
</div> </div>
</div> </div>
</div>
<!-- QR Code--> <!-- QR Code-->
<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"> <ModalQRCode />
<div class="bg-white rounded-md shadow-lg relative p-8">
<button
class="absolute right-4 top-4 text-gray-600 dark:text-neutral-500 hover:text-gray-800 dark:hover:text-neutral-700"
@click="qrcode = null"
>
<IconClose />
</button>
<img :src="qrcode" />
</div>
</div>
</div> </div>
<!-- Create Dialog --> <!-- Create Dialog -->
<div v-if="clientCreateShowModal" class="fixed z-10 inset-0 overflow-y-auto"> <div v-if="clientCreateShowModal" class="fixed z-10 inset-0 overflow-y-auto">
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> <ModalCreateClient />
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
<div class="absolute inset-0 bg-gray-500 dark:bg-black opacity-75 dark:opacity-50"></div>
</div>
<!-- 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>
<div
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"
>
<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="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"
>
<IconNew class="h-6 w-6 text-white" />
</div>
<div class="flex-grow mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 id="modal-headline" class="text-lg leading-6 font-medium text-gray-900 dark:text-neutral-200">
New Client
</h3>
<div class="mt-2">
<p class="text-sm text-gray-500">
<input
v-model.trim="clientCreateName"
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"
placeholder="Name"
/>
</p>
</div>
</div>
</div>
</div>
<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"
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"
@click="createClient()"
>
Create
</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 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
</button>
<button
type="button"
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"
@click="clientCreateShowModal = null"
>
Cancel
</button>
</div>
</div>
</div>
</div> </div>
<!-- Delete Dialog --> <!-- Delete Dialog -->
<div v-if="clientToDelete" class="fixed z-10 inset-0 overflow-y-auto"> <div v-if="clientToDelete" class="fixed z-10 inset-0 overflow-y-auto">
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> <ModalDeleteClient />
<!--
Background overlay, show/hide based on modal state.
Entering: "ease-out duration-300"
From: "opacity-0"
To: "opacity-100"
Leaving: "ease-in duration-200"
From: "opacity-100"
To: "opacity-0"
-->
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
<div class="absolute inset-0 bg-gray-500 dark:bg-black opacity-75 dark:opacity-50"></div>
</div>
<!-- This element is to trick the browser into centering the modal contents. -->
<!-- TODO: Check if still relevant? -->
<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.
Entering: "ease-out duration-300"
From: "opacity-0 tranneutral-y-4 sm:tranneutral-y-0 sm:scale-95"
To: "opacity-100 tranneutral-y-0 sm:scale-100"
Leaving: "ease-in duration-200"
From: "opacity-100 tranneutral-y-0 sm:scale-100"
To: "opacity-0 tranneutral-y-4 sm:tranneutral-y-0 sm:scale-95"
-->
<div
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"
>
<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="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 -->
<IconWarning />
</div>
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 id="modal-headline" class="text-lg leading-6 font-medium text-gray-900 dark:text-neutral-200">
Delete Client
</h3>
<div class="mt-2">
<p class="text-sm text-gray-500 dark:text-neutral-300">
Are you sure you want to delete <strong>{{ clientToDelete.name }}</strong
>? This action cannot be undone.
</p>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 dark:bg-neutral-600 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button
type="button"
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 dark:bg-red-600 text-base font-medium text-white dark:text-white hover:bg-red-700 dark:hover:bg-red-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm"
@click="deleteClient(clientToDelete)"
>
Delete
</button>
<button
type="button"
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"
@click="clientToDelete = null"
>
Cancel
</button>
</div>
</div>
</div>
</div> </div>
</div> </div>
@ -231,14 +83,15 @@ import ClientNewButton from '@/components/ClientNewButton.vue';
import IconLogout from '@/components/icons/IconLogout.vue'; import IconLogout from '@/components/icons/IconLogout.vue';
import IconNew from '@/components/icons/IconNew.vue'; import IconNew from '@/components/icons/IconNew.vue';
import LoadingSpinner from '@/components/LoadingSpinner.vue'; import LoadingSpinner from '@/components/LoadingSpinner.vue';
import IconClose from '@/components/icons/IconClose.vue';
import IconWarning from '@/components/icons/IconWarning.vue';
import Footer from '@/components/Footer.vue'; import Footer from '@/components/Footer.vue';
import ModalQRCode from '@/components/ModalQRCode.vue';
import ModalCreateClient from '@/components/ModalCreateClient.vue';
import ModalDeleteClient from '@/components/ModalDeleteClient.vue';
import API from '@/services/api'; import API from '@/services/api';
import Client from '@/components/Client.vue'; import Client from '@/components/Client.vue';
import { useStore } from './store/store'; import { useStore } from '@/store/store';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
const store = useStore(); const store = useStore();
@ -247,8 +100,6 @@ const { authenticated, requiresPassword } = storeToRefs(store);
const { clients, clientsPersist, clientCreateShowModal, clientToDelete, clientCreateName, qrcode } = storeToRefs(store); const { clients, clientsPersist, clientCreateShowModal, clientToDelete, clientCreateName, qrcode } = storeToRefs(store);
const logout = store.logout; const logout = store.logout;
const createClient = store.createClient;
const deleteClient = store.deleteClient;
const currentRelease = ref(null); const currentRelease = ref(null);
const latestRelease = ref(null); const latestRelease = ref(null);

79
webui/src/components/ModalCreateClient.vue
View File

@ -0,0 +1,79 @@
<template>
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
<div class="absolute inset-0 bg-gray-500 dark:bg-black opacity-75 dark:opacity-50"></div>
</div>
<!-- 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>
<div
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"
>
<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="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"
>
<IconNew class="h-6 w-6 text-white" />
</div>
<div class="flex-grow mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 id="modal-headline" class="text-lg leading-6 font-medium text-gray-900 dark:text-neutral-200">
New Client
</h3>
<div class="mt-2">
<p class="text-sm text-gray-500">
<input
v-model.trim="clientCreateName"
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"
placeholder="Name"
/>
</p>
</div>
</div>
</div>
</div>
<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"
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"
@click="createClient()"
>
Create
</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 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
</button>
<button
type="button"
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"
@click="clientCreateShowModal = null"
>
Cancel
</button>
</div>
</div>
</div>
</template>
<script setup>
import IconNew from '@/components/icons/IconNew.vue';
import { useStore } from '@/store/store';
import { storeToRefs } from 'pinia';
const store = useStore();
const { clientCreateShowModal, clientCreateName } = storeToRefs(store);
const createClient = store.createClient;
</script>
<style lang="scss" scoped></style>

66
webui/src/components/ModalDeleteClient.vue
View File

@ -0,0 +1,66 @@
<template>
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
<div class="absolute inset-0 bg-gray-500 dark:bg-black opacity-75 dark:opacity-50"></div>
</div>
<!-- This element is to trick the browser into centering the modal contents. -->
<!-- TODO: Check if still relevant? -->
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
<div
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"
>
<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="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 -->
<IconWarning />
</div>
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 id="modal-headline" class="text-lg leading-6 font-medium text-gray-900 dark:text-neutral-200">
Delete Client
</h3>
<div class="mt-2">
<p class="text-sm text-gray-500 dark:text-neutral-300">
Are you sure you want to delete <strong>{{ clientToDelete.name }}</strong
>? This action cannot be undone.
</p>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 dark:bg-neutral-600 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button
type="button"
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 dark:bg-red-600 text-base font-medium text-white dark:text-white hover:bg-red-700 dark:hover:bg-red-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm"
@click="deleteClient(clientToDelete)"
>
Delete
</button>
<button
type="button"
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"
@click="clientToDelete = null"
>
Cancel
</button>
</div>
</div>
</div>
</template>
<script setup>
import { useStore } from '@/store/store';
import { storeToRefs } from 'pinia';
import IconWarning from '@/components/icons/IconWarning.vue';
const store = useStore();
const { clientToDelete } = storeToRefs(store);
const deleteClient = store.deleteClient;
</script>

23
webui/src/components/ModalQRCode.vue
View File

@ -0,0 +1,23 @@
<template>
<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
class="absolute right-4 top-4 text-gray-600 dark:text-neutral-500 hover:text-gray-800 dark:hover:text-neutral-700"
@click="qrcode = null"
>
<IconClose />
</button>
<img :src="qrcode" />
</div>
</div>
</template>
<script setup>
import { useStore } from '@/store/store';
import { storeToRefs } from 'pinia';
import IconClose from '@/components/icons/IconClose.vue';
const store = useStore();
const { qrcode } = storeToRefs(store);
</script>
Write Preview
Loading…
Cancel
Save