add login design
@ -0,0 +1,31 @@
|
|||||||
|
.login-input {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.item-input{
|
||||||
|
--min-height: 1.0cm !important;
|
||||||
|
--border-radius: 12px;
|
||||||
|
--ion-color-base: white !important;
|
||||||
|
// --background: color: var(--darkgray) !important;
|
||||||
|
// background: #7f8c8d !important;
|
||||||
|
border-radius: 33px;
|
||||||
|
--border: solid #9999992b !important;
|
||||||
|
border: solid #9999992b !important;
|
||||||
|
margin-bottom :12px;
|
||||||
|
margin-left: 12px;
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-login{
|
||||||
|
|
||||||
|
--background: var(--newgreen) !important;
|
||||||
|
background: var(--newgreen) !important;
|
||||||
|
white-space: normal;
|
||||||
|
color: var(--light);
|
||||||
|
text-transform: capitalize;
|
||||||
|
min-height: 1.0cm;
|
||||||
|
--border-radius: 33px !important;
|
||||||
|
border-radius: 33px !important;
|
||||||
|
--min-height: 1.6cm !important;
|
||||||
|
width: 315px;
|
||||||
|
}
|
||||||
|
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
.content-class {
|
||||||
|
height: 25vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rowOutside{
|
||||||
|
// margin-top: -37px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
<p>
|
||||||
|
welcome works!
|
||||||
|
</p>
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { WelcomeComponent } from './welcome.component';
|
||||||
|
|
||||||
|
describe('WelcomeComponent', () => {
|
||||||
|
let component: WelcomeComponent;
|
||||||
|
let fixture: ComponentFixture<WelcomeComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ WelcomeComponent ],
|
||||||
|
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(WelcomeComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-welcome',
|
||||||
|
templateUrl: './welcome.component.html',
|
||||||
|
styleUrls: ['./welcome.component.scss'],
|
||||||
|
})
|
||||||
|
export class WelcomeComponent implements OnInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit() {}
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,69 @@
|
|||||||
|
<ion-content has-bouncing="false" forceOverscroll="false" class="ion-no-padding">
|
||||||
|
<ion-grid padding>
|
||||||
|
<ion-row>
|
||||||
|
<ion-col [size]="12">
|
||||||
|
<!-- <img [src]="logo" class="loginLogo" />
|
||||||
|
<h1 class="heading1">{{welcome}} </h1> -->
|
||||||
|
<p class="text1" style="margin-bottom: -8px;font-weight: bold;font-size: 28px;">{{'home,welcome-back' | translate}} </p>
|
||||||
|
<p class="text1" style="font-size: 28px;margin-top: 0px;" >{{empname}}</p>
|
||||||
|
<p *ngIf="!empname" class="text1">{{welcome_txt}} </p>
|
||||||
|
<p class="text1">{{txt_account}} </p>
|
||||||
|
</ion-col>
|
||||||
|
</ion-row>
|
||||||
|
|
||||||
|
<ion-row class="row-border" *ngIf="empname && isLastLogin">
|
||||||
|
<ion-col size="6" style="padding: 5px 10px; border-right:1px solid #bbbbbb">
|
||||||
|
<p class="last-login" style="font-weight: bold">{{'login,last-login' | translate}} </p>
|
||||||
|
<!-- <p class="last-login small-font-size">{{user.EditedOn | date}}
|
||||||
|
{{lastLoginTime}}</p>-->
|
||||||
|
</ion-col>
|
||||||
|
<ion-col size="6" style="padding: 5px 10px;">
|
||||||
|
<p class="last-login" style="font-weight: bold" [ngClass]="{'fadein':empname && isLastLogin }">
|
||||||
|
{{'login,last-login-with' | translate}}
|
||||||
|
</p>
|
||||||
|
<p class="last-login">{{getLoginType(logintype)}}</p>
|
||||||
|
</ion-col>
|
||||||
|
</ion-row>
|
||||||
|
|
||||||
|
<ion-row class="ion-no-padding description" *ngIf="empname && isLastLogin">
|
||||||
|
<ion-col style="margin-top:-5px" class="ion-no-padding " [size]=6>
|
||||||
|
<app-confirm-login [accessFromOutSide]="true" *ngIf="empname"></app-confirm-login>
|
||||||
|
</ion-col>
|
||||||
|
<ion-col [size]=6>
|
||||||
|
<app-button (click)="loginwithuser()" [title]="button.title | translate " [icon]="button.icon"
|
||||||
|
[settings]="button.settings" [strong]="button.txt" [disabled]="button.disabled"
|
||||||
|
[buttonClass]="button.buttonClass" [pClass]="button.pClass" [class]="button.class">
|
||||||
|
</app-button>
|
||||||
|
</ion-col>
|
||||||
|
</ion-row>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</ion-grid>
|
||||||
|
|
||||||
|
</ion-content>
|
||||||
|
<ion-footer class="welcome-footer">
|
||||||
|
<ion-row class="ion-justify-content-center " *ngIf="empname">
|
||||||
|
<ion-col [size]="12">
|
||||||
|
|
||||||
|
<ion-button class="centerDiv button-login" expand="block" (click)="login()">
|
||||||
|
{{'login, another-acc' | translate}}
|
||||||
|
</ion-button>
|
||||||
|
</ion-col>
|
||||||
|
</ion-row>
|
||||||
|
|
||||||
|
<ng-template #userinfo_login>
|
||||||
|
<ion-row class="ion-justify-content-center bottom-buttons">
|
||||||
|
<ion-col [size]="12">
|
||||||
|
<ion-button class="gray-button" expand="block" (click)="login()">
|
||||||
|
{{'rate,yes' | translate}}
|
||||||
|
</ion-button>
|
||||||
|
|
||||||
|
<!-- <ion-button class="red-button" expand="block" (click)="register()">
|
||||||
|
{{'general,no' | translate}}
|
||||||
|
</ion-button> -->
|
||||||
|
</ion-col>
|
||||||
|
</ion-row>
|
||||||
|
</ng-template>
|
||||||
|
</ion-footer>
|
||||||
@ -0,0 +1,68 @@
|
|||||||
|
.logo-en {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-ar {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome {
|
||||||
|
margin: 10px;
|
||||||
|
display: inline-block;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 0.55cm;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
margin-top: .5cm;
|
||||||
|
}
|
||||||
|
|
||||||
|
.last-login {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row-border {
|
||||||
|
margin-top: 20px;
|
||||||
|
border: 1px solid #bbbbbb;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 5px;
|
||||||
|
background: #dddddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.fadein {
|
||||||
|
-webkit-animation-name: fadeIn;
|
||||||
|
animation-name: fadeIn;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-font-size {
|
||||||
|
font-size: 14px;
|
||||||
|
;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-buttons {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes fadeIn {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-footer {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 10px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text1 {
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { WelcomeComponent } from './welcome.component';
|
||||||
|
|
||||||
|
describe('WelcomeComponent', () => {
|
||||||
|
let component: WelcomeComponent;
|
||||||
|
let fixture: ComponentFixture<WelcomeComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ WelcomeComponent ],
|
||||||
|
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(WelcomeComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,182 @@
|
|||||||
|
import {
|
||||||
|
Component,
|
||||||
|
OnInit,
|
||||||
|
Output,
|
||||||
|
EventEmitter,
|
||||||
|
AfterViewInit,
|
||||||
|
ViewChild,
|
||||||
|
OnDestroy
|
||||||
|
} from "@angular/core";
|
||||||
|
import { TranslatorService } from "../../services/translator/translator.service";
|
||||||
|
import { CommonService } from "../../services/common/common.service";
|
||||||
|
import { AuthenticationService } from "../../services/authentication/authentication.service";
|
||||||
|
import { ConfirmLoginComponent } from 'src/app/authentication/confirm-login/confirm-login.component';
|
||||||
|
|
||||||
|
import * as moment from 'moment'
|
||||||
|
import { ButtonSettings } from '../button/models/button-settingsl';
|
||||||
|
import { Events } from '@ionic/angular';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: "welcome-login",
|
||||||
|
templateUrl: "./welcome.component.html",
|
||||||
|
styleUrls: ["./welcome.component.scss"]
|
||||||
|
})
|
||||||
|
export class WelcomeComponent implements OnInit, AfterViewInit, OnDestroy {
|
||||||
|
@ViewChild(ConfirmLoginComponent, {read: ConfirmLoginComponent }) confimLogin: ConfirmLoginComponent;
|
||||||
|
|
||||||
|
// @ViewChild(ConfirmLoginComponent, { static: false, read: ConfirmLoginComponent }) confimLogin: ConfirmLoginComponent;
|
||||||
|
public logo = "assets/imgs/bell.png";
|
||||||
|
public direction: any;
|
||||||
|
public user: any;
|
||||||
|
public count: number = 0;
|
||||||
|
public count2: number = 0;
|
||||||
|
public txt_account: any;
|
||||||
|
public isLastLogin: any;
|
||||||
|
public welcome: string;
|
||||||
|
public userName: string;
|
||||||
|
public lastLoginTime: any;
|
||||||
|
public welcome_txt: any;
|
||||||
|
|
||||||
|
// public loginTypeDef = {
|
||||||
|
// 1: this.ts.trPK("sms", "title"),
|
||||||
|
// 2: this.ts.trPK("sms", "fingerprint"),
|
||||||
|
// 3: this.ts.trPK("sms", "face-recognition"),
|
||||||
|
// 4: this.ts.trPK("sms", "whatsapp")
|
||||||
|
// };
|
||||||
|
public loginTypeDef = {
|
||||||
|
1: this.ts.trPK("sms", "title"),
|
||||||
|
2: this.ts.trPK("sms", "fingerprint"),
|
||||||
|
3: this.ts.trPK("sms", "face-recognition"),
|
||||||
|
4: this.ts.trPK("sms", "whatsapp")
|
||||||
|
};
|
||||||
|
@Output() onLogin = new EventEmitter();
|
||||||
|
@Output() loginWithUser = new EventEmitter();
|
||||||
|
|
||||||
|
public button =
|
||||||
|
{
|
||||||
|
title: "login, more-verify",
|
||||||
|
url: null,
|
||||||
|
icon: "assets/imgs/more.png",
|
||||||
|
settings: new ButtonSettings(true, true, true, true),
|
||||||
|
value: 2,
|
||||||
|
txt: 'More',
|
||||||
|
disabled: false,
|
||||||
|
buttonClass: 'buttonClassWhite',
|
||||||
|
pClass: 'pClassMyFileIconBlack',
|
||||||
|
class: 'nationalIdIcon',
|
||||||
|
visible: true
|
||||||
|
};
|
||||||
|
password: string;
|
||||||
|
empname: string;
|
||||||
|
logintype: any;
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
public ts: TranslatorService,
|
||||||
|
public cs: CommonService,
|
||||||
|
public authservice: AuthenticationService,
|
||||||
|
public events: Events
|
||||||
|
) { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
// retrive user info **
|
||||||
|
|
||||||
|
this.userName = localStorage.getItem("user");
|
||||||
|
this.password = localStorage.getItem("password");
|
||||||
|
let remember = localStorage.getItem("remember");
|
||||||
|
this.empname= localStorage.getItem("emp-name");
|
||||||
|
this.logintype= localStorage.getItem("login-type");
|
||||||
|
this.logintype = parseInt(this.logintype)
|
||||||
|
|
||||||
|
this.welcome_txt = this.ts.trPK("home", "welcome-txt");
|
||||||
|
|
||||||
|
this.txt_account = this.user
|
||||||
|
? this.ts.trPK("home", "account-info")
|
||||||
|
: "";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
this.setWelcomeMessage();
|
||||||
|
this.setDescription();
|
||||||
|
//later to fix below code
|
||||||
|
if (this.user) {
|
||||||
|
// this.lastLoginTime = moment(this.cs.evaluteDateAsObject(this.user.EditedOn)).format("HH:mm");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy(): void {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
private setWelcomeMessage() {
|
||||||
|
console.log(this.userName + "this.userName");
|
||||||
|
|
||||||
|
if (this.userName) {
|
||||||
|
this.welcome = this.ts.trPK("home", "welcome-back");
|
||||||
|
console.log(this.welcome + "this.welcome");
|
||||||
|
|
||||||
|
this.welcome += " " + this.empname || '';
|
||||||
|
this.isLastLogin = true;
|
||||||
|
console.log(this.isLastLogin + "this.isLastLogin");
|
||||||
|
} else {
|
||||||
|
this.welcome = this.ts.trPK("home", "welcome-head");
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private setDescription() {
|
||||||
|
this.txt_account = this.userName ?
|
||||||
|
this.ts.trPK("home", "account-info") :"";
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
console.log("this.confimLogin.buttons[0]" + this.confimLogin.buttons[0]);
|
||||||
|
setTimeout(() => {
|
||||||
|
if (this.userName && this.confimLogin.buttons[0]) {
|
||||||
|
|
||||||
|
console.log(this.userName );
|
||||||
|
console.log(this.confimLogin.buttons[0]);
|
||||||
|
|
||||||
|
this.confimLogin.buttons[0].forEach(element => {
|
||||||
|
if (this.logintype === element.value) {
|
||||||
|
console.log(this.logintype );
|
||||||
|
console.log(element.value);
|
||||||
|
console.log("this.logintype === element.value");
|
||||||
|
|
||||||
|
element.visible = true;
|
||||||
|
} else {
|
||||||
|
console.log("this.logintype != element.value");
|
||||||
|
|
||||||
|
element.visible = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, 200);
|
||||||
|
}
|
||||||
|
|
||||||
|
public moreLoginOptions() {}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
login() {
|
||||||
|
this.onLogin.emit();
|
||||||
|
}
|
||||||
|
loginwithuser() {
|
||||||
|
this.loginWithUser.emit();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// getDate(date: string) {
|
||||||
|
// return this.cs.getDateTimeISOFromString(date);
|
||||||
|
// }
|
||||||
|
getLoginType(type: any) {
|
||||||
|
return this.loginTypeDef[type];
|
||||||
|
}
|
||||||
|
|
||||||
|
convertTime(time) {
|
||||||
|
// alert(time)
|
||||||
|
return time;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 9.3 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 568 B |
|
After Width: | Height: | Size: 1.8 KiB |