Adding some css, fix message on log in failure

src/music_service.ts

@@ -22,10 +22,6 @@ export type AuthFailure = {
   message: string;
 };
 
-export interface MusicService {
-  generateToken(credentials: Credentials): Promise<AuthSuccess | AuthFailure>;
-  login(authToken: string): Promise<MusicLibrary>;
-}
 
 export type Artist = {
   id: string;
@@ -64,6 +60,10 @@ export type ArtistQuery = Paging
 export type AlbumQuery = Paging & {
   artistId?: string
 }
+export interface MusicService {
+  generateToken(credentials: Credentials): Promise<AuthSuccess | AuthFailure>;
+  login(authToken: string): Promise<MusicLibrary>;
+}
 
 export interface MusicLibrary {
   artists(q: ArtistQuery): Promise<Result<Artist>>;

src/navidrome.ts

@@ -1,5 +1,15 @@
 import { Md5 } from "ts-md5/dist/md5";
-import { Credentials, MusicService, Album, Artist, Result, slice2, asResult, AlbumQuery, ArtistQuery } from "./music_service";
+import {
+  Credentials,
+  MusicService,
+  Album,
+  Artist,
+  Result,
+  slice2,
+  asResult,
+  AlbumQuery,
+  ArtistQuery,
+} from "./music_service";
 import X2JS from "x2js";
 
 import axios from "axios";
@@ -85,7 +95,7 @@ export class Navidrome implements MusicService {
       ).toString("base64"),
       userId: credentials.username,
       nickname: credentials.username,
-    }));
+    })).catch(e => ({ message: `${e}` }));
 
   parseToken = (token: string): Credentials =>
     JSON.parse(

src/server.ts

@@ -83,11 +83,11 @@ function server(
       if (isSuccess(authResult)) {
         linkCodes.associate(linkCode, authResult);
         res.render("success", {
-          message: `Login successful`,
+          message: `Login successful!`,
         });
     } else {
         res.status(403).render("failure", {
-          message: `Login failed, ${authResult.message}!`,
+          message: `Login failed! ${authResult.message}!`,
         });
       }
     }

tests/navidrome.test.ts

@@ -7,6 +7,7 @@ import axios from "axios";
 jest.mock("axios");
 
 import randomString from "../src/random_string";
+import { AuthSuccess } from "../src/music_service";
 jest.mock("../src/random_string");
 
 describe("t", () => {
@@ -52,7 +53,7 @@ describe("navidrome", () => {
                  </subsonic-response>`,
         });
 
-        const token = await navidrome.generateToken({ username, password });
+        const token = await navidrome.generateToken({ username, password }) as AuthSuccess;
 
         expect(token.authToken).toBeDefined();
         expect(token.nickname).toEqual(username);
@@ -73,9 +74,8 @@ describe("navidrome", () => {
                  </subsonic-response>`,
         });
 
-        return expect(
-          navidrome.generateToken({ username, password })
-        ).rejects.toMatch("Wrong username or password");
+        const token = await navidrome.generateToken({ username, password });
+        expect(token).toEqual({ message: "Wrong username or password" })
       });
     });
   });
@@ -105,6 +105,7 @@ describe("navidrome", () => {
       it("should return all the artists", async () => {
         const artists = await navidrome
           .generateToken({ username, password })
+          .then(it => it as AuthSuccess)
           .then((it) => navidrome.login(it.authToken))
           .then((it) => it.artists({ _index: 0, _count: 100 }));
 
@@ -126,6 +127,7 @@ describe("navidrome", () => {
       it("should return only the correct page of artists", async () => {
         const artists = await navidrome
           .generateToken({ username, password })
+          .then(it => it as AuthSuccess)
           .then((it) => navidrome.login(it.authToken))
           .then((it) => it.artists({ _index: 1, _count: 2 }));
 

tests/smapi.test.ts

@@ -138,7 +138,7 @@ describe("api", () => {
             .send({ username, password, linkCode })
             .expect(403);
 
-          expect(res.text).toContain(`Login failed, Invalid user:${username}`);
+          expect(res.text).toContain(`Login failed! Invalid user:${username}`);
         });
       });
 

web/views/failure.eta

@@ -1,5 +1,5 @@
 <% layout('./layout', { title: "Failure" }) %>
 
 <div id="content">
-  <h1><%= it.message %></h1>
+  <h1 class="failure"><%= it.message %></h1>
 </div>

web/views/index.eta

@@ -1,8 +1,7 @@
 <% layout('./layout') %>
 
 <div id="content">
-  <h1>bonob service</h1>
-  <h2><%= it.bonobService.name %> (<%= it.bonobService.sid %>)
+  <h1><%= it.bonobService.name %> (<%= it.bonobService.sid %>)</h1>
   <h3>Expected config</h3>
   <div><%= JSON.stringify(it.bonobService) %></div>
   <% if(it.registeredBonobService) { %>

web/views/layout.eta

@@ -2,6 +2,33 @@
 <html lang="en">
   <head>
     <title><%= it.title || "bonob" %></title>
+    <style>
+body {
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
+}    
+
+div#content {
+  margin: auto;
+  width: 60%;
+}
+
+h1 {
+  font-size: 700%;
+}
+
+label {
+  font-size: 300%;
+}
+
+input {
+  font-size: 300%;
+  width: 80%;
+}
+
+input#submit {
+  margin-top: 100px
+}
+    </style>
   </head>
   <body>
     <%~ it.body %>

web/views/login.eta

@@ -1,11 +1,13 @@
 <% layout('./layout', { title: "Login" }) %>
 
 <div id="content">
-  <h1>Log in to <%= it.bonobService.name %></h1>
+  <h1 class="login">Log<br>in<br>to<br><%= it.bonobService.name %></h1>
   <form action="<%= it.loginRoute %>" method="POST">
-    <label for="username">Username:</label><input type="text" id="username" name="username"><br>
-    <label for="password">Password:</label><input type="text" id="password" name="password"><br>
+    <label for="username">Username:</label><br>
+    <input type="text" id="username" name="username"><br><br>
+    <label for="password">Password:</label><br>
+    <input type="password" id="password" name="password"><br>
     <input type="hidden" name="linkCode" value="<%= it.linkCode %>">
-    <input type="submit" value="Login">
+    <input type="submit" value="Login" id="submit">
   </form>
 </div>

web/views/success.eta

@@ -1,5 +1,5 @@
 <% layout('./layout', { title: "Yippee" }) %>
 
 <div id="content">
-  <h1><%= it.message %></h1>
+  <h1 class="success"><%= it.message %></h1>
 </div>