diff --git a/components/common/Checkbox.js b/components/common/Checkbox.js index 0cd0dcad..94607993 100644 --- a/components/common/Checkbox.js +++ b/components/common/Checkbox.js @@ -1,18 +1,23 @@ -import React, { useRef } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import PropTypes from 'prop-types'; import Icon from 'components/common/Icon'; import Check from 'assets/check.svg'; import styles from './Checkbox.module.css'; -function Checkbox({ name, value, label, onChange }) { +function Checkbox({ name, value, label, onChange, valueArray }) { const ref = useRef(); + const [isChecked, setIsChecked] = useState(); const onClick = () => ref.current.click(); + useEffect(() => { + setIsChecked((valueArray && valueArray.includes(value)) || (!valueArray && value)); + }, [valueArray, value]); + return (
- {value && } size="small" />} + {isChecked && } size="small" />}
diff --git a/components/forms/AccountEditForm.js b/components/forms/AccountEditForm.js index 70125656..79d9a9a7 100644 --- a/components/forms/AccountEditForm.js +++ b/components/forms/AccountEditForm.js @@ -1,7 +1,8 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; import { FormattedMessage } from 'react-intl'; -import { Formik, Form, Field } from 'formik'; +import { Formik, Form, Field, useFormikContext, useField } from 'formik'; import Button from 'components/common/Button'; +import Checkbox from 'components/common/Checkbox'; import FormLayout, { FormButtons, FormError, @@ -9,10 +10,13 @@ import FormLayout, { FormRow, } from 'components/layout/FormLayout'; import useApi from 'hooks/useApi'; +import useFetch from 'hooks/useFetch'; const initialValues = { username: '', password: '', + isViewer: false, + websiteIds: [], }; const validate = ({ id, username, password }) => { @@ -28,6 +32,44 @@ const validate = ({ id, username, password }) => { return errors; }; +const WebsiteSelect = props => { + const { data } = useFetch(`/websites`); + const [field, meta] = useField(props); + const { + values: { websiteIds }, + } = useFormikContext(); + + return ( + <> + {data && data.length > 0 && ( +
+ {data.map(item => ( +
+ +
+ ))} +
+ )} + {!!meta.touched && !!meta.error &&
{meta.error}
} + + ); +}; + export default function AccountEditForm({ values, onSave, onClose }) { const { post } = useApi(); const [message, setMessage] = useState(); @@ -52,7 +94,7 @@ export default function AccountEditForm({ values, onSave, onClose }) { validate={validate} onSubmit={handleSubmit} > - {() => ( + {values => (
+ {!values.values.isAdmin && ( + + + )} + {values.values.isViewer && } - +
{editAccount && ( }> setShowUrl(row)} /> )} -