Mike/PodTui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

still self referencing

Browse Source
This commit is contained in:
Mike Freno
2026-02-05 01:43:10 -05:00
parent ea9ab4d3f9
commit 9fa52d71ca
13 changed files with 263 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/LoginScreen.tsx
View File

@@ -5,6 +5,7 @@
import { createSignal } from "solid-js"
import { useAuthStore } from "../stores/auth"
import { useTheme } from "../context/ThemeContext"
import { AUTH_CONFIG } from "../config/auth"
interface LoginScreenProps {
@@ -17,6 +18,7 @@ type FocusField = "email" | "password" | "submit" | "code" | "oauth"
export function LoginScreen(props: LoginScreenProps) {
const auth = useAuthStore()
const { theme } = useTheme()
const [email, setEmail] = createSignal("")
const [password, setPassword] = createSignal("")
const [focusField, setFocusField] = createSignal<FocusField>("email")
@@ -90,7 +92,7 @@ export function LoginScreen(props: LoginScreenProps) {
{/* Email field */}
<box flexDirection="column" gap={0}>
<text fg={focusField() === "email" ? "var(--color-primary)" : undefined}>Email:</text>
<text fg={focusField() === "email" ? theme.primary : undefined}>Email:</text>
<input
value={email()}
onInput={setEmail}
@@ -99,13 +101,13 @@ export function LoginScreen(props: LoginScreenProps) {
width={30}
/>
{emailError() && (
<text fg="var(--color-error)">{emailError()}</text>
<text fg={theme.error}>{emailError()}</text>
)}
</box>
{/* Password field */}
<box flexDirection="column" gap={0}>
<text fg={focusField() === "password" ? "var(--color-primary)" : undefined}>
<text fg={focusField() === "password" ? theme.primary : undefined}>
Password:
</text>
<input
@@ -116,7 +118,7 @@ export function LoginScreen(props: LoginScreenProps) {
width={30}
/>
{passwordError() && (
<text fg="var(--color-error)">{passwordError()}</text>
<text fg={theme.error}>{passwordError()}</text>
)}
</box>
@@ -127,9 +129,9 @@ export function LoginScreen(props: LoginScreenProps) {
<box
border
padding={1}
backgroundColor={focusField() === "submit" ? "var(--color-primary)" : undefined}
backgroundColor={focusField() === "submit" ? theme.primary : undefined}
>
<text fg={focusField() === "submit" ? "var(--color-text)" : undefined}>
<text fg={focusField() === "submit" ? theme.text : undefined}>
{auth.isLoading ? "Signing in..." : "[Enter] Sign In"}
</text>
</box>
@@ -137,21 +139,21 @@ export function LoginScreen(props: LoginScreenProps) {
{/* Auth error message */}
{auth.error && (
<text fg="var(--color-error)">{auth.error.message}</text>
<text fg={theme.error}>{auth.error.message}</text>
)}
<box height={1} />
{/* Alternative auth options */}
<text fg="var(--color-muted)">Or authenticate with:</text>
<text fg={theme.textMuted}>Or authenticate with:</text>
<box flexDirection="row" gap={2}>
<box
border
padding={1}
backgroundColor={focusField() === "code" ? "var(--color-primary)" : undefined}
backgroundColor={focusField() === "code" ? theme.primary : undefined}
>
<text fg={focusField() === "code" ? "var(--color-accent)" : "var(--color-muted)"}>
<text fg={focusField() === "code" ? theme.accent : theme.textMuted}>
[C] Sync Code
</text>
</box>
@@ -159,9 +161,9 @@ export function LoginScreen(props: LoginScreenProps) {
<box
border
padding={1}
backgroundColor={focusField() === "oauth" ? "var(--color-primary)" : undefined}
backgroundColor={focusField() === "oauth" ? theme.primary : undefined}
>
<text fg={focusField() === "oauth" ? "var(--color-accent)" : "var(--color-muted)"}>
<text fg={focusField() === "oauth" ? theme.accent : theme.textMuted}>
[O] OAuth Info
</text>
</box>
@@ -169,7 +171,7 @@ export function LoginScreen(props: LoginScreenProps) {
<box height={1} />
<text fg="var(--color-muted)">Tab to navigate, Enter to select</text>
<text fg={theme.textMuted}>Tab to navigate, Enter to select</text>
</box>
)
}