frontend-smartfarming/agrilink_vocpro/src/app/pages/register/register.component.html

61 lines
3.7 KiB
HTML

<div class="container-fluid ps-md-0">
<div class="row g-0">
<div class="d-none d-md-flex col-md-4 col-lg-6 bg-image"></div>
<div class="col-md-8 col-lg-6">
<div class="login d-flex align-items-center py-5">
<div class="container">
<div class="row">
<div class="col-md-9 col-lg-8 mx-auto">
<h3 class="login-heading mb-4">Create an Account!</h3>
<form (ngSubmit)="onSubmit()">
<div class="form-floating mb-3">
<input type="text" class="form-control" [(ngModel)]="fullname" name="fullname" id="floatingFullname" placeholder="Full Name" required autocomplete="off">
<label for="floatingFullname">Full Name</label>
</div>
<div class="form-floating mb-3">
<input type="text" class="form-control" [(ngModel)]="username" name="username" id="floatingUsername" placeholder="Username" required autocomplete="off">
<label for="floatingUsername">Username</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" [(ngModel)]="email" name="email" id="floatingInput" placeholder="name@example.com" required autocomplete="off">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating mb-3">
<input [type]="passwordVisible ? 'text' : 'password'"
class="form-control"
[(ngModel)]="password"
name="password"
id="floatingPassword"
placeholder="Password"
required autocomplete="off">
<label for="floatingPassword">Password</label>
<button type="button"
class="btn btn-link position-absolute end-0 me-3"
(click)="togglePasswordVisibility()">
<i class="fa" [ngClass]="passwordVisible ? 'fa-eye' : 'fa-eye-slash'"></i>
</button>
</div>
<div class="d-grid">
<button class="btn btn-lg color-btn btn-login text-uppercase fw-bold mb-2"
type="submit"
[disabled]="loading">
<span *ngIf="!loading">Sign up</span>
<span *ngIf="loading">
<i class="fa fa-spinner fa-spin"></i>
</span>
</button>
<div class="text-center">
<a class="small forgot" routerLink='/auth'>Sign In here</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>