REFACTOR: final 2FA fixes and improvements (#1877)

stereum-dev · May 16, 2024 · 72e857d · 72e857d
1 parent 112e14f
commit 72e857d
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 8 deletions.
diff --git a/launcher/src/components/UI/server-management/components/two-factor-auth/TwoFactoSetupBox.vue b/launcher/src/components/UI/server-management/components/two-factor-auth/TwoFactoSetupBox.vue
@@ -41,11 +41,18 @@
     </div>
     <div class="col-start-1 col-end-10 row-start-3 row-span-2 w-full h-full grid grid-cols-2 grid-rows-2 py-2">
       <span class="col-start-1 col-span-full row-start-1 row-span-1 text-left text-xs text-gray-200 w-full h-full"
-        >SCAN THE CODE WITH YOUR AUTHENTICATOR APP</span
-      >
-      <span class="col-start-1 col-span-full row-start-2 row-span-1 text-left text-xs text-gray-200 w-full h-full"
+        ><ol>
+          <li>1. Scan the code with your authenticator app</li>
+          <li>2. Enter the verification code an click send</li>
+          <li>3. Do a backup by pressing the save button</li>
+          <li>4. Finally click on confirm to activate 2FA</li>
+        </ol>
+        <br />
+        You will be logged out as soon as you click the final confirm button. The next login requires 2FA.
+      </span>
+      <!-- <span class="col-start-1 col-span-full row-start-2 row-span-1 text-left text-xs text-gray-200 w-full h-full"
         >CLICK TO ENLARGEN</span
-      >
+      > -->
     </div>
 
     <div

diff --git a/launcher/src/components/UI/server-management/components/two-factor-auth/TwoFactorAuth.vue b/launcher/src/components/UI/server-management/components/two-factor-auth/TwoFactorAuth.vue
@@ -23,7 +23,7 @@
 
     <TwoFactorBtn
       v-if="!twoFactorIsEnabled && !twoFactorSetupIsActive && configured2fa"
-      class="row-start-2 remove-btn"
+      :class="['row-start-2 ', 'remove-btn', removeTwoFactorActive ? 'disabled' : '']"
       btn-name="Remove 2FA"
       @btnClick="removeTwoFactor"
     />
@@ -69,7 +69,7 @@
       class="row-start-10 row-span-1 col-start-1 col-span-full flex justify-center items-center p-2 mt-2"
     >
       <span class="text-xs text-gray-300 text-left font-sans"
-        >If you click confirm you will lose connection with your server!</span
+        >If you click confirm you need to re-login on your server!</span
       >
     </div>
     <TwoFactorBtn
@@ -80,7 +80,11 @@
     />
     <TwoFactorBtn
       v-if="twoFactorSetupIsActive"
-      :class="['row-start-13', 'col-start-8', twoFactorSetupIsActive && !authStore.scratchCodeSaved ? 'disabled' : '']"
+      :class="[
+        'row-start-13',
+        'col-start-8',
+        (twoFactorSetupIsActive && !authStore.scratchCodeSaved) || finishSetupActive ? 'disabled' : '',
+      ]"
       btn-name="Confirm"
       @btnClick="startSetup"
     />
@@ -97,7 +101,9 @@ import { useTwoFactorAuth } from "@/store/twoFactorAuth";
 import { useControlStore } from "@/store/theControl";
 import ControlService from "@/store/ControlService";
 import { saveAs } from "file-saver";
+import { useRouter } from "vue-router";
 
+const router = useRouter();
 const authStore = useTwoFactorAuth();
 const controlStore = useControlStore();
 //enable two factor authentication
@@ -116,6 +122,9 @@ const secretKey = ref("");
 const QRcode = ref("");
 const configured2fa = ref();
 
+const finishSetupActive = ref(false);
+const removeTwoFactorActive = ref(false);
+
 onMounted(() => {
   checkAuth();
   ControlService.addListener("2FAEvents", authenticatorHandler);
@@ -141,10 +150,22 @@ const startSetup = async () => {
     await ControlService.beginAuthSetup(isTimeBaseActive.value, isOrgGenTimeLimit.value, isRateLimiting.value);
   } else {
     //setup two factor authentication
+    finishSetupActive.value = true;
     await ControlService.finishAuthSetup();
+    loggingOut();
   }
 };
 
+const loggingOut = async () => {
+  try {
+    await ControlService.stopShell();
+    await ControlService.logout();
+  } catch (e) {}
+  router.push("/login").then(() => {
+    location.reload();
+  });
+};
+
 //title manager
 const titleManager = computed(() => {
   if (twoFactorIsEnabled.value) {
@@ -208,7 +229,11 @@ const checkAuth = async () => {
 };
 
 const removeTwoFactor = async () => {
-  await ControlService.removeAuthenticator();
+  if (!removeTwoFactorActive.value) {
+    removeTwoFactorActive.value = true;
+    await ControlService.removeAuthenticator();
+    loggingOut();
+  }
 };
 </script>
 <style scoped>