Develop Reference

Trigerring the password saving by Google when logging In

Google password saving
I have a problem with the password saving system on my Ionic 5 / Vue.js 3 application (it will only be used on Android devices) :
The Google pop-up as in the image above is not shown at the right moment.
It sometimes doesn't show up at all, or it is triggered when I press the system "Home" or "Recent app" Android buttons.
Here is a snippet of my Login.vue component.
<form method="post" #submit.prevent="handleSubmit" autocomplete="on">
<ion-item lines="full">
<ion-label position="floating">Email</ion-label>
<ion-input name="email" v-model="email" type="email" pattern="email" required autocomplete="email"
inputmode="email" #blur="v$.email.$touch"></ion-input>
</ion-item>
<ion-item lines="full">
<ion-label position="floating">Password</ion-label>
<ion-input name="password" v-model="password" :type="passwordType" pattern="password" required
autocomplete="current-password" minLength="8" maxLength="16" #blur="v$.password.$touch"
#keyup.enter="handleSubmit"></ion-input>
<ion-button class="custom-hide" slot="end" #click="hideShowPassword()">
<ion-icon :icon="hidePassword ? eyeOutline : eyeOffOutline"></ion-icon>
</ion-button>
</ion-item>
<ion-button class="login-button" #click="handleSubmit"
type="submit" :disabled="!isAllowedSubmit"
color="primary" expand="block">
Login
</ion-button>
</form>
I'm using the #vuelidate/core library for form validation.
In the handleSubmit function, I look for errors, then if there is no error, I navigate to my Home page.
async handleSubmit() {
this.isAllowedSubmit = false;
this.v$.$touch();
if (this.v$.$error) {
setTimeout(() => {
this.isAllowedSubmit = true;
}, 1000);
return;
}
else {
//API call, no problem here
const tryLogin = await this.submitForm();
if (tryLogin) {
this.v$.$reset();
await this.router.replace("/logged");
await this.router.push("/modules/home");
}
return;
}

HTTP works in web but not working in actual android device ( IONIC mobile development )

Problem: my ngfor works perfecty on running web, but when ı emulate my app on real device, its just not working. ı looked all over
the internet for solution but couldnt find, just as a close one(thats
what ı think), some says this is ngZone issue, and ı dont have any
idea what is it.
my service
getMenuObject(): Observable<any> {
return this.http
.post("xxxxxxx.xxxxxxxxx.xxxxxxxxx.xxxxxxxxxxx",{ HotelId:25, GroupId:9 });
}
my .ts
data: Array<any>=[]
ngOnInit(){
this.httpService.getMenuObject().toPromise().then(x=>{
this.data = x;
console.log(this.data)
if(x.IsGroup==true){
this.splashScreen.hide();
} else{
this.router.navigate(['folder/Inbox']);
}
});
}
my html:
<ion-card *ngFor="let otel of data.MobileHotelDefinitions" style="margin: 40px 0;border-radius: 0;">
<ion-card-header style="padding: 0;">
<ion-img (click)="goToHotel()" [src]="otel.MobileApplicationDefinition.GroupImageUrl"></ion-img>
<div class="otelName">
<div style="flex: 1;">{{otel.Name}}</div>
<div style="color: goldenrod;">★★★★★</div>
</div>
</ion-card-header>
<ion-card-content>
Keep close to Nature's heart... and break clear away, once in awhile,
and climb a mountain or spend a week in the woods. Wash your spirit clean.
</ion-card-content>
</ion-card>
my console:
my app on web browser (ionic serve --o):
my app on real android device (huawei android 9):

The data variable isn't the array. The MobileHotelDefinitions property inside it is the array. So it's better to define it's type as any instead of Array.
Is there any specific need for converting the HTTP observable to a promise? Try to directly use the observable.
Include a *ngIf check in the template before using the properties.
Notice the use of safe navigation operator ?. in the template. It checks if the parent property is defined before trying to access it's child properties.
Controller
data: any; // <-- `any` here
ngOnInit() {
this.httpService.getMenuObject().subscribe(
response => {
this.data = response;
console.log(this.data);
if (response.IsGroup == true) {
this.splashScreen.hide();
} else {
this.router.navigate(['folder/Inbox']);
}
},
error => {
// always good practice to handle HTTP errors
}
);
}
Template
<ng-container *ngIf="data"> <!-- check here -->
<ion-card *ngFor="let otel of data.MobileHotelDefinitions" style="margin: 40px 0;border-radius: 0;">
<ion-card-header style="padding: 0;">
<ion-img (click)="goToHotel()" [src]="otel?.MobileApplicationDefinition?.GroupImageUrl"></ion-img>
<div class="otelName">
<div style="flex: 1;">{{otel?.Name}}</div>
<div style="color: goldenrod;">★★★★★</div>
</div>
</ion-card-header>
<ion-card-content>
Keep close to Nature's heart... and break clear away, once in awhile,
and climb a mountain or spend a week in the woods. Wash your spirit clean.
</ion-card-content>
</ion-card>
</ng-container>
If the issue still persists then the variable update is outside the Angular Zone. Try to wrap the call in NgZone.run() function to run the statement within the Angular zone.
import { Component, NgZone, OnInit } from '#angular/core';
export class AppComponent implements OnInit {
data: any;
constructor(private zone:NgZone) { }
ngOnInit() {
this.httpService.getMenuObject().subscribe(
response => {
this.zone.run(() => this.data = response); // <-- assign the value within Angular zone and trigger change detection
console.log(this.data)
if (response.IsGroup == true) {
this.splashScreen.hide();
} else {
this.router.navigate(['folder/Inbox']);
}
},
error => {
// always good practice to handle HTTP errors
}
);
}

My problem was I was trying to use httpClient(angular one), but on mobile you need ionic http, So There are 2 http:
import { HTTP } from '#ionic-native/http/ngx'; //for mobile http
requests you have to use this (you can install it from here)
import { HttpClient } from "#angular/common/http"; //for browser
development you have to use this.
And it was hard to implement the correct http way for mobile, to help you I leave an example mobile http request here. (to prevent having couple of http errors)
My Service.ts
constructor(private http:HTTP, private httpWEB: HttpClient) {
this.http.setHeader('*', 'Access-Control-Allow-Origin' , '*');
this.http.setHeader('*', 'Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
this.http.setHeader('*', 'Accept','application/json');
this.http.setHeader('*', 'content-type','application/json');
this.http.setDataSerializer('json');
}
post(url:string,body:any):Promise<any>{
return new Promise((resolve, reject) => {
this.http.setDataSerializer('json');
this.http.post(url, body, {}).then(res =>{
resolve(JSON.parse(res.data));
})
.catch(err =>{
reject(err);
});
});
}
in Config.xlm update this section to prevent clearTextTraffic error for http request
<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
<application android:networkSecurityConfig="#xml/network_security_config" />
<application android:usesCleartextTraffic="true" />
</edit-config>
And also update your network_securty_config.xml
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<domain-config cleartextTrafficPermitted="true">
<domain includeSubdomains="true">localhost</domain>
<domain includeSubdomains="true">testapi.xxx.com</domain>
</domain-config>
</network-security-config>

How to display data in ionic 3?

I cannot display data in ionic. How can I display the data in ionViewWillEnter and using post method in laravel API?
I have tried to call the data using console.log to check if the data is there or not. I tried "console.log(this.id);" before this.authService in ionViewWillEnter as shown below.
kprofile.ts
ionViewWillEnter(){
this.authService.postData(this.id,'viewProfileClinic').then((result) => {
this.responsedata = result;
console.log(result);
this.usersClinic.email = this.responsedata.email;
this.usersClinic.telno = this.responsedata.telno;
this.clinic_regno = this.responsedata.clinic_regno;
this.clinic_name = this.responsedata.clinic_name;
this.site = this.responsedata.site;
this.clinic_address = this.responsedata.clinic_address;
this.zip = this.responsedata.zip;
this.city = this.responsedata.city;
this.state = this.responsedata.state;
},(err) =>{
});
}
as I console.log result is shown
no clinic data
as I run ionic serve.
below is the api
.api
//VIEW ALL CLINIC PROFILE
public function viewProfileClinic(Request $request)
{
$id =$request->id;
$clinicID = $request->clinic_id;
$count = RegisterClinic::where('clinic_id',$clinicID)->count();
if($count == 1)
{
$clinicData = RegisterClinic::where('clinic_id',$clinicID)->first();
$callEmailTelno = User::where('id',$clinicData->uid)->first();
$datamsg = response()->json([
'calldata' => 'Email:'.$callEmailTelno->email.' Telno:'.$callEmailTelno->telno
.' Clinicregno:'.$clinicData->clinic_regno.' Clinicname:'.$clinicData->clinic_name
.' Site:'.$clinicData->site.' Clinicaddress:'.$clinicData->clinic_address
.' Zip:'.$clinicData->zip.' City:'.$clinicData->city.' State:'.$clinicData->state
]);
return $datamsg->content();
}
else{
$datamsg = response()->json([
'error' => array("text"=>"No clinic data.")
]);
return $datamsg->content();
}
}
This is what I want it to be displayed in ionic in .html file.
.html
<ion-list>
<p>Clinic Profile</p>
<form #f="ngForm" (ngSubmit)="onSubmit(f)" class="list-form">
<ion-item>
<ion-label stacked>Clinic Email</ion-label>
<ion-input type="text" name="usersClinic.email" [(ngModel)]="usersClinic.email">{{usersClinic.email}}</ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Telephone no.</ion-label>
<ion-input type="text" name="usersClinic.telno" [(ngModel)]="usersClinic.telno">{{usersClinic.telno}}</ion-input>
</ion-item>
<button ion-button color="light" class="transparent-button" [disabled]="!f.valid" text-center round>
Edit
</button>
</form>
<ion-item>
<p>Clinic Registration no</p>
{{clinic_regno}}
</ion-item>
<ion-item>
<p>Clinic Name</p>
{{clinic_name}}
</ion-item>
<ion-item>
<p>Clinic Site</p>
{{site}}
</ion-item>
<ion-item>
<!-- <p>Clinic Address</p> -->
<ion-label primary>Clinic Address</ion-label>
<!-- <ion-textarea>{{clinic_address}},{{zip}},{{city}},{{state}}.</ion-textarea> -->
<ion-textarea rows="6" disabled [value]="clinic_address" ></ion-textarea>
</ion-item>
</ion-list>
the api response in postman is as below.
{"calldata":"Email:jumin#hu.cm Telno:0148232323 Clinicregno:87234824 Clinicname:Klinik Ikhlas Site:www.wuu Clinicaddress:UTC Central Market Zip:87000 City:Labuan State:Wilayah Persesekutuan Labuan"}
Below is my
authService.ts
file which I put my postData method.
postData(credentials, type) {
let headers = new Headers({
'Content-Type': 'application/json'
});
let options = new RequestOptions({ headers: headers });
return new Promise((resolve, reject) => {
this.http.post(apiUrl + type, JSON.stringify(credentials), options)
.toPromise()
.then((response) => {
console.log('API Response : ', response.json());
resolve(response.json());
})
.catch((error) => {
console.error('API Error : ', error.status);
console.error('API Error : ', JSON.stringify(error));
reject(error.json());
});
});
}

Not sure if this would work for you, but for my API response it came in as json also but instead of me extracting it as json I ran:
this.responsedata = (JSON.stringify(result));
Then,
this.responsedata = JSON.parse(this.responsedata);
Also, another possibility may be the API not formatting the data correctly. I'm sure you've echoed your data on the API, but there may be an issue with something there because you're getting the else callback. So maybe start with the if statement.
P.S.- Sometimes the headers can be a pain if not formatted correctly, if you're passing a token or any type of data in your headers sometimes Angular/Ionic is a little more sensitive than postman to the data.

ionic2: facebook album cover photo

I am able to fetch all the albums from Facebook User's account. I am trying to show it in Grid but I need cover photo of Album as well. I tried below code:
<ion-grid>
<div *ngFor="let album of albums; let i = index;">
<ion-row *ngIf="i % 3 === 0">
<ion-col col-4 *ngIf="i < albums.length">
<ion-card>
<img src="https://graph.facebook.com/{{albums[i].id}}/picture?type=album" />
<div class="card-title">{{ albums[i].name }}</div>
</ion-card>
</ion-col>
<ion-col col-4 *ngIf="i+1 < albums.length">
<ion-card (click)="albumClicked(album)">
<img src="https://graph.facebook.com/{{albums[i+1].id}}/picture?type=album" />
<div class="card-title">{{ albums[i+1].name }}</div>
</ion-card>
</ion-col>
<ion-col col-4 *ngIf="i+2 < albums.length">
<ion-card (click)="albumClicked(album)">
<img src="https://graph.facebook.com/{{albums[i+2].id}}/picture?type=album" />
<div class="card-title">{{ albums[i+2].name }}</div>
</ion-card>
</ion-col>
</ion-row>
</div>
</ion-grid>
This is how I get albums:
FacebookService.ts:
...
getUserAlbums(userID) {
return this.facebook.api("/v2.9/" + userID + "/albums", []);
}
...
FacebookAlbumsPage.ts:
...
getUserAlbums(facebookUserId) {
this.showLoading();
this.facebookUserDetails.getUserAlbums(facebookUserId).then((res) => {
this.albums = res.data;
this.hideLoading();
});
}
...
While getting image I get below error:
Failed to load resource: the server responded with a status of 400 ()
Does anyone know how to get facebook albums with their cover photos using Ionic2 ?
Edit:
This is the url that is passed in img src:
https://graph.facebook.com/186028675250734/picture?type=album
But when I opened the link directly into browser, it returned below error:
{
"error": {
"message": "Unsupported get request. Object with ID '186028675250734' does not exist, cannot be loaded due to missing permissions, or does not support this operation. Please read the Graph API documentation at https://developers.facebook.com/docs/graph-api",
"type": "GraphMethodException",
"code": 100,
"fbtrace_id": "BtQDS1csSgu"
}
}

Why isn't my ionic modal opening on an android 4.4 device?

I am using ionic framework with a android device (with cordova, of course). There's a modal I'm using for settings and stuff, it opens well on desktop browser with
`inic serve`
However, after build this, either with
cordova build android or ionic build android
it won't open again, not only is it in an real android device, but also in the desktop browser.
Here's the code:
for the html view:
<ion-modal-view>
<ion-header-bar>
<h1 class="title">Settings</h1>
<div class="buttons">
<button class="button button-clear" ng-click="hideModal()">Done</button>
</div>
</ion-header-bar>
<ion-content class="padding">
<form name="settingsForm" novalidate>
<ion-item class="item-input">
<label class="input-label">IP Address</label>
<input type="text" ng-model="vm.ipAddress" name="ipAddr" required />
</ion-item>
<ion-item class="item-input">
<label class="input-label">Port Number</label>
<input type="text" ng-model="vm.portNum" name="portNum" required />
</ion-item>
<a class="button button-block button-positive" ng-click="vm.startCommand()"
ng-disabled="settingsForm.ipAddr.$invalid || settingsForm.portNum.$invalid && !vm.isListening">{{vm.btnString}}</a>
</form>
<br />
<ion-list>
<ion-item class="item-divider">Messages from socket ws://{{vm.ipAddress}}:{{vm.portNum}} -></ion-item>
<ion-item class="item-text-wrap" ng-repeat="msg in vm.msgs">{{msg}}</ion-item>
</ion-list>
</ion-content>
</ion-modal-view>
for the controller:
/// <reference path="../_reference.ts" />
module app.settings {
interface IModelScope extends angular.IScope {
model: Ionic.IModal;
showModal(): void;
hideModal(): void;
}
interface ISettingsCtrl {
ipAddress: string;
portNum: number;
msgs: string[];
btnString: string;
startCommand(): void;
}
class SettingsCtrl implements ISettingsCtrl {
ipAddress: string;
portNum: number;
msgs: string[] = [];
btnString: string = 'Start';
private _gotDirective: boolean;
private _isListening: boolean = false;
static $inject = ['$scope', 'SocketSvc', '$ionicPopup', '$ionicModal', '$ionicLoading'];
constructor(private _scope: IModelScope,
private _socketSvc: app.service.ISocketSvc,
private _ionicPopup: Ionic.IPopup,
private _ionicModel: Ionic.IModal,
private _ionicLoading: Ionic.ILoading) {
_ionicModel.fromTemplateUrl('../../settings/settings.html', {
scope: _scope,
animation: 'slide-in-up'
}).then(m => {
_scope.model = m;
});
_scope.showModal = () => {
_scope.model.show();
}
_scope.hideModal = () => {
_scope.model.hide();
}
}
angular.module('app')
.controller('SettingsCtrl', SettingsCtrl);
}
yes, i'm using typescript

#GuillemVicens well, it turns out the ionic framework starter gives you a nice place to start but not cordova-friendly enough. In the ionic project, I put my settings.html under the
/www/settings/settings.html
and settings.ctrl.ts
/www/scripts/settings/settings.ctrl.ts
So I use the
_ionicModel.fromTemplateUrl('../../settings/settings.html', {
scope: _scope,
animation: 'slide-in-up'
}
to try to specify the modal's template. However in cordova, it package all the
www
into the
assets/www
witch should be fine because it still got all this hierarchy (which turns out not).
All the scripts turns to run just under the
/assets/www
directory, so if you switch your
../../settings/settings.html into ./settings/settings.html
it'll work just fine.
For who don't have much time, the scripts run in browser just under it's own directory, but in android, it run under the /www/ directory, so make sure you use the relative addressing right.