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,8 +179,9 @@ const goBack = () => {
       >
         <span>Back to Login</span>
       </button>
+      <div v-if="hasSocialLogins">
         <hr class="my-8" />
-      <p class="flex justify-center font-semibold text-text text-m">
+        <p class="flex justify-center font-semibold text-text text-base">
           Log in with social account
         </p>
         <a
@@ -183,6 +191,7 @@ const goBack = () => {
         >
           <span>Google</span>
         </a>
+      </div>
     </form>
   </div>
 </template>