Refine Harbor delete flow and gateway affordances

src/web/components/ClientOverviewPage.jsx

@@ -89,14 +89,22 @@ function HarborBrand({ isGateway, gatewayAvailable, gatewayDirect, busy, onSetGa
     </svg>
     <span className="harbor-brand-name">
       <strong>Harbor</strong>
-      {switchable ? <span className="harbor-mode-stack" aria-hidden="true">
-        <em className="harbor-mode-connect">Connect</em>
-        <em className="harbor-mode-gateway">Gateway</em>
+      {switchable ? <span className="harbor-mode-control">
+        <span className="harbor-mode-stack" aria-hidden="true">
+          <em className="harbor-mode-connect">Connect</em>
+          <em className="harbor-mode-gateway">Gateway</em>
+        </span>
+        <svg className="harbor-mode-swap" viewBox="0 0 18 18" aria-hidden="true">
+          <path d="M3 6h10m-3-3 3 3-3 3M15 12H5m3 3-3-3 3-3" />
+        </svg>
+        <span id="harbor-mode-tooltip" className="harbor-mode-tooltip" role="tooltip">
+          <strong>{gatewayDirect ? 'Harbor Gateway активен' : 'Harbor Gateway доступен'}</strong>
+          <span>{gatewayDirect
+            ? 'Трафик идёт через Gateway в этой сети. Нажмите, чтобы использовать локальный VPN.'
+            : 'Сейчас используется локальный VPN. Нажмите, чтобы направить трафик через Gateway.'}</span>
+        </span>
       </span> : <em>{product}</em>}
     </span>
-    {switchable && <svg className="harbor-mode-swap" viewBox="0 0 18 18" aria-hidden="true">
-      <path d="M3 6h10m-3-3 3 3-3 3M15 12H5m3 3-3-3 3-3" />
-    </svg>}
   </div>;
 
   return (
@@ -111,12 +119,6 @@ function HarborBrand({ isGateway, gatewayAvailable, gatewayDirect, busy, onSetGa
         onClick={() => onSetGatewayAuto(!gatewayDirect)}
       >
         {content}
-        <span id="harbor-mode-tooltip" className="harbor-mode-tooltip" role="tooltip">
-          <strong>{gatewayDirect ? 'Harbor Gateway активен' : 'Harbor Gateway доступен'}</strong>
-          <span>{gatewayDirect
-            ? 'Трафик идёт через Gateway в этой сети. Нажмите, чтобы использовать локальный VPN.'
-            : 'Сейчас используется локальный VPN. Нажмите, чтобы направить трафик через Gateway.'}</span>
-        </span>
       </button> : <div aria-label={`Harbor ${product}`}>{content}</div>}
     </div>
   );
@@ -161,6 +163,7 @@ export function ClientOverviewPage({
   const [serverRevealVersion, setServerRevealVersion] = useState(0);
   const [serversLeaving, setServersLeaving] = useState(false);
   const [instructionsOpen, setInstructionsOpen] = useState(false);
+  const [confirmingDelete, setConfirmingDelete] = useState(false);
   const [openInstructionId, setOpenInstructionId] = useState('');
   const subscriptionInputRef = useRef(null);
   const subscriptionRef = useRef(null);
@@ -401,6 +404,11 @@ export function ClientOverviewPage({
     }
   }
 
+  async function forgetSubscription() {
+    await onForgetSubscription();
+    setConfirmingDelete(false);
+  }
+
   function toggleInstruction(id) {
     const update = () => flushSync(() => {
       setOpenInstructionId((current) => current === id ? '' : id);
@@ -583,10 +591,28 @@ export function ClientOverviewPage({
         {error && <p className="client-error" role="alert">{error}</p>}
 
         <div
-          className={`client-form${subscriptionWaiting ? ' is-waiting' : ''}`}
+          className={`client-form${subscriptionWaiting ? ' is-waiting' : ''}${confirmingDelete ? ' is-confirming-delete' : ''}`}
           aria-hidden={subscriptionWaiting}
-          inert={subscriptionWaiting ? true : undefined}
+          aria-disabled={gatewayDirect}
+          inert={subscriptionWaiting || gatewayDirect ? true : undefined}
         >
+          {confirmingDelete && <section
+            className="client-delete-confirmation"
+            role="group"
+            aria-labelledby="delete-subscription-title"
+            aria-describedby="delete-subscription-description"
+          >
+            <span>Необратимое действие</span>
+            <h2 id="delete-subscription-title">Удалить подписку?</h2>
+            <p id="delete-subscription-description">
+              Harbor остановит VPN и удалит сохранённую подписку. Приложения, настроенные на локальный прокси, не смогут выходить в сеть до добавления новой подписки.
+            </p>
+            <div className="client-delete-actions">
+              <button type="button" disabled={busy} onClick={() => setConfirmingDelete(false)}>Отмена</button>
+              <button className="is-danger" type="button" disabled={busy} onClick={forgetSubscription}>Удалить</button>
+            </div>
+          </section>}
+          <div className="client-form-content" inert={confirmingDelete ? true : undefined}>
           <div
             ref={subscriptionRef}
             className={`client-subscription ${editingSubscription ? 'is-editing' : ''}${editingSubscription && state?.hasSubscription && !subscriptionUrl ? ' is-timing-out' : ''}`}
@@ -616,10 +642,11 @@ export function ClientOverviewPage({
                   aria-label="Удалить подписку"
                   title="Удалить подписку"
                   disabled={busy}
-                  onClick={onForgetSubscription}
+                  onClick={() => setConfirmingDelete(true)}
                 >
                   <svg viewBox="0 0 24 24" aria-hidden="true">
-                    <path d="M4 7h16M9 7V4h6v3m-9 0 1 13h10l1-13M10 11v5M14 11v5" />
+                    <path className="client-trash-lid" d="M4 7h16M9 7V4h6v3" />
+                    <path d="m6 7 1 13h10l1-13M10 11v5M14 11v5" />
                   </svg>
                 </button>
               </div>
@@ -748,6 +775,7 @@ export function ClientOverviewPage({
             </div>
           </section>
           )}
+          </div>
         </div>
       </main>