Split into dumb and smart components

Bernardo-MG · Bernardo-MG · commit 7d74217b209b · 2022-09-26T22:20:42.000+02:00
diff --git a/src/app/login/component/login-form/login-form.component.html b/src/app/login/component/login-form/login-form.component.html
@@ -2,7 +2,7 @@
     <div class="card">
         <h4 class="card-header">Login</h4>
         <div class="card-body">
-            <form [formGroup]="form" (ngSubmit)="onSubmit()">
+            <form [formGroup]="form" (ngSubmit)="onLogin()">
                 <div class="form-group">
                     <label for="username">Username</label>
                     <input type="text" formControlName="username" class="form-control"
diff --git a/src/app/login/component/login-form/login-form.component.sass b/src/app/login/component/login-form/login-form.component.sass
diff --git a/src/app/login/component/login-form/login-form.component.spec.ts b/src/app/login/component/login-form/login-form.component.spec.ts
diff --git a/src/app/login/component/login-form/login-form.component.ts b/src/app/login/component/login-form/login-form.component.ts
@@ -0,0 +1,41 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormBuilder, Validators } from '@angular/forms';
+import { LoginUser } from '@app/login/model/login-user';
+
+@Component({
+  selector: 'login-form',
+  templateUrl: './login-form.component.html',
+  styleUrls: ['./login-form.component.sass']
+})
+export class LoginFormComponent {
+
+  @Input() public loading = false;
+
+  @Input() public error = '';
+
+  @Output() public login = new EventEmitter<LoginUser>();
+
+  public form = this.formBuilder.group({
+    username: ['', Validators.required],
+    password: ['', Validators.required]
+  });
+
+  constructor(
+    private formBuilder: FormBuilder
+  ) { }
+
+  public onLogin() {
+    if (this.form.valid) {
+      this.login.emit(this.form.value);
+    }
+  }
+
+  public isFormInvalid(): boolean {
+    return this.form.invalid && (this.form.dirty || this.form.touched);
+  }
+
+  public canLogin(): boolean {
+    return this.form.valid;
+  }
+
+}
diff --git a/src/app/login/login-form/login-form.component.ts b/src/app/login/login-form/login-form.component.ts
diff --git a/src/app/login/login-routing.module.ts b/src/app/login/login-routing.module.ts
@@ -1,11 +1,11 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { LoginFormComponent } from './login-form/login-form.component';
+import { LoginViewComponent } from './view/login-view/login-view.component';
 
 
 const routes: Routes = [
     {
-        path: '', component: LoginFormComponent
+        path: '', component: LoginViewComponent
     }
 ];
 
diff --git a/src/app/login/login.module.ts b/src/app/login/login.module.ts
@@ -2,16 +2,18 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { AuthenticationModule } from '@app/authentication/authentication.module';
-import { LoginFormComponent } from './login-form/login-form.component';
+import { LoginFormComponent } from './component/login-form/login-form.component';
 import { LoginRoutingModule } from './login-routing.module';
 import { LogoutButtonComponent } from './logout-button/logout-button.component';
+import { LoginViewComponent } from './view/login-view/login-view.component';
 
 
 
 @NgModule({
   declarations: [
     LoginFormComponent,
-    LogoutButtonComponent
+    LogoutButtonComponent,
+    LoginViewComponent
   ],
   imports: [
     LoginRoutingModule,
diff --git a/src/app/login/model/login-user.ts b/src/app/login/model/login-user.ts
@@ -0,0 +1,4 @@
+export class LoginUser {
+    username: string = '';
+    password: string = '';
+}
diff --git a/src/app/login/view/login-view/login-view.component.html b/src/app/login/view/login-view/login-view.component.html
@@ -0,0 +1 @@
+<login-form (login)="onLogin($event)" [error]="error" [loading]="loading"></login-form>
diff --git a/src/app/login/view/login-view/login-view.component.sass b/src/app/login/view/login-view/login-view.component.sass
diff --git a/src/app/login/view/login-view/login-view.component.spec.ts b/src/app/login/view/login-view/login-view.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginViewComponent } from './login-view.component';
+
+describe('LoginViewComponent', () => {
+  let component: LoginViewComponent;
+  let fixture: ComponentFixture<LoginViewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LoginViewComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/login/view/login-view/login-view.component.ts b/src/app/login/view/login-view/login-view.component.ts
@@ -0,0 +1,50 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AuthenticationService } from '@app/authentication/service/authentication.service';
+import { LoginUser } from '@app/login/model/login-user';
+
+@Component({
+  selector: 'login-view',
+  templateUrl: './login-view.component.html',
+  styleUrls: ['./login-view.component.sass']
+})
+export class LoginViewComponent implements OnInit {
+
+  private returnUrl: string = '';
+
+  public loading = false;
+
+  public error = '';
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private authenticationService: AuthenticationService
+  ) { }
+
+  ngOnInit() {
+    // redirect to home if already logged in
+    if (this.authenticationService.getUser().logged) {
+      this.router.navigate(['/']);
+    }
+    // get return url from route parameters or default to '/'
+    this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
+  }
+
+  public onLogin(login: LoginUser) {
+    this.authenticationService.login(login.username, login.password)
+      .subscribe({
+        next: user => {
+          this.loading = false;
+          if (user.logged) {
+            this.router.navigate([this.returnUrl]);
+          }
+        },
+        error: error => {
+          this.error = error;
+          this.loading = false;
+        }
+      });
+  }
+
+}

Original file line number	Diff line number	Diff line change
`@@ -1,11 +1,11 @@`
`1`	`1`	`import { NgModule } from '@angular/core';`
`2`	`2`	`import { RouterModule, Routes } from '@angular/router';`
`3`		`-import { LoginFormComponent } from './login-form/login-form.component';`
	`3`	`+import { LoginViewComponent } from './view/login-view/login-view.component';`
`4`	`4`
`5`	`5`
`6`	`6`	`const routes: Routes = [`
`7`	`7`	`{`
`8`		`- path: '', component: LoginFormComponent`
	`8`	`+ path: '', component: LoginViewComponent`
`9`	`9`	`}`
`10`	`10`	`];`
`11`	`11`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+<login-form (login)="onLogin($event)" [error]="error" [loading]="loading"></login-form>`