💄 Adjust Mastodon Form Labels

systemli · Jan 23, 2025 · cf2a8cf · cf2a8cf
1 parent a0eafcb
commit cf2a8cf
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/src/components/ticker/MastodonForm.test.tsx b/src/components/ticker/MastodonForm.test.tsx
@@ -59,14 +59,14 @@ describe('MastodonForm', () => {
 
     expect(screen.getByRole('checkbox', { name: 'Active' })).toBeInTheDocument()
     expect(screen.getByLabelText('Server *')).toBeInTheDocument()
-    expect(screen.getByLabelText('Token *')).toBeInTheDocument()
-    expect(screen.getByLabelText('Secret *')).toBeInTheDocument()
+    expect(screen.getByLabelText('Client Key *')).toBeInTheDocument()
+    expect(screen.getByLabelText('Client Secret *')).toBeInTheDocument()
     expect(screen.getByLabelText('Access Token *')).toBeInTheDocument()
     expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument()
 
     await userEvent.click(screen.getByRole('checkbox', { name: 'Active' }))
-    await userEvent.type(screen.getByLabelText('Token *'), 'token')
-    await userEvent.type(screen.getByLabelText('Secret *'), 'secret')
+    await userEvent.type(screen.getByLabelText('Client Key *'), 'token')
+    await userEvent.type(screen.getByLabelText('Client Secret *'), 'secret')
     await userEvent.type(screen.getByLabelText('Access Token *'), 'access-token')
 
     fetchMock.mockResponseOnce(JSON.stringify({ status: 'success' }))

diff --git a/src/components/ticker/MastodonForm.tsx b/src/components/ticker/MastodonForm.tsx
@@ -33,9 +33,11 @@ const MastodonForm: FC<Props> = ({ callback, ticker }) => {
       <Grid columnSpacing={{ xs: 1, sm: 2, md: 3 }} container rowSpacing={1}>
         <Grid item xs={12}>
           <Typography>
-            You need to create a Application for Ticker in Mastodon. Go to your profile settings in Mastodon. You find a menu point {`"`}Developer
-            {`"`} where you need to create an Application. After saving you see the required secrets and tokens. Required Scopes:{' '}
-            <code>read write write:media write:statuses</code>
+            You need to create a Application for Ticker in Mastodon. Go to your profile settings in Mastodon. You find a menu point "Developer" where you need
+            to create an Application. After saving you see the required secrets and tokens.
+          </Typography>
+          <Typography sx={{ mt: 1 }}>
+            Required Scopes: <code>read write write:media write:statuses</code>
           </Typography>
         </Grid>
         <Grid item xs={12}>
@@ -50,12 +52,12 @@ const MastodonForm: FC<Props> = ({ callback, ticker }) => {
         </Grid>
         <Grid item xs={12}>
           <FormGroup>
-            <TextField {...register('token')} label="Token" required type="password" />
+            <TextField {...register('token')} label="Client Key" required />
           </FormGroup>
         </Grid>
         <Grid item xs={12}>
           <FormGroup>
-            <TextField {...register('secret')} label="Secret" required type="password" />
+            <TextField {...register('secret')} label="Client Secret" required type="password" />
           </FormGroup>
         </Grid>
         <Grid item xs={12}>