Merge pull request #1465 from aidanm1999/feature/2022-09/admin-website-assigning

Admins can assign websites to non-admins

components/forms/WebsiteEditForm.js

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Formik, Form, Field } from 'formik';
+import { Formik, Form, Field, useFormikContext } from 'formik';
 import Button from 'components/common/Button';
 import FormLayout, {
   FormButtons,
@@ -11,10 +11,14 @@ import FormLayout, {
 import Checkbox from 'components/common/Checkbox';
 import { DOMAIN_REGEX } from 'lib/constants';
 import useApi from 'hooks/useApi';
+import useFetch from 'hooks/useFetch';
+import useUser from 'hooks/useUser';
+import styles from './WebsiteEditForm.module.css';
 
 const initialValues = {
   name: '',
   domain: '',
+  owner: '',
   public: false,
 };
 
@@ -33,8 +37,45 @@ const validate = ({ name, domain }) => {
   return errors;
 };
 
+const OwnerDropDown = ({ user, accounts }) => {
+  console.info(styles);
+  const { setFieldValue, values } = useFormikContext();
+
+  useEffect(() => {
+    if (values.user_id != null && values.owner === '') {
+      setFieldValue('owner', values.user_id.toString());
+    } else if (user?.user_id && values.owner === '') {
+      setFieldValue('owner', user.user_id.toString());
+    }
+  }, [accounts, setFieldValue, user, values]);
+
+  if (user?.is_admin) {
+    return (
+      <FormRow>
+        <label htmlFor="owner">
+          <FormattedMessage id="label.owner" defaultMessage="Owner" />
+        </label>
+        <div>
+          <Field as="select" name="owner" className={styles.dropdown}>
+            {accounts?.map(acc => (
+              <option key={acc.user_id} value={acc.user_id}>
+                {acc.username}
+              </option>
+            ))}
+          </Field>
+          <FormError name="owner" />
+        </div>
+      </FormRow>
+    );
+  } else {
+    return null;
+  }
+};
+
 export default function WebsiteEditForm({ values, onSave, onClose }) {
   const { post } = useApi();
+  const { data: accounts } = useFetch(`/accounts`);
+  const { user } = useUser();
   const [message, setMessage] = useState();
 
   const handleSubmit = async values => {
@@ -72,10 +113,18 @@ export default function WebsiteEditForm({ values, onSave, onClose }) {
                 <FormattedMessage id="label.domain" defaultMessage="Domain" />
               </label>
               <div>
-                <Field name="domain" type="text" placeholder="example.com" />
+                <Field
+                  name="domain"
+                  type="text"
+                  placeholder="example.com"
+                  spellcheck="false"
+                  autocapitalize="off"
+                  autocorrect="off"
+                />
                 <FormError name="domain" />
               </div>
             </FormRow>
+            <OwnerDropDown accounts={accounts} user={user} />
             <FormRow>
               <label />
               <Field name="enable_share_url">

components/forms/WebsiteEditForm.module.css

@@ -0,0 +1,5 @@
+.dropdown {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}

components/layout/FormLayout.module.css

@@ -24,7 +24,8 @@
   flex: 1 1;
 }
 
-.row > div > input {
+.row > div > input,
+.row > div > select {
   width: 100%;
   min-width: 240px;
 }

pages/api/website/index.js

@@ -10,7 +10,8 @@ export default async (req, res) => {
   const { website_id, enable_share_url } = req.body;
 
   if (req.method === 'POST') {
-    const { name, domain } = req.body;
+    const { name, domain, owner } = req.body;
+    const website_owner = parseInt(owner);
 
     if (website_id) {
       const website = await getWebsiteById(website_id);
@@ -27,13 +28,13 @@ export default async (req, res) => {
         share_id = null;
       }
 
-      await updateWebsite(website_id, { name, domain, share_id });
+      await updateWebsite(website_id, { name, domain, share_id, user_id: website_owner });
 
       return ok(res);
     } else {
       const website_uuid = uuid();
       const share_id = enable_share_url ? getRandomChars(8) : null;
-      const website = await createWebsite(user_id, { website_uuid, name, domain, share_id });
+      const website = await createWebsite(website_owner, { website_uuid, name, domain, share_id });
 
       return ok(res, website);
     }

styles/index.css

@@ -84,6 +84,7 @@ a:visited {
 
 input[type='text'],
 input[type='password'],
+select,
 textarea {
   color: var(--gray900);
   background: var(--gray50);