Create TwoFactorAuthentication Popup

resources/js/components/Others/TwoFactorAuthenticationConfirm.vue

@@ -0,0 +1,179 @@
+<template>
+    <PopupWrapper name="two-factor-authentication-confirm">
+
+        <PopupHeader :title="$t('popup_two_factor_authentication.title')" icon="edit"/>
+
+        <PopupContent>
+             <ValidationObserver @submit.prevent="confirmPassword" v-if="! qrCode" ref="passwordForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
+
+                <ValidationProvider tag="div" mode="passive" class="input-wrapper password" name="Password" rules="required" v-slot="{ errors }">
+                    <label class="input-label"> {{ $t('popup_two_factor_authentication.input_label') }}:</label>
+                    <input v-model="password" :class="{'is-error': errors[0]}" type="password" ref="input" class="focus-border-theme" :placeholder="$t('popup_two_factor_authentication.input_label')">
+                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                </ValidationProvider>
+            </ValidationObserver>
+
+            <div v-if="qrCode" class="qr-code-wrapper">
+                <div class="qr-code">
+                    <div v-html="qrCode"></div>
+                </div>
+
+                <small class="input-help" v-html="$t('popup_two_factor_authentication.help')" ></small>
+            </div>
+        </PopupContent>
+
+        <PopupActions>
+            <ButtonBase
+                class="popup-button"
+                @click.native="$closePopup()"
+                button-style="secondary"
+            >
+                {{ $t('global.cancel') }}
+            </ButtonBase>
+            <ButtonBase
+                v-if="! qrCode"
+                class="popup-button"
+                @click.native="confirmPassword"
+                button-style="theme"
+                :loading="isLoading"
+                :disabled="isLoading"
+            >
+               {{ $t('popup_two_factor_authentication.confirm_button') }}
+            </ButtonBase>
+        </PopupActions>
+
+    </PopupWrapper>
+</template>
+
+<script>
+import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+import PopupWrapper from '@/components/Others/Popup/PopupWrapper'
+import PopupActions from '@/components/Others/Popup/PopupActions'
+import PopupContent from '@/components/Others/Popup/PopupContent'
+import PopupHeader from '@/components/Others/Popup/PopupHeader'
+import ButtonBase from '@/components/FilesView/ButtonBase'
+import {required} from 'vee-validate/dist/rules'
+import {mapGetters} from 'vuex'
+import {events} from '@/bus'
+import axios from 'axios'
+
+export default {
+    name: "TwoFactorAuthenticationConfirm",
+    components: {
+        ValidationProvider,
+        ValidationObserver,
+        PopupWrapper,
+        PopupActions,
+        PopupContent,
+        PopupHeader,
+        ButtonBase,
+        required,
+    },
+    computed: {
+        ...mapGetters(['user'])
+    },
+    data () {
+        return {
+            isLoading: false,
+            password: '',
+            qrCode: '',
+        }
+    },
+    methods: {
+        confirmPassword () {
+
+            this.isLoading = true
+
+            axios.
+                post('/user/confirm-password', {
+                    password: this.password
+                })
+                .then(() => {
+
+                   if(! this.user.data.attributes.two_factor_authentication) {
+
+                       this.enable()
+                   } else {
+
+                       this.disable()
+                   }
+
+                    this.isLoading = false
+                })
+                .catch(error => {
+
+                    if (error.response.status == 422) {
+
+                        this.$refs.passwordForm.setErrors({
+                            'Password': this.$t('validation_errors.incorrect_password')
+                        });
+                    }
+                })
+        },
+        enable() {
+
+            axios.
+                post('/user/two-factor-authentication')
+                .then(() => {
+
+                    this.$store.commit('CHANGE_TWO_FACTOR_AUTHENTICATION_STATE', true)
+
+                    this.getQrCode()
+                })
+                .catch(() => {
+                    this.$isSomethingWrong()
+                })
+        },
+        disable() {
+
+            axios.
+                delete('/user/two-factor-authentication')
+                .then(() => {
+
+                    this.$store.commit('CHANGE_TWO_FACTOR_AUTHENTICATION_STATE', false)
+
+                    this.$closePopup()
+                })
+                .catch(() => {
+                    this.$isSomethingWrong()
+                })
+        },
+        getQrCode() {
+            
+            axios.
+                get('/user/two-factor-qr-code')
+                .then((response) => {
+                    this.qrCode = response.data.svg
+                })
+                .catch(() => {
+                    this.$isSomethingWrong()
+                })
+        },
+    },
+    mounted () {
+
+        events.$on('popup:open', ({name}) => {
+
+            if (name === 'two-factor-authentication-confirm')
+                this.password = ''
+                this.qrCode = ''
+        })
+        }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@assets/vuefilemanager/_inapp-forms.scss";
+@import '@assets/vuefilemanager/_forms';
+
+.qr-code-wrapper {
+    padding: 0px 20px;
+
+    .qr-code {
+        display: flex;
+        justify-content: center;
+        margin: 20px 0px 20px 0px;
+    }
+}
+
+</style>

resources/js/store/modules/userAuth.js

@@ -108,6 +108,9 @@ const actions = {
 }
 
 const mutations = {
+    CHANGE_TWO_FACTOR_AUTHENTICATION_STATE(state, condition) {
+        state.user.data.attributes.two_factor_authentication = condition
+    },
     RETRIEVE_USER(state, user) {
         state.user = user
     },

resources/js/views/Auth/SignIn.vue

@@ -303,7 +303,7 @@
                                 if(! recovery) {
 
                                     this.$refs.two_factor_authentication.setErrors({
-                                        'Two Factor Authentication' : 'Incorrect code' 
+                                        'Two Factor Authentication' : this.$t('validation_errors.incorrect_2fa_code')
                                     })
                                 } 
                                 
@@ -311,7 +311,7 @@
                                 if(recovery) {
                                     
                                     this.$refs.two_factor_recovery.setErrors({
-                                        'Two Factor Recovery' : 'Incorrect recovery code' 
+                                        'Two Factor Recovery' : this.$t('validation_errors.incorrect_2fa_recovery_code')
                                     })
                                 }
                             }

resources/js/views/Platform.vue

@@ -29,12 +29,15 @@
 
         <!--Others-->
         <DragUI />
+        <TwoFactorAuthenticationConfirm />
+
 
         <router-view :class="{'is-scaled-down': isScaledDown}" />
     </div>
 </template>
 
 <script>
+    import TwoFactorAuthenticationConfirm from '@/components/Others/TwoFactorAuthenticationConfirm'
     import MultiSelectToolbarMobile from '@/components/FilesView/MultiSelectToolbarMobile'
     import FileSortingMobile from '@/components/FilesView/FileSortingMobile'
     import SidebarNavigation from '@/components/Sidebar/SidebarNavigation'
@@ -56,6 +59,7 @@
     export default {
         name: 'Platform',
         components: {
+            TwoFactorAuthenticationConfirm,
             MultiSelectToolbarMobile,
             CreateFolderPopup,
             FileSortingMobile,

resources/js/views/User/Password.vue

@@ -32,6 +32,27 @@
                 </div>
             </ValidationObserver>
         </PageTabGroup>
+
+        <PageTabGroup class="form block-form">
+            <FormLabel> Two Factor Authentication </FormLabel>
+
+            <div class="block-wrapper">
+                    <div class="input-wrapper">
+                        <div class="inline-wrapper">
+                            <div class="switch-label">
+                                <label class="input-label">
+                                    Enable / Disable Two factor authentication
+                                </label>
+                                <small class="input-help" v-html="$t('admin_settings.others.allow_registration_help')"></small>
+                            </div>
+                            <SwitchInput @click.native.prevent.stop="open2faPopup"
+                                         class="switch"
+                                         :state="user.data.attributes.two_factor_authentication"
+                            />
+                        </div>
+                    </div>
+                </div>
+        </PageTabGroup>
     </PageTab>
 </template>
 
@@ -45,6 +66,8 @@
     import PageTab from '@/components/Others/Layout/PageTab'
     import PageHeader from '@/components/Others/PageHeader'
     import ThemeLabel from '@/components/Others/ThemeLabel'
+    import SwitchInput from '@/components/Others/Forms/SwitchInput'
+    import {mapGetters} from 'vuex'
     import {required} from 'vee-validate/dist/rules'
     import {events} from '@/bus'
     import axios from 'axios'
@@ -58,12 +81,16 @@
             ValidationProvider,
             ValidationObserver,
             UserImageInput,
+            SwitchInput,
             MobileHeader,
             PageHeader,
             ButtonBase,
             ThemeLabel,
             required,
         },
+        computed: {
+            ...mapGetters(['user'])
+        },
         data() {
             return {
                 newPasswordConfirmation: '',
@@ -112,6 +139,9 @@
                             }
                         }
                     })
+            },
+            open2faPopup() {
+                events.$emit('popup:open', {name: 'two-factor-authentication-confirm'})
             }
         }
     }