Use promises for register and logout

src/app/app.component.ts

@@ -107,7 +107,7 @@ export class AppComponent implements OnInit {
   }
 
   logout(): void {
-    this.twigsService.logout().subscribe(_ => {
+    this.twigsService.logout().then(_ => {
       this.location.go('/');
       window.location.reload();
     });

src/app/shared/twigs.http.service.ts

@@ -25,42 +25,32 @@ export class TwigsHttpService implements TwigsService {
     private storage: Storage
   ) { }
 
-  login(email: string, password: string): Promise<User> {
+  async login(email: string, password: string): Promise<User> {
-    return fetch(this.apiUrl + '/users/login', {
+    const url = new URL('/api/users/login', this.apiUrl)
-      method: 'POST',
+    const auth: AuthToken = await this.request(url, HttpMethod.POST, {
-      headers: {
+      'username': email,
-        'content-type': 'application/json'
+      'password': password
-      },
+    });
-      body: JSON.stringify({
+    this.storage.setItem('Authorization', auth.token);
-        'username': email,
+    this.storage.setItem('userId', auth.userId);
-        'password': password
+    return await this.getProfile(auth.userId);
-      })
-    })
-      .then(res => res.json())
-      .then((auth: AuthToken) => {
-        this.storage.setItem('Authorization', auth.token);
-        this.storage.setItem('userId', auth.userId);
-        return this.getProfile(auth.userId);
-      });
   }
 
-  register(username: string, email: string, password: string): Observable<User> {
+  register(username: string, email: string, password: string): Promise<User> {
-    const params = {
+    const body = {
       'username': username,
       'email': email,
       'password': password
     };
-    return this.http.post<User>(this.apiUrl + '/users/register', params, this.options);
+    const url = new URL('/api/users/register', this.apiUrl)
+    return this.request<User>(url, HttpMethod.POST, body);
   }
 
-  logout(): Observable<void> {
+  logout(): Promise<void> {
-    return new Observable(emitter => {
+    this.storage.removeItem('Authorization');
-      this.storage.removeItem('Authorization');
+    this.storage.removeItem('userId');
-      this.storage.removeItem('userId');
+    return Promise.resolve()
-      emitter.next();
+    // TODO: Implement this to revoke the token server-side as well
-      emitter.complete();
-    })
-    // TODO: Implement this when JWT auth is implemented
     // return this.http.post<void>(this.apiUrl + '/login?logout', this.options);
   }
 
@@ -308,13 +298,8 @@ export class TwigsHttpService implements TwigsService {
 
   // Users
   getProfile(id: string): Promise<User> {
-    return fetch(`${this.apiUrl}/users/${id}`, {
+    const url = new URL(`/api/users/${id}`, this.apiUrl)
-      credentials: 'include',
+    return this.request(url, HttpMethod.GET)
-      headers: {
-        'Authorization': `Bearer ${this.storage.getItem('Authorization')}`
-      }
-    })
-      .then(res => res.json());
   }
 
   getUsersByUsername(username: string): Observable<User[]> {
@@ -322,4 +307,36 @@ export class TwigsHttpService implements TwigsService {
       subscriber.error("Not yet implemented")
     });
   }
+
+  private async request<T>(url: URL, method: HttpMethod, body?: any): Promise<T> {
+    const headers = {
+      'content-type': 'application/json'
+    }
+
+    const token = this.storage.getItem('Authorization')
+    if (token) {
+      headers['authorization'] = `Bearer ${token}`
+    }
+
+    let jsonBody: string;
+    if (body) {
+      jsonBody = JSON.stringify(body)
+    }
+
+    const res = await fetch(url, {
+      credentials: 'include',
+      headers: headers,
+      method: method,
+      body: jsonBody
+    })
+
+    return res.json()
+  }
+}
+
+enum HttpMethod {
+  GET = "GET",
+  POST = "POST",
+  PUT = "PUT",
+  DELETE = "DELETE",
 }

src/app/shared/twigs.local.service.ts

@@ -40,22 +40,19 @@ export class TwigsLocalService implements TwigsService {
     });
   }
 
-  register(username: string, email: string, password: string): Observable<User> {
+  register(username: string, email: string, password: string): Promise<User> {
-    return new Observable(subscriber => {
+    return new Promise((resolve, reject) => {
       const user = new User();
       user.username = username;
       user.email = email;
       user.id = randomId();
       this.users.push(user);
-      subscriber.next(user);
+      resolve(user);
-      subscriber.complete();
     });
   }
 
-  logout(): Observable<void> {
+  logout(): Promise<void> {
-    return new Observable(subscriber => {
+    return Promise.resolve()
-      subscriber.complete();
-    });
   }
 
   // Budgets

src/app/shared/twigs.service.ts

@@ -8,8 +8,8 @@ import { Transaction } from '../transactions/transaction';
 export interface TwigsService {
   // Auth
   login(email: string, password: string): Promise<User>;
-  register(username: string, email: string, password: string): Observable<User>;
+  register(username: string, email: string, password: string): Promise<User>;
-  logout(): Observable<void>;
+  logout(): Promise<void>;
 
   // Budgets
   getBudgets(): Observable<Budget[]>;

src/app/users/register/register.component.ts

@@ -33,10 +33,10 @@ export class RegisterComponent implements OnInit {
       return;
     }
     this.isLoading = true;
-    this.twigsService.register(this.username, this.email, this.password).subscribe(user => {
+    this.twigsService.register(this.username, this.email, this.password).then(user => {
       console.log(user);
       this.router.navigate(['/'])
-    }, error => {
+    }).catch(error => {
       console.error(error);
       alert("Registration failed!")
       this.isLoading = false;