148 lines
4.5 KiB
TypeScript
148 lines
4.5 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
} from "@/components/ui/card"
|
|
import {
|
|
deriveRuntimeConfig,
|
|
ultiSpaceOrigin,
|
|
type RuntimeConfig,
|
|
} from "@/lib/runtime-config"
|
|
import { persistNativeRuntimeConfig } from "@/lib/runtime-config/native"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
const CARD_CLASS = cn(
|
|
"w-full gap-4 border-0 bg-transparent px-4 py-6 shadow-none",
|
|
"sm:gap-5 sm:bg-card sm:px-8 sm:py-8"
|
|
)
|
|
|
|
/**
|
|
* Pre-login server picker for the native shells: choose the hosted UltiSpace or
|
|
* point at a self-hosted instance. OIDC discovery derives the full runtime
|
|
* config, which is persisted to the shared secure store (cross-app SSO).
|
|
*/
|
|
export function ServerPicker({
|
|
onSelected,
|
|
}: {
|
|
onSelected: (cfg: RuntimeConfig) => void
|
|
}) {
|
|
const [mode, setMode] = useState<"choose" | "self">("choose")
|
|
const [url, setUrl] = useState("")
|
|
const [loading, setLoading] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
async function select(rawOrigin: string, label?: string) {
|
|
setLoading(true)
|
|
setError(null)
|
|
try {
|
|
const cfg = await deriveRuntimeConfig(rawOrigin, { label })
|
|
await persistNativeRuntimeConfig(cfg)
|
|
onSelected(cfg)
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : "Connexion impossible.")
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-1 flex-col items-center justify-center px-4">
|
|
<div className="mx-auto w-full max-w-sm">
|
|
<Card className={CARD_CLASS}>
|
|
<CardHeader className="gap-3 px-0 text-center">
|
|
<div className="flex flex-col items-center gap-3 py-2">
|
|
<img
|
|
src="/ultisuite-mark.svg"
|
|
alt=""
|
|
width={64}
|
|
height={64}
|
|
className="h-14 w-14 select-none"
|
|
aria-hidden
|
|
/>
|
|
<span className="text-xl font-bold tracking-tight">
|
|
Ulti<span className="text-[#4285F4]">Suite</span>
|
|
</span>
|
|
</div>
|
|
<CardDescription>
|
|
Choisis ton serveur pour te connecter.
|
|
</CardDescription>
|
|
{error ? (
|
|
<p className="text-sm text-destructive" role="alert">
|
|
{error}
|
|
</p>
|
|
) : null}
|
|
</CardHeader>
|
|
|
|
<CardContent className="flex flex-col gap-3 px-0">
|
|
{mode === "choose" ? (
|
|
<>
|
|
<Button
|
|
type="button"
|
|
size="lg"
|
|
className="w-full"
|
|
disabled={loading}
|
|
onClick={() => void select(ultiSpaceOrigin(), "UltiSpace")}
|
|
>
|
|
{loading ? "Connexion…" : "UltiSpace (hébergé)"}
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
size="lg"
|
|
variant="outline"
|
|
className="w-full"
|
|
disabled={loading}
|
|
onClick={() => setMode("self")}
|
|
>
|
|
Instance auto-hébergée
|
|
</Button>
|
|
</>
|
|
) : (
|
|
<form
|
|
className="flex flex-col gap-3"
|
|
onSubmit={(e) => {
|
|
e.preventDefault()
|
|
if (url.trim()) void select(url.trim())
|
|
}}
|
|
>
|
|
<Input
|
|
type="url"
|
|
inputMode="url"
|
|
autoCapitalize="none"
|
|
autoCorrect="off"
|
|
placeholder="https://mail.exemple.org"
|
|
value={url}
|
|
onChange={(e) => setUrl(e.target.value)}
|
|
disabled={loading}
|
|
/>
|
|
<Button
|
|
size="lg"
|
|
type="submit"
|
|
className="w-full"
|
|
disabled={loading || !url.trim()}
|
|
>
|
|
{loading ? "Connexion…" : "Continuer"}
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
className="w-full"
|
|
disabled={loading}
|
|
onClick={() => setMode("choose")}
|
|
>
|
|
Retour
|
|
</Button>
|
|
</form>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|