feat: improve handling of an invalid api url

Resolves https://kolaente.dev/vikunja/frontend/issues/1964

src/components/misc/no-auth-wrapper.vue

@@ -13,7 +13,7 @@
 			<section class="content">
 				<div>
 					<h2 class="title" v-if="title">{{ title }}</h2>
-					<api-config/>
+					<api-config v-if="showApiConfig"/>
 					<Message v-if="motd !== ''" class="is-hidden-tablet mb-4">
 						{{ motd }}
 					</Message>
@@ -45,6 +45,12 @@ const route = useRoute()
 const {t} = useI18n({useScope: 'global'})
 const title = computed(() => t(route.meta?.title as string || ''))
 useTitle(() => title.value)
+
+const {
+	showApiConfig = true,
+} = defineProps<{
+	showApiConfig?: boolean
+}>()
 </script>
 
 <style lang="scss" scoped>

src/components/misc/ready.vue

@@ -11,22 +11,20 @@
 		<slot/>
 	</template>
 	<section v-else-if="error !== ''">
-		<no-auth-wrapper>
-			<card>
-				<p v-if="error === ERROR_NO_API_URL">
-					{{ $t('ready.noApiUrlConfigured') }}
+		<no-auth-wrapper :show-api-config="false">
+			<p v-if="error === ERROR_NO_API_URL">
+				{{ $t('ready.noApiUrlConfigured') }}
+			</p>
+			<message variant="danger" v-else class="mb-4">
+				<p>
+					{{ $t('ready.errorOccured') }}<br/>
+					{{ error }}
 				</p>
-				<message variant="danger" v-else>
-					<p>
-						{{ $t('ready.errorOccured') }}<br/>
-						{{ error }}
-					</p>
-					<p>
-						{{ $t('ready.checkApiUrl') }}
-					</p>
-				</message>
-				<api-config :configure-open="true" @found-api="load"/>
-			</card>
+				<p>
+					{{ $t('ready.checkApiUrl') }}
+				</p>
+			</message>
+			<api-config :configure-open="true" @found-api="load"/>
 		</no-auth-wrapper>
 	</section>
 	<CustomTransition name="fade">