jbonofre commented on code in PR #219:
URL: https://github.com/apache/polaris-tools/pull/219#discussion_r3334288359
##########
console/src/pages/Login.tsx:
##########
@@ -84,108 +84,112 @@ export function Login() {
}
return (
- <div className="flex min-h-screen flex-col bg-background">
- <div className="flex flex-1 items-center justify-center">
- <Card className="w-full max-w-md">
- <CardHeader className="text-center">
+ <div className="flex min-h-screen flex-col bg-gradient-to-br from-slate-50
via-background to-slate-100">
+ <div className="flex flex-1 items-center justify-center p-4">
+ <div className="w-full max-w-sm space-y-6">
+ {/* Logo + title */}
+ <div className="text-center space-y-2">
<div className="flex justify-center">
<Logo clickable={false} />
</div>
- </CardHeader>
- <CardContent>
- <form onSubmit={handleSubmit} className="space-y-4">
- <div className="rounded-md border p-3 text-sm">
- <div className="flex items-center justify-between">
- <div className="flex items-center gap-2">
- <span
className="text-muted-foreground">{config.REALM_HEADER_NAME}:</span>
- <span className="font-medium">{config.POLARIS_REALM}</span>
+ <p className="text-sm text-muted-foreground">Sign in to your
workspace</p>
+ </div>
+
+ <Card className="shadow-dropdown">
+ <CardContent className="p-6">
+ <form onSubmit={handleSubmit} className="space-y-4">
+ {/* Realm info */}
+ <div className="flex items-center justify-between rounded-lg
bg-muted/60 px-3 py-2.5 text-sm">
+ <div className="flex items-center gap-1.5">
+ <span className="text-muted-foreground
text-xs">{config.REALM_HEADER_NAME}</span>
+ <span className="font-medium
text-foreground">{config.POLARIS_REALM}</span>
</div>
<Popover>
<PopoverTrigger asChild>
<button
type="button"
className="text-muted-foreground hover:text-foreground
transition-colors"
>
- <Info className="h-4 w-4" />
+ <Info className="h-3.5 w-3.5" />
</button>
</PopoverTrigger>
<PopoverContent className="w-80">
<div className="space-y-2">
<h4 className="font-medium text-sm">Realm
Configuration</h4>
<p className="text-xs text-muted-foreground">
- This UI console is configured to connect to a
specific Polaris server
- realm.
+ This console is configured to connect to a specific
Polaris server realm.
</p>
</div>
</PopoverContent>
</Popover>
</div>
- </div>
- <div className="space-y-2">
- <Label htmlFor="username">Username</Label>
- <Input
- id="username"
- type="text"
- value={username}
- onChange={(e) => setUsername(e.target.value)}
- required
- placeholder="Enter your username"
- />
- </div>
- <div className="space-y-2">
- <Label htmlFor="password">Password</Label>
- <Input
- id="password"
- type="password"
- value={password}
- onChange={(e) => setPassword(e.target.value)}
- required
- placeholder="Enter your password"
- />
- </div>
- <div className="space-y-2">
- <Label htmlFor="scope">Scope</Label>
- <Input
- id="scope"
- type="text"
- value={scope}
- onChange={(e) => setScope(e.target.value)}
- required
- placeholder="Enter the scope"
- />
- </div>
- <Button type="submit" className="w-full" disabled={loading}>
- {loading ? "Signing in..." : "Sign in"}
- </Button>
- {isOIDCConfigured && (
- <>
- <div className="relative">
- <div className="absolute inset-0 flex items-center">
- <span className="w-full border-t" />
- </div>
- <div className="relative flex justify-center text-xs
uppercase">
- <span className="bg-background px-2
text-muted-foreground">External IDP</span>
+
+ <div className="space-y-1.5">
+ <Label htmlFor="username" className="text-xs
font-medium">Username</Label>
+ <Input
+ id="username"
+ type="text"
+ value={username}
+ onChange={(e) => setUsername(e.target.value)}
+ required
+ placeholder="Enter your username"
+ />
+ </div>
+ <div className="space-y-1.5">
+ <Label htmlFor="password" className="text-xs
font-medium">Password</Label>
+ <Input
+ id="password"
+ type="password"
+ value={password}
+ onChange={(e) => setPassword(e.target.value)}
+ required
+ placeholder="Enter your password"
+ />
+ </div>
+ <div className="space-y-1.5">
+ <Label htmlFor="scope" className="text-xs
font-medium">Scope</Label>
+ <Input
+ id="scope"
+ type="text"
+ value={scope}
+ onChange={(e) => setScope(e.target.value)}
+ required
+ placeholder="Enter the scope"
+ />
+ </div>
+ <Button type="submit" className="w-full mt-2"
disabled={loading}>
+ {loading ? "Signing in…" : "Sign in"}
+ </Button>
+ {isOIDCConfigured && (
+ <>
+ <div className="relative py-1">
+ <div className="absolute inset-0 flex items-center">
+ <span className="w-full border-t border-border" />
+ </div>
+ <div className="relative flex justify-center text-xs">
+ <span className="bg-card px-2
text-muted-foreground">or continue with</span>
+ </div>
</div>
+ <Button
+ type="button"
+ variant="outline"
+ className="w-full"
+ onClick={handleOIDCLogin}
+ disabled={loading}
+ >
+ {loading ? "Redirecting…" : "Sign in with OIDC"}
+ </Button>
+ </>
+ )}
+ {error && (
+ <div className="rounded-lg bg-destructive/8 border
border-destructive/20 p-3 text-sm text-destructive">
Review Comment:
Right, `/8` isn't on the standard opacity scale — changed to
`bg-destructive/10`. Fixed in 1375e52.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
