Fix autorization errors

app/authenticators/meilisearch.js

@@ -12,15 +12,21 @@ function makeRequest({ url, key }) {
   // TODO: how to check session?
   const req = new Request(new URL('/version', url), { headers });
 
-  return fetch(req).then(() => ({ url, key }));
+  return fetch(req).then((response) => {
+    if (response.ok) {
+      return { url, key };
+    } else {
+      throw new Error('Network response was not OK');
+    }
+  });
 }
 
 export default class MeilisearchAuthenticator extends Base {
-  restore({ url, key }) {
-    return makeRequest({ url, key });
+  restore(data) {
+    return makeRequest(data);
   }
 
-  authenticate(url, key) {
-    return makeRequest({ url, key });
+  authenticate(data) {
+    return makeRequest(data);
   }
 }

app/controllers/login.js

@@ -14,10 +14,15 @@ export default class LoginController extends Controller {
   async authenticate(e) {
     e.preventDefault();
 
+    this.errorMessage = null;
+
     let { url, key } = this;
 
     try {
-      await this.session.authenticate('authenticator:meilisearch', url, key);
+      await this.session.authenticate('authenticator:meilisearch', {
+        url,
+        key,
+      });
     } catch (error) {
       this.errorMessage = error.error || error;
     }

app/templates/login.hbs

@@ -10,14 +10,12 @@
           @required={{true}}
           @onChange={{set this 'url'}}
           @placeholder='https://example.com'
-          class='mt-1'
         />
 
         <Form::Input
           @label='API key'
           @value={{this.key}}
           @onChange={{set this 'key'}}
-          class='mt-1'
         />
 
         <Button
@@ -28,7 +26,9 @@
         />
 
         {{#if this.errorMessage}}
-          {{this.errorMessage}}
+          <p class="text-red">
+            {{this.errorMessage}}
+          </p>
         {{/if}}
       </form>
     </div>

config/tailwind.config.js

@@ -33,6 +33,11 @@ module.exports = {
           DEFAULT: colors.green['400'],
           dark: colors.green['800'],
         },
+        red: {
+          light: colors.red['100'],
+          DEFAULT: colors.red['400'],
+          dark: colors.red['800'],
+        },
       },
       zIndex: {
         'scroll-link': '10',