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 |