ui: add force join using admin privileges

packages/ui-default/components/dialog/index.tsx

@@ -2,6 +2,7 @@
 import $ from 'jquery';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import Notification from 'vj/components/notification';
 import { i18n, tpl } from 'vj/utils';
 import DomainSelectAutoComplete from '../autocomplete/components/DomainSelectAutoComplete';
 import UserSelectAutoComplete from '../autocomplete/components/UserSelectAutoComplete';
@@ -114,11 +115,13 @@ export class ConfirmDialog extends Dialog {
 
 export interface Field {
   type: 'text' | 'checkbox' | 'user' | 'userId' | 'username' | 'domain';
+  options?: string[] | Record<string, string>;
   placeholder?: string;
   label?: string;
   autofocus?: boolean;
   required?: boolean;
   default?: string;
+  columns?: number;
 }
 
 type Result<T extends string, R extends Record<T, Field>> = {
@@ -132,7 +135,25 @@ type Result<T extends string, R extends Record<T, Field>> = {
 export async function prompt<T extends string, R extends Record<T, Field>>(title: string, fields: R): Promise<Result<T, R>> {
   let valueCache: Result<T, R> = {} as any;
   const defaultValues = Object.fromEntries(Object.entries(fields)
-    .map(([name, field]: [T, Field]) => [name, field.default || ''])) as Result<T, R>;
+    .map(([name, field]: [T, Field]) => {
+      let firstOption = '';
+      if (field.options) {
+        if (Array.isArray(field.options)) firstOption = field.options[0];
+        else firstOption = Object.keys(field.options)[0];
+      }
+      return [name, field.default || firstOption || ''];
+    })) as Result<T, R>;
+
+  const layout: [string, Field][][] = [];
+  let pending: [string, Field][] = [];
+  for (const [name, field] of Object.entries(fields) as [T, Field][]) {
+    pending.push([name, field]);
+    if ((field.columns || -12) < 0) {
+      layout.push(pending);
+      pending = [];
+    }
+  }
+  if (pending.length > 0) layout.push(pending);
 
   const Component = () => {
     const [values, setValues] = React.useState(defaultValues);
@@ -147,35 +168,44 @@ export async function prompt<T extends string, R extends Record<T, Field>>(title
       <div className="row"><div className="columns">
         <h1>{title}</h1>
       </div></div>
-      {Object.entries(fields).map(([name, field]: [string, Field]) => <div className="row" key={name}>
-        <div className="columns">
+      {layout.map((i) => <div className="row" key={i[0][0]}>
+        {i.map(([name, field]: [string, Field]) => <div className={`columns medium-${Math.abs(field.columns || 12)}`}>
           {['text', 'user', 'userId', 'username', 'domain'].includes(field.type) && <label>
             {field.label}
             <div className="textbox-container">
-              {['text', 'password'].includes(field.type)
-                ? <input
+              {['text', 'password'].includes(field.type) && (field.options
+                ? <select
+                  defaultValue={field.default}
+                  className="select"
+                  data-autofocus={field.autofocus}
+                  onChange={(e) => setValues({ ...values, [name]: e.target.value })}
+                >
+                  {Object.entries(field.options).map(([value, label]) => (
+                    <option value={Array.isArray(field.options) ? label : value} key={value}>{label}</option>
+                  ))}
+                </select>
+                : <input
                   type={field.type}
                   className="textbox"
                   data-autofocus={field.autofocus}
                   defaultValue={field.default}
                   onChange={(e) => setValues({ ...values, [name]: e.target.value })}
-                />
-                : ['userId', 'username', 'user'].includes(field.type)
-                  ? <UserSelectAutoComplete
-                    data-autofocus={field.autofocus}
-                    ref={(el) => { refs.current[name] = el; }}
-                    selectedKeys={selected[name] ? [selected[name].toString()] : []}
-                    onChange={(e) => {
-                      const val = refs.current[name].getSelectedItems()[0];
-                      setValues({ ...values, [name]: field.type === 'username' ? val.uname : field.type === 'userId' ? val._id : val });
-                      setSelected({ ...selected, [name]: e });
-                    }}
-                  />
-                  : <DomainSelectAutoComplete
-                    data-autofocus={field.autofocus}
-                    selectedKeys={values[name] ? [values[name]] : []}
-                    onChange={(e) => setValues({ ...values, [name]: e })}
-                  />}
+                />)}
+              {['userId', 'username', 'user'].includes(field.type) && <UserSelectAutoComplete
+                data-autofocus={field.autofocus}
+                ref={(el) => { refs.current[name] = el; }}
+                selectedKeys={selected[name] ? [selected[name].toString()] : []}
+                onChange={(e) => {
+                  const val = refs.current[name].getSelectedItems()[0];
+                  setValues({ ...values, [name]: field.type === 'username' ? val?.uname : field.type === 'userId' ? val?._id : val });
+                  setSelected({ ...selected, [name]: e });
+                }}
+              />}
+              {field.type === 'domain' && <DomainSelectAutoComplete
+                data-autofocus={field.autofocus}
+                selectedKeys={values[name] ? [values[name]] : []}
+                onChange={(e) => setValues({ ...values, [name]: e })}
+              />}
             </div>
           </label>}
           {field.type === 'checkbox' && <label className="checkbox">
@@ -186,8 +216,7 @@ export async function prompt<T extends string, R extends Record<T, Field>>(title
             />
             {field.label}
           </label>}
-        </div>
-      </div>)}
+        </div>)}</div>)}
     </div>;
   };
   const div = document.createElement('div');
@@ -198,8 +227,12 @@ export async function prompt<T extends string, R extends Record<T, Field>>(title
     $action: [buttonCancel, buttonOk].join('\n'),
     onDispatch(action) {
       if (action === 'ok') {
-        for (const [name, field] of Object.entries(fields)) {
-          if ((field as any).required && !valueCache[name]) return false;
+        for (const [name, field] of Object.entries(fields) as [string, Field][]) {
+          if ((field as any).required && !valueCache[name]) {
+            console.log('missing ', name);
+            Notification.error(i18n('{0} is required', field.label || name));
+            return false;
+          }
         }
       }
       return true;