fuzi_fauzia
/
hemat_solution
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

perbaikan tampilan login dan register

This commit is contained in:
Fuzi_fauzia 2024-04-26 10:34:08 +07:00
parent 5fa8e2314d
commit 457504442e
8 changed files with 260 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/app/login/login.component.css
View File

@ -1,35 +1,59 @@
.margin-left-5{ .margin-left-5 {
margin-left: 5px; margin-left: 5px;
} }
.terms { .terms {
float: right; float: right;
} }
:host ::ng-deep .content .content-wrapper { :host ::ng-deep .content .content-wrapper {
padding: 0!important; padding: 0 !important;
} }
:host ::ng-deep .btn-outline-twitter { :host ::ng-deep .btn-outline-twitter {
border: 1px solid #55acee!important; border: 1px solid #55acee !important;
color: #55acee !important; color: #55acee !important;
} }
:host ::ng-deep .icheckbox_square-blue, .iradio_square-blue { :host ::ng-deep .icheckbox_square-blue,
display: inline-block; .iradio_square-blue {
vertical-align: middle; display: inline-block;
margin: 0; vertical-align: middle;
padding: 0; margin: 0;
width: 22px; padding: 0;
height: 22px; width: 22px;
background: url("../../assets/images/icons/blue.png") no-repeat; height: 22px;
border: none; background: url("../../assets/images/icons/blue.png") no-repeat;
cursor: pointer; border: none;
cursor: pointer;
} }
:host ::ng-deep .icheckbox_square-blue { :host ::ng-deep .icheckbox_square-blue {
background-position: 0 0; background-position: 0 0;
} }
:host ::ng-deep .lb-remember { :host ::ng-deep .lb-remember {
color: #2b335e; color: #2b335e;
padding-left: 3px; padding-left: 3px;
width: max-content; width: max-content;
} }
:host ::ng-deep .icheckbox_square-blue.checked { :host ::ng-deep .icheckbox_square-blue.checked {
background-position: -48px 0; background-position: -48px 0;
} }
.center-card {
margin-top: 150px;
}
.card {
background-color: rgba(255, 255, 255, 0.7);
}
.card-header {
background-color: rgba(255, 255, 255, 0);
}
.form-control {
background-color: rgba(255, 255, 255, 0.7);
}
.line-on-side span {
background-color: rgba(255, 255, 255, 0);
}
.btn-custom-login {
background-color: rgba(255, 255, 255, 0.7);
}
.btn-custom-login:hover {
color: #ffffff !important;
background-color: #1e9ff2 !important;
border-color: #dae0e5 !important;
}

239
src/app/login/login.component.html
View File

@ -1,95 +1,152 @@
<div class="app-content content" *ngIf="isPageLoaded"> <div class="app-content content" *ngIf="isPageLoaded">
<div class="content-overlay"></div> <div class="content-overlay"></div>
<div class="content-wrapper"> <div class="content-wrapper">
<div class="content-header row"> <div class="content-header row"></div>
</div> <div class="content-body">
<div class="content-body"> <section class="row flexbox-container">
<section class="row flexbox-container"> <div class="col-12 d-flex align-items-center justify-content-center">
<div class="col-12 d-flex align-items-center justify-content-center"> <div class="col-lg-4 col-md-8 col-10 box-shadow-2 p-0 center-card">
<div class="col-lg-4 col-md-8 col-10 box-shadow-2 p-0"> <div class="card border-grey border-lighten-3 px-1 py-1 m-0">
<div class="card border-grey border-lighten-3 px-1 py-1 m-0"> <div class="card-header border-0">
<div class="card-header border-0"> <div class="card-title text-center">
<div class="card-title text-center"> <img
<img src="assets/images/logo/logo-dark.png" alt="branding logo"> src="assets/images/logo/logo-dark.png"
</div> alt="branding logo"
<h6 class="card-subtitle line-on-side text-muted text-center font-small-3 pt-2"> />
<span>Easily Using</span></h6>
</div>
<div class="card-content">
<app-social-signin></app-social-signin>
<p class="card-subtitle line-on-side text-muted text-center font-small-3 mx-2 my-1">
<span>OR Using Account Details</span></p>
<div class="card-body">
<form class="form-horizontal" [formGroup]="loginForm" (ngSubmit)="tryLogin()">
<fieldset class="form-group position-relative has-icon-left">
<input type="text" formControlName="email" class="form-control"
[ngClass]="{ 'is-invalid': submitted && f.email.errors }" id="user-name"
placeholder="Your Username" required>
<div class="form-control-position">
<i class="la la-user"></i>
</div>
<div *ngIf="submitted && f.email.errors" class="invalid-feedback">
<div *ngIf="f.email.errors.required">Username is required</div>
</div>
</fieldset>
<fieldset class="form-group position-relative has-icon-left">
<input type="password" placeholder="Enter Password"
formControlName="password" class="form-control"
[ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
<div class="form-control-position">
<i class="la la-key"></i>
</div>
<div *ngIf="submitted && f.password.errors" class="invalid-feedback">
<div *ngIf="f.password.errors.required">Password is required</div>
</div>
</fieldset>
<div class="form-group row">
<div class="col-md-6 col-12 text-center text-sm-left pr-0">
<fieldset>
<div class="icheckbox_square-blue" id="icheckbox" (click)="addCheckbox($event)" style="position: relative;">
<input type="checkbox" class="chk-remember"
formControlName="rememberMe" name="remember-me"
id="remember-me" style="position: absolute; opacity: 0;">
<ins class="iCheck-helper"
style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins>
</div>
<label class="lb-remember" for="remember-me">Remember Me</label>
</fieldset>
</div>
<div class="col-md-6 col-12 float-sm-left text-center text-sm-right"><a
href="recover-password.html" class="card-link">Forgot Password?</a>
</div>
</div>
<button type="submit" class="btn btn-outline-info btn-block">
<i class="fa fa-refresh fa-spin" *ngIf="submitted"></i>
<i class="feather ft-unlock" *ngIf="!submitted"></i> Login
</button>
</form>
</div>
<p class="card-subtitle line-on-side text-muted text-center font-small-3 mx-2 my-1">
<span>New to Modern ?</span></p>
<div class="card-body">
<a [routerLink]="['/register']" class="btn btn-outline-danger btn-block"><i
class="la la-user"></i> Register</a>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<a [routerLink]="['/privacypolicy']" target="_blank">Privacy Policy</a>
</div>
<div class="col-md-6 terms">
<a [routerLink]="['/termCondition']" target="_blank">Terms & Conditions</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</section> </div>
<div class="card-content">
<div class="card-body">
<form
class="form-horizontal"
[formGroup]="loginForm"
(ngSubmit)="tryLogin()"
>
<fieldset
class="form-group position-relative has-icon-left"
>
<input
type="text"
formControlName="email"
class="form-control"
[ngClass]="{
'is-invalid': submitted && f.email.errors
}"
id="user-name"
placeholder="Your Username"
required
/>
<div class="form-control-position">
<i class="la la-user"></i>
</div>
<div
*ngIf="submitted && f.email.errors"
class="invalid-feedback"
>
<div *ngIf="f.email.errors.required">
Username is required
</div>
</div>
</fieldset>
<fieldset
class="form-group position-relative has-icon-left"
>
<input
type="password"
placeholder="Enter Password"
formControlName="password"
class="form-control"
[ngClass]="{
'is-invalid': submitted && f.password.errors
}"
/>
<div class="form-control-position">
<i class="la la-key"></i>
</div>
<div
*ngIf="submitted && f.password.errors"
class="invalid-feedback"
>
<div *ngIf="f.password.errors.required">
Password is required
</div>
</div>
</fieldset>
<div class="form-group row">
<div
class="col-md-6 col-12 text-center text-sm-left pr-0"
>
<fieldset>
<div
class="icheckbox_square-blue"
id="icheckbox"
(click)="addCheckbox($event)"
style="position: relative"
>
<input
type="checkbox"
class="chk-remember"
formControlName="rememberMe"
name="remember-me"
id="remember-me"
style="position: absolute; opacity: 0"
/>
<ins
class="iCheck-helper"
style="
position: absolute;
top: 0%;
left: 0%;
display: block;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background: rgb(255, 255, 255);
border: 0px;
opacity: 0;
"
></ins>
</div>
<label class="lb-remember" for="remember-me"
>Remember Me</label
>
</fieldset>
</div>
<div
class="col-md-6 col-12 float-sm-left text-center text-sm-right"
>
<a href="recover-password.html" class="card-link"
>Forgot Password?</a
>
</div>
</div>
<button
type="submit"
class="btn btn-outline-info btn-block btn-custom-login"
>
<i class="fa fa-refresh fa-spin" *ngIf="submitted"></i>
<i class="feather ft-unlock" *ngIf="!submitted"></i> Login
</button>
</form>
</div>
<p
class="card-subtitle line-on-side text-muted text-center font-small-3 mx-2 my-1"
>
<span>New to Modern ?</span>
</p>
<div class="card-body">
<a
[routerLink]="['/register']"
class="btn btn-outline-danger btn-block"
><i class="la la-user"></i> Register</a
>
</div>
</div>
</div>
</div>
</div> </div>
</section>
</div> </div>
</div> </div>
</div>

74
src/app/login/login.component.ts
View File

@ -1,12 +1,12 @@
import { Component, OnInit, Renderer2 } from '@angular/core'; import { Component, OnInit, Renderer2 } from "@angular/core";
import { Router, ActivatedRoute } from '@angular/router'; import { Router, ActivatedRoute } from "@angular/router";
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { AuthService } from '../_services/auth.service'; import { AuthService } from "../_services/auth.service";
import { AlertService } from '../_services/alert.service'; import { AlertService } from "../_services/alert.service";
@Component({ @Component({
templateUrl: 'login.component.html', templateUrl: "login.component.html",
styleUrls: ['./login.component.css'] styleUrls: ["./login.component.css"],
}) })
export class LoginComponent implements OnInit { export class LoginComponent implements OnInit {
loginForm: FormGroup; loginForm: FormGroup;
@ -23,24 +23,23 @@ export class LoginComponent implements OnInit {
public authService: AuthService, public authService: AuthService,
private renderer: Renderer2 private renderer: Renderer2
) { ) {
this.route.queryParams.subscribe(params => { this.route.queryParams.subscribe((params) => {
this.returnUrl = params['returnUrl']; this.returnUrl = params["returnUrl"];
}); });
} }
ngOnInit() { ngOnInit() {
this.loginForm = this.formBuilder.group({ this.loginForm = this.formBuilder.group({
email: ['john@pixinvent.com', Validators.required], email: ["john@pixinvent.com", Validators.required],
password: ['password@123', Validators.required], password: ["password@123", Validators.required],
rememberMe: false rememberMe: false,
}); });
// Remember Me // Remember Me
if (localStorage.getItem('remember')) { if (localStorage.getItem("remember")) {
this.renderer.removeClass(document.body, 'bg-full-screen-image'); this.renderer.removeClass(document.body, "bg-full-screen-image");
localStorage.removeItem('currentLayoutStyle'); localStorage.removeItem("currentLayoutStyle");
this.router.navigate(['/monitoring']); this.router.navigate(["/monitoring"]);
} else if (localStorage.getItem('currentUser')) { } else if (localStorage.getItem("currentUser")) {
// Force logout on login if not remember me // Force logout on login if not remember me
this.authService.doLogout(); this.authService.doLogout();
this.isPageLoaded = true; this.isPageLoaded = true;
@ -63,42 +62,47 @@ export class LoginComponent implements OnInit {
} }
const value = { const value = {
email: this.f.email.value, email: this.f.email.value,
password: this.f.password.value password: this.f.password.value,
}; };
this.authService.doLogin(value).then( this.authService.doLogin(value).then(
res => { (res) => {
if (this.loginForm.controls['rememberMe'] && this.loginForm.controls['rememberMe'].value) { if (
localStorage.setItem('remember', 'true'); this.loginForm.controls["rememberMe"] &&
this.loginForm.controls["rememberMe"].value
) {
localStorage.setItem("remember", "true");
} else { } else {
localStorage.removeItem('remember'); localStorage.removeItem("remember");
} }
this.setUserInStorage(res); this.setUserInStorage(res);
localStorage.removeItem('currentLayoutStyle'); localStorage.removeItem("currentLayoutStyle");
let returnUrl = '/monitoring'; let returnUrl = "/monitoring";
if (this.returnUrl) { if (this.returnUrl) {
returnUrl = this.returnUrl; returnUrl = this.returnUrl;
} }
this.router.navigate([returnUrl]); this.router.navigate([returnUrl]);
}, },
err => { (err) => {
this.submitted = false; this.submitted = false;
this.alertService.error(err.message); this.alertService.error(err.message);
} }
); );
} }
addCheckbox(event) { addCheckbox(event) {
const toggle = document.getElementById('icheckbox'); const toggle = document.getElementById("icheckbox");
if (event.currentTarget.className === 'icheckbox_square-blue') { if (event.currentTarget.className === "icheckbox_square-blue") {
this.renderer.addClass(toggle, 'checked'); this.renderer.addClass(toggle, "checked");
} else if (event.currentTarget.className === 'icheckbox_square-blue checked') { } else if (
this.renderer.removeClass(toggle, 'checked'); event.currentTarget.className === "icheckbox_square-blue checked"
) {
this.renderer.removeClass(toggle, "checked");
}
} }
}
setUserInStorage(res) { setUserInStorage(res) {
if (res.user) { if (res.user) {
localStorage.setItem('currentUser', JSON.stringify(res.user)); localStorage.setItem("currentUser", JSON.stringify(res.user));
} else { } else {
localStorage.setItem('currentUser', JSON.stringify(res)); localStorage.setItem("currentUser", JSON.stringify(res));
} }
} }
} }

26
src/app/register/register.component.css
View File

@ -1,3 +1,27 @@
.margin-left-5{ .margin-left-5{
margin-left: 5px; margin-left: 5px;
} }
.center-card {
margin-top: 150px;
}
.card {
background-color: rgba(255, 255, 255, 0.7);
}
.card-header {
background-color: rgba(255, 255, 255, 0);
}
.form-control {
background-color: rgba(255, 255, 255, 0.7);
}
.line-on-side span {
background-color: rgba(255, 255, 255, 0);
}
.btn-custom-login {
background-color: rgba(255, 255, 255, 0.7);
}
.btn-custom-login:hover {
color: #ffffff !important;
background-color: #1e9ff2 !important;
border-color: #dae0e5 !important;
}

2
src/app/register/register.component.html
View File

@ -68,7 +68,7 @@
href="recover-password.html" class="card-link">Forgot Password?</a> href="recover-password.html" class="card-link">Forgot Password?</a>
</div> </div>
</div> </div>
<button type="submit" class="btn btn-outline-info btn-block"> <button type="submit" class="btn btn-outline-info btn-block btn-custom-login">
<i class="fa fa-refresh fa-spin" *ngIf="submitted"></i> <i class="fa fa-refresh fa-spin" *ngIf="submitted"></i>
<i class="feather ft-user" *ngIf="!submitted"></i> Register <i class="feather ft-user" *ngIf="!submitted"></i> Register
</button> </button>

BIN
src/assets/images/backgrounds/smart.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
src/assets/images/backgrounds/smart2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 757 KiB

2
src/assets/sass/scss/core/layouts/_content.scss
View File

@ -167,7 +167,7 @@ html {
} }
&.bg-full-screen-image { &.bg-full-screen-image {
background: url('/assets/images/backgrounds/bg-2.jpg') no-repeat center center fixed; background: url('/assets/images/backgrounds/smart.jpg') no-repeat center center fixed;
background-size: cover; background-size: cover;
} }