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 => (