angular login and register page example

angular

Here is an example of a login and registration page implemented using Angular:

<!-- login-register.component.html -->

<!-- Login form -->
<form #loginForm="ngForm" (ngSubmit)="login()" *ngIf="!showRegistration">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" [(ngModel)]="username" required>
    <br>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" [(ngModel)]="password" required>
    <br>
    <button type="submit" [disabled]="!loginForm.form.valid">Log In</button>
</form>

<!-- Registration form -->
<form #registrationForm="ngForm" (ngSubmit)="register()" *ngIf="showRegistration">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" [(ngModel)]="username" required>
    <br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" [(ngModel)]="email" required>
    <br>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" [(ngModel)]="password" required>
    <br>
    <label for="confirmPassword">Confirm Password:</label>
    <input type="password" id="confirmPassword" name="confirmPassword" [(ngModel)]="confirmPassword" required>
    <br>
    <button type="submit" [disabled]="!registrationForm.form.valid || password != confirmPassword">
        Register
    </button>
</form>

<!-- Switch between login and registration -->
<button (click)="showRegistration = !showRegistration">
    {{ showRegistration ? 'Back to Login' : 'Sign Up' }}
</button>
// login-register.component.ts

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

@Component({
    selector: 'app-login-register',
    templateUrl: './login-register.component.html',
    styleUrls: ['./login-register.component.css']
})
export class LoginRegisterComponent {
    username: string;
    email: string;
    password: string;
    confirmPassword: string;
    showRegistration = false;

    login() {
        // Perform login using the username and password
    }

    register() {
        // Perform registration using the username, email, and password
    }
}

This login and registration page consists of two forms: one for login and one for registration. The *ngIf directive is used to show or hide the forms based on the value of the showRegistration property. The [(ngModel)] directive is used to bind the input fields to the corresponding properties of the component. The required attribute is used to specify that the fields are required.

The login() and register() methods are called when the respective forms are submitted using the (ngSubmit) directive. These methods can be used to perform the login or registration