gui.do / barazo-web
Barazo default frontend barazo.forum
2
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat(login): improve login UX with explainer and simpler labels (#213)

* feat(login): improve login UX with explainer and simpler labels

- Simplify "Handle or DID" label to just "Handle" (DID/URI input still
works silently)
- Remove asterisk from sole required field
- Remove technical helper text about DID/URI formats
- Add collapsible "What is an AT Protocol identity?" explainer that
educates new users without cluttering the default view
- Update placeholder to alice.bsky.social for broader recognition

Inspired by npmx.dev's onboarding pattern.

* test(login): update tests for new placeholder and explainer links

- Update placeholder assertion from jay.bsky.team to alice.bsky.social
- Handle multiple Bluesky links (explainer + PDS section) in PDS host test

authored by

Guido X Jansen and committed by
GitHub 058ffba9 d9e9fe84

+33 -11
+4 -4
src/__tests__/auth/login-page.test.tsx
··· 55 55 render(<LoginPage />) 56 56 const input = screen.getByLabelText(/handle/i) 57 57 expect(input).toBeInTheDocument() 58 - expect(input).toHaveAttribute('placeholder', 'jay.bsky.team') 58 + expect(input).toHaveAttribute('placeholder', 'alice.bsky.social') 59 59 }) 60 60 61 61 it('renders continue button', () => { ··· 207 207 it('has links to create accounts on PDS hosts', () => { 208 208 render(<LoginPage />) 209 209 210 - const blueskyLink = screen.getByRole('link', { name: /bluesky/i }) 211 - expect(blueskyLink).toHaveAttribute('href', 'https://bsky.app') 212 - expect(blueskyLink).toHaveAttribute('target', '_blank') 210 + const blueskyLinks = screen.getAllByRole('link', { name: /bluesky/i }) 211 + const pdsBlueskyLink = blueskyLinks.find((l) => l.getAttribute('href') === 'https://bsky.app')! 212 + expect(pdsBlueskyLink).toHaveAttribute('target', '_blank') 213 213 214 214 const blackskyLink = screen.getByRole('link', { name: /blacksky/i }) 215 215 expect(blackskyLink).toHaveAttribute('href', 'https://blacksky.community')
+29 -7
src/app/login/page.tsx
··· 119 119 )} 120 120 121 121 <div className="space-y-1"> 122 - <FormLabel htmlFor="handle" required> 123 - Handle or DID 124 - </FormLabel> 122 + <FormLabel htmlFor="handle">Handle</FormLabel> 125 123 <input 126 124 id="handle" 127 125 name="handle" 128 126 type="text" 129 127 value={handle} 130 128 onChange={(e) => setHandle(e.target.value)} 131 - placeholder="jay.bsky.team" 129 + placeholder="alice.bsky.social" 132 130 autoComplete="username" 133 131 required 134 132 disabled={submitting} ··· 138 136 'disabled:cursor-not-allowed disabled:opacity-50' 139 137 )} 140 138 /> 141 - <p className="text-xs text-muted-foreground"> 142 - Handle, DID, or AT Protocol URI (e.g. jay.bsky.team) 143 - </p> 144 139 </div> 145 140 146 141 <button ··· 155 150 {submitting ? 'Redirecting...' : 'Continue'} 156 151 </button> 157 152 </form> 153 + 154 + <details className="group text-sm"> 155 + <summary className="cursor-pointer text-muted-foreground hover:text-foreground"> 156 + What is an AT Protocol identity? 157 + </summary> 158 + <p className="mt-2 text-muted-foreground"> 159 + <strong className="text-foreground">Barazo</strong> is built on the{' '} 160 + <a 161 + href="https://atproto.com" 162 + target="_blank" 163 + rel="noopener noreferrer" 164 + className="text-primary underline decoration-primary/50 hover:text-primary-hover hover:decoration-primary" 165 + > 166 + AT Protocol 167 + </a> 168 + , which lets you own your data and use one account across many apps. If you have a{' '} 169 + <a 170 + href="https://bsky.app" 171 + target="_blank" 172 + rel="noopener noreferrer" 173 + className="text-primary underline decoration-primary/50 hover:text-primary-hover hover:decoration-primary" 174 + > 175 + Bluesky 176 + </a>{' '} 177 + account, you already have one. 178 + </p> 179 + </details> 158 180 159 181 <div className="space-y-2 text-center"> 160 182 <p className="text-sm text-muted-foreground">