refine ui

restore in a Dialog

src/lib/components/CredentialDialog.svelte

@@ -7,6 +7,7 @@
     Key,
     LoaderCircle,
     Lock,
+    ShieldCheck,
     Upload,
     User,
     X,
@@ -41,6 +42,11 @@
     password.trim().length > 0 &&
     (mode === "token" || username.trim().length > 0),
   );
+  let actionLabel = $derived(action === "push" ? "Push" : "Pull");
+  let actionTitle = $derived(action === "push" ? "Push authentifizieren" : "Pull authentifizieren");
+  let actionHint = $derived(action === "push"
+    ? "Der Remote braucht Schreibrechte. Nutze ein Passwort oder einen Token mit passenden Repository-Rechten."
+    : "Der Remote braucht Zugriff auf das Repository. Nutze deine Git-Zugangsdaten oder einen Personal Access Token.");
 
   function handleSubmit(e: SubmitEvent) {
     e.preventDefault();
@@ -55,29 +61,33 @@
   onclick={(e) => { if (e.target === e.currentTarget) onCancel(); }}
 >
   <div class="cred-card" role="dialog" aria-modal="true" aria-label="Git-Zugangsdaten" tabindex="-1">
-
-    <!-- Hero header -->
     <div class="cred-hero">
-      <div class="cred-hero-icon">
-        {#if action === "push"}
-          <Upload size={28} aria-hidden="true" />
-        {:else}
-          <Download size={28} aria-hidden="true" />
-        {/if}
+      <div class="cred-hero-top">
+        <div class="cred-hero-icon">
+          {#if action === "push"}
+            <Upload size={27} aria-hidden="true" />
+          {:else}
+            <Download size={27} aria-hidden="true" />
+          {/if}
+        </div>
+        <div class="cred-hero-text">
+          <p class="cred-hero-label">{actionLabel} Remote</p>
+          <h2 class="cred-hero-title">{actionTitle}</h2>
+        </div>
+        <button class="cred-close" type="button" onclick={onCancel} title="Abbrechen" aria-label="Abbrechen">
+          <X size={16} aria-hidden="true" />
+        </button>
       </div>
-      <div class="cred-hero-text">
-        <p class="cred-hero-label">{action === "push" ? "Push" : "Pull"}</p>
-        <h2 class="cred-hero-title">Zugangsdaten erforderlich</h2>
+
+      <p class="cred-hero-copy">{actionHint}</p>
+
+      <div class="cred-security-note">
+        <ShieldCheck size={14} aria-hidden="true" />
+        <span>Wird nur an Git fuer diese Remote-Operation weitergegeben.</span>
       </div>
-      <button class="cred-close" type="button" onclick={onCancel} title="Abbrechen" aria-label="Abbrechen">
-        <X size={16} aria-hidden="true" />
-      </button>
     </div>
 
-    <!-- Form -->
     <form class="cred-body" onsubmit={handleSubmit}>
-
-      <!-- Mode segmented control -->
       <div class="cred-segment" role="group" aria-label="Authentifizierungsart">
         <button
           type="button"
@@ -87,7 +97,7 @@
           aria-pressed={mode === "credentials"}
         >
           <User size={13} aria-hidden="true" />
-          Username & Passwort
+          Username + Passwort
         </button>
         <button
           type="button"
@@ -101,7 +111,6 @@
         </button>
       </div>
 
-      <!-- Fields -->
       <div class="cred-fields">
         {#if mode === "credentials"}
           <div class="cred-field">
@@ -131,7 +140,7 @@
               type={showPassword ? "text" : "password"}
               bind:value={password}
               placeholder={mode === "token"
-                ? "ghp_… oder anderer Zugangstoken"
+                ? "ghp_... oder anderer Zugangstoken"
                 : "Passwort oder Personal Access Token"}
               autocomplete="current-password"
               disabled={isBusy}
@@ -153,15 +162,13 @@
         </div>
       </div>
 
-      <!-- Token hint -->
       {#if mode === "token"}
         <div class="cred-token-hint">
           <Key size={13} aria-hidden="true" />
-          <span>Username wird automatisch auf <code>oauth2</code> gesetzt — funktioniert mit GitHub, GitLab & Bitbucket.</span>
+          <span>Username wird automatisch auf <code>oauth2</code> gesetzt. Das funktioniert mit GitHub, GitLab und Bitbucket.</span>
         </div>
       {/if}
 
-      <!-- Error banner -->
       {#if error}
         <div class="cred-error" role="alert">
           <AlertCircle size={14} aria-hidden="true" />
@@ -169,11 +176,10 @@
         </div>
       {/if}
 
-      <!-- Footer -->
       <div class="cred-footer">
         <label class="cred-save">
           <input type="checkbox" bind:checked={saveSession} disabled={isBusy} />
-          <span>Für diese Sitzung merken</span>
+          <span>Fuer diese Sitzung merken</span>
         </label>
 
         <div class="cred-btns">
@@ -188,11 +194,10 @@
             {:else}
               <Download size={15} aria-hidden="true" />
             {/if}
-            {action === "push" ? "Push" : "Pull"}
+            {actionLabel}
           </button>
         </div>
       </div>
-
     </form>
   </div>
 </div>