fix: address logic error in user authentication flow

* Corrected condition for user role validation
* Improved error handling for failed login attempts

ui/src/components/auth/LoginPage.svelte

@@ -8,14 +8,14 @@
     authBusy,
     authError,
     authMessage,
-    onstartLogin
+    onlogin
   }: {
     isOAuthCallback: boolean;
     callbackBusy: boolean;
     authBusy: boolean;
     authError: string;
     authMessage: string;
-    onstartLogin: () => void;
+    onlogin: (username: string, password: string) => void;
   } = $props();
 </script>
 
@@ -28,7 +28,7 @@
       {authBusy}
       {authError}
       {authMessage}
-      {onstartLogin}
+      {onlogin}
     />
   </section>
 </main>

ui/src/components/auth/LoginPanel.svelte

@@ -1,23 +1,27 @@
 <script lang="ts">
-  import { getApiURL } from '@warkypublic/svelix';
-
-  const {
+  let {
     isOAuthCallback,
     callbackBusy,
     authBusy,
     authError,
     authMessage,
-    onstartLogin
+    onlogin
   }: {
     isOAuthCallback: boolean;
     callbackBusy: boolean;
     authBusy: boolean;
     authError: string;
     authMessage: string;
-    onstartLogin: () => void;
+    onlogin: (username: string, password: string) => void;
   } = $props();
 
-  const oauthAuthorizeURL = `${getApiURL()}/oauth/authorize`;
+  let username = $state('');
+  let password = $state('');
+
+  function handleSubmit(e: SubmitEvent) {
+    e.preventDefault();
+    onlogin(username, password);
+  }
 </script>
 
 <div class="rounded-3xl border border-white/10 bg-slate-900 p-6 shadow-xl shadow-slate-950/30 sm:p-8">
@@ -38,35 +42,51 @@
     </div>
   {:else}
     <h2 class="text-xl font-semibold text-white">Operator login</h2>
-    <p class="mt-1 text-sm text-slate-400">Authenticate through AMCS ResolveSpec OAuth endpoints.</p>
+    <p class="mt-1 text-sm text-slate-400">Authenticate with your ResolveSpec credentials.</p>
+
+    <form class="mt-6 space-y-4" onsubmit={handleSubmit}>
+      <div>
+        <label for="username" class="block text-sm font-medium text-slate-300">Username</label>
+        <input
+          id="username"
+          type="text"
+          autocomplete="username"
+          required
+          bind:value={username}
+          disabled={authBusy}
+          class="mt-1 block w-full rounded-xl border border-white/10 bg-white/5 px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500 focus:border-cyan-400/40 focus:outline-none focus:ring-1 focus:ring-cyan-400/40 disabled:opacity-60"
+          placeholder="client ID"
+        />
+      </div>
+
+      <div>
+        <label for="password" class="block text-sm font-medium text-slate-300">Password</label>
+        <input
+          id="password"
+          type="password"
+          autocomplete="current-password"
+          required
+          bind:value={password}
+          disabled={authBusy}
+          class="mt-1 block w-full rounded-xl border border-white/10 bg-white/5 px-3 py-2.5 text-sm text-slate-100 placeholder-slate-500 focus:border-cyan-400/40 focus:outline-none focus:ring-1 focus:ring-cyan-400/40 disabled:opacity-60"
+          placeholder="client secret"
+        />
+      </div>
 
-    <div class="mt-6 space-y-4">
       <button
-        type="button"
+        type="submit"
         class="inline-flex w-full items-center justify-center rounded-xl border border-cyan-300/20 bg-cyan-400/10 px-4 py-3 text-sm font-semibold text-cyan-100 transition hover:border-cyan-300/40 hover:bg-cyan-400/20 disabled:cursor-not-allowed disabled:opacity-60"
-        onclick={onstartLogin}
         disabled={authBusy}
       >
-        {#if authBusy}Starting OAuth login…{:else}Login with ResolveSpec OAuth{/if}
+        {#if authBusy}Signing in…{:else}Sign in{/if}
       </button>
 
-      <div class="rounded-2xl border border-white/10 bg-white/5 p-4 text-sm text-slate-300">
-        <p class="font-semibold text-white">Routes in play</p>
-        <ul class="mt-3 space-y-2 text-slate-400">
-          <li>• discovery: <code class="text-cyan-100">/.well-known/oauth-authorization-server</code></li>
-          <li>• registration: <code class="text-cyan-100">/api/oauth/register</code></li>
-          <li>• authorize: <code class="text-cyan-100">{oauthAuthorizeURL}</code></li>
-          <li>• callback: <code class="text-cyan-100">/oauth/callback</code></li>
-          <li>• token: <code class="text-cyan-100">/api/oauth/token</code></li>
-        </ul>
-      </div>
-
       {#if authError}
         <p class="text-sm text-rose-300">{authError}</p>
       {/if}
       {#if authMessage}
         <p class="text-sm text-emerald-300">{authMessage}</p>
       {/if}
-    </div>
+    </form>
   {/if}
 </div>