New: Add privacy text input

frontend/src/Components/Form/FormInputGroup.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import PrivacyTextInput from 'Components/Form/PrivacyTextInput';
 import Link from 'Components/Link/Link';
 import { inputTypes, kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
@@ -97,6 +98,9 @@ function getComponent(type) {
     case inputTypes.TAG_SELECT:
       return TagSelectInputConnector;
 
+    case inputTypes.PRIVACY_TEXT:
+      return PrivacyTextInput;
+
     default:
       return TextInput;
   }

frontend/src/Components/Form/PrivacyTextInput.css

@@ -0,0 +1,17 @@
+.container {
+  position: relative;
+}
+
+.input {
+  composes: input from '~Components/Form/TextInput.css';
+
+  padding: 6px 30px 6px 16px;
+}
+
+.toggle {
+  position: absolute;
+  margin-left: -25px;
+  width: 20px;
+  text-align: center;
+  line-height: 35px;
+}

frontend/src/Components/Form/PrivacyTextInput.css.d.ts

@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'container': string;
+  'input': string;
+  'toggle': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Components/Form/PrivacyTextInput.tsx

@@ -0,0 +1,46 @@
+import React, { SyntheticEvent, useCallback, useState } from 'react';
+import IconButton from 'Components/Link/IconButton';
+import { icons } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import TextInput from './TextInput';
+import styles from './PrivacyTextInput.css';
+
+interface PrivacyTextInputProps {
+  className: string;
+}
+
+function PrivacyTextInput(props: PrivacyTextInputProps) {
+  const { className = styles.input, ...otherProps } = props;
+
+  const [isVisible, setIsVisible] = useState(false);
+
+  const toggleVisibility = useCallback(() => {
+    setIsVisible(!isVisible);
+  }, [isVisible, setIsVisible]);
+
+  // Prevent a user from copying (or cutting) the password from the input
+  const onCopy = useCallback((event: SyntheticEvent) => {
+    event.preventDefault();
+    event.nativeEvent.stopImmediatePropagation();
+  }, []);
+
+  return (
+    <div className={styles.container}>
+      <TextInput
+        className={className}
+        {...otherProps}
+        onCopy={onCopy}
+        type={isVisible ? 'text' : 'password'}
+      />
+
+      <IconButton
+        className={styles.toggle}
+        name={isVisible ? icons.VIEW : icons.HIDE}
+        title={translate('Toggle')}
+        onPress={toggleVisibility}
+      />
+    </div>
+  );
+}
+
+export default PrivacyTextInput;

frontend/src/Components/Form/ProviderFieldFormGroup.js

@@ -6,7 +6,7 @@ import FormInputGroup from 'Components/Form/FormInputGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import { inputTypes } from 'Helpers/Props';
 
-function getType({ type, selectOptionsProviderAction }) {
+function getType({ type, selectOptionsProviderAction, privacy }) {
   switch (type) {
     case 'captcha':
       return inputTypes.CAPTCHA;
@@ -34,6 +34,9 @@ function getType({ type, selectOptionsProviderAction }) {
     case 'tagSelect':
       return inputTypes.TAG_SELECT;
     case 'textbox':
+      if (privacy === 'userName' || privacy === 'apiKey') {
+        return inputTypes.PRIVACY_TEXT;
+      }
       return inputTypes.TEXT;
     case 'oAuth':
       return inputTypes.OAUTH;

frontend/src/Helpers/Props/icons.js

@@ -56,6 +56,7 @@ import {
   faExclamationTriangle as fasExclamationTriangle,
   faExternalLinkAlt as fasExternalLinkAlt,
   faEye as fasEye,
+  faEyeSlash as fasEyeSlash,
   faFastBackward as fasFastBackward,
   faFastForward as fasFastForward,
   faFileExport as fasFileExport,
@@ -245,3 +246,4 @@ export const VIEW = fasEye;
 export const WARNING = fasExclamationTriangle;
 export const WIKI = fasBookReader;
 export const BLOCKLIST = fasBan;
+export const HIDE = fasEyeSlash;

frontend/src/Helpers/Props/inputTypes.js

@@ -20,6 +20,7 @@ export const SELECT = 'select';
 export const DYNAMIC_SELECT = 'dynamicSelect';
 export const TAG = 'tag';
 export const TEXT = 'text';
+export const PRIVACY_TEXT = 'privacyText';
 export const TEXT_AREA = 'textArea';
 export const TEXT_TAG = 'textTag';
 export const TAG_SELECT = 'tagSelect';
@@ -46,6 +47,7 @@ export const all = [
   DYNAMIC_SELECT,
   TAG,
   TEXT,
+  PRIVACY_TEXT,
   TEXT_AREA,
   TEXT_TAG,
   TAG_SELECT

src/Prowlarr.Http/ClientSchema/Field.cs

@@ -20,6 +20,7 @@ namespace Prowlarr.Http.ClientSchema
         public string SelectOptionsProviderAction { get; set; }
         public string Section { get; set; }
         public string Hidden { get; set; }
+        public PrivacyLevel Privacy { get; set; }
         public string Placeholder { get; set; }
         public bool IsFloat { get; set; }
 

src/Prowlarr.Http/ClientSchema/SchemaBuilder.cs

@@ -105,6 +105,7 @@ namespace Prowlarr.Http.ClientSchema
                         Advanced = fieldAttribute.Advanced,
                         Type = fieldAttribute.Type.ToString().FirstCharToLower(),
                         Section = fieldAttribute.Section,
+                        Privacy = fieldAttribute.Privacy,
                         Placeholder = fieldAttribute.Placeholder
                     };