Implement user login form

benoit-bremaud commented 3 months ago

Description : Create a login form for existing users.

Steps :

[ ] Create a component for the login form
[ ] Implement form validation
[ ] Connect the form to the authentication service

benoit-bremaud commented 3 months ago

[x] Create a New Branch for the Issue Create a new branch for this feature:

git checkout main
git pull origin main
git checkout -b feature/implement-login-form

benoit-bremaud commented 3 months ago

[x] Generate a New Component for the Login Form Use Angular CLI to generate a new component for the login form:
```
cd frontend
ng generate component components/login
```

benoit-bremaud commented 3 months ago

Implement the Login Form in the New Component

[x] Update src/app/components/login/login.component.html

<div class="login-form">
<h2>Login</h2>
<form (ngSubmit)="login()">
<div class="form-group">
  <label for="email">Email</label>
  <input type="email" id="email" [(ngModel)]="email" name="email" required />
</div>
<div class="form-group">
  <label for="password">Password</label>
  <input type="password" id="password" [(ngModel)]="password" name="password" required />
</div>
<button type="submit">Login</button>
</form>
</div>

[x] Update src/app/components/login/login.component.ts


import { Component } from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'], standalone: true, imports: [CommonModule, FormsModule] }) export class LoginComponent { email: string = ''; password: string = '';

constructor(private authService: AuthService) {}

login(): void { const credentials = { email: this.email, password: this.password }; this.authService.login(credentials).subscribe( response => { console.log('Login successful', response); // Handle successful login, e.g., redirect to dashboard }, error => { console.error('Login failed', error); } ); } }

benoit-bremaud commented 3 months ago

Implement the Login Form in the New Component

[x] Update src/app/components/login/login.component.html

<div class="login-form">
  <h2>Login</h2>
  <form (ngSubmit)="login()">
    <div class="form-group">
      <label for="email">Email</label>
      <input type="email" id="email" [(ngModel)]="email" name="email" required />
    </div>
    <div class="form-group">
      <label for="password">Password</label>
      <input type="password" id="password" [(ngModel)]="password" name="password" required />
    </div>
    <button type="submit">Login</button>
  </form>
</div>

[x] Update src/app/components/login/login.component.ts

import { Component } from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  standalone: true,
  imports: [CommonModule, FormsModule]
})
export class LoginComponent {
  email: string = '';
  password: string = '';

  constructor(private authService: AuthService) {}

  login(): void {
    const credentials = { email: this.email, password: this.password };
    this.authService.login(credentials).subscribe(
      response => {
        console.log('Login successful', response);
        // Handle successful login, e.g., redirect to dashboard
      },
      error => {
        console.error('Login failed', error);
      }
    );
  }
}

login.composent.ts modifications :

import { AuthService } from '../../services/auth.service';
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [CommonModule, FormsModule],
  templateUrl: './login.component.html',
  styleUrl: './login.component.scss'
})
export class LoginComponent {
  email: string = '';
  password: string = '';

  constructor(private authService: AuthService) {}

  login(): void {
    const credentials = { email: this.email, password: this.password };
    this.authService.login(credentials).subscribe({
      next: (response: any) => {
        console.log('Login successful', response);
      },
      error: (error: any) => {
        console.error('Login failed', error);
      },
      complete: () => {
        console.log('Login completed');
      }
    });
  }
}

benoit-bremaud commented 3 months ago

[x] Update src/app/app.routes.ts


import { Routes } from '@angular/router';
import { RegisterComponent } from './components/register/register.component';
import { LoginComponent } from './components/login/login.component';

export const routes: Routes = [ { path: 'register', component: RegisterComponent }, { path: 'login', component: LoginComponent }, // Other routes ];

benoit-bremaud commented 3 months ago

[x] Update src/app/app.component.ts


import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';

@Component({ selector: 'app-root', template: <router-outlet></router-outlet>, standalone: true, imports: [RouterModule] }) export class AppComponent {}

benoit-bremaud commented 3 months ago

[x] Update src/app/app.component.ts

import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';

@Component({
  selector: 'app-root',
  template: `<router-outlet></router-outlet>`,
  standalone: true,
  imports: [RouterModule]
})
export class AppComponent {}

The main differences between the two snippets are the usage of inline template vs templateUrl and the imports array.

First Snippet

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'frontend';
}

Second Snippet

import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';

@Component({
  selector: 'app-root',
  template: `<router-outlet></router-outlet>`,
  standalone: true,
  imports: [RouterModule]
})
export class AppComponent {}

Differences Explained

Template vs. TemplateUrl:
- First Snippet: Uses templateUrl which points to an external HTML file (./app.component.html). This is generally used when the template is larger and more complex.
- Second Snippet: Uses template which directly includes the HTML content (<router-outlet></router-outlet>) inline. This is often used for very simple templates.
StyleUrl vs. No Styles:
- First Snippet: Includes styleUrls which points to an external stylesheet (./app.component.scss). This allows you to separate your styles into an external file.
- Second Snippet: Does not include any styles. You can add styles if needed using styles or styleUrls properties.
Imports Array:
- First Snippet: Imports RouterOutlet from @angular/router. This allows you to use the <router-outlet></router-outlet> directive in the external template file.
- Second Snippet: Imports RouterModule from @angular/router. This provides routing functionalities, though it might be a bit broader than necessary if only using <router-outlet>.

Usage Context

First Snippet: This is useful when you have a more complex component setup with external templates and styles. It is often more readable and maintainable for larger components.
Second Snippet: This is useful for very simple components or for rapid prototyping. It keeps everything in one place but can get messy with larger templates and styles.

Which One to Use?

Use the First Snippet if you prefer to keep your HTML and CSS in separate files, which is generally better for maintainability and readability, especially in larger projects.
Use the Second Snippet for very simple components where the template is minimal, or if you need to quickly prototype something without the need to create separate files.

Updated Code Snippet for Consistency

To keep the consistency with your previous setup where the template and styles are external, you should use the first snippet structure. Here's the updated version with the necessary adjustments:

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'frontend';
}

This approach allows for better organization and is more scalable for larger applications.

benoit-bremaud commented 3 months ago

Test the Login Form Functionality

[x] Start your Angular application:
```
ng serve
```
Navigate to http://localhost:4200/login and test the login form by filling in the details and submitting the form. Verify that the user is successfully logged in.

benoit-bremaud / angular-social-network