perbaikan tampilan login dan register
This commit is contained in:
parent
5fa8e2314d
commit
457504442e
|
|
@ -1,35 +1,59 @@
|
|||
.margin-left-5{
|
||||
margin-left: 5px;
|
||||
.margin-left-5 {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.terms {
|
||||
float: right;
|
||||
float: right;
|
||||
}
|
||||
:host ::ng-deep .content .content-wrapper {
|
||||
padding: 0!important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
:host ::ng-deep .btn-outline-twitter {
|
||||
border: 1px solid #55acee!important;
|
||||
color: #55acee !important;
|
||||
border: 1px solid #55acee !important;
|
||||
color: #55acee !important;
|
||||
}
|
||||
:host ::ng-deep .icheckbox_square-blue, .iradio_square-blue {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background: url("../../assets/images/icons/blue.png") no-repeat;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
:host ::ng-deep .icheckbox_square-blue,
|
||||
.iradio_square-blue {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background: url("../../assets/images/icons/blue.png") no-repeat;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
:host ::ng-deep .icheckbox_square-blue {
|
||||
background-position: 0 0;
|
||||
background-position: 0 0;
|
||||
}
|
||||
:host ::ng-deep .lb-remember {
|
||||
color: #2b335e;
|
||||
padding-left: 3px;
|
||||
width: max-content;
|
||||
color: #2b335e;
|
||||
padding-left: 3px;
|
||||
width: max-content;
|
||||
}
|
||||
: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;
|
||||
}
|
||||
|
|
@ -1,95 +1,152 @@
|
|||
<div class="app-content content" *ngIf="isPageLoaded">
|
||||
<div class="content-overlay"></div>
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row">
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<section class="row flexbox-container">
|
||||
<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">
|
||||
<div class="card border-grey border-lighten-3 px-1 py-1 m-0">
|
||||
<div class="card-header border-0">
|
||||
<div class="card-title text-center">
|
||||
<img src="assets/images/logo/logo-dark.png" alt="branding logo">
|
||||
</div>
|
||||
<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 class="content-overlay"></div>
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row"></div>
|
||||
<div class="content-body">
|
||||
<section class="row flexbox-container">
|
||||
<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="card border-grey border-lighten-3 px-1 py-1 m-0">
|
||||
<div class="card-header border-0">
|
||||
<div class="card-title text-center">
|
||||
<img
|
||||
src="assets/images/logo/logo-dark.png"
|
||||
alt="branding logo"
|
||||
/>
|
||||
</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>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
import { Component, OnInit, Renderer2 } from '@angular/core';
|
||||
import { Router, ActivatedRoute } from '@angular/router';
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
import { AuthService } from '../_services/auth.service';
|
||||
import { AlertService } from '../_services/alert.service';
|
||||
import { Component, OnInit, Renderer2 } from "@angular/core";
|
||||
import { Router, ActivatedRoute } from "@angular/router";
|
||||
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
|
||||
import { AuthService } from "../_services/auth.service";
|
||||
import { AlertService } from "../_services/alert.service";
|
||||
|
||||
@Component({
|
||||
templateUrl: 'login.component.html',
|
||||
styleUrls: ['./login.component.css']
|
||||
templateUrl: "login.component.html",
|
||||
styleUrls: ["./login.component.css"],
|
||||
})
|
||||
export class LoginComponent implements OnInit {
|
||||
loginForm: FormGroup;
|
||||
|
|
@ -23,24 +23,23 @@ export class LoginComponent implements OnInit {
|
|||
public authService: AuthService,
|
||||
private renderer: Renderer2
|
||||
) {
|
||||
this.route.queryParams.subscribe(params => {
|
||||
this.returnUrl = params['returnUrl'];
|
||||
this.route.queryParams.subscribe((params) => {
|
||||
this.returnUrl = params["returnUrl"];
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.loginForm = this.formBuilder.group({
|
||||
email: ['john@pixinvent.com', Validators.required],
|
||||
password: ['password@123', Validators.required],
|
||||
rememberMe: false
|
||||
email: ["john@pixinvent.com", Validators.required],
|
||||
password: ["password@123", Validators.required],
|
||||
rememberMe: false,
|
||||
});
|
||||
// Remember Me
|
||||
if (localStorage.getItem('remember')) {
|
||||
this.renderer.removeClass(document.body, 'bg-full-screen-image');
|
||||
localStorage.removeItem('currentLayoutStyle');
|
||||
this.router.navigate(['/monitoring']);
|
||||
} else if (localStorage.getItem('currentUser')) {
|
||||
if (localStorage.getItem("remember")) {
|
||||
this.renderer.removeClass(document.body, "bg-full-screen-image");
|
||||
localStorage.removeItem("currentLayoutStyle");
|
||||
this.router.navigate(["/monitoring"]);
|
||||
} else if (localStorage.getItem("currentUser")) {
|
||||
// Force logout on login if not remember me
|
||||
this.authService.doLogout();
|
||||
this.isPageLoaded = true;
|
||||
|
|
@ -63,42 +62,47 @@ export class LoginComponent implements OnInit {
|
|||
}
|
||||
const value = {
|
||||
email: this.f.email.value,
|
||||
password: this.f.password.value
|
||||
password: this.f.password.value,
|
||||
};
|
||||
this.authService.doLogin(value).then(
|
||||
res => {
|
||||
if (this.loginForm.controls['rememberMe'] && this.loginForm.controls['rememberMe'].value) {
|
||||
localStorage.setItem('remember', 'true');
|
||||
(res) => {
|
||||
if (
|
||||
this.loginForm.controls["rememberMe"] &&
|
||||
this.loginForm.controls["rememberMe"].value
|
||||
) {
|
||||
localStorage.setItem("remember", "true");
|
||||
} else {
|
||||
localStorage.removeItem('remember');
|
||||
localStorage.removeItem("remember");
|
||||
}
|
||||
this.setUserInStorage(res);
|
||||
localStorage.removeItem('currentLayoutStyle');
|
||||
let returnUrl = '/monitoring';
|
||||
localStorage.removeItem("currentLayoutStyle");
|
||||
let returnUrl = "/monitoring";
|
||||
if (this.returnUrl) {
|
||||
returnUrl = this.returnUrl;
|
||||
}
|
||||
this.router.navigate([returnUrl]);
|
||||
},
|
||||
err => {
|
||||
(err) => {
|
||||
this.submitted = false;
|
||||
this.alertService.error(err.message);
|
||||
}
|
||||
);
|
||||
}
|
||||
addCheckbox(event) {
|
||||
const toggle = document.getElementById('icheckbox');
|
||||
if (event.currentTarget.className === 'icheckbox_square-blue') {
|
||||
this.renderer.addClass(toggle, 'checked');
|
||||
} else if (event.currentTarget.className === 'icheckbox_square-blue checked') {
|
||||
this.renderer.removeClass(toggle, 'checked');
|
||||
addCheckbox(event) {
|
||||
const toggle = document.getElementById("icheckbox");
|
||||
if (event.currentTarget.className === "icheckbox_square-blue") {
|
||||
this.renderer.addClass(toggle, "checked");
|
||||
} else if (
|
||||
event.currentTarget.className === "icheckbox_square-blue checked"
|
||||
) {
|
||||
this.renderer.removeClass(toggle, "checked");
|
||||
}
|
||||
}
|
||||
}
|
||||
setUserInStorage(res) {
|
||||
if (res.user) {
|
||||
localStorage.setItem('currentUser', JSON.stringify(res.user));
|
||||
localStorage.setItem("currentUser", JSON.stringify(res.user));
|
||||
} else {
|
||||
localStorage.setItem('currentUser', JSON.stringify(res));
|
||||
localStorage.setItem("currentUser", JSON.stringify(res));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,27 @@
|
|||
.margin-left-5{
|
||||
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;
|
||||
}
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
href="recover-password.html" class="card-link">Forgot Password?</a>
|
||||
</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="feather ft-user" *ngIf="!submitted"></i> Register
|
||||
</button>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 757 KiB |
|
|
@ -167,7 +167,7 @@ html {
|
|||
}
|
||||
|
||||
&.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;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue