formatted, added team index, create, show

resources/js/components/ManageTwoFactor.vue

@@ -10,15 +10,15 @@ import { useTwoFactorAuth } from '@/composables/useTwoFactorAuth';
 import { disable, enable } from '@/routes/two-factor';
 
 export type Props = {
-    canManageTwoFactor?: boolean;
-    requiresConfirmation?: boolean;
-    twoFactorEnabled?: boolean;
+  canManageTwoFactor?: boolean;
+  requiresConfirmation?: boolean;
+  twoFactorEnabled?: boolean;
 };
 
 withDefaults(defineProps<Props>(), {
-    canManageTwoFactor: false,
-    requiresConfirmation: false,
-    twoFactorEnabled: false,
+  canManageTwoFactor: false,
+  requiresConfirmation: false,
+  twoFactorEnabled: false,
 });
 
 const { hasSetupData, clearTwoFactorAuthData } = useTwoFactorAuth();
@@ -28,66 +28,59 @@ onUnmounted(() => clearTwoFactorAuthData());
 </script>
 
 <template>
-    <div v-if="canManageTwoFactor" class="space-y-6">
-        <Heading
-            variant="small"
-            title="Two-factor authentication"
-            description="Manage your two-factor authentication settings"
-        />
+  <div v-if="canManageTwoFactor" class="space-y-6">
+    <Heading
+      variant="small"
+      title="Two-factor authentication"
+      description="Manage your two-factor authentication settings"
+    />
 
-        <div
-            v-if="!twoFactorEnabled"
-            class="flex flex-col items-start justify-start space-y-4"
+    <div
+      v-if="!twoFactorEnabled"
+      class="flex flex-col items-start justify-start space-y-4"
+    >
+      <p class="text-muted-foreground text-sm">
+        When you enable two-factor authentication, you will be prompted for a
+        secure pin during login. This pin can be retrieved from a TOTP-supported
+        application on your phone.
+      </p>
+
+      <div>
+        <Button v-if="hasSetupData" @click="showSetupModal = true">
+          <ShieldCheck />Continue setup
+        </Button>
+        <Form
+          v-else
+          v-bind="enable.form()"
+          @success="showSetupModal = true"
+          #default="{ processing }"
         >
-            <p class="text-muted-foreground text-sm">
-                When you enable two-factor authentication, you will be prompted
-                for a secure pin during login. This pin can be retrieved from a
-                TOTP-supported application on your phone.
-            </p>
-
-            <div>
-                <Button v-if="hasSetupData" @click="showSetupModal = true">
-                    <ShieldCheck />Continue setup
-                </Button>
-                <Form
-                    v-else
-                    v-bind="enable.form()"
-                    @success="showSetupModal = true"
-                    #default="{ processing }"
-                >
-                    <Button type="submit" :disabled="processing">
-                        Enable 2FA
-                    </Button>
-                </Form>
-            </div>
-        </div>
-
-        <div v-else class="flex flex-col items-start justify-start space-y-4">
-            <p class="text-muted-foreground text-sm">
-                You will be prompted for a secure, random pin during login,
-                which you can retrieve from the TOTP-supported application on
-                your phone.
-            </p>
-
-            <div class="relative inline">
-                <Form v-bind="disable.form()" #default="{ processing }">
-                    <Button
-                        variant="destructive"
-                        type="submit"
-                        :disabled="processing"
-                    >
-                        Disable 2FA
-                    </Button>
-                </Form>
-            </div>
-
-            <TwoFactorRecoveryCodes />
-        </div>
-
-        <TwoFactorSetupModal
-            v-model:isOpen="showSetupModal"
-            :requiresConfirmation="requiresConfirmation"
-            :twoFactorEnabled="twoFactorEnabled"
-        />
+          <Button type="submit" :disabled="processing"> Enable 2FA </Button>
+        </Form>
+      </div>
     </div>
+
+    <div v-else class="flex flex-col items-start justify-start space-y-4">
+      <p class="text-muted-foreground text-sm">
+        You will be prompted for a secure, random pin during login, which you
+        can retrieve from the TOTP-supported application on your phone.
+      </p>
+
+      <div class="relative inline">
+        <Form v-bind="disable.form()" #default="{ processing }">
+          <Button variant="destructive" type="submit" :disabled="processing">
+            Disable 2FA
+          </Button>
+        </Form>
+      </div>
+
+      <TwoFactorRecoveryCodes />
+    </div>
+
+    <TwoFactorSetupModal
+      v-model:isOpen="showSetupModal"
+      :requiresConfirmation="requiresConfirmation"
+      :twoFactorEnabled="twoFactorEnabled"
+    />
+  </div>
 </template>