dev vouch dev on at. thats about it
atvouch.dev
show warn on at sign
+18
-2
+12
frontend/src/App.css
+12
frontend/src/App.css
···
279
279
background: var(--bg);
280
280
}
281
281
282
+
input[type="text"].input-invalid {
283
+
border-color: var(--error);
284
+
background: var(--error-bg);
285
+
}
286
+
287
+
.field-hint {
288
+
color: var(--error);
289
+
font-size: 11px;
290
+
margin-top: 0.35rem;
291
+
letter-spacing: 0.02em;
292
+
}
293
+
282
294
button {
283
295
padding: 0.6rem 1.2rem;
284
296
border: 1px solid var(--border);
+6
-2
frontend/src/App.tsx
+6
-2
frontend/src/App.tsx
···
286
286
type="text"
287
287
placeholder="handle to vouch for"
288
288
value={handle}
289
+
className={handle.includes("@") ? "input-invalid" : ""}
289
290
onChange={(e) => setHandle(e.target.value)}
290
291
disabled={submitting}
291
292
/>
292
-
<button type="submit" disabled={submitting || !handle.trim()}>
293
+
<button type="submit" disabled={submitting || !handle.trim() || handle.includes("@")}>
293
294
{submitting ? "Creating..." : "Vouch"}
294
295
</button>
295
296
</div>
297
+
{handle.includes("@") && <p className="field-hint">enter a handle, not a domain (e.g. alice.bsky.social)</p>}
296
298
</form>
297
299
{error && <div className="error">{error}</div>}
298
300
{result && <pre className="success">{result}</pre>}
···
334
336
type="text"
335
337
placeholder="handle to check"
336
338
value={handle}
339
+
className={handle.includes("@") ? "input-invalid" : ""}
337
340
onChange={(e) => setHandle(e.target.value)}
338
341
disabled={loading}
339
342
/>
340
-
<button type="submit" disabled={loading || !handle.trim()}>
343
+
<button type="submit" disabled={loading || !handle.trim() || handle.includes("@")}>
341
344
{loading ? "Checking..." : "Check"}
342
345
</button>
343
346
</div>
347
+
{handle.includes("@") && <p className="field-hint">enter a handle, not a domain (e.g. alice.bsky.social)</p>}
344
348
</form>
345
349
{error && <div className="error">{error}</div>}
346
350
{result && (