admin/cmc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

152. Register template (#20 Section 21: Register Page)

Browse Source
This commit is contained in:
Art
2021-09-20 12:00:07 +03:00
parent 53acf81262
commit b7f4b8f965
4 changed files with 149 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
support-portal-frontend/src/app/component/login/login.component.html
View File

@ -37,7 +37,7 @@
</div>
<div class="mt-4">
<div class="d-flex justify-content-center links">
Don't have an account? <a class="ml-2" style="color: #2C3E50;">Sign Up</a>
Don't have an account? <a routerLink="/register" class="ml-2" style="color: #2C3E50;">Sign Up</a>
</div>
</div>
</div>

69
support-portal-frontend/src/app/component/register/register.component.css
View File

@ -0,0 +1,69 @@
body,
html {
margin: 0;
padding: 0;
height: 100%;
background: #60a3bc !important;
}
.user_card {
height: 500px;
width: 600px;
margin-top: auto;
margin-bottom: auto;
background: #afbfd8;
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
padding: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0a, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 5px;
}
.brand_logo_container {
position: absolute;
height: 170px;
width: 170px;
top: -75px;
border-radius: 50%;
background: #60a3bc;
padding: 10px;
text-align: center;
}
.brand_logo {
height: 150px;
width: 150px;
border-radius: 50%;
border: 2px solid white;
}
.form_container {
margin-top: 100px;
}
.login_btn {
width: 100%;
background: #1B4F72!important;
color: white !important;
}
.login_btn:focus {
box-shadow: none !important;
outline: 0px !important;
}
.login_container {
padding: 0 2rem;
}
.input-group-text {
background: #1B4F72!important;
color: white !important;
border: 0 !important;
border-radius: 0.25rem 0 0 0.25rem !important;
}
.input_user,
.input_pass:focus {
box-shadow: none !important;
outline: 0px !important;
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
background-color: #1B4F72!important;
}

71
support-portal-frontend/src/app/component/register/register.component.html
View File

@ -1 +1,70 @@
<p>register works!</p>
<div class="container" style="margin-top: 100px;">
<div class="d-flex justify-content-center h-50">
<div class="user_card">
<div class="d-flex justify-content-center">
<div style="margin-top: 10px;margin-bottom:-90px;">
<h3>User Management Portal</h3>
</div>
</div>
<div class="d-flex justify-content-center form_container">
<form #registerForm="ngForm" (ngSubmit)="onRegister(registerForm.value)">
<div class="input-group mb-3">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<input type="text" class="form-control" name="firstName" placeholder="First Name"
ngModel #firstNameInput="ngModel" required>
</div>
<span class="help-block" style="color:red;" *ngIf="firstNameInput.invalid && firstNameInput.touched">
Please enter your First Name</span>
<div class="input-group mb-3">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<input type="text" class="form-control" name="lastName" placeholder="Last Name"
ngModel #lastNameInput="ngModel" required>
</div>
<span class="help-block" style="color:red;" *ngIf="lastNameInput.invalid && lastNameInput.touched">
Please enter your Last Name</span>
<div class="input-group mb-3">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-id-card"></i></span>
</div>
<input type="text" class="form-control" name="username" placeholder="Username"
ngModel #usernameInput="ngModel" required>
</div>
<span class="help-block" style="color:red;" *ngIf="usernameInput.invalid && usernameInput.touched">
Please enter a username</span>
<div class="input-group mb-2">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-envelope"></i></span>
</div>
<input type="email" class="form-control" name="email" placeholder="Email"
ngModel #emailInput="ngModel" required>
</div>
<span class="help-block" style="color:red;"
*ngIf="emailInput.invalid && emailInput.touched">Please enter an email.</span>
<div class="d-flex justify-content-center mt-3 login_container">
<button type="submit" [disabled]="registerForm.invalid || showLoading" name="button" class="btn login_btn">
<i class="fas fa-spinner fa-spin" *ngIf="showLoading"></i>&nbsp;&nbsp;
<span *ngIf="showLoading">Loading...</span>
<span *ngIf="!showLoading">Register</span>
</button>
</div>
</form>
</div>
<div class="mt-4">
<div class="d-flex justify-content-center links">
Already have an account? <a routerLink="/login" class="ml-2" style="color: #2C3E50;">Log In</a>
</div>
</div>
</div>
</div>
</div>

10
support-portal-frontend/src/app/component/register/register.component.ts
View File

@ -1,4 +1,5 @@
import {Component, OnInit} from '@angular/core';
import {User} from "../../model/user";
@Component({
selector: 'app-register',
@ -7,9 +8,16 @@ import {Component, OnInit} from '@angular/core';
})
export class RegisterComponent implements OnInit {
constructor() { }
public showLoading: boolean;
constructor() {
}
ngOnInit(): void {
}
public onRegister(user: User) {
}
}