Skip to content

Commit

Permalink
fix: do not hide secret value input field (#3233)
Browse files Browse the repository at this point in the history 
Fixes #3226.
  • Loading branch information
@leafty
leafty authored Jul 29, 2024
1 parent 60c0e34 commit df5150e
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 136 deletions.
105 changes: 38 additions & 67 deletions client/src/features/secrets/SecretEdit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,33 +18,24 @@

import cx from "classnames";
import { useCallback, useEffect, useState } from "react";
import {
EyeFill,
EyeSlashFill,
PencilSquare,
XLg,
} from "react-bootstrap-icons";
import { PencilSquare, XLg } from "react-bootstrap-icons";
import { Controller, useForm } from "react-hook-form";
import {
Button,
Form,
Input,
InputGroup,
Label,
Modal,
ModalBody,
ModalFooter,
ModalHeader,
UncontrolledTooltip,
} from "reactstrap";

import { useEditSecretMutation } from "./secrets.api";
import { RtkOrNotebooksError } from "../../components/errors/RtkErrorAlert";
import { useEditSecretMutation } from "./secrets.api";
import { EditSecretForm, SecretDetails } from "./secrets.types";
import { SECRETS_VALUE_LENGTH_LIMIT } from "./secrets.utils";

import styles from "./secrets.module.scss";

interface SecretsEditProps {
secret: SecretDetails;
}
Expand All @@ -55,12 +46,6 @@ export default function SecretEdit({ secret }: SecretsEditProps) {
setShowModal((showModal) => !showModal);
}, []);

// Hide/show the secret value
const [showPlainText, setShowPlainText] = useState(false);
const toggleShowPlainText = useCallback(() => {
setShowPlainText((showPlainText) => !showPlainText);
}, []);

// Set up the form
const {
control,
Expand All @@ -71,7 +56,6 @@ export default function SecretEdit({ secret }: SecretsEditProps) {
defaultValues: {
value: "",
},
mode: "all",
});

// Handle posting data
Expand Down Expand Up @@ -103,7 +87,14 @@ export default function SecretEdit({ secret }: SecretsEditProps) {
Replace
</Button>

<Modal isOpen={showModal} toggle={toggleModal}>
<Modal
backdrop="static"
centered
fullscreen="md"
isOpen={showModal}
size="md"
toggle={toggleModal}
>
<ModalHeader toggle={toggleModal}>
Replace Secret <code>{secret.name}</code>
</ModalHeader>
Expand All @@ -123,55 +114,35 @@ export default function SecretEdit({ secret }: SecretsEditProps) {
<Label className="form-label" for="edit-secret-value">
Value
</Label>
<InputGroup>
<Controller
control={control}
name="value"
render={({ field }) => (
<Input
autoComplete="off"
className={cx(
"form-control",
"rounded-0",
"rounded-start",
!showPlainText && styles.blurredText,
errors.value && "is-invalid"
)}
id="edit-secret-value"
spellCheck="false"
type="textarea"
{...field}
/>
)}
rules={{
required: "Please provide a value.",
validate: (value) =>
value.length > SECRETS_VALUE_LENGTH_LIMIT
? `Value cannot exceed ${SECRETS_VALUE_LENGTH_LIMIT} characters.`
: undefined,
}}
/>
<Button
className="rounded-end"
id="secret-new-show-value"
onClick={() => toggleShowPlainText()}
>
{showPlainText ? (
<EyeFill className="bi" />
) : (
<EyeSlashFill className="bi" />
)}
<UncontrolledTooltip
placement="top"
target="secret-new-show-value"
>
Hide/show secret value
</UncontrolledTooltip>
</Button>
{errors.value && (
<div className="invalid-feedback">{errors.value.message}</div>
<Controller
control={control}
name="value"
render={({ field }) => (
<Input
id="edit-secret-value"
type="textarea"
{...field}
autoComplete="off one-time-code"
className={cx(
"rounded-0",
"rounded-start",
errors.value && "is-invalid"
)}
spellCheck="false"
rows={6}
/>
)}
</InputGroup>
rules={{
required: "Please provide a value.",
validate: (value) =>
value.length > SECRETS_VALUE_LENGTH_LIMIT
? `Value cannot exceed ${SECRETS_VALUE_LENGTH_LIMIT} characters.`
: undefined,
}}
/>
{errors.value && (
<div className="invalid-feedback">{errors.value.message}</div>
)}
</div>
</Form>
</ModalBody>
Expand Down
102 changes: 39 additions & 63 deletions client/src/features/secrets/SecretNew.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,42 +18,32 @@

import cx from "classnames";
import { useCallback, useEffect, useState } from "react";
import { EyeFill, EyeSlashFill, PlusLg, XLg } from "react-bootstrap-icons";
import { PlusLg, XLg } from "react-bootstrap-icons";
import { Controller, useForm } from "react-hook-form";
import {
Button,
Form,
Input,
InputGroup,
Label,
Modal,
ModalBody,
ModalFooter,
ModalHeader,
UncontrolledTooltip,
} from "reactstrap";

import secretsApi, { useAddSecretMutation } from "./secrets.api";
import { RtkOrNotebooksError } from "../../components/errors/RtkErrorAlert";
import { Loader } from "../../components/Loader";
import secretsApi, { useAddSecretMutation } from "./secrets.api";
import { AddSecretForm } from "./secrets.types";
import { SECRETS_VALUE_LENGTH_LIMIT } from "./secrets.utils";

import styles from "./secrets.module.scss";

export default function SecretsNew() {
// Set up the modal
const [showModal, setShowModal] = useState(false);
const toggleModal = useCallback(() => {
setShowModal((showModal) => !showModal);
}, []);

// Hide/show the secret value
const [showPlainText, setShowPlainText] = useState(false);
const toggleShowPlainText = useCallback(() => {
setShowPlainText((showPlainText) => !showPlainText);
}, []);

// Set up the form
const {
control,
Expand All @@ -65,7 +55,6 @@ export default function SecretsNew() {
name: "",
value: "",
},
mode: "all",
});

// Handle fetching/posting data
Expand Down Expand Up @@ -117,7 +106,7 @@ export default function SecretsNew() {
render={({ field }) => (
<Input
autoComplete="off"
className={cx("form-control", errors.name && "is-invalid")}
className={cx(errors.name && "is-invalid")}
id="new-secret-name"
placeholder="Unique name"
type="text"
Expand Down Expand Up @@ -145,63 +134,50 @@ export default function SecretsNew() {
<Label className="form-label" for="new-secret-value">
Value
</Label>
<InputGroup>
<Controller
control={control}
name="value"
render={({ field }) => (
<Input
autoComplete="off"
className={cx(
"form-control",
"rounded-0",
"rounded-start",
!showPlainText && styles.blurredText,
errors.value && "is-invalid"
)}
id="new-secret-value"
spellCheck="false"
type="textarea"
{...field}
/>
)}
rules={{
required: "Please provide a value.",
validate: (value) =>
value.length > SECRETS_VALUE_LENGTH_LIMIT
? `Value cannot exceed ${SECRETS_VALUE_LENGTH_LIMIT} characters.`
: undefined,
}}
/>
<Button
className="rounded-end"
id="secret-new-show-value"
onClick={() => toggleShowPlainText()}
>
{showPlainText ? (
<EyeFill className="bi" />
) : (
<EyeSlashFill className="bi" />
)}
<UncontrolledTooltip
placement="top"
target="secret-new-show-value"
>
Hide/show secret value
</UncontrolledTooltip>
</Button>
{errors.value && (
<div className="invalid-feedback">{errors.value.message}</div>
<Controller
control={control}
name="value"
render={({ field }) => (
<Input
id="new-secret-value"
type="textarea"
{...field}
autoComplete="off one-time-code"
className={cx(
"rounded-0",
"rounded-start",
errors.value && "is-invalid"
)}
spellCheck="false"
rows={6}
/>
)}
</InputGroup>
rules={{
required: "Please provide a value.",
validate: (value) =>
value.length > SECRETS_VALUE_LENGTH_LIMIT
? `Value cannot exceed ${SECRETS_VALUE_LENGTH_LIMIT} characters.`
: undefined,
}}
/>
{errors.value && (
<div className="invalid-feedback">{errors.value.message}</div>
)}
</div>
</Form>
</>
);

return (
<>
<Modal isOpen={showModal} toggle={toggleModal}>
<Modal
backdrop="static"
centered
fullscreen="md"
isOpen={showModal}
size="md"
toggle={toggleModal}
>
<ModalHeader toggle={toggleModal}>Add New Secret</ModalHeader>
<ModalBody>{modalBody}</ModalBody>
<ModalFooter>
Expand Down
6 changes: 0 additions & 6 deletions client/src/features/secrets/secrets.module.scss
View file

This file was deleted.

0 comments on commit df5150e

Please sign in to comment.