Hello there,
In this project I’m trying to do a security page (named Login) before access my ionic app data based on pin password. I’m stucked in ion-button, my objective is to not show the keyboard (just in LoginPage) and use ion-button to type the password on the password box. This is how it looks now:
Here I what to type with ion buttons and keep keyboard hided:
This is my following code:
login.ts
import { Component } from ‘@angular/core’;
import { NavController, AlertController, LoadingController, Loading, IonicPage } from ‘ionic-angular’;
import { AuthServiceProvider } from ‘…/…/providers/auth-service/auth-service’;
import { TabsPage } from ‘…/tabs/tabs’@IonicPage()
@Component({
selector: ‘page-login’,
templateUrl: ‘login.html’,
})
export class LoginPage {
loading: Loading;
registerCredentials = { email: ‘’, password: ‘’ };constructor(private nav: NavController, private auth: AuthServiceProvider, private alertCtrl: AlertController, private loadingCtrl: LoadingController) { }
public login() {
this.showLoading()
this.auth.login(this.registerCredentials).subscribe(allowed => {
if (allowed) {
this.nav.setRoot(TabsPage);
} else {
this.showError(“Acesso Negado”);
}
},
error => {
this.showError(error);
});
}showLoading() {
this.loading = this.loadingCtrl.create({
content: ‘Espere por favor…’,
dismissOnPageChange: true
});
this.loading.present();
}showError(text) {
this.loading.dismiss();let alert = this.alertCtrl.create({ title: 'Falha', subTitle: text, buttons: ['OK'] }); alert.present();
}
}
login.html
<ion-content class="login-content" padding> <div class="login-box"> <form (ngSubmit)="login()" #registerForm="ngForm"> <ion-row> <ion-col> <ion-list inset> <ion-item> <ion-input type="password" placeholder="Password" name="password" [(ngModel)]="registerCredentials.password" required></ion-input> </ion-item> </ion-list> </ion-col> </ion-row> <ion-grid> <ion-row> <ion-col> <button ion-button round outline large color="light" (click)="1">1</button> </ion-col> <ion-col> <button ion-button round outline large color="light" (click)="2">2</button> </ion-col> <ion-col> <button ion-button round outline large color="light" (click)="3">3</button> </ion-col> </ion-row> <ion-row> <ion-col> <button ion-button round outline large color="light" (click)="4">4</button> </ion-col> <ion-col> <button ion-button round outline large color="light" (click)="5">5</button> </ion-col> <ion-col> <button ion-button round outline large color="light" (click)="6">6</button> </ion-col> </ion-row> <ion-row> <ion-col> <button ion-button round outline large color="light" (click)="7">7</button> </ion-col> <ion-col> <button ion-button round outline large color="light" (click)="8">8</button> </ion-col> <ion-col> <button ion-button round outline large color="light" (click)="9">9</button> </ion-col> </ion-row> <ion-row> <ion-col></ion-col> <ion-col> <button ion-button round outline large color="light" (click)="0">0</button> </ion-col> <ion-col></ion-col> </ion-row> <ion-row> <ion-col></ion-col> </ion-row> <ion-row> <ion-col></ion-col> </ion-row> <ion-row> <ion-col></ion-col> </ion-row> <ion-row> <ion-col></ion-col> </ion-row> <ion-row> <ion-col></ion-col> </ion-row> <ion-row> <ion-col> <button ion-button class="submit-btn" full type="submit" [disabled]="!registerForm.form.valid">Login</button> </ion-col> </ion-row> </ion-grid> </form>
login.scss
page-login {
.login-content { background: rgb(60, 17, 17); .login-box { background: rgb(60, 17, 17); padding: 20px 20px 0px 20px; margin-top: 10px; } ion-row { align-items: center; text-align: center; } ion-item { border-radius: 30px !important; padding-left: 30px !important; font-size: 0.9em; margin-bottom: 10px; border: 1px solid #ffffff; border-bottom: 0px !important; box-shadow: none !important; } .submit-btn { background: rgb(0, 0, 0); border-radius: 30px !important; border: 1px solid #ffffff; } }
}
provider Auth-service.ts
import { Injectable } from ‘@angular/core’;
import {Observable} from ‘rxjs/Observable’;
import ‘rxjs/add/operator/map’;export class User {
name: string;
email: string;constructor(name: string, email: string) {
this.name = name;
this.email = email;
}
}@Injectable()
export class AuthServiceProvider {
currentUser: User;public login(credentials) {
if (credentials.password === null) {
return Observable.throw(“Insira o login.”);
} else {
return Observable.create(observer => {
// At this point make a request to your backend to make a real check!
let access = (credentials.password === “1234”);
this.currentUser = new User(‘xxx’, ‘xxx’);
observer.next(access);
observer.complete();
});
}
}
}
Thanks for your help.