mirror of
https://github.com/wu736139669/hapi.git
synced 2026-08-05 06:24:37 +00:00
refactor: improve LoginPrompt UI/UX with simplified layout and better navigation
- Update subtitle to official slogan "Vibe Coding Anytime, Anywhere" - Simplify input placeholder to "Access token" - Remove verbose help text below the input field - Move server settings from top-right corner to footer below form - Add "Needs help?" link to docs (https://hapi.run/docs) - Add underline styling to both help and server links for better affordance - Add footer with copyright and Vibe Coding message
This commit is contained in:
@@ -93,11 +93,8 @@ export function LoginPrompt(props: LoginPromptProps) {
|
||||
const displayError = error || props.error
|
||||
const serverSummary = props.serverUrl ?? `${props.baseUrl} (same origin)`
|
||||
const title = isBindMode ? 'Bind Telegram' : 'HAPI'
|
||||
const subtitle = isBindMode
|
||||
? 'Enter your access token to bind this Telegram account'
|
||||
: 'Enter your access token to continue'
|
||||
const subtitle = 'Vibe Coding Anytime, Anywhere'
|
||||
const submitLabel = isBindMode ? 'Bind' : 'Sign In'
|
||||
const helpText = 'Use CLI_API_TOKEN:<namespace> from your server configuration (omit :<namespace> for default)'
|
||||
|
||||
return (
|
||||
<div className="relative h-full flex items-center justify-center p-4">
|
||||
@@ -177,7 +174,7 @@ export function LoginPrompt(props: LoginPromptProps) {
|
||||
type="password"
|
||||
value={accessToken}
|
||||
onChange={(e) => setAccessToken(e.target.value)}
|
||||
placeholder={isBindMode ? 'CLI_API_TOKEN:<namespace>' : 'CLI_API_TOKEN[:namespace]'}
|
||||
placeholder="Access token"
|
||||
autoComplete="current-password"
|
||||
disabled={isLoading}
|
||||
className="w-full px-3 py-2.5 rounded-lg border border-[var(--app-border)] bg-[var(--app-bg)] text-[var(--app-fg)] placeholder:text-[var(--app-hint)] focus:outline-none focus:ring-2 focus:ring-[var(--app-button)] focus:border-transparent disabled:opacity-50"
|
||||
@@ -206,11 +203,12 @@ export function LoginPrompt(props: LoginPromptProps) {
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Help text */}
|
||||
<div className="text-xs text-[var(--app-hint)] text-center">
|
||||
{helpText}
|
||||
</div>
|
||||
{/* Footer */}
|
||||
<div className="absolute bottom-4 left-0 right-0 text-center text-xs text-[var(--app-hint)] space-y-1">
|
||||
<div>Designed with <span className="text-red-500">♥</span> for Vibe Coding</div>
|
||||
<div>© {new Date().getFullYear()} HAPI</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user