Squashed new RBAC

panel/modals/InviteEditModal.tsx

@@ -1,4 +1,4 @@
-import { Component, createEffect, createSignal } from 'solid-js'
+import { Component, createEffect, createSignal, Show } from 'solid-js'
 import formStyles from '../styles/Form.module.css'
 import styles from '../styles/Modal.module.css'
 import Button from '../ui/Button'
@@ -123,93 +123,144 @@ const InviteEditModal: Component<InviteEditModalProps> = (props) => {
 
   return (
     <Modal isOpen={props.isOpen} onClose={props.onClose} title={modalTitle()} size="medium">
-      <div class={styles['modal-content']}>
+      <div class={styles.modalContent}>
         <div class={formStyles.form}>
-          <div class={formStyles['form-group']}>
+          <div class={formStyles.fieldGroup}>
             <label class={formStyles.label}>
-              ID приглашающего <span style={{ color: 'red' }}>*</span>
+              <span class={formStyles.labelText}>
+                <span class={formStyles.labelIcon}>👤</span>
+                ID приглашающего
+                <span class={formStyles.required}>*</span>
+              </span>
             </label>
             <input
               type="number"
               value={formData().inviter_id}
               onInput={(e) => updateField('inviter_id', Number.parseInt(e.target.value) || 0)}
-              class={`${formStyles.input} ${errors().inviter_id ? formStyles.inputError : ''}`}
+              class={`${formStyles.input} ${errors().inviter_id ? formStyles.error : ''} ${!isCreating() ? formStyles.disabled : ''}`}
               placeholder="1"
               required
               disabled={!isCreating()} // При редактировании ID нельзя менять
             />
-            <div class={formStyles.fieldHint}>ID автора, который отправляет приглашение</div>
-            {errors().inviter_id && <div class={formStyles.fieldError}>{errors().inviter_id}</div>}
+            {errors().inviter_id && (
+              <div class={formStyles.fieldError}>
+                <span class={formStyles.errorIcon}>⚠️</span>
+                {errors().inviter_id}
+              </div>
+            )}
+            <div class={formStyles.hint}>
+              <span class={formStyles.hintIcon}>💡</span>
+              ID автора, который отправляет приглашение
+            </div>
           </div>
 
-          <div class={formStyles['form-group']}>
+          <div class={formStyles.fieldGroup}>
             <label class={formStyles.label}>
-              ID приглашаемого <span style={{ color: 'red' }}>*</span>
+              <span class={formStyles.labelText}>
+                <span class={formStyles.labelIcon}>👥</span>
+                ID приглашаемого
+                <span class={formStyles.required}>*</span>
+              </span>
             </label>
             <input
               type="number"
               value={formData().author_id}
               onInput={(e) => updateField('author_id', Number.parseInt(e.target.value) || 0)}
-              class={`${formStyles.input} ${errors().author_id ? formStyles.inputError : ''}`}
+              class={`${formStyles.input} ${errors().author_id ? formStyles.error : ''} ${!isCreating() ? formStyles.disabled : ''}`}
               placeholder="2"
               required
               disabled={!isCreating()} // При редактировании ID нельзя менять
             />
-            <div class={formStyles.fieldHint}>ID автора, которого приглашают к сотрудничеству</div>
-            {errors().author_id && <div class={formStyles.fieldError}>{errors().author_id}</div>}
+            <Show when={errors().author_id}>
+              <div class={formStyles.fieldError}>
+                <span class={formStyles.errorIcon}>⚠️</span>
+                {errors().author_id}
+              </div>
+            </Show>
+            <div class={formStyles.hint}>
+              <span class={formStyles.hintIcon}>💡</span>
+              ID автора, которого приглашают к сотрудничеству
+            </div>
           </div>
 
-          <div class={formStyles['form-group']}>
+          <div class={formStyles.fieldGroup}>
             <label class={formStyles.label}>
-              ID публикации <span style={{ color: 'red' }}>*</span>
+              <span class={formStyles.labelText}>
+                <span class={formStyles.labelIcon}>📄</span>
+                ID публикации
+                <span class={formStyles.required}>*</span>
+              </span>
             </label>
             <input
               type="number"
               value={formData().shout_id}
               onInput={(e) => updateField('shout_id', Number.parseInt(e.target.value) || 0)}
-              class={`${formStyles.input} ${errors().shout_id ? formStyles.inputError : ''}`}
+              class={`${formStyles.input} ${errors().shout_id ? formStyles.error : ''} ${!isCreating() ? formStyles.disabled : ''}`}
               placeholder="123"
               required
               disabled={!isCreating()} // При редактировании ID нельзя менять
             />
-            <div class={formStyles.fieldHint}>ID публикации, к которой приглашают на сотрудничество</div>
-            {errors().shout_id && <div class={formStyles.fieldError}>{errors().shout_id}</div>}
+            <Show when={errors().shout_id}>
+              <div class={formStyles.fieldError}>
+                <span class={formStyles.errorIcon}>⚠️</span>
+                {errors().shout_id}
+              </div>
+            </Show>
+            <div class={formStyles.hint}>
+              <span class={formStyles.hintIcon}>💡</span>
+              ID публикации, к которой приглашают на сотрудничество
+            </div>
           </div>
 
-          <div class={formStyles['form-group']}>
+          <div class={formStyles.fieldGroup}>
             <label class={formStyles.label}>
-              Статус <span style={{ color: 'red' }}>*</span>
+              <span class={formStyles.labelText}>
+                <span class={formStyles.labelIcon}>📋</span>
+                Статус
+                <span class={formStyles.required}>*</span>
+              </span>
             </label>
             <select
               value={formData().status}
               onChange={(e) => updateField('status', e.target.value)}
-              class={formStyles.input}
+              class={formStyles.select}
               required
             >
               <option value="PENDING">Ожидает ответа</option>
               <option value="ACCEPTED">Принято</option>
               <option value="REJECTED">Отклонено</option>
             </select>
-            <div class={formStyles.fieldHint}>Текущий статус приглашения</div>
+            <div class={formStyles.hint}>
+              <span class={formStyles.hintIcon}>💡</span>
+              Текущий статус приглашения
+            </div>
           </div>
 
           {/* Информация о связанных объектах при редактировании */}
-          {!isCreating() && props.invite && (
-            <div class={formStyles['form-group']}>
-              <label class={formStyles.label}>Информация о приглашении</label>
-              <div class={formStyles.fieldHint} style={{ 'margin-bottom': '8px' }}>
-                <strong>Приглашающий:</strong> {props.invite.inviter.name} ({props.invite.inviter.email})
+          <Show when={!isCreating() && props.invite}>
+            <div class={formStyles.fieldGroup}>
+              <label class={formStyles.label}>
+                <span class={formStyles.labelText}>
+                  <span class={formStyles.labelIcon}>ℹ️</span>
+                  Информация о приглашении
+                </span>
+              </label>
+              <div class={formStyles.hint} style={{ 'margin-bottom': '8px' }}>
+                <span class={formStyles.hintIcon}>👤</span>
+                <strong>Приглашающий:</strong> {props.invite?.inviter.name} ({props.invite?.inviter.email})
               </div>
-              <div class={formStyles.fieldHint} style={{ 'margin-bottom': '8px' }}>
-                <strong>Приглашаемый:</strong> {props.invite.author.name} ({props.invite.author.email})
+              <div class={formStyles.hint} style={{ 'margin-bottom': '8px' }}>
+                <span class={formStyles.hintIcon}>👥</span>
+                <strong>Приглашаемый:</strong> {props.invite?.author.name} ({props.invite?.author.email})
               </div>
-              <div class={formStyles.fieldHint}>
-                <strong>Публикация:</strong> {props.invite.shout.title}
+              <div class={formStyles.hint}>
+                <span class={formStyles.hintIcon}>📄</span>
+                <strong>Публикация:</strong> {props.invite?.shout.title}
               </div>
             </div>
-          )}
+          </Show>
 
-          <div class={styles['modal-actions']}>
+          <div class={styles.modalActions}>
             <Button variant="secondary" onClick={props.onClose}>
               Отмена
             </Button>