feat(ui): prevent password manager interference & improve service links (#3989)

src/components/Common/SensitiveInput/index.tsx

@@ -25,6 +25,10 @@ const SensitiveInput = ({ as = 'input', ...props }: SensitiveInputProps) => {
   return (
     <>
       <Component
+        autoComplete="off"
+        data-1pignore="true"
+        data-lpignore="true"
+        data-bwignore="true"
         {...componentProps}
         className={`rounded-l-only ${componentProps.className ?? ''}`}
         type={

src/components/Login/LocalLogin.tsx

@@ -101,6 +101,9 @@ const LocalLogin = ({ revalidate }: LocalLoginProps) => {
                       type="password"
                       autoComplete="current-password"
                       data-testid="password"
+                      data-1pignore="false"
+                      data-lpignore="false"
+                      data-bwignore="false"
                     />
                   </div>
                   {errors.password &&

src/components/Settings/Notifications/NotificationsDiscord.tsx

@@ -208,6 +208,10 @@ const NotificationsDiscord = () => {
                     name="botUsername"
                     type="text"
                     placeholder={settings.currentSettings.applicationTitle}
+                    autoComplete="off"
+                    data-1pignore="true"
+                    data-lpignore="true"
+                    data-bwignore="true"
                   />
                 </div>
                 {errors.botUsername &&

src/components/Settings/Notifications/NotificationsEmail.tsx

@@ -103,7 +103,7 @@ const NotificationsEmail = () => {
           otherwise: Yup.string().nullable(),
         })
         .matches(
-          /-----BEGIN PGP PRIVATE KEY BLOCK-----.+-----END PGP PRIVATE KEY BLOCK-----/s,
+          /-----BEGIN PGP PRIVATE KEY BLOCK-----.+-----END PGP PRIVATE KEY BLOCK-----/,
           intl.formatMessage(messages.validationPgpPrivateKey)
         ),
       pgpPassword: Yup.string().when('pgpPrivateKey', {
@@ -263,6 +263,10 @@ const NotificationsEmail = () => {
                     name="emailFrom"
                     type="text"
                     inputMode="email"
+                    autoComplete="off"
+                    data-1pignore="true"
+                    data-lpignore="true"
+                    data-bwignore="true"
                   />
                 </div>
                 {errors.emailFrom &&
@@ -284,6 +288,10 @@ const NotificationsEmail = () => {
                     name="smtpHost"
                     type="text"
                     inputMode="url"
+                    autoComplete="off"
+                    data-1pignore="true"
+                    data-lpignore="true"
+                    data-bwignore="true"
                   />
                 </div>
                 {errors.smtpHost &&
@@ -305,6 +313,10 @@ const NotificationsEmail = () => {
                   type="text"
                   inputMode="numeric"
                   className="short"
+                  autoComplete="off"
+                  data-1pignore="true"
+                  data-lpignore="true"
+                  data-bwignore="true"
                 />
                 {errors.smtpPort &&
                   touched.smtpPort &&
@@ -358,7 +370,15 @@ const NotificationsEmail = () => {
               </label>
               <div className="form-input-area">
                 <div className="form-input-field">
-                  <Field id="authUser" name="authUser" type="text" />
+                  <Field
+                    id="authUser"
+                    name="authUser"
+                    type="text"
+                    autoComplete="off"
+                    data-1pignore="true"
+                    data-lpignore="true"
+                    data-bwignore="true"
+                  />
                 </div>
               </div>
             </div>
@@ -368,12 +388,7 @@ const NotificationsEmail = () => {
               </label>
               <div className="form-input-area">
                 <div className="form-input-field">
-                  <SensitiveInput
+                  <SensitiveInput as="field" id="authPass" name="authPass" />
-                    as="field"
-                    id="authPass"
-                    name="authPass"
-                    autoComplete="one-time-code"
-                  />
                 </div>
               </div>
             </div>
@@ -398,6 +413,10 @@ const NotificationsEmail = () => {
                     type="textarea"
                     rows="10"
                     className="font-mono text-xs"
+                    autoComplete="off"
+                    data-1pignore="true"
+                    data-lpignore="true"
+                    data-bwignore="true"
                   />
                 </div>
                 {errors.pgpPrivateKey &&
@@ -425,7 +444,10 @@ const NotificationsEmail = () => {
                     as="field"
                     id="pgpPassword"
                     name="pgpPassword"
-                    autoComplete="one-time-code"
+                    autoComplete="off"
+                    data-1pignore="true"
+                    data-lpignore="true"
+                    data-bwignore="true"
                   />
                 </div>
                 {errors.pgpPassword &&

src/components/Settings/Notifications/NotificationsTelegram.tsx

@@ -211,7 +211,7 @@ const NotificationsTelegram = () => {
                     as="field"
                     id="botAPI"
                     name="botAPI"
-                    autoComplete="one-time-code"
+                    type="text"
                   />
                 </div>
                 {errors.botAPI &&
@@ -230,7 +230,15 @@ const NotificationsTelegram = () => {
               </label>
               <div className="form-input-area">
                 <div className="form-input-field">
-                  <Field id="botUsername" name="botUsername" type="text" />
+                  <Field
+                    id="botUsername"
+                    name="botUsername"
+                    type="text"
+                    autoComplete="off"
+                    data-1pignore="true"
+                    data-lpignore="true"
+                    data-bwignore="true"
+                  />
                 </div>
                 {errors.botUsername &&
                   touched.botUsername &&
@@ -260,7 +268,15 @@ const NotificationsTelegram = () => {
               </label>
               <div className="form-input-area">
                 <div className="form-input-field">
-                  <Field id="chatId" name="chatId" type="text" />
+                  <Field
+                    id="chatId"
+                    name="chatId"
+                    type="text"
+                    autoComplete="off"
+                    data-1pignore="true"
+                    data-lpignore="true"
+                    data-bwignore="true"
+                  />
                 </div>
                 {errors.chatId &&
                   touched.chatId &&

src/components/Settings/RadarrModal/index.tsx

@@ -377,6 +377,10 @@ const RadarrModal = ({ onClose, radarr, onSave }: RadarrModalProps) => {
                         id="name"
                         name="name"
                         type="text"
+                        autoComplete="off"
+                        data-1pignore="true"
+                        data-lpignore="true"
+                        data-bwignore="true"
                         onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                           setIsValidated(false);
                           setFieldValue('name', e.target.value);
@@ -470,7 +474,6 @@ const RadarrModal = ({ onClose, radarr, onSave }: RadarrModalProps) => {
                         as="field"
                         id="apiKey"
                         name="apiKey"
-                        autoComplete="one-time-code"
                         onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                           setIsValidated(false);
                           setFieldValue('apiKey', e.target.value);

src/components/Settings/SettingsPlex.tsx

@@ -824,6 +824,10 @@ const SettingsPlex = ({ onComplete }: SettingsPlexProps) => {
                         id="tautulliPort"
                         name="tautulliPort"
                         className="short"
+                        autoComplete="off"
+                        data-1pignore="true"
+                        data-lpignore="true"
+                        data-bwignore="true"
                       />
                       {errors.tautulliPort &&
                         touched.tautulliPort &&
@@ -861,6 +865,10 @@ const SettingsPlex = ({ onComplete }: SettingsPlexProps) => {
                           inputMode="url"
                           id="tautulliUrlBase"
                           name="tautulliUrlBase"
+                          autoComplete="off"
+                          data-1pignore="true"
+                          data-lpignore="true"
+                          data-bwignore="true"
                         />
                       </div>
                       {errors.tautulliUrlBase &&
@@ -881,7 +889,6 @@ const SettingsPlex = ({ onComplete }: SettingsPlexProps) => {
                           as="field"
                           id="tautulliApiKey"
                           name="tautulliApiKey"
-                          autoComplete="one-time-code"
                         />
                       </div>
                       {errors.tautulliApiKey &&
@@ -902,6 +909,10 @@ const SettingsPlex = ({ onComplete }: SettingsPlexProps) => {
                           inputMode="url"
                           id="tautulliExternalUrl"
                           name="tautulliExternalUrl"
+                          autoComplete="off"
+                          data-1pignore="true"
+                          data-lpignore="true"
+                          data-bwignore="true"
                         />
                       </div>
                       {errors.tautulliExternalUrl &&

src/components/Settings/SettingsServices.tsx

@@ -84,6 +84,8 @@ const ServerInstance = ({
             <h3 className="truncate font-medium leading-5 text-white">
               <a
                 href={serviceUrl}
+                target="_blank"
+                rel="noopener noreferrer"
                 className="transition duration-300 hover:text-white hover:underline"
               >
                 {name}
@@ -112,6 +114,8 @@ const ServerInstance = ({
             </span>
             <a
               href={internalUrl}
+              target="_blank"
+              rel="noopener noreferrer"
               className="transition duration-300 hover:text-white hover:underline"
             >
               {internalUrl}
@@ -124,7 +128,12 @@ const ServerInstance = ({
             {profileName}
           </p>
         </div>
-        <a href={serviceUrl} className="opacity-50 hover:opacity-100">
+        <a
+          href={serviceUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="opacity-50 hover:opacity-100"
+        >
           {isSonarr ? (
             <SonarrLogo className="h-10 w-10 flex-shrink-0" />
           ) : (

src/components/Settings/SonarrModal/index.tsx

@@ -412,6 +412,10 @@ const SonarrModal = ({ onClose, sonarr, onSave }: SonarrModalProps) => {
                         id="name"
                         name="name"
                         type="text"
+                        autoComplete="off"
+                        data-1pignore="true"
+                        data-lpignore="true"
+                        data-bwignore="true"
                         onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                           setIsValidated(false);
                           setFieldValue('name', e.target.value);
@@ -505,7 +509,6 @@ const SonarrModal = ({ onClose, sonarr, onSave }: SonarrModalProps) => {
                         as="field"
                         id="apiKey"
                         name="apiKey"
-                        autoComplete="one-time-code"
                         onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                           setIsValidated(false);
                           setFieldValue('apiKey', e.target.value);

src/components/UserList/index.tsx

@@ -372,6 +372,10 @@ const UserList = () => {
                           name="email"
                           type="text"
                           inputMode="email"
+                          autoComplete="off"
+                          data-1pignore="true"
+                          data-lpignore="true"
+                          data-bwignore="true"
                         />
                       </div>
                       {errors.email &&