better help for failed login. Prevent WWW-Authenticate popup to show on login fail

source/server/routes/api/v1/login.ts

 import { createHmac } from "crypto";
 import { Request, RequestHandler, Response } from "express";
 import User, { SafeUser } from "../../../auth/User.js";
-import { BadRequestError, ForbiddenError, HTTPError } from "../../../utils/errors.js";
+import { BadRequestError, ForbiddenError, NotFoundError, UnauthorizedError } from "../../../utils/errors.js";
 import { AppLocals, getHost, getUser, getUserManager } from "../../../utils/locals.js";
 import sendmail from "../../../utils/mails/send.js";
 /**
@@ -17,7 +17,14 @@ export const postLogin :RequestHandler = (req, res, next)=>{
     let safeUser = User.safe(user);
     Object.assign(req.session as any, safeUser);
     res.status(200).send({...safeUser, code: 200, message: "OK"});
-  }, next);
+
+  }, (e)=>{
+    if(e instanceof NotFoundError){
+      next(new UnauthorizedError(`username ${username} not found`));
+    }else{
+      next(e);
+    }
+  });
 };
 
 export async function getLogin(req :Request, res:Response){

source/ui/composants/UserLogin.ts

@@ -22,6 +22,9 @@ import Notification from "./Notification";
     @property({type:Boolean})
     active = false;
 
+    @property({attribute:false})
+    error :string = "";
+    
     constructor()
     {
         super();
@@ -36,9 +39,11 @@ import Notification from "./Notification";
       .then(()=>{
         console.log("User logged-in succesfully");
         this.dispatchEvent(new CustomEvent("close"));
+        this.error = "";
       },(e)=>{
         console.log("Login failed :", e);
-        Notification.show(`Failed to login : ${e}`, "warning")
+        Notification.show(`Failed to login : ${e}`, "warning", 4000);
+        this.error = e.message.replace(/Error: \[\d+\]\s?/, "");
       }).finally(()=> this.active = false)
     }
 
@@ -76,6 +81,9 @@ import Notification from "./Notification";
             <label for="password">${this.t("ui.password")}</label>
           </div>
         </div>
+        <div>
+          <span class="text-error">${this.error}</span>
+        </div>
         <div class="form-group">
           <div class="form-item">
             <input type="submit"  ?disabled=${this.active} value="${this.t("ui.login")}" >

source/ui/state/auth.ts

@@ -20,6 +20,7 @@ export function setSession(s ?:UserSession){
 export async function doLogin(username :string, password :string) :Promise<void>{
   await fetch("/api/v1/login", {
     method: "POST",
+    credentials:'omit', //Prevent the browser from showing an authentification popup
     headers:{
       "Content-Type":"application/json",
       "Accept": "application/json",

source/ui/styles/common.scss

@@ -15,3 +15,16 @@
     }
   }
 }
+
+.text-info {
+  color: $color-info;
+}
+.text-success {
+  color: $color-success; 
+}
+.text-warning{
+  color: $color-warning; 
+}
+.text-error {
+  color: $color-error; 
+}
\ No newline at end of file