Add authentication logic

app/authenticators/meilisearch.js

@@ -1,9 +1,26 @@
 import Base from 'ember-simple-auth/authenticators/base';
+// import query from '../utils/query';
 
-export default Base.extend({
-  restore(data) {},
+function makeRequest({ url, key }) {
+  const headers = new Headers({
+    'Content-Type': 'application/json',
+  });
 
-  authenticate(/*args*/) {},
+  if (key) {
+    headers.append('Authorization', `Bearer ${key}`);
+  }
 
-  invalidate(data) {},
-});
+  const req = new Request(new URL('/version', url), { headers });
+
+  return fetch(req).then(() => ({ url, key }));
+}
+
+export default class MeilisearchAuthenticator extends Base {
+  restore({ url, key }) {
+    return makeRequest({ url, key });
+  }
+
+  authenticate(url, key) {
+    return makeRequest({ url, key });
+  }
+}

app/controllers/login.js

@@ -4,35 +4,26 @@ import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 
 export default class LoginController extends Controller {
-  @tracked errorMessage;
   @service session;
 
+  @tracked errorMessage;
+  @tracked url = 'http://127.0.0.1:7700';
+  @tracked key;
+
   @action
   async authenticate(e) {
     e.preventDefault();
-    let { identification, password } = this;
+
+    let { url, key } = this;
+
     try {
-      await this.session.authenticate(
-        'authenticator:oauth2',
-        identification,
-        password
-      );
+      await this.session.authenticate('authenticator:meilisearch', url, key);
     } catch (error) {
       this.errorMessage = error.error || error;
     }
 
-    if (this.session.isAuthenticated) {
-      // What to do with all this success?
-    }
-  }
-
-  @action
-  updateIdentification(e) {
-    this.identification = e.target.value;
-  }
-
-  @action
-  updatePassword(e) {
-    this.password = e.target.value;
+    // if (this.session.isAuthenticated) {
+    //   this.transitionToRoute('index');
+    // }
   }
 }

app/templates/login.hbs

@@ -1,22 +1,42 @@
 {{page-title 'Login'}}
 
-<form {{on 'submit' this.authenticate}}>
-  <label for='identification'>Login</label>
-  <input
-    id='identification'
-    placeholder='Enter Login'
-    value={{this.identification}}
-    {{on 'change' this.updateIdentification}}
-  />
-  <label for='password'>Password</label>
-  <input
-    id='password'
-    placeholder='Enter Password'
-    value={{this.password}}
-    {{on 'change' this.updatePassword}}
-  />
-  <button type='submit'>Login</button>
-  {{#if this.errorMessage}}
-    <p>{{this.errorMessage}}</p>
-  {{/if}}
-</form>
+<div class='min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8'>
+  <div class='sm:mx-auto sm:w-full sm:max-w-md'>
+    <div class='bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10'>
+      <form class='space-y-6' {{on 'submit' this.authenticate}}>
+        <InputText
+          @label='URL'
+          @value={{this.url}}
+          @required={{true}}
+          @onChange={{set this 'url'}}
+          class='mt-1'
+        />
+
+        <InputText
+          @label='Key'
+          @value={{this.key}}
+          @onChange={{set this 'key'}}
+          class='mt-1'
+        />
+
+        {{!-- <div class='flex items-center justify-between'>
+          <div class='flex items-center'>
+            <InputCheckbox
+              @checked={{this.rememberMe}}
+              @onChange={{set this 'rememberMe'}}
+            />
+            <label for='remember-me' class='ml-2 block text-sm text-gray-900'>
+              Remember me
+            </label>
+          </div>
+        </div> --}}
+
+        <Button type='submit' @text='Sign in' @style='primary' class="w-full flex justify-center" />
+
+        {{#if this.errorMessage}}
+          <p>{{this.errorMessage}}</p>
+        {{/if}}
+      </form>
+    </div>
+  </div>
+</div>