refactor: migrate to text inputs to primer

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

src/renderer/routes/LoginWithOAuthApp.tsx

@@ -1,7 +1,13 @@
 import { type FC, useCallback, useContext, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { BookIcon, PersonIcon, SignInIcon } from '@primer/octicons-react';
+import {
+  BookIcon,
+  EyeClosedIcon,
+  EyeIcon,
+  PersonIcon,
+  SignInIcon,
+} from '@primer/octicons-react';
 import {
   Button,
   FormControl,
@@ -73,6 +79,8 @@ export const LoginWithOAuthAppRoute: FC = () => {
 
   const { loginWithOAuthApp } = useContext(AppContext);
 
+  const [maskToken, setMaskToken] = useState(true);
+
   const [formData, setFormData] = useState({
     hostname: 'github.com' as Hostname,
     clientId: '' as ClientID,
@@ -178,14 +186,14 @@ export const LoginWithOAuthAppRoute: FC = () => {
               Create new OAuth App
             </Button>
             <Text className="text-xs">
-              and use your <Text as="i">client id/secret</Text> below.
+              and use your <Text as="i">client id & secret</Text> below.
             </Text>
           </Stack>
           <FormControl required>
             <FormControl.Label>Client ID</FormControl.Label>
             <TextInput
               name="clientId"
-              placeholder="The 20 character Client ID as generated on GitHub"
+              placeholder="Your generated client id (20 characters)"
               value={formData.clientId}
               onChange={handleInputChange}
               aria-invalid={errors.clientId ? 'true' : 'false'}
@@ -202,7 +210,8 @@ export const LoginWithOAuthAppRoute: FC = () => {
             <FormControl.Label>Client Secret</FormControl.Label>
             <TextInput
               name="clientSecret"
-              placeholder="The 40 character Client Secret as generated on GitHub"
+              type={maskToken ? 'password' : 'text'}
+              placeholder="Your generated client secret (40 characters)"
               value={formData.clientSecret}
               onChange={handleInputChange}
               aria-invalid={errors.clientSecret ? 'true' : 'false'}
@@ -211,6 +220,13 @@ export const LoginWithOAuthAppRoute: FC = () => {
                   ? 'danger.emphasis'
                   : 'border.default',
               }}
+              trailingAction={
+                <TextInput.Action
+                  onClick={() => setMaskToken(!maskToken)}
+                  icon={maskToken ? EyeIcon : EyeClosedIcon}
+                  aria-label={maskToken ? 'Show token' : 'Hide token'}
+                />
+              }
               data-testid="login-clientSecret"
               block
             />

src/renderer/routes/LoginWithPersonalAccessToken.tsx

@@ -69,7 +69,7 @@ export const LoginWithPersonalAccessTokenRoute: FC = () => {
 
   const { loginWithPersonalAccessToken } = useContext(AppContext);
 
-  const [showPassword, setShowPassword] = useState(false);
+  const [maskClientSecret, setMaskClientSecret] = useState(true);
 
   const [formData, setFormData] = useState({
     hostname: 'github.com' as Hostname,
@@ -199,8 +199,8 @@ export const LoginWithPersonalAccessTokenRoute: FC = () => {
             <FormControl.Label>Token</FormControl.Label>
             <TextInput
               name="token"
-              type={showPassword ? 'text' : 'password'}
-              placeholder="The 40 character token as generated on GitHub"
+              type={maskClientSecret ? 'password' : 'text'}
+              placeholder="Your generated token (40 characters)"
               value={formData.token}
               onChange={handleInputChange}
               aria-invalid={errors.token ? 'true' : 'false'}
@@ -211,9 +211,9 @@ export const LoginWithPersonalAccessTokenRoute: FC = () => {
               }}
               trailingAction={
                 <TextInput.Action
-                  onClick={() => setShowPassword(!showPassword)}
-                  icon={showPassword ? EyeClosedIcon : EyeIcon}
-                  aria-label={showPassword ? 'Hide token' : 'Show token'}
+                  onClick={() => setMaskClientSecret(!maskClientSecret)}
+                  icon={maskClientSecret ? EyeIcon : EyeClosedIcon}
+                  aria-label={maskClientSecret ? 'Show token' : 'Hide token'}
                 />
               }
               data-testid="login-token"