fix: hide social login if no providers are configured

Signed-off-by: Alexander Trost <galexrt@googlemail.com>
fivenet-app · Jan 23, 2025 · ee0566c · ee0566c
1 parent c1fba4e
commit ee0566c
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 99 deletions.
diff --git a/app/components/auth/LoginForm.vue b/app/components/auth/LoginForm.vue
@@ -90,12 +90,12 @@ function togglePasswordVisibility() {
             {{ $t('common.login') }}
         </UButton>
 
-        <div v-if="!isNUIAvailable" class="space-y-2">
+        <div v-if="!isNUIAvailable && login.providers.length > 0" class="space-y-2">
             <p v-if="!socialLoginEnabled" class="text-sm text-error-400">
                 {{ $t('components.auth.LoginForm.social_login_disabled') }}
             </p>
 
-            <template v-else-if="login.providers.length > 0">
+            <template v-else>
                 <UDivider :label="$t('common.or')" orientation="horizontal" class="mt-2" />
 
                 <div v-for="provider in login.providers" :key="provider.name">

diff --git a/app/components/auth/RegistrationForm.vue b/app/components/auth/RegistrationForm.vue
@@ -145,7 +145,7 @@ const onSubmitThrottle = useThrottleFn(async (event: FormSubmitEvent<Schema>) =>
         </UForm>
 
         <div class="mt-6">
-            <UButton block color="gray" :to="{ name: 'auth-login' }" :disabled="!canSubmit">
+            <UButton block color="gray" trailing-icon="i-mdi-login" :to="{ name: 'auth-login' }" :disabled="!canSubmit">
                 {{ $t('components.auth.RegistrationForm.back_to_login_button') }}
             </UButton>
         </div>

diff --git a/app/components/auth/account/AccountInfo.vue b/app/components/auth/account/AccountInfo.vue
@@ -39,26 +39,30 @@ async function removeOAuth2Connection(provider: string): Promise<void> {
     }
 }
 
-const items = [
-    {
-        slot: 'accountInfo',
-        label: t('components.auth.AccountInfo.title'),
-        icon: 'i-mdi-information-slab-circle',
-    },
-    {
-        slot: 'oauth2Connections',
-        label: t('components.auth.OAuth2Connections.title'),
-        icon: 'i-simple-icons-discord',
-    },
-    { slot: 'debugInfo', label: t('components.debug_info.title'), icon: 'i-mdi-connection' },
-];
+const items = computed(() =>
+    [
+        {
+            slot: 'accountInfo',
+            label: t('components.auth.AccountInfo.title'),
+            icon: 'i-mdi-information-slab-circle',
+        },
+        account.value?.oauth2Providers && account.value.oauth2Providers.length > 0
+            ? {
+                  slot: 'oauth2Connections',
+                  label: t('components.auth.OAuth2Connections.title'),
+                  icon: 'i-simple-icons-discord',
+              }
+            : undefined,
+        { slot: 'debugInfo', label: t('components.debug_info.title'), icon: 'i-mdi-connection' },
+    ].flatMap((item) => (item !== undefined ? [item] : [])),
+);
 
 const route = useRoute();
 const router = useRouter();
 
 const selectedTab = computed({
     get() {
-        const index = items.findIndex((item) => item.slot === route.query.tab);
+        const index = items.value.findIndex((item) => item.slot === route.query.tab);
         if (index === -1) {
             return 0;
         }
@@ -67,7 +71,7 @@ const selectedTab = computed({
     },
     set(value) {
         // Hash is specified here to prevent the page from scrolling to the top
-        router.replace({ query: { tab: items[value]?.slot }, hash: '#' });
+        router.replace({ query: { tab: items.value[value]?.slot }, hash: '#' });
     },
 });
 </script>
@@ -155,7 +159,7 @@ const selectedTab = computed({
                     </UDashboardPanelContent>
                 </template>
 
-                <template #oauth2Connections>
+                <template v-if="account.oauth2Providers.length > 0" #oauth2Connections>
                     <OAuth2Connections
                         :providers="account.oauth2Providers"
                         :connections="account.oauth2Connections"

diff --git a/app/pages/auth/login.vue b/app/pages/auth/login.vue
@@ -104,7 +104,13 @@ const canSubmit = ref(true);
             <div v-if="login.signupEnabled" class="space-y-4">
                 <UDivider orientation="horizontal" />
 
-                <UButton block color="gray" :to="{ name: 'auth-registration' }" :disabled="!canSubmit">
+                <UButton
+                    block
+                    color="gray"
+                    trailing-icon="i-mdi-account-plus"
+                    :to="{ name: 'auth-registration' }"
+                    :disabled="!canSubmit"
+                >
                     {{ $t('components.auth.LoginForm.register_account') }}
                 </UButton>
             </div>

diff --git a/package.json b/package.json
@@ -88,7 +88,7 @@
         "@types/howler": "2.2.12",
         "@types/leaflet": "1.9.16",
         "@types/leaflet-contextmenu": "1.4.3",
-        "@types/node": "22.10.7",
+        "@types/node": "22.10.9",
         "@types/splitpanes": "2.2.6",
         "@types/uuid": "10.0.0",
         "@types/zxcvbn": "4.4.5",