F2a update

Author: atomjoy

composer.lock

@@ -84,6 +84,28 @@ export const useAuthStore = defineStore('auth', () => {
 		}
 	}
 
+	async function enableF2a(data) {
+		try {
+			let res = await axios.post('/web/api/f2a/enable', data)
+			setMessage(res)
+			user.value.f2a = 1
+		} catch (err) {
+			setError(err)
+			logError(err)
+		}
+	}
+
+	async function disableF2a(data) {
+		try {
+			let res = await axios.post('/web/api/f2a/disable', data)
+			setMessage(res)
+			user.value.f2a = 0
+		} catch (err) {
+			setError(err)
+			logError(err)
+		}
+	}
+
 	async function logoutUser() {
 		try {
 			await axios.get('/web/api/logout')
@@ -272,5 +294,7 @@ export const useAuthStore = defineStore('auth', () => {
 		getMessage,
 		getError,
 		getUser,
+		enableF2a,
+		disableF2a,
 	}
 })

resources/js/atomjoy/auth/stores/auth.js

@@ -5,3 +5,22 @@ form {
 	padding-bottom: 30px;
 	border-bottom: 1px dashed var(--divider-primary);
 }
+
+.f2a-enabled {
+	float: left;
+	width: 100%;
+	color: #5c5;
+	border: 1px solid #5c5;
+	font-weight: 900;
+	padding: 15px 20px;
+	border-radius: 10px;
+}
+.f2a-disabled {
+	float: left;
+	width: 100%;
+	color: #f23;
+	border: 1px solid #f23;
+	font-weight: 900;
+	padding: 15px 20px;
+	border-radius: 10px;
+}

resources/js/atomjoy/panel/client/css/page-scoped.css

@@ -1,54 +1,33 @@
 <script setup>
 import Input from '@/components/input/Input.vue'
 import Button from '@/components/input/Button.vue'
+import Password from '@/components/input/Password.vue'
 import TitleH1 from '@/atomjoy/panel/client/components/Titles/TitleH1.vue'
 import TitleH2 from '@/atomjoy/panel/client/components/Titles/TitleH2.vue'
 import ErrorMessage from '@/atomjoy/panel/client/components/Error/ErrorMessage.vue'
 import { useAuthStore } from '@/atomjoy/auth/stores/auth.js'
-import { onBeforeMount } from 'vue'
-import axios from 'axios'
+import { onBeforeMount, ref } from 'vue'
 
 const auth = useAuthStore()
-const user = auth.getUser
+let user = auth.getUser
+let password_current = ref('')
 
 onBeforeMount(() => {
 	auth.clearError()
 })
 
-async function enable() {
-	const { data } = await axios.get('/web/api/f2a/enable')
-	return data
-}
-
-async function disable() {
-	const { data } = await axios.get('/web/api/f2a/disable')
-	return data
-}
-
 function onSubmitEmail(e) {
 	auth.scrollTop()
 	auth.changeUserEmail(new FormData(e.target))
 }
 
 function onSubmitF2a(e) {
-	try {
-		console.log(user.value.f2a)
+	auth.scrollTop()
 
-		if (user.value.f2a == 1) {
-			// Disable
-			disable().then((res) => {
-				user.value.f2a == 0
-				document.location.reload()
-			})
-		} else {
-			// Enable
-			enable().then((res) => {
-				user.value.f2a == 1
-				document.location.reload()
-			})
-		}
-	} catch (e) {
-		console.log(e)
+	if (user.value.f2a == 1) {
+		auth.disableF2a(new FormData(e.target))
+	} else {
+		auth.enableF2a(new FormData(e.target))
 	}
 }
 </script>
@@ -68,7 +47,8 @@ function onSubmitF2a(e) {
 		<TitleH2 :title="$t('Two factor authentication')" />
 		<div v-if="user.f2a == 1" class="f2a-enabled">{{ $t('Enabled') }}</div>
 		<div v-if="user.f2a == 0" class="f2a-disabled">{{ $t('Disabled') }}</div>
-		<Button :text="$t('Change')" />
+		<Password name="password_current" :label="$t('Current password')" v-model="password_current" />
+		<Button :text="$t('Update')" />
 	</form>
 </template>
 
@@ -78,22 +58,4 @@ function onSubmitF2a(e) {
 
 <style scoped>
 @import url('../../css/page-scoped.css');
-.f2a-enabled {
-	float: left;
-	width: 100%;
-	color: #fff;
-	background: #55cc55;
-	font-weight: 900;
-	padding: 15px 20px;
-	border-radius: 10px;
-}
-.f2a-disabled {
-	float: left;
-	width: 100%;
-	color: #fff;
-	background: #ff2200;
-	font-weight: 900;
-	padding: 15px 20px;
-	border-radius: 10px;
-}
 </style>