confirm password to get recovery codes

public/mix-manifest.json

@@ -71,8 +71,8 @@
     "/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=a81388efd770d51f8a9c",
     "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=d9af0efad2af2679954b",
     "/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=8577d4c771602671b38a",
-    "/chunks/settings.js": "/chunks/settings.js?id=61583d26a715225f8be1",
+    "/chunks/settings.js": "/chunks/settings.js?id=4e5b93f9cee2abaa60ac",
-    "/chunks/settings-password.js": "/chunks/settings-password.js?id=c4b032c249f613227d1a",
+    "/chunks/settings-password.js": "/chunks/settings-password.js?id=96f0a4f57ef24172c522",
     "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=84f35e2124d825cc5039",
     "/chunks/settings~chunks/settings-password.js": "/chunks/settings~chunks/settings-password.js?id=aafc9cd6aa47b01bc25a",
     "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=651d5accf401908724c5",
@@ -774,5 +774,29 @@
     "/chunks/settings-password.aa592f3bde5df777a170.hot-update.js": "/chunks/settings-password.aa592f3bde5df777a170.hot-update.js",
     "/chunks/settings-password.3eb3f1ad1ca4e2dee8e0.hot-update.js": "/chunks/settings-password.3eb3f1ad1ca4e2dee8e0.hot-update.js",
     "/chunks/settings-password.7c0ad55ca726abfb4cf1.hot-update.js": "/chunks/settings-password.7c0ad55ca726abfb4cf1.hot-update.js",
-    "/chunks/settings-password.ee24e2e8e1c71c29a0c3.hot-update.js": "/chunks/settings-password.ee24e2e8e1c71c29a0c3.hot-update.js"
+    "/chunks/settings-password.ee24e2e8e1c71c29a0c3.hot-update.js": "/chunks/settings-password.ee24e2e8e1c71c29a0c3.hot-update.js",
+    "/chunks/settings-password.66add191404b4cde6447.hot-update.js": "/chunks/settings-password.66add191404b4cde6447.hot-update.js",
+    "/chunks/settings-password.f7657e25d92e2955fa92.hot-update.js": "/chunks/settings-password.f7657e25d92e2955fa92.hot-update.js",
+    "/chunks/settings-password.3c5a3a41ccb2cba6f51f.hot-update.js": "/chunks/settings-password.3c5a3a41ccb2cba6f51f.hot-update.js",
+    "/chunks/settings-password.6094057ecd459c127586.hot-update.js": "/chunks/settings-password.6094057ecd459c127586.hot-update.js",
+    "/chunks/settings-password.a4a8892e33d9ea448096.hot-update.js": "/chunks/settings-password.a4a8892e33d9ea448096.hot-update.js",
+    "/chunks/settings-password.3dfcc0af9c1bbaec1d88.hot-update.js": "/chunks/settings-password.3dfcc0af9c1bbaec1d88.hot-update.js",
+    "/chunks/settings-password.152b430010aa022ea015.hot-update.js": "/chunks/settings-password.152b430010aa022ea015.hot-update.js",
+    "/chunks/settings-password.6d9f9de506dad4120eed.hot-update.js": "/chunks/settings-password.6d9f9de506dad4120eed.hot-update.js",
+    "/chunks/settings.03ad672b44bfaf31c33f.hot-update.js": "/chunks/settings.03ad672b44bfaf31c33f.hot-update.js",
+    "/chunks/settings-password.50d7e50f34f1da8c1b64.hot-update.js": "/chunks/settings-password.50d7e50f34f1da8c1b64.hot-update.js",
+    "/chunks/settings-password.5423ee12306c71f92d73.hot-update.js": "/chunks/settings-password.5423ee12306c71f92d73.hot-update.js",
+    "/chunks/settings-password.2678c4c4583f96c5c5e1.hot-update.js": "/chunks/settings-password.2678c4c4583f96c5c5e1.hot-update.js",
+    "/chunks/settings.704a22993174825d6f87.hot-update.js": "/chunks/settings.704a22993174825d6f87.hot-update.js",
+    "/chunks/settings.9cd25b7f2d75cc45069f.hot-update.js": "/chunks/settings.9cd25b7f2d75cc45069f.hot-update.js",
+    "/chunks/settings-password.fabf56cd9d097f46b519.hot-update.js": "/chunks/settings-password.fabf56cd9d097f46b519.hot-update.js",
+    "/chunks/settings-password.900ec6279bf8d3163f1f.hot-update.js": "/chunks/settings-password.900ec6279bf8d3163f1f.hot-update.js",
+    "/chunks/settings-password.4a0b70a9dd15b4667619.hot-update.js": "/chunks/settings-password.4a0b70a9dd15b4667619.hot-update.js",
+    "/js/main.7a17b86f96f112238041.hot-update.js": "/js/main.7a17b86f96f112238041.hot-update.js",
+    "/chunks/settings.4593cc8f11d2a3572df6.hot-update.js": "/chunks/settings.4593cc8f11d2a3572df6.hot-update.js",
+    "/chunks/settings-password.17c08a61432c5ca8fdf2.hot-update.js": "/chunks/settings-password.17c08a61432c5ca8fdf2.hot-update.js",
+    "/chunks/settings.924d3949f14a2b755600.hot-update.js": "/chunks/settings.924d3949f14a2b755600.hot-update.js",
+    "/chunks/settings-password.c61f80f724c565d44122.hot-update.js": "/chunks/settings-password.c61f80f724c565d44122.hot-update.js",
+    "/chunks/settings-password.e3947848fdbf30a885c7.hot-update.js": "/chunks/settings-password.e3947848fdbf30a885c7.hot-update.js",
+    "/chunks/settings-password.425eae13104458d4e284.hot-update.js": "/chunks/settings-password.425eae13104458d4e284.hot-update.js"
 }

resources/js/components/Others/ConfirmPassword.vue

@@ -0,0 +1,109 @@
+<template>
+    <PopupWrapper name="confirm-password">
+
+        <PopupHeader :title="$t('Confirm Password')" icon="edit" />
+
+        <PopupContent>
+             <ValidationObserver @submit.prevent="confirmPassword" 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>
+        </PopupContent>
+
+        <PopupActions>
+            <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>
+    </PopupWrapper>
+</template>
+
+<script>
+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 AppInputText from "../Admin/AppInputText"
+import {required} from 'vee-validate/dist/rules'
+import {events} from '/resources/js/bus'
+import {mapGetters} from 'vuex'
+import axios from 'axios'
+
+export default {
+	name: "ConfirmPassword",
+	components: {
+		ValidationProvider,
+		ValidationObserver,
+		AppInputText,
+		PopupWrapper,
+		PopupActions,
+		PopupContent,
+		PopupHeader,
+		ButtonBase,
+		required,
+	},
+	computed: {
+		...mapGetters([
+			'user'
+		]),
+	},
+	data() {
+		return {
+			isLoading: false,
+			password: '',
+			args: undefined,
+		}
+	},
+	methods: {
+		confirmPassword() {
+			this.isLoading = true
+
+			axios
+				.post('/user/confirm-password', {
+					password: this.password
+				})
+				.then(() => {
+					events.$emit('password:confirmed', this.args)
+				})
+				.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
+				})
+		},
+	},
+	created() {
+		// Show popup
+		events.$on('popup:open', args => {
+
+			if (args.name !== 'confirm-password') return
+
+			this.args = args
+		})
+	}
+}
+</script>

resources/js/store/modules/app.js

@@ -155,7 +155,6 @@ const mutations = {
         state.config.isPayPal = true
     },
     UPDATE_DARK_MODE_STATUS(state, val) {
-        console.log(val);
         state.isDarkMode = val
     },
 }

resources/js/views/Profile.vue

@@ -6,6 +6,8 @@
 
 		<ConfirmPopup />
 
+		<ConfirmPassword />
+
 		<!--2FA popups-->
 		<TwoFactorRecoveryCodesPopup />
 		<TwoFactorSetupPopup />
@@ -75,10 +77,12 @@
 	import {mapGetters} from 'vuex'
 	import CardNavigation from "../components/Admin/CardNavigation";
 	import {events} from "../bus";
+	import ConfirmPassword from "../components/Others/ConfirmPassword";
 
 	export default {
         name: 'Settings',
         components: {
+			ConfirmPassword,
 			SelectSingleChargeMethodPopup,
 			SelectPlanSubscriptionPopup,
 			ButtonBase,

resources/js/views/User/Password.vue

@@ -119,39 +119,11 @@
 					password: undefined,
 					password_confirmation: undefined,
 				},
-				newPasswordConfirmation: '',
-				newPassword: '',
 				isLoading: false,
 				tokens: [],
 			}
 		},
 		methods: {
-			formatDate(date) {
-				return new Intl.DateTimeFormat('en').format(new Date(date))
-			},
-			confirmDeleteToken(token) {
-				events.$emit('confirm:open', {
-					title: this.$t('popup_delete_personal_token.title'),
-					message: this.$t('popup_delete_personal_token.description'),
-					action: {
-						id: token.id,
-						operation: 'delete-personal-access-token'
-					}
-				})
-			},
-			deleteToken(id) {
-				axios.delete(`/api/user/tokens/${id}`)
-					.then(() => {
-
-						this.tokens = this.tokens.filter(tokenItem => tokenItem.id !== id)
-
-						events.$emit('toaster', {
-							type: 'success',
-							message: this.$t('personal_token.token_deleted'),
-						})
-					})
-					.catch(() => this.$isSomethingWrong())
-			},
 			async resetPassword() {
 
 				// Validate fields
@@ -205,24 +177,62 @@
 					})
 					.catch(() => this.$isSomethingWrong())
 			},
+			showRecoveryCodes() {
+				events.$emit('popup:open', {
+					name: 'confirm-password',
+					options: {
+						action: 'get-recovery-codes',
+					}
+				})
+			},
+			confirmDeleteToken(token) {
+				events.$emit('confirm:open', {
+					title: this.$t('popup_delete_personal_token.title'),
+					message: this.$t('popup_delete_personal_token.description'),
+					action: {
+						id: token.id,
+						operation: 'delete-personal-access-token'
+					}
+				})
+			},
 			open2faPopup() {
 				events.$emit('popup:open', {name: 'two-factor-authentication-confirm'})
 			},
-			showRecoveryCodes() {
-				events.$emit('popup:open', {name: 'two-factor-recovery-codes'})
-			},
 			openCreateTokenPopup() {
 				events.$emit('popup:open', {name: 'create-personal-token'})
-			}
+			},
+			formatDate(date) {
+				return new Intl.DateTimeFormat('en').format(new Date(date))
+			},
 		},
 		created() {
 			this.getPersonalAccessTokens()
 
-			// Delete personal access token
+			// Actions confirmed
 			events.$on('action:confirmed', data => {
 
+				// Delete personal token
 				if (data.operation === 'delete-personal-access-token') {
-					this.deleteToken(data.id)
+					axios.delete(`/api/user/tokens/${data.id}`)
+						.then(() => {
+
+							this.tokens = this.tokens.filter(tokenItem => tokenItem.id !== data.id)
+
+							events.$emit('toaster', {
+								type: 'success',
+								message: this.$t('personal_token.token_deleted'),
+							})
+						})
+						.catch(() => this.$isSomethingWrong())
+				}
+			})
+
+			// Password confirmed
+			events.$on('password:confirmed', args => {
+
+				// Get recovery tokens
+				if (args.options.action === 'get-recovery-codes') {
+					events.$emit('popup:open', {name: 'two-factor-recovery-codes'})
 				}
 			})