Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add a basic modal template to be used

Browse source
This commit is contained in:
Dane Everitt 2018-06-16 16:25:26 -07:00
parent 84fecb7a92
commit d6959ea3dd
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
8 changed files with 130 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
resources/assets/scripts/components/core/Modal.vue Normal file
View file

@ -0,0 +1,40 @@
<template>
<transition name="modal">
<div class="modal-mask" v-show="show" v-on:click="close">
<div class="modal-container" @click.stop>
<x-icon class="absolute pin-r pin-t m-2 text-grey cursor-pointer" aria-label="Close modal"
v-on:click="close"
/>
<slot/>
</div>
</div>
</transition>
</template>
<script>
import { XIcon } from 'vue-feather-icons';
export default {
name: 'modal',
components: { XIcon },
props: {
modalName: { type: String, default: 'modal' },
show: { type: Boolean, default: false },
closeOnEsc: { type: Boolean, default: true },
},
mounted: function () {
if (this.$props.closeOnEsc) {
document.addEventListener('keydown', e => {
if (this.show && e.key === 'Escape') {
this.close();
}
})
}
},
methods: {
close: function () {
this.$emit('close', this.$props.modalName);
}
}
};
</script>

44
resources/assets/scripts/components/dashboard/Account.vue
View file

@ -2,32 +2,18 @@
<div>
<navigation/>
<div class="container animate fadein mt-6">
<modal :show="modalVisible" v-on:close="modalVisible = false">
<TwoFactorAuthentication/>
</modal>
<flash container="mt-6 mb-2 mx-4"/>
<div class="flex">
<update-email class="flex-1 m-4"/>
<div class="flex-1 m-4">
<form action="" method="post">
<div class="bg-white p-6 border border-grey-light rounded rounded-1">
<h2 class="mb-6 text-grey-darkest font-medium">Change your password</h2>
<div class="mt-6">
<label for="grid-password-current" class="input-label">Current password</label>
<input id="grid-password-current" name="password" type="password" class="input" required>
</div>
<div class="mt-6">
<label for="grid-password-new" class="input-label">New password</label>
<input id="grid-password-new" name="password" type="password" class="input" required>
<p class="input-help">Your new password should be at least 8 characters in length, contain one number, and be mixed case.</p>
</div>
<div class="mt-6">
<label for="grid-password-new-confirm" class="input-label">Confirm new password</label>
<input id="grid-password-new-confirm" name="password_confirmation" type="password" class="input" required>
</div>
<div class="mt-6 text-right">
<button class="btn btn-blue btn-sm text-right" type="submit">Save</button>
<div class="flex-1 m-4 ml-0">
<update-email class="mb-8"/>
<div class="bg-white p-6 border border-grey-light rounded rounded-1 text-center">
<button class="btn btn-green btn-sm" type="submit" v-on:click="modalVisible = true">Configure 2-Factor Authentication</button>
</div>
</div>
</form>
</div>
<change-password class="flex-1 m-4 mr-0"/>
</div>
</div>
</div>
@ -36,16 +22,18 @@
<script>
import Navigation from '../core/Navigation';
import Flash from '../Flash';
import { mapState } from 'vuex';
import UpdateEmail from './account/UpdateEmail';
import ChangePassword from './account/ChangePassword';
import Modal from '../core/Modal';
import TwoFactorAuthentication from './account/TwoFactorAuthentication';
export default {
name: 'account',
components: {UpdateEmail, Flash, Navigation},
computed: {
...mapState({
user: state => state.auth.user,
})
components: {TwoFactorAuthentication, Modal, ChangePassword, UpdateEmail, Flash, Navigation},
data: function () {
return {
modalVisible: false,
};
},
};
</script>

31
resources/assets/scripts/components/dashboard/account/ChangePassword.vue Normal file
View file

@ -0,0 +1,31 @@
<template>
<div>
<form action="" method="post">
<div class="bg-white p-6 border border-grey-light rounded rounded-1">
<h2 class="mb-6 text-grey-darkest font-medium">Change your password</h2>
<div class="mt-6">
<label for="grid-password-current" class="input-label">Current password</label>
<input id="grid-password-current" name="password" type="password" class="input" required>
</div>
<div class="mt-6">
<label for="grid-password-new" class="input-label">New password</label>
<input id="grid-password-new" name="password" type="password" class="input" required>
<p class="input-help">Your new password should be at least 8 characters in length, contain one number, and be mixed case.</p>
</div>
<div class="mt-6">
<label for="grid-password-new-confirm" class="input-label">Confirm new password</label>
<input id="grid-password-new-confirm" name="password_confirmation" type="password" class="input" required>
</div>
<div class="mt-6 text-right">
<button class="btn btn-blue btn-sm text-right" type="submit">Save</button>
</div>
</div>
</form>
</div>
</template>
<script>
export default {
name: 'change-password'
};
</script>

11
resources/assets/scripts/components/dashboard/account/TwoFactorAuthentication.vue Normal file
View file

@ -0,0 +1,11 @@
<template>
<div>
Todo: put the 2FA magic here!
</div>
</template>
<script>
export default {
name: 'TwoFactorAuthentication'
};
</script>

12
resources/assets/styles/components/animations.css
View file

@ -34,3 +34,15 @@
@apply .bg-red-dark;
}
}
/*
* transition="modal"
*/
.modal-enter, .modal-leave-active {
opacity: 0;
}
.modal-enter .modal-container,
.modal-leave-active .modal-container {
animation: opacity 250ms linear;
}

8
resources/assets/styles/components/buttons.css
View file

@ -12,6 +12,14 @@
}
}
&.btn-green {
@apply .bg-green .border-green-dark .border .text-white;
&:hover:enabled {
@apply .bg-green-dark .border-green-darker;
}
}
&.btn-secondary {
@apply .border .border-grey-light .text-grey-dark;

10
resources/assets/styles/components/modal.css Normal file
View file

@ -0,0 +1,10 @@
.modal-mask {
@apply .fixed .pin .z-50 .overflow-auto .flex;
background: rgba(0, 0, 0, 0.7);
transition: opacity 250ms ease;
& > .modal-container {
@apply .relative .p-8 .bg-white .w-full .max-w-md .m-auto .flex-col .flex;
transition: all 250ms ease;
}
}

1
resources/assets/styles/main.css
View file

@ -12,6 +12,7 @@
@import "components/buttons.css";
@import "components/forms.css";
@import "components/miscellaneous.css";
@import "components/modal.css";
@import "components/navigation.css";
@import "components/notifications.css";
@import "components/spinners.css";