Fix Login Gradio 6 (#12461)

* Fix

* add changeset

* Fix Changesets

Updated dependency versions for various Gradio components and fixed the login issue in Gradio 6.

---------

Co-authored-by: gradio-pr-bot <[email protected]>

Author: freddyaboulton

.changeset/six-clouds-love.md

@@ -0,0 +1,9 @@
+---
+"@gradio/core": patch
+"@gradio/form": patch
+"@self/app": patch
+"@self/spa": patch
+"gradio": patch
+---
+
+fix:Fix Login Gradio 6

js/app/src/routes/[...catchall]/+page.svelte

@@ -81,6 +81,7 @@
 	import { _ } from "svelte-i18n";
 	import { Client } from "@gradio/client";
 	import { page } from "$app/stores";
+	import { setupi18n } from "@gradio/core";
 
 	import { init } from "@huggingface/space-header";
 	import { browser } from "$app/environment";
@@ -240,19 +241,22 @@
 	let pending_deep_link_error = false;
 
 	let gradio_dev_mode = "";
+	let i18n_ready = false;
+	setupi18n().then(() => {
+		i18n_ready = true;
+	});
 
 	onMount(async () => {
 		//@ts-ignore
 		config = data.config;
-		window.gradio_config = config;
 		window.gradio_config = data.config;
 		config = data.config;
 
 		if (config.deep_link_state === "invalid") {
 			pending_deep_link_error = true;
 		}
 
-		if (!app.config) {
+		if (!app?.config && !config.auth_required) {
 			throw new Error("Could not resolve app config");
 		}
 
@@ -415,6 +419,7 @@
 			root={config.root}
 			space_id={space}
 			{app_mode}
+			i18n={i18n_ready ? $_ : (s) => s}
 		/>
 	{:else if config && app}
 		<svelte:component

js/core/src/Login.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import Form from "@gradio/form";
+	import { BaseForm } from "@gradio/form";
 	import { BaseTextbox as Textbox } from "@gradio/textbox";
 	import { BaseButton } from "@gradio/button";
-	import Column from "@gradio/column";
+	import { BaseColumn } from "@gradio/column";
 	import { Block } from "@gradio/atoms";
-	import { _ } from "svelte-i18n";
 	export let root: string;
 	export let auth_message: string | null;
 	export let app_mode: boolean;
 	export let space_id: string | null;
+	export let i18n: (s: string) => string;
 
 	let username = "";
 	let password = "";
@@ -34,23 +34,23 @@
 </script>
 
 <div class="wrap" class:min-h-screen={app_mode}>
-	<Column variant="panel" min_width={480}>
-		<h2>{$_("login.login")}</h2>
+	<BaseColumn variant="panel" min_width={480}>
+		<h2>{i18n("login.login")}</h2>
 		{#if auth_message}
 			<p class="auth">{@html auth_message}</p>
 		{/if}
 		{#if space_id}
 			<p class="auth">
-				{$_("login.enable_cookies")}
+				{i18n("login.enable_cookies")}
 			</p>
 		{/if}
 		{#if incorrect_credentials}
-			<p class="creds">{$_("login.incorrect_credentials")}</p>
+			<p class="creds">{i18n("login.incorrect_credentials")}</p>
 		{/if}
-		<Form>
+		<BaseForm>
 			<Block>
 				<Textbox
-					label={$_("login.username")}
+					label={i18n("login.username")}
 					lines={1}
 					show_label={true}
 					max_lines={1}
@@ -61,7 +61,7 @@
 
 			<Block>
 				<Textbox
-					label={$_("login.password")}
+					label={i18n("login.password")}
 					lines={1}
 					show_label={true}
 					max_lines={1}
@@ -70,12 +70,12 @@
 					bind:value={password}
 				/>
 			</Block>
-		</Form>
+		</BaseForm>
 
 		<BaseButton size="lg" variant="primary" on:click={submit}
-			>{$_("login.login")}</BaseButton
+			>{i18n("login.login")}</BaseButton
 		>
-	</Column>
+	</BaseColumn>
 </div>
 
 <style>

js/form/BaseForm.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	let { visible, scale, min_width } = $props();
+</script>
+
+<div
+	class="form"
+	class:hidden={visible === false}
+	class:hidden-css={visible === "hidden"}
+	style:flex-grow={scale}
+	style:min-width={`calc(min(${min_width}px, 100%))`}
+>
+	<slot />
+</div>
+
+<style>
+	div {
+		display: flex;
+		flex-direction: inherit;
+		flex-wrap: wrap;
+		gap: var(--form-gap-width);
+		box-shadow: var(--block-shadow);
+		border: var(--block-border-width) solid var(--block-border-color);
+		border-radius: var(--block-radius);
+		background: var(--border-color-primary);
+		overflow-y: hidden;
+	}
+
+	div :global(.block) {
+		box-shadow: none !important;
+		border-width: 0px !important;
+		border-radius: 0px !important;
+	}
+
+	.hidden {
+		display: none;
+	}
+
+	.hidden-css {
+		display: none !important;
+	}
+</style>

js/form/Index.svelte

@@ -1,44 +1,19 @@
+<script context="module" lang="ts">
+	export { default as BaseForm } from "./BaseForm.svelte";
+</script>
+
 <script lang="ts">
 	import { Gradio } from "@gradio/utils";
+	import BaseForm from "./BaseForm.svelte";
 
 	let props = $props();
 	const gradio = new Gradio(props);
 </script>
 
-<div
-	class="form"
-	class:hidden={gradio.shared.visible === false}
-	class:hidden-css={gradio.shared.visible === "hidden"}
-	style:flex-grow={gradio.shared.scale}
-	style:min-width={`calc(min(${gradio.shared.min_width}px, 100%))`}
+<BaseForm
+	visible={gradio.shared.visible}
+	scale={gradio.shared.scale}
+	min_width={gradio.shared.min_width}
 >
 	<slot />
-</div>
-
-<style>
-	div {
-		display: flex;
-		flex-direction: inherit;
-		flex-wrap: wrap;
-		gap: var(--form-gap-width);
-		box-shadow: var(--block-shadow);
-		border: var(--block-border-width) solid var(--block-border-color);
-		border-radius: var(--block-radius);
-		background: var(--border-color-primary);
-		overflow-y: hidden;
-	}
-
-	div :global(.block) {
-		box-shadow: none !important;
-		border-width: 0px !important;
-		border-radius: 0px !important;
-	}
-
-	.hidden {
-		display: none;
-	}
-
-	.hidden-css {
-		display: none !important;
-	}
-</style>
+</BaseForm>

js/spa/src/Index.svelte

@@ -330,7 +330,7 @@
 			app.close();
 		});
 
-		if (!app.config) {
+		if (!app.config && !config?.auth_required) {
 			throw new Error("Could not resolve app config");
 		}
 
@@ -587,6 +587,7 @@
 				auth_message={config.auth_message}
 				root={config.root}
 				space_id={space}
+				i18n={i18n_ready ? $_ : (s: string) => s}
 				{app_mode}
 			/>
 		{:else if config && Blocks && css_ready}