Add a basic modal template to be used

Author: DaneEveritt

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

@@ -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>

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

@@ -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>
-                        </div>
-                    </form>
+                <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>
+                <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>

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

@@ -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>

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

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

resources/assets/styles/components/animations.css

@@ -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;
+}

resources/assets/styles/components/buttons.css

@@ -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;
 

resources/assets/styles/components/modal.css

@@ -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;
+  }
+}

resources/assets/styles/main.css

@@ -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";