fix: display block only when social logins enabled

* text-m -> text-base

app/src/components/AuthenticationPart.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { login, register } from '../utils/auth'
 import api from '../utils/api'
@@ -19,6 +19,13 @@ onMounted(async () => {
   availableMethods.value = res.data
 })
 
+const hasSocialLogins = computed(() => {
+  // There is any key other than 'local' is true
+  return Object.keys(availableMethods.value).some(
+    (method) => method !== 'local' && availableMethods.value[method]
+  )
+})
+
 const success = () => {
   router.push({ name: 'game' })
 }
@@ -172,17 +179,19 @@ const goBack = () => {
       >
         <span>Back to Login</span>
       </button>
-      <hr class="my-8" />
-      <p class="flex justify-center font-semibold text-text text-m">
-        Log in with social account
-      </p>
-      <a
-        v-if="availableMethods.google"
-        class="inline-flex justify-center rounded-lg text-sm font-black py-2 mt-3 bg-icon-google text-text w-full"
-        href="/api/v1/auth/google"
-      >
-        <span>Google</span>
-      </a>
+      <div v-if="hasSocialLogins">
+        <hr class="my-8" />
+        <p class="flex justify-center font-semibold text-text text-base">
+          Log in with social account
+        </p>
+        <a
+          v-if="availableMethods.google"
+          class="inline-flex justify-center rounded-lg text-sm font-black py-2 mt-3 bg-icon-google text-text w-full"
+          href="/api/v1/auth/google"
+        >
+          <span>Google</span>
+        </a>
+      </div>
     </form>
   </div>
 </template>