fix: merge conflicts. remove import in quickstart

examples/angular/README.md

@@ -5,7 +5,7 @@ This project was generated with [Angular CLI](https://github.com/angular/angular
 ## Starting the app
 ### Prerequisites
 
-- a running Hanko API (see the instructions on how to run the API [in Docker](../backend/README.md#Docker) or [from Source](../backend/README.md#from-source))
+- a running Hanko API (see the instructions on how to run the API [in Docker](../../backend/README.md#Docker) or [from Source](../../backend/README.md#from-source))
 - a running express backend (see the [README](../express) for the express backend)
 
 ### Set up environment variables

examples/angular/angular.json

@@ -27,7 +27,7 @@
             ],
             "scripts": [],
             "allowedCommonJsDependencies": [
-              "@teamhanko/hanko-elements/hanko-auth"
+              "@teamhanko/hanko-elements"
             ]
           },
           "configurations": {

examples/angular/src/app/app-routing.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { LoginComponent } from './login/login.component';
 import { TodoComponent } from './todo/todo.component';
+import { ProfileComponent } from "./profile/profile.component";
 
 const routes: Routes = [
   {
@@ -14,6 +15,11 @@ const routes: Routes = [
     component: TodoComponent,
     data: { title: 'Todo' },
   },
+  {
+    path: 'profile',
+    component: ProfileComponent,
+    data: { title: 'Profile' },
+  },
   { path: '', redirectTo: '/login', pathMatch: 'full' },
   { path: '**', component: LoginComponent },
 ];

examples/angular/src/app/app.component.css

@@ -0,0 +1,38 @@
+.nav {
+  width: 100%;
+  padding: 10px;
+  opacity: 0.9;
+}
+
+.button {
+  font-size: 1rem;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+.button:disabled {
+  color: grey!important;
+  cursor: default;
+  text-decoration: none!important;
+}
+
+.nav .button:hover {
+  text-decoration: underline;
+}
+
+.nav .button {
+  color: white;
+  float: right;
+}
+
+.content {
+  padding: 24px;
+  border-radius: 17px;
+  color: black;
+  background-color: white;
+  width: 100%;
+  max-width: 500px;
+  min-width: 330px;
+  margin: 10vh auto;
+}

examples/angular/src/app/app.module.ts

@@ -1,4 +1,4 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppRoutingModule } from './app-routing.module';
@@ -6,9 +6,10 @@ import { AppComponent } from './app.component';
 
 import { LoginComponent } from './login/login.component';
 import { TodoComponent } from './todo/todo.component';
+import { ProfileComponent } from "./profile/profile.component";
 
 @NgModule({
-  declarations: [AppComponent, LoginComponent, TodoComponent],
+  declarations: [AppComponent, LoginComponent, TodoComponent, ProfileComponent],
   imports: [BrowserModule, AppRoutingModule],
   providers: [],
   bootstrap: [AppComponent],

examples/angular/src/app/login/login.component.css

@@ -1,11 +0,0 @@
-.content {
-  padding: 24px;
-  border-radius: 17px;
-  color: black;
-  background-color: white;
-  width: 500px;
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}

examples/angular/src/app/login/login.component.html

@@ -1,4 +1,5 @@
 <div class="content">
+  <div class="error">{{ error?.message }}</div>
   <hanko-auth
     (hankoAuthSuccess)="redirectToTodo()"
     [api]="api"

examples/angular/src/app/login/login.component.ts

@@ -6,16 +6,17 @@ import { register } from '@teamhanko/hanko-elements';
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
-  styleUrls: ['./login.component.css'],
+  styleUrls: ['../app.component.css']
 })
 export class LoginComponent {
   api = environment.hankoApi;
+  error: Error | undefined;
 
   constructor(private router: Router) {
-    register({ shadow: true }).catch((e) => console.error(e));
+    register({shadow: true}).catch((e) => this.error = e);
   }
 
   redirectToTodo() {
-    this.router.navigate(['/todo']);
+    this.router.navigate(['/todo']).catch((e) => this.error = e);
   }
 }

examples/angular/src/app/profile/profile.component.html

@@ -0,0 +1,9 @@
+<nav class="nav">
+  <button (click)="logout()" class="button">Logout</button>
+  <button disabled class="button">Profile</button>
+  <button (click)="todos()" class="button">Todos</button>
+</nav>
+<div class="content">
+  <div class="error">{{ error?.message }}</div>
+  <hanko-profile [api]="api"></hanko-profile>
+</div>

examples/angular/src/app/profile/profile.component.ts

@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+import { environment } from '../../environments/environment';
+import { Router } from '@angular/router';
+import { register } from '@teamhanko/hanko-elements';
+import { TodoService } from '../services/todo.service';
+
+@Component({
+  selector: 'app-profile',
+  templateUrl: './profile.component.html',
+  styleUrls: ['../app.component.css'],
+})
+export class ProfileComponent {
+  api = environment.hankoApi;
+  error: Error | undefined;
+
+  constructor(private todoService: TodoService, private router: Router) {
+    register({ shadow: true }).catch((e) => (this.error = e));
+  }
+
+  todos() {
+    this.router.navigate(['/todo']).catch((e) => (this.error = e));
+  }
+
+  logout() {
+    this.todoService
+      .logout()
+      .then(() => {
+        this.router.navigate(['/']).catch((e) => (this.error = e));
+        return;
+      })
+      .catch((e) => (this.error = e));
+  }
+}

examples/angular/src/app/services/todo.service.ts

@@ -1,5 +1,5 @@
-import {Injectable} from '@angular/core';
-import {environment} from '../../environments/environment';
+import { Injectable } from '@angular/core';
+import { environment } from '../../environments/environment';
 
 export interface Todo {
   todoID?: string;

examples/angular/src/app/todo/todo.component.css

@@ -1,39 +1,3 @@
-.nav {
-  width: 100%;
-  position: fixed;
-  top: 0;
-  padding: 10px;
-  opacity: 0.9;
-}
-
-.button {
-  font-size: 1rem;
-  border: none;
-  background: none;
-  cursor: pointer;
-}
-
-.nav .button:hover {
-  text-decoration: underline;
-}
-
-.nav .button {
-  color: white;
-  float: right;
-}
-
-.content {
-  padding: 24px;
-  border-radius: 17px;
-  color: black;
-  background-color: white;
-  width: 500px;
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
 .headline {
   text-align: center;
   margin-top: 0;

examples/angular/src/app/todo/todo.component.html

@@ -1,5 +1,7 @@
 <nav class="nav">
   <button (click)="logout()" class="button">Logout</button>
+  <button (click)="profile()" class="button">Profile</button>
+  <button disabled class="button">Todos</button>
 </nav>
 <div class="content">
   <h1 class="headline">Todos</h1>

examples/angular/src/app/todo/todo.component.ts

@@ -1,11 +1,11 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { Todos, TodoService } from '../services/todo.service';
 
 @Component({
   selector: 'app-todo',
   templateUrl: './todo.component.html',
-  styleUrls: ['./todo.component.css'],
+  styleUrls: ['../app.component.css', './todo.component.css'],
 })
 export class TodoComponent implements OnInit {
   todos: Todos = [];
@@ -14,7 +14,6 @@ export class TodoComponent implements OnInit {
 
   changeDescription(event: any) {
     this.description = event.target.value;
-    console.log(this.description);
   }
 
   changeCheckbox(event: any) {
@@ -114,8 +113,10 @@ export class TodoComponent implements OnInit {
         this.router.navigate(['/']).catch((e) => (this.error = e));
         return;
       })
-      .catch((e) => {
-        console.error(e);
-      });
+      .catch((e) => this.error = e);
+  }
+
+  profile() {
+    this.router.navigate(['/profile']).catch((e) => (this.error = e));
   }
 }

examples/angular/src/styles.css

@@ -14,3 +14,7 @@ body {
 * {
   box-sizing: border-box;
 }
+
+hanko-auth::part(form-item) {
+  min-width: 100%; /* input fields and buttons are on top of each other  */
+}