From e8c7983649744942f260cc797dded82f87154723 Mon Sep 17 00:00:00 2001
From: Precious Oritsedere <rukyjacob@gmail.com>
Date: Fri, 24 Jul 2026 11:07:39 +0100
Subject: [PATCH 1/2] Feat: remember last identity provider on login

---
 app/components/LoginPage.tsx              | 175 ----------------------
 app/components/LoginWithRememberedIdp.tsx |  44 ++++++
 app/lib/helpers/idpHistoryUtils.ts        |  29 ++++
 app/login/page.tsx                        |  12 +-
 4 files changed, 75 insertions(+), 185 deletions(-)
 delete mode 100644 app/components/LoginPage.tsx
 create mode 100644 app/components/LoginWithRememberedIdp.tsx
 create mode 100644 app/lib/helpers/idpHistoryUtils.ts

diff --git a/app/components/LoginPage.tsx b/app/components/LoginPage.tsx
deleted file mode 100644
index 007ecb7..0000000
--- a/app/components/LoginPage.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import { useSolidAuth } from "@ldo/solid-react";
-import { useRouter } from "next/navigation";
-import Image from "next/image";
-import Button from "./shared/Button";
-import UrlCombobox, { ComboboxOption } from "./shared/UrlCombobox";
-import GitHubLinks from "./shared/GitHubLinks";
-
-const PRESET_ISSUERS: ComboboxOption[] = [
-  { label: "Solid Community", value: "https://solidcommunity.net/", secondaryLabel: "https://solidcommunity.net/" },
-  { label: "Inrupt", value: "https://login.inrupt.com", secondaryLabel: "https://login.inrupt.com" },
-];
-
-export default function LoginPage() {
-  const { session, login } = useSolidAuth();
-  const router = useRouter();
-  const [issuerInput, setIssuerInput] = useState<string>(
-    process.env.NEXT_PUBLIC_OIDC_ISSUER || ""
-  );
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  // Redirect to home if already authenticated
-  useEffect(() => {
-    if (session.isLoggedIn) {
-      router.replace("/");
-    }
-  }, [session.isLoggedIn, router]);
-
-  // Don't render login form if already authenticated (redirecting)
-  if (session.isLoggedIn) {
-    return null;
-  }
-
-  const validateIssuerUrl = (url: string): boolean => {
-    if (!url.trim()) {
-      setError("Please enter a Solid Identity Provider URL");
-      return false;
-    }
-
-    try {
-      const parsedUrl = new URL(url);
-      if (parsedUrl.protocol !== "http:" && parsedUrl.protocol !== "https:") {
-        setError("URL must start with http:// or https://");
-        return false;
-      }
-    } catch {
-      setError("Please enter a valid URL");
-      return false;
-    }
-
-    setError(null);
-    return true;
-  };
-
-  const handleLogin = async () => {
-    const trimmedIssuer = issuerInput.trim();
-    if (!validateIssuerUrl(trimmedIssuer)) {
-      return;
-    }
-
-    setIsLoading(true);
-    try {
-      await login(trimmedIssuer);
-    } catch (error) {
-      console.error("Login failed:", error);
-      setIsLoading(false);
-    }
-  };
-
-  const handleIssuerChange = (value: string) => {
-    setIssuerInput(value);
-    if (error) {
-      setError(null);
-    }
-  };
-
-  return (
-    <main className="flex min-h-screen bg-white" role="main" aria-label="Sign in page">
-      {/* Left side - Logo and branding */}
-      <section
-        className="hidden flex-1 items-center justify-center border-r border-gray-200 bg-[#F3EDFF] px-8 lg:flex"
-        aria-label="Branding section"
-      >
-        <div className="max-w-md">
-          <header className="flex flex-col items-center justify-center gap-2">
-            <div className="flex items-center justify-center w-[200px] h-[200px]">
-              <Image
-                src="/file-manager-logo.svg"
-                alt="Solid File Manager Logo"
-                width={60}
-                height={60}
-                className="w-full h-full object-cover"
-                priority
-              />
-            </div>
-            <h1 className="mb-2 text-4xl font-normal text-black">Sign in</h1>
-            <p className="text-base text-gray-600">
-              to continue to Solid File Manager
-            </p>
-          </header>
-        </div>
-      </section>
-
-      {/* Right side - Login form */}
-      <section
-        className="flex w-full flex-1 items-center justify-center bg-white px-4 py-12 lg:w-auto lg:min-w-[450px]"
-        aria-label="Sign in form section"
-      >
-        <div className="w-full max-w-md">
-          {/* Mobile logo */}
-          <header className="mb-8 lg:hidden flex flex-col items-center justify-center">
-            <div className="mb-2 flex items-center justify-center w-[200px] h-[200px]">
-              <Image
-                src="/file-manager-logo.svg"
-                alt="Solid File Manager Logo"
-                width={60}
-                height={60}
-                className="w-full h-full object-cover"
-                priority
-              />
-            </div>
-            <h1 className="mb-2 text-center text-3xl font-normal text-black">Sign in</h1>
-            <p className="text-center text-base text-gray-600">
-              to continue to Solid File Manager
-            </p>
-          </header>
-
-          <form
-            onSubmit={(e) => {
-              e.preventDefault();
-              handleLogin();
-            }}
-            className="space-y-6"
-            aria-label="Sign in form"
-            noValidate
-          >
-            {/* Identity Provider Input */}
-            <UrlCombobox
-              id="oidc-issuer"
-              label="Solid Identity Provider"
-              value={issuerInput}
-              onChange={handleIssuerChange}
-              options={PRESET_ISSUERS}
-              placeholder="Enter your provider URL or select from the list"
-              error={error || undefined}
-              disabled={isLoading}
-              aria-label="Enter or select Solid Identity Provider"
-            />
-
-            {/* Action button */}
-            <div className="flex items-center justify-end pt-4">
-              <Button
-                type="submit"
-                variant="primary"
-                disabled={isLoading}
-                isLoading={isLoading}
-                aria-label={isLoading ? "Signing in, please wait" : "Continue to sign in"}
-              >
-                {isLoading ? "Signing in..." : "Next"}
-              </Button>
-            </div>
-          </form>
-
-          {/* Footer links */}
-          <footer className="mt-24 flex flex-col items-center md:items-end">
-            <GitHubLinks layout="horizontal" />
-          </footer>
-        </div>
-      </section>
-    </main>
-  );
-}
diff --git a/app/components/LoginWithRememberedIdp.tsx b/app/components/LoginWithRememberedIdp.tsx
new file mode 100644
index 0000000..b13581f
--- /dev/null
+++ b/app/components/LoginWithRememberedIdp.tsx
@@ -0,0 +1,44 @@
+"use client";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { SolidLoginPage } from "solid-react-component/login/next";
+import { getLastIdp, saveLastIdp } from "../lib/helpers/idpHistoryUtils";
+
+
+export default function LoginWithRememberedIdp() {
+    const router = useRouter();
+    const [mounted, setMounted] = useState(false);
+    const [defaultIssuer, setDefaultIssuer] = useState("");
+
+    useEffect(() => {
+        setDefaultIssuer(getLastIdp());
+        setMounted(true);
+    }, []);
+
+    const handleSubmit = (event: React.FormEvent<HTMLDivElement>) => {
+        const input = event.currentTarget.querySelector("input");
+        if (input instanceof HTMLInputElement) {
+            saveLastIdp(input.value);
+        }
+    };
+
+    // Render only after localStorage is read, so defaultIssuer is applied on
+    // SolidLoginPage's initial mount (it reads defaultIssuer only once).
+    if (!mounted) return null;
+
+    return (
+        <div onSubmit={handleSubmit}>
+            <SolidLoginPage
+                onAlreadyLoggedIn={() => router.replace("/")}
+                defaultIssuer={defaultIssuer}
+                logo="/file-manager-logo.svg"
+                logoAlt="Solid File Manager Logo"
+                title="Sign in"
+                subtitle="to continue to Solid File Manager"
+                footerGitHubUrl="https://github.com/solid/solid-file-manager"
+                footerIssuesUrl="https://github.com/solid/solid-file-manager/issues/new"
+            />
+        </div>
+    )
+
+}
\ No newline at end of file
diff --git a/app/lib/helpers/idpHistoryUtils.ts b/app/lib/helpers/idpHistoryUtils.ts
new file mode 100644
index 0000000..e4606de
--- /dev/null
+++ b/app/lib/helpers/idpHistoryUtils.ts
@@ -0,0 +1,29 @@
+const LAST_IDP_KEY = "solid-file-manager-last-idp";
+
+export function getLastIdp(): string {
+  if (typeof window === "undefined") return "";
+
+  try {
+    return localStorage.getItem(LAST_IDP_KEY)?.trim() ?? "";
+  } catch (error) {
+    console.warn(
+      "Could not read last identity provider from localStorage",
+      error,
+    );
+    return "";
+  }
+}
+
+export function saveLastIdp(issuer: string): void {
+  if (typeof window === "undefined") return;
+  const value = issuer.trim();
+  if (!value) return;
+  try {
+    localStorage.setItem(LAST_IDP_KEY, value);
+  } catch (error) {
+    console.warn(
+      "Could not save last identity provider to localStorage",
+      error,
+    );
+  }
+}
diff --git a/app/login/page.tsx b/app/login/page.tsx
index b39283c..2d11db1 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -5,8 +5,8 @@ import { useRouter } from "next/navigation";
 import {
   SolidLoginNavigationProviderNext,
   AuthGuard,
-  SolidLoginPage,
 } from "solid-react-component/login/next";
+import LoginWithRememberedIdp from "../components/LoginWithRememberedIdp";
 
 const loadingFallback = (
   <div className="flex min-h-screen items-center justify-center bg-white">
@@ -22,15 +22,7 @@ export default function Login() {
         config={{ loginPath: "/login", homePath: "/" }}
       >
         <AuthGuard fallback={loadingFallback}>
-          <SolidLoginPage
-            onAlreadyLoggedIn={() => router.replace("/")}
-            logo="/file-manager-logo.svg"
-            logoAlt="Solid File Manager Logo"
-            title="Sign in"
-            subtitle="to continue to Solid File Manager"
-            footerGitHubUrl="https://github.com/solid/solid-file-manager"
-            footerIssuesUrl="https://github.com/solid/solid-file-manager/issues/new"
-          />
+          <LoginWithRememberedIdp />
         </AuthGuard>
       </SolidLoginNavigationProviderNext>
     </Suspense>

From 315cedbe34baab379f593d8234fd3abca5839cc4 Mon Sep 17 00:00:00 2001
From: Precious Oritsedere <rukyjacob@gmail.com>
Date: Fri, 24 Jul 2026 14:55:56 +0100
Subject: [PATCH 2/2] chore: remane login component

---
 app/components/{LoginWithRememberedIdp.tsx => LoginPage.tsx} | 2 +-
 app/login/page.tsx                                           | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename app/components/{LoginWithRememberedIdp.tsx => LoginPage.tsx} (96%)

diff --git a/app/components/LoginWithRememberedIdp.tsx b/app/components/LoginPage.tsx
similarity index 96%
rename from app/components/LoginWithRememberedIdp.tsx
rename to app/components/LoginPage.tsx
index b13581f..0b73684 100644
--- a/app/components/LoginWithRememberedIdp.tsx
+++ b/app/components/LoginPage.tsx
@@ -5,7 +5,7 @@ import { SolidLoginPage } from "solid-react-component/login/next";
 import { getLastIdp, saveLastIdp } from "../lib/helpers/idpHistoryUtils";
 
 
-export default function LoginWithRememberedIdp() {
+export default function LoginPage() {
     const router = useRouter();
     const [mounted, setMounted] = useState(false);
     const [defaultIssuer, setDefaultIssuer] = useState("");
diff --git a/app/login/page.tsx b/app/login/page.tsx
index 2d11db1..eb59456 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -6,7 +6,7 @@ import {
   SolidLoginNavigationProviderNext,
   AuthGuard,
 } from "solid-react-component/login/next";
-import LoginWithRememberedIdp from "../components/LoginWithRememberedIdp";
+import LoginPage from "../components/LoginPage";
 
 const loadingFallback = (
   <div className="flex min-h-screen items-center justify-center bg-white">
@@ -22,7 +22,7 @@ export default function Login() {
         config={{ loginPath: "/login", homePath: "/" }}
       >
         <AuthGuard fallback={loadingFallback}>
-          <LoginWithRememberedIdp />
+          <LoginPage />
         </AuthGuard>
       </SolidLoginNavigationProviderNext>
     </Suspense>