Skip to content

Commit d6959ea

Browse files
DaneEverittDaneEveritt
committed
Add a basic modal template to be used
1 parent 84fecb7 commit d6959ea

8 files changed

Lines changed: 130 additions & 29 deletions

File tree

‎resources/assets/scripts/components/core/Modal.vue‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<template>
2+
<transition name="modal">
3+
<div class="modal-mask" v-show="show" v-on:click="close">
4+
<div class="modal-container" @click.stop>
5+
<x-icon class="absolute pin-r pin-t m-2 text-grey cursor-pointer" aria-label="Close modal"
6+
v-on:click="close"
7+
/>
8+
<slot/>
9+
</div>
10+
</div>
11+
</transition>
12+
</template>
13+
14+
<script>
15+
import { XIcon } from 'vue-feather-icons';
16+
export default {
17+
name: 'modal',
18+
components: { XIcon },
19+
props: {
20+
modalName: { type: String, default: 'modal' },
21+
show: { type: Boolean, default: false },
22+
closeOnEsc: { type: Boolean, default: true },
23+
},
24+
mounted: function () {
25+
if (this.$props.closeOnEsc) {
26+
document.addEventListener('keydown', e => {
27+
if (this.show && e.key === 'Escape') {
28+
this.close();
29+
}
30+
})
31+
}
32+
},
33+
34+
methods: {
35+
close: function () {
36+
this.$emit('close', this.$props.modalName);
37+
}
38+
}
39+
};
40+
</script>

‎resources/assets/scripts/components/dashboard/Account.vue‎

Lines changed: 17 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,18 @@
22
<div>
33
<navigation/>
44
<div class="container animate fadein mt-6">
5+
<modal :show="modalVisible" v-on:close="modalVisible = false">
6+
<TwoFactorAuthentication/>
7+
</modal>
58
<flash container="mt-6 mb-2 mx-4"/>
69
<div class="flex">
7-
<update-email class="flex-1 m-4"/>
8-
<div class="flex-1 m-4">
9-
<form action="" method="post">
10-
<div class="bg-white p-6 border border-grey-light rounded rounded-1">
11-
<h2 class="mb-6 text-grey-darkest font-medium">Change your password</h2>
12-
<div class="mt-6">
13-
<label for="grid-password-current" class="input-label">Current password</label>
14-
<input id="grid-password-current" name="password" type="password" class="input" required>
15-
</div>
16-
<div class="mt-6">
17-
<label for="grid-password-new" class="input-label">New password</label>
18-
<input id="grid-password-new" name="password" type="password" class="input" required>
19-
<p class="input-help">Your new password should be at least 8 characters in length, contain one number, and be mixed case.</p>
20-
</div>
21-
<div class="mt-6">
22-
<label for="grid-password-new-confirm" class="input-label">Confirm new password</label>
23-
<input id="grid-password-new-confirm" name="password_confirmation" type="password" class="input" required>
24-
</div>
25-
<div class="mt-6 text-right">
26-
<button class="btn btn-blue btn-sm text-right" type="submit">Save</button>
27-
</div>
28-
</div>
29-
</form>
10+
<div class="flex-1 m-4 ml-0">
11+
<update-email class="mb-8"/>
12+
<div class="bg-white p-6 border border-grey-light rounded rounded-1 text-center">
13+
<button class="btn btn-green btn-sm" type="submit" v-on:click="modalVisible = true">Configure 2-Factor Authentication</button>
14+
</div>
3015
</div>
16+
<change-password class="flex-1 m-4 mr-0"/>
3117
</div>
3218
</div>
3319
</div>
@@ -36,16 +22,18 @@
3622
<script>
3723
import Navigation from '../core/Navigation';
3824
import Flash from '../Flash';
39-
import { mapState } from 'vuex';
4025
import UpdateEmail from './account/UpdateEmail';
26+
import ChangePassword from './account/ChangePassword';
27+
import Modal from '../core/Modal';
28+
import TwoFactorAuthentication from './account/TwoFactorAuthentication';
4129
4230
export default {
4331
name: 'account',
44-
components: {UpdateEmail, Flash, Navigation},
45-
computed: {
46-
...mapState({
47-
user: state => state.auth.user,
48-
})
32+
components: {TwoFactorAuthentication, Modal, ChangePassword, UpdateEmail, Flash, Navigation},
33+
data: function () {
34+
return {
35+
modalVisible: false,
36+
};
4937
},
5038
};
5139
</script>

‎resources/assets/scripts/components/dashboard/account/ChangePassword.vue‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<template>
2+
<div>
3+
<form action="" method="post">
4+
<div class="bg-white p-6 border border-grey-light rounded rounded-1">
5+
<h2 class="mb-6 text-grey-darkest font-medium">Change your password</h2>
6+
<div class="mt-6">
7+
<label for="grid-password-current" class="input-label">Current password</label>
8+
<input id="grid-password-current" name="password" type="password" class="input" required>
9+
</div>
10+
<div class="mt-6">
11+
<label for="grid-password-new" class="input-label">New password</label>
12+
<input id="grid-password-new" name="password" type="password" class="input" required>
13+
<p class="input-help">Your new password should be at least 8 characters in length, contain one number, and be mixed case.</p>
14+
</div>
15+
<div class="mt-6">
16+
<label for="grid-password-new-confirm" class="input-label">Confirm new password</label>
17+
<input id="grid-password-new-confirm" name="password_confirmation" type="password" class="input" required>
18+
</div>
19+
<div class="mt-6 text-right">
20+
<button class="btn btn-blue btn-sm text-right" type="submit">Save</button>
21+
</div>
22+
</div>
23+
</form>
24+
</div>
25+
</template>
26+
27+
<script>
28+
export default {
29+
name: 'change-password'
30+
};
31+
</script>

‎resources/assets/scripts/components/dashboard/account/TwoFactorAuthentication.vue‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
<div>
3+
Todo: put the 2FA magic here!
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
name: 'TwoFactorAuthentication'
10+
};
11+
</script>

‎resources/assets/styles/components/animations.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,15 @@
3434
@apply .bg-red-dark;
3535
}
3636
}
37+
38+
/*
39+
* transition="modal"
40+
*/
41+
.modal-enter, .modal-leave-active {
42+
opacity: 0;
43+
}
44+
45+
.modal-enter .modal-container,
46+
.modal-leave-active .modal-container {
47+
animation: opacity 250ms linear;
48+
}

‎resources/assets/styles/components/buttons.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,14 @@
1212
}
1313
}
1414

15+
&.btn-green {
16+
@apply .bg-green .border-green-dark .border .text-white;
17+
18+
&:hover:enabled {
19+
@apply .bg-green-dark .border-green-darker;
20+
}
21+
}
22+
1523
&.btn-secondary {
1624
@apply .border .border-grey-light .text-grey-dark;
1725

‎resources/assets/styles/components/modal.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.modal-mask {
2+
@apply .fixed .pin .z-50 .overflow-auto .flex;
3+
background: rgba(0, 0, 0, 0.7);
4+
transition: opacity 250ms ease;
5+
6+
& > .modal-container {
7+
@apply .relative .p-8 .bg-white .w-full .max-w-md .m-auto .flex-col .flex;
8+
transition: all 250ms ease;
9+
}
10+
}

‎resources/assets/styles/main.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
@import "components/buttons.css";
1313
@import "components/forms.css";
1414
@import "components/miscellaneous.css";
15+
@import "components/modal.css";
1516
@import "components/navigation.css";
1617
@import "components/notifications.css";
1718
@import "components/spinners.css";

0 commit comments

Comments
 (0)