Something went wrong. Try again.
FlockOff is a mass-block tool for the Atmosphere flockoff.app
Something went wrong. Try again.
1.6 kB · 46 lines
TSX
at master
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647'use client'
import { useState } from 'react'import { Button } from '@/components/ui/button'
export function LoginForm() { const [handle, setHandle] = useState('')
function handleChange(value: string) { setHandle(value.startsWith('@') ? value.slice(1) : value) }
function handleSubmit(event: React.FormEvent<HTMLFormElement>) { event.preventDefault() const loginUrl = `/api/login?handle=${encodeURIComponent(handle.trim())}` window.location.href = loginUrl }
return ( <form onSubmit={handleSubmit} className="flex flex-col gap-3 w-full"> <div className="relative"> <span className="absolute left-4 top-1/2 -translate-y-1/2 text-[var(--fo-text3)] text-sm font-mono select-none pointer-events-none"> @ </span> <input id="handle" name="handle" type="text" value={handle} onChange={(e) => handleChange(e.target.value)} placeholder="handle.bsky.social" className="w-full h-12 rounded-lg border border-border bg-card pl-8 pr-4 text-sm font-mono placeholder:text-[var(--fo-text3)] focus:outline-none focus:ring-2 focus:ring-[var(--fo-ember)] transition-shadow" autoFocus autoComplete="username" spellCheck={false} /> </div> <Button type="submit" disabled={!handle.trim()} className="h-11 w-full"> Sign In </Button> <p className="text-xs text-[var(--fo-text3)] text-center mt-1"> Uses AT Protocol OAuth. FlockOff only requests permission to manage your blocks. </p> </form> )}