confirm password when 2fa setup refactored

resources/js/components/Others/TwoFactorQrSetupPopup.vue

@@ -0,0 +1,128 @@
+<template>
+    <PopupWrapper name="two-factor-qr-setup">
+
+        <PopupHeader :title="$t('popup_2fa.title')" icon="edit" />
+
+		<PopupContent>
+			<div v-if="qrCode" class="flex justify-center">
+				<div v-html="qrCode" class="my-5"></div>
+			</div>
+
+			<InfoBox style="margin-bottom: 0">
+				<p v-html="$t('popup_2fa.help')"></p>
+			</InfoBox>
+        </PopupContent>
+
+        <PopupActions>
+            <ButtonBase
+				class="w-full"
+				@click.native="closeQrCodePopup"
+				:button-style="closeQrButtonStyle"
+			>
+                {{ closeQrButtonText }}
+            </ButtonBase>
+        </PopupActions>
+    </PopupWrapper>
+</template>
+
+<script>
+import AppInputText from "../Admin/AppInputText";
+import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+import PopupWrapper from '/resources/js/components/Others/Popup/PopupWrapper'
+import PopupActions from '/resources/js/components/Others/Popup/PopupActions'
+import PopupContent from '/resources/js/components/Others/Popup/PopupContent'
+import PopupHeader from '/resources/js/components/Others/Popup/PopupHeader'
+import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
+import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
+import {required} from 'vee-validate/dist/rules'
+import {mapGetters} from 'vuex'
+import {events} from '/resources/js/bus'
+import axios from 'axios'
+
+export default {
+	name: "TwoFactorQrSetupPopup",
+	components: {
+		ValidationProvider,
+		ValidationObserver,
+		AppInputText,
+		PopupWrapper,
+		PopupActions,
+		PopupContent,
+		PopupHeader,
+		ButtonBase,
+		required,
+		InfoBox,
+	},
+	computed: {
+		...mapGetters([
+			'user'
+		]),
+		closeQrButtonText() {
+			return this.isConfirmedClose
+				? this.$t('popup_2fa.disappear_qr')
+				: this.$t('shared_form.button_done')
+		},
+		closeQrButtonStyle() {
+			return this.isConfirmedClose
+				? 'danger'
+				: 'theme'
+		},
+	},
+	data() {
+		return {
+			isLoading: false,
+			qrCode: '',
+			isConfirmedClose: false,
+		}
+	},
+	methods: {
+		enable() {
+			axios
+				.post('/user/two-factor-authentication')
+				.then(() => {
+
+					this.$store.commit('CHANGE_TWO_FACTOR_AUTHENTICATION_STATE', true)
+
+					this.getQrCode()
+				})
+				.catch(() => {
+					this.$isSomethingWrong()
+				})
+		},
+		getQrCode() {
+			axios
+				.get('/user/two-factor-qr-code')
+				.then(response => {
+					this.qrCode = response.data.svg
+				})
+				.catch(() => {
+					this.$isSomethingWrong()
+				})
+		},
+		closeQrCodePopup() {
+			if (!this.isConfirmedClose) {
+				this.isConfirmedClose = true
+			} else {
+				events.$emit('toaster', {
+					type: 'success',
+					message: this.$t('popup_2fa.toaster_enabled'),
+				})
+
+				this.qrCode = undefined
+				this.isConfirmedClose = false
+
+				this.$closePopup()
+			}
+		}
+	},
+	created() {
+		// Show popup
+		events.$on('popup:open', args => {
+
+			if (args.name !== 'two-factor-qr-setup') return
+
+			this.enable()
+		})
+	}
+}
+</script>

resources/js/components/Others/TwoFactorSetupPopup.vue

@@ -1,211 +0,0 @@
-<template>
-    <PopupWrapper name="two-factor-authentication-confirm">
-
-        <PopupHeader :title="$t('popup_2fa.title')" icon="edit" />
-
-        <PopupContent>
-             <ValidationObserver @submit.prevent="confirmPassword" v-if="! qrCode" ref="passwordForm" v-slot="{ invalid }" tag="form">
-                <ValidationProvider tag="div" mode="passive" name="Password" rules="required" v-slot="{ errors }">
-					<AppInputText :title="$t('popup_2fa.input_label')" :error="errors[0]" :is-last="true">
-						<input v-model="password" :class="{'border-red': errors[0]}" type="password" ref="input" class="focus-border-theme input-dark" :placeholder="$t('page_sign_in.placeholder_password')">
-					</AppInputText>
-                </ValidationProvider>
-            </ValidationObserver>
-
-            <div v-if="qrCode" class="qr-code-wrapper">
-                <div class="qr-code">
-                    <div v-html="qrCode"></div>
-                </div>
-
-				<InfoBox style="margin-bottom: 0">
-                	<p v-html="$t('popup_2fa.help')"></p>
-            	</InfoBox>
-            </div>
-        </PopupContent>
-
-        <PopupActions v-if="! qrCode">
-            <ButtonBase
-				class="w-full"
-				@click.native="$closePopup()"
-				button-style="secondary"
-			>
-                {{ $t('global.cancel') }}
-            </ButtonBase>
-            <ButtonBase
-				class="w-full"
-				@click.native="confirmPassword"
-				button-style="theme"
-				:loading="isLoading"
-				:disabled="isLoading"
-			>
-               {{ $t('popup_2fa.confirm_button') }}
-            </ButtonBase>
-        </PopupActions>
-
-        <PopupActions v-if="qrCode">
-            <ButtonBase
-				class="w-full"
-				@click.native="closeQrCodePopup"
-				:button-style="closeQrButtonStyle"
-			>
-                {{ closeQrButtonText }}
-            </ButtonBase>
-        </PopupActions>
-    </PopupWrapper>
-</template>
-
-<script>
-import AppInputText from "../Admin/AppInputText";
-import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
-import PopupWrapper from '/resources/js/components/Others/Popup/PopupWrapper'
-import PopupActions from '/resources/js/components/Others/Popup/PopupActions'
-import PopupContent from '/resources/js/components/Others/Popup/PopupContent'
-import PopupHeader from '/resources/js/components/Others/Popup/PopupHeader'
-import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
-import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
-import {required} from 'vee-validate/dist/rules'
-import {mapGetters} from 'vuex'
-import {events} from '/resources/js/bus'
-import axios from 'axios'
-
-export default {
-	name: "TwoFactorSetupPopup",
-	components: {
-		ValidationProvider,
-		ValidationObserver,
-		AppInputText,
-		PopupWrapper,
-		PopupActions,
-		PopupContent,
-		PopupHeader,
-		ButtonBase,
-		required,
-		InfoBox,
-	},
-	computed: {
-		...mapGetters(['user']),
-		closeQrButtonText() {
-			return this.isConfirmedClose
-				? this.$t('popup_2fa.disappear_qr')
-				: this.$t('shared_form.button_done')
-		},
-		closeQrButtonStyle() {
-			return this.isConfirmedClose
-				? 'danger'
-				: 'theme'
-		},
-	},
-	data() {
-		return {
-			isLoading: false,
-			password: '',
-			qrCode: '',
-			isConfirmedClose: false,
-		}
-	},
-	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()
-					}
-				})
-				.catch(error => {
-
-					if (error.response.status == 422) {
-
-						this.$refs.passwordForm.setErrors({
-							'Password': this.$t('validation_errors.incorrect_password')
-						});
-					}
-				})
-				.finally(() => {
-					this.isLoading = false
-					this.password = undefined
-				})
-		},
-		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)
-				})
-				.catch(() => {
-					this.$isSomethingWrong()
-				})
-				.finally(() => {
-					events.$emit('toaster', {
-						type: 'success',
-						message: this.$t('popup_2fa.toaster_disabled'),
-					})
-
-					this.$closePopup()
-				})
-		},
-		getQrCode() {
-			axios
-				.get('/user/two-factor-qr-code')
-				.then(response => {
-					this.qrCode = response.data.svg
-				})
-				.catch(() => {
-					this.$isSomethingWrong()
-				})
-		},
-		closeQrCodePopup() {
-			if (!this.isConfirmedClose) {
-				this.isConfirmedClose = true
-			} else {
-				events.$emit('toaster', {
-					type: 'success',
-					message: this.$t('popup_2fa.toaster_enabled'),
-				})
-
-				this.qrCode = undefined
-				this.isConfirmedClose = false
-
-				this.$closePopup()
-			}
-		}
-	}
-}
-</script>
-
-<style lang="scss" scoped>
-@import "resources/sass/vuefilemanager/_inapp-forms.scss";
-@import '/resources/sass/vuefilemanager/_forms';
-
-.qr-code-wrapper {
-
-	.qr-code {
-		display: flex;
-		justify-content: center;
-		margin: 20px 0;
-	}
-}
-</style>

resources/js/views/Profile.vue

@@ -10,7 +10,7 @@
 
 		<!--2FA popups-->
 		<TwoFactorRecoveryCodesPopup />
-		<TwoFactorSetupPopup />
+		<TwoFactorQrSetupPopup />
 
 		<!--Access Token Popup-->
 		<CreatePersonaTokenPopup />
@@ -69,7 +69,7 @@
 	import Spotlight from '/resources/js/components/Spotlight/Spotlight'
 	import TwoFactorRecoveryCodesPopup from '/resources/js/components/Others/TwoFactorRecoveryCodesPopup'
 	import CreatePersonaTokenPopup from '/resources/js/components/Others/CreatePersonaTokenPopup'
-	import TwoFactorSetupPopup from '/resources/js/components/Others/TwoFactorSetupPopup'
+	import TwoFactorQrSetupPopup from '/resources/js/components/Others/TwoFactorQrSetupPopup'
 	import UserImageInput from '/resources/js/components/Others/UserImageInput'
 	import SidebarNavigation from "../components/Sidebar/SidebarNavigation"
 	import ColorLabel from '/resources/js/components/Others/ColorLabel'
@@ -92,7 +92,7 @@
 			Spotlight,
 			TwoFactorRecoveryCodesPopup,
 			CreatePersonaTokenPopup,
-			TwoFactorSetupPopup,
+			TwoFactorQrSetupPopup,
 			SidebarNavigation,
             UserImageInput,
             ColorLabel,

resources/js/views/User/Password.vue

@@ -7,7 +7,7 @@
                 {{ $t('2fa.settings.title') }}
             </FormLabel>
             <AppInputSwitch :title="$t('popup_2fa.switch_title')" :description="$t('popup_2fa.switch_info')" :is-last="! user.data.attributes.two_factor_authentication">
-                <SwitchInput @click.native.prevent.stop="open2faPopup" class="switch" :state="user.data.attributes.two_factor_authentication" />
+                <SwitchInput v-model="user.data.attributes.two_factor_authentication" class="switch" :state="user.data.attributes.two_factor_authentication" />
             </AppInputSwitch>
             <AppInputSwitch v-if="user && user.data.attributes.two_factor_authentication" :title="$t('popup_2fa.codes_title')" :description="$t('popup_2fa.codes_info')" :is-last="true">
                 <ButtonBase class="w-full" button-style="secondary" @click.native="showRecoveryCodes">
@@ -112,6 +112,15 @@
 				'user',
 			])
 		},
+		watch: {
+			'user.data.attributes.two_factor_authentication': function (val) {
+				if (val) {
+					this.open2faPopup()
+				} else {
+					this.disable()
+				}
+			}
+		},
 		data() {
 			return {
 				passwordForm: {
@@ -170,6 +179,22 @@
 						}
 					})
 			},
+			disable() {
+				axios
+					.delete('/user/two-factor-authentication')
+					.then(() => {
+						this.$store.commit('CHANGE_TWO_FACTOR_AUTHENTICATION_STATE', false)
+					})
+					.catch(() => {
+						this.$isSomethingWrong()
+					})
+					.finally(() => {
+						events.$emit('toaster', {
+							type: 'success',
+							message: this.$t('popup_2fa.toaster_disabled'),
+						})
+					})
+			},
 			getPersonalAccessTokens() {
 				axios.get('/api/user/tokens')
 					.then(response => {
@@ -185,6 +210,14 @@
 					}
 				})
 			},
+			open2faPopup() {
+				events.$emit('popup:open', {
+					name: 'confirm-password',
+					options: {
+						action: 'two-factor-qr-setup',
+					}
+				})
+			},
 			confirmDeleteToken(token) {
 				events.$emit('confirm:open', {
 					title: this.$t('popup_delete_personal_token.title'),
@@ -195,9 +228,6 @@
 					}
 				})
 			},
-			open2faPopup() {
-				events.$emit('popup:open', {name: 'two-factor-authentication-confirm'})
-			},
 			openCreateTokenPopup() {
 				events.$emit('popup:open', {name: 'create-personal-token'})
 			},
@@ -234,6 +264,11 @@
 				if (args.options.action === 'get-recovery-codes') {
 					events.$emit('popup:open', {name: 'two-factor-recovery-codes'})
 				}
+
+				// Get 2fa qr code
+				if (args.options.action === 'two-factor-qr-setup') {
+					events.$emit('popup:open', {name: 'two-factor-qr-setup'})
+				}
 			})
 
 			events.$on('reload-personal-access-tokens', () => this.getPersonalAccessTokens())