kontor-angular/src/app/app.routes.ts

@@ -1,6 +1,6 @@
 import { Routes } from '@angular/router';
 import { KontorComponent } from './kontor/kontor.component';
-import { Login } from './common/login/login';
+import { Auth } from './common/auth/auth';
 import { ComicSectionComponent } from './kontor/comic/comic-section/comic-section.component';
 import { comicRoutes } from './kontor/comic/comic-section/comic-section.routes';
 import { TyscSectionComponent } from './kontor/tysc/tysc-section/tysc-section.component';
@@ -10,7 +10,7 @@ import { mediaRoutes } from './kontor/media/media-section/media-section.routes';
 
 export const routes: Routes = [
   { path: '', component: KontorComponent, },
-  { path: 'login', component: Login, },
+  { path: 'login', component: Auth, },
   {
     path: 'comic', component: ComicSectionComponent,
     children: comicRoutes,

kontor-angular/src/app/common/auth/auth-service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthService } from './auth-service';
+
+describe('AuthService', () => {
+  let service: AuthService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AuthService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

kontor-angular/src/app/common/auth/auth-service.ts

@@ -0,0 +1,30 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+
+interface AuthResponseData {
+  kind: string;
+  idToken: string;
+  email: string;
+  refreshToken: string;
+  expiresIn: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+  constructor(private http: HttpClient) {
+
+  }
+
+  signup(email: string, password: string) {
+    return this.http.post<AuthResponseData>('http://localhost:8800/signup',
+      {
+        email: email,
+        password: password,
+        returnToken: true
+      }
+    );
+  }
+}

kontor-angular/src/app/common/auth/auth.css

@@ -0,0 +1,8 @@
+
+button {
+  text-align: center;
+  padding: 10px;
+  border-radius: 10px;
+  margin-left: 14px;
+
+}

kontor-angular/src/app/common/auth/auth.html

@@ -0,0 +1,22 @@
+<div class="row">
+    <div style="margin-top: 16px;">
+        <form (ngSubmit)="onSubmit(authForm)" #authForm="ngForm">
+            <div class="form-group" style="margin-bottom: 7px;">
+                <label for="email">E-Mail</label>
+                <input type="email" id="email" class="form-control" ngModel name="email"  required email=""/>
+            </div>
+            <div class="form-group" style="margin-bottom: 7px;">
+                <label for="password">Password</label>
+                <input type="password" id="password" class="form-control" ngModel name="password" required/>
+            </div>
+            <div>
+                <button class="btn btn-primary" type="submit" [disabled]="!authForm.valid">
+                    {{ isLoginMode ? 'Login' : 'Sign Up' }}
+                </button>
+                <button class="btn btn-primary" (click)="onSwitchMode()" type="button">
+                    Switch to {{ isLoginMode ? 'Sign Up' : 'Login' }}
+                </button>
+            </div>
+        </form>
+    </div>
+</div>

kontor-angular/src/app/common/auth/auth.spec.ts

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { Login } from './login';
+import { Auth } from './auth';
 
-describe('Login', () => {
-  let component: Login;
-  let fixture: ComponentFixture<Login>;
+describe('Auth', () => {
+  let component: Auth;
+  let fixture: ComponentFixture<Auth>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [Login]
+      imports: [Auth]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(Login);
+    fixture = TestBed.createComponent(Auth);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

kontor-angular/src/app/common/auth/auth.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { NgForm } from '@angular/forms';
+
+@Component({
+  selector: 'app-auth',
+  imports: [FormsModule],
+  templateUrl: './auth.html',
+  styleUrl: './auth.css'
+})
+export class Auth {
+  isLoginMode = true;
+
+  onSwitchMode() {
+    this.isLoginMode =!this.isLoginMode;
+  }
+  onSubmit(form: NgForm) {
+    console.log(form.value);
+    form.reset();
+  }
+}

kontor-angular/src/app/common/login/login.html

@@ -1 +0,0 @@
-<p>login works!</p>

kontor-angular/src/app/common/login/login.ts

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-login',
-  imports: [],
-  templateUrl: './login.html',
-  styleUrl: './login.css'
-})
-export class Login {
-
-}

kontor-angular/src/app/kontor/navigation/navigation.component.html

@@ -1,6 +1,7 @@
 <div class="topnav">
   <a routerLink="/" >Kontor</a>
   <a routerLink="/comic"  routerLinkActive="active">Comics</a>
-  <a routerLink="/tysc"  routerLinkActive="active">TradeYourSportsCards</a>
+  <a routerLink="/tysc"   routerLinkActive="active">TradeYourSportsCards</a>
   <a routerLink="/media"  routerLinkActive="active">Media</a>
+  <a routerLink="/login"  routerLinkActive="active" class="float-right">Login</a>
 </div>

kontor-angular/src/styles.css

@@ -31,6 +31,12 @@ body {
   color: black;
 }
 
+.topnav :last-child {
+  float: right;
+  margin-left: auto;
+  margin-right: 16px;
+}
+
 .subnav {
   overflow: hidden;
   background-color: grey;