bobbby.online
blonk is a radar for your web, where you follow vibes for cool blips on the radar
1<div class="mx-auto max-w-md">
2 <div class="bg-white rounded-lg shadow-lg p-8">
3 <.header class="text-center mb-8">
4 <div class="text-2xl text-gray-700">transmit your frequency</div>
5 <:subtitle>
6 <div class="text-gray-600 mt-2">
7 Connect securely with your Bluesky App Password
8 </div>
9 <div class="bg-blue-50 border border-blue-200 text-blue-800 px-4 py-3 rounded mt-4 text-sm">
10 🔒 <strong>Security Notice:</strong> Never use your main Bluesky password.
11 <br />Create a secure App Password in your Bluesky settings.
12 </div>
13 </:subtitle>
14 </.header>
15
16 <.simple_form :let={f} for={@conn.params["user"]} as={:user} action={~p"/users/log_in"} class="space-y-6">
17 <div :if={@error_message} class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded mb-4">
18 {String.replace(@error_message, "email", "handle")}
19 </div>
20
21 <div>
22 <label class="block text-gray-700 text-sm font-medium mb-3">Bluesky Handle</label>
23 <.input field={f[:handle]} type="text" placeholder="yourname.bsky.social or yourname@custom.domain"
24 class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
25 required />
26 <div class="text-xs text-gray-500 mt-2">Enter your Bluesky handle (with or without .bsky.social)</div>
27 </div>
28
29 <div>
30 <label class="block text-gray-700 text-sm font-medium mb-3">App Password</label>
31 <.input field={f[:password]} type="password" placeholder="xxxx-xxxx-xxxx-xxxx"
32 class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent font-mono"
33 required />
34 <div class="text-xs text-gray-500 mt-2">
35 <strong>Important:</strong> Use an <strong>App Password</strong>, not your main password.
36 <br />
37 <a href="https://bsky.app/settings/app-passwords" target="_blank" class="text-blue-600 hover:underline">
38 Generate an App Password in Bluesky Settings →
39 </a>
40 </div>
41 </div>
42
43 <:actions :let={f}>
44 <div class="flex items-center justify-between">
45 <.input field={f[:remember_me]} type="checkbox" label="Keep me logged in" class="text-sm" />
46 <div class="text-sm text-gray-600">
47 Need help?
48 <a href="https://bsky.app/settings/app-passwords" target="_blank" class="text-blue-600 hover:underline">App Password Guide</a>
49 </div>
50 </div>
51 </:actions>
52 <:actions>
53 <div class="flex justify-center pt-4">
54 <.button phx-disable-with="Authenticating..." class="bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 font-medium w-full">
55 Connect to Bluesky <span aria-hidden="true">🔗</span>
56 </.button>
57 </div>
58 </:actions>
59 </.simple_form>
60 </div>
61</div>