feat(inputs): add support for toggling security on input fields (#1404)

This commit is contained in:
Jakob Ankarhem
2021-05-03 14:59:52 +02:00
committed by GitHub
parent e3d5e33ec3
commit 4fd452dd18
10 changed files with 92 additions and 17 deletions

View File

@@ -10,6 +10,7 @@ import Alert from '../../Common/Alert';
import Badge from '../../Common/Badge';
import Button from '../../Common/Button';
import LoadingSpinner from '../../Common/LoadingSpinner';
import SensitiveInput from '../../Common/SensitiveInput';
import NotificationTypeSelector from '../../NotificationTypeSelector';
const messages = defineMessages({
@@ -380,7 +381,8 @@ const NotificationsEmail: React.FC = () => {
</label>
<div className="form-input">
<div className="form-input-field">
<Field
<SensitiveInput
as="field"
id="authPass"
name="authPass"
type="password"
@@ -405,10 +407,11 @@ const NotificationsEmail: React.FC = () => {
</label>
<div className="form-input">
<div className="form-input-field">
<Field
<SensitiveInput
as="field"
id="pgpPrivateKey"
name="pgpPrivateKey"
as="textarea"
type="textarea"
rows="10"
className="font-mono text-xs"
/>
@@ -434,7 +437,8 @@ const NotificationsEmail: React.FC = () => {
</label>
<div className="form-input">
<div className="form-input-field">
<Field
<SensitiveInput
as="field"
id="pgpPassword"
name="pgpPassword"
type="password"

View File

@@ -9,6 +9,7 @@ import globalMessages from '../../../../i18n/globalMessages';
import Alert from '../../../Common/Alert';
import Button from '../../../Common/Button';
import LoadingSpinner from '../../../Common/LoadingSpinner';
import SensitiveInput from '../../../Common/SensitiveInput';
import NotificationTypeSelector from '../../../NotificationTypeSelector';
const messages = defineMessages({
@@ -159,7 +160,8 @@ const NotificationsPushbullet: React.FC = () => {
</label>
<div className="form-input">
<div className="form-input-field">
<Field
<SensitiveInput
as="field"
id="accessToken"
name="accessToken"
type="text"

View File

@@ -9,6 +9,7 @@ import globalMessages from '../../../i18n/globalMessages';
import Alert from '../../Common/Alert';
import Button from '../../Common/Button';
import LoadingSpinner from '../../Common/LoadingSpinner';
import SensitiveInput from '../../Common/SensitiveInput';
import NotificationTypeSelector from '../../NotificationTypeSelector';
const messages = defineMessages({
@@ -220,7 +221,8 @@ const NotificationsTelegram: React.FC = () => {
</label>
<div className="form-input">
<div className="form-input-field">
<Field
<SensitiveInput
as="field"
id="botAPI"
name="botAPI"
type="text"

View File

@@ -10,6 +10,7 @@ import * as Yup from 'yup';
import type { RadarrSettings } from '../../../../server/lib/settings';
import globalMessages from '../../../i18n/globalMessages';
import Modal from '../../Common/Modal';
import SensitiveInput from '../../Common/SensitiveInput';
import Transition from '../../Transition';
type OptionType = {
@@ -477,7 +478,8 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
</label>
<div className="form-input">
<div className="form-input-field">
<Field
<SensitiveInput
as="field"
id="apiKey"
name="apiKey"
type="text"

View File

@@ -13,6 +13,7 @@ import Badge from '../Common/Badge';
import Button from '../Common/Button';
import LoadingSpinner from '../Common/LoadingSpinner';
import PageTitle from '../Common/PageTitle';
import SensitiveInput from '../Common/SensitiveInput';
import LanguageSelector from '../LanguageSelector';
import RegionSelector from '../RegionSelector';
import CopyButton from './CopyButton';
@@ -166,7 +167,7 @@ const SettingsMain: React.FC = () => {
</label>
<div className="form-input">
<div className="form-input-field">
<input
<SensitiveInput
type="text"
id="apiKey"
className="rounded-l-only"

View File

@@ -10,6 +10,7 @@ import * as Yup from 'yup';
import type { SonarrSettings } from '../../../../server/lib/settings';
import globalMessages from '../../../i18n/globalMessages';
import Modal from '../../Common/Modal';
import SensitiveInput from '../../Common/SensitiveInput';
import Transition from '../../Transition';
type OptionType = {
@@ -508,7 +509,8 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
</label>
<div className="form-input">
<div className="form-input-field">
<Field
<SensitiveInput
as="field"
id="apiKey"
name="apiKey"
type="text"