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;
}

How can I reload page using Ionic 2

Hi everyone I have a problem with my login form on Ionic 2.
When I do login token is saved on storage and redirect to another page, but user's data is not shown on Android or IOS because token is not available. I discover that I need to reload the page, on local environment 'location.reload()' works perfect and user's data is available but does not work when I pusblish on Google Play and App Store.
I've tried some ways to reload it but does not work on Android and IOS. What can I do?
Login function
loginForm(){
const data = {
"username" : this.login.value.username,
"email" : this.login.value.username,
"password" : this.login.value.password,
}
this.dataService.loginUser(data).subscribe(
(data) => {
let token = data.key;
this.dataService.checkAccessUserGroup(token).subscribe(
(data) => {
if(data[0] == 200){
this.storage.set('access_token', token);
//this.appCtrl.getRootNav().setRoot(HomePage);
//this.navCtrl.setRoot(HomePage);
//this.appCtrl.getRootNav().setRoot(this.navCtrl.getActive().component);
//this.navCtrl.push(HomePage);
//this.appCtrl.getRootNav().push(IndexPage);
//location.reload()
this.navCtrl.setRoot(HomePage).then(() =>{
this.navCtrl.popToRoot();
});
}
if(data[0] == 500){
this.generateAlert("Error",'No tienes permisos adecuados para acceder. Ponte en contacto con el administrador de tu Deck.');
}
},
(err) => {
if(err.status == 400){
this.generateAlert("Error",'No hemos podido verificar tus datos. Intentalo de nuevo');
}
}
);
},
(err) => {
if(err.status == 400){
this.generateAlert("Error",'Usuario o constraseña no válido. Intentalo de nuevo');
}
}
);
}
Login html
<ion-content padding id="container-home" style="background-image:url('assets/img/bg-login.png')">
<ion-row>
<ion-img class="logo-md" width="120" height="120" src="assets/img/mydecklogocolor.png"></ion-img>
</ion-row>
<ion-row id="auth-login">
<ion-col col-12 no-padding>
<ion-row class="header">
<h3>Ingresa</h3>
</ion-row>
<form id="login-container" [formGroup]="login" (ngSubmit)="loginForm()">
<ion-row>
<ion-item>
<ion-input type="text" formControlName="username"
class="input-md"placeholder="Correo electrónico / usuario"></ion-input>
</ion-item>
<ion-item>
<ion-input type="password" formControlName="password"
class="input-md" placeholder="Contraseña"></ion-input>
</ion-item>
</ion-row>
<ion-row>
<button ion-button class="auth-btn" type="submit" [disabled]="!login.valid">Ingresar</button>
</ion-row>
</form>
<ion-row>
¿Olvidaste tu contraseña?
</ion-row>
</ion-col>
</ion-row>
</ion-content>

In case of Ionic Storage, it returns a promise for both set and get functions. So they are asynchronous.
So you could try:
this.storage.set('access_token', token).then(()=>{
this.navCtrl.setRoot(HomePage);
});
You dont need to "refresh the page". You can simply set Home Page as root as soon as you are done with saving the token.

Edit table content and save it to database

I have a HTML table that is editable. I already used contenteditable but after that I just have no idea how to save the changes. It only saves while I am on that page but after I reload it sets page to initial value. The table is project for school. Simple solution is much appreciated since I don't know much about android app development. Here is my code:
<head>
<style>
th{
background-color:lightblue;
font-weight:bold;
font-size:20p‌​t
}
.open{
color:black;
background-color:lightblue;
font-size:15pt
}
.chapel{
color:blue;
background-color:lightblue;
font-size:10pt‌​
}
</style>
</head>
<body>
<table border=7 width=10%>
<tr></tr>
<tr>
<td align=center rowspan=2 class="open"><td>
</tr>
</table>
<div id="example-one" contenteditable="true"></div>
</body>

jQuery(document).ready(function($) {
jQuery("#savebtn").click(function(){
$.ajax({
url: 'ajax_url_address',
type: "POST",
cache: false,
dataType: 'json',
data : {
information : jQuery('#content').html(),
},
success: function (response) {
if(response){
// jQuery('#UserCityId').html(response.content);
alert('save successfull');
}else{
alert('not save');
}
}
});
});
});
user ajax to post all content from DIV and save
<div id="content">
<table> {table content heare}</table>
</div>

JSON load issue with angular.js in phonegap

I'm trying to load JSON from my wordpress-based website. I'm using phonegap to create an app on android, ios and windows. I'm using this js for the JSON, calling for business hours (shours1, shours2, shours3):
(function(){
'use strict';
var app = angular.module('app', ['onsen', 'angular-images-loaded', 'ngMap', 'angular-carousel']);
app.controller('restaurantController', function($http, $scope, $compile, $sce){
$scope.getHours = function(){
$scope.isFetching = true;
$scope.shours1 = '';
$scope.shours2 = '';
$scope.shours3 = '';
$http.jsonp('http://signsrestaurant.ca/api/get_posts/?post_type=restaurant&posts_per_page=-1&callback=JSON_CALLBACK').success(function(response) {
// Get's the first restaurant
$scope.restaurantJson = response.posts[0];
$scope.isFetching = false;
console.log( $scope.restaurantJson.custom_fields.shours1[0] );
$scope.shours1 = $scope.restaurantJson.custom_fields.shours1[0];
$scope.shours2 = $scope.restaurantJson.custom_fields.shours2[0];
$scope.shours3 = $scope.restaurantJson.custom_fields.shours3[0];
});
}
});
})();
Here is my html:
<ons-page ng-controller="restaurantController" ng-init="getHours()">
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggle()"><ons-icon icon="ion-navicon-round" fixed-width="false"></ons-icon></ons-toolbar-button>
</div>
<div class="center">Location</div>
<div class="right" ng-show="isFetching">
<ons-toolbar-button><ons-icon icon="ion-loading-c" fixed-width="false" ></ons-icon></ons-toolbar-button>
</div>
</ons-toolbar>
<div class="app-page">
<div class="app-page-photo">
<ons-row class="app-map">
<ons-col>
<map center="[43.664639, -79.384649]">
<marker
position="[43.664639, -79.384649]"
title="Signs Restaurant & Bar"
animation="Animation.BOUNCE"
visible="true" ></marker>
</map>
</ons-col>
</ons-row>
<ons-list class="app-photo-buttons">
<ons-list-item modifier="action-buttons">
<ons-row class="action">
<ons-col class="action-col">
<div class="action-icon"><ons-icon icon="ion-ios-star-half"></ons-icon></div>
<div class="action-label">Rate</div>
</ons-col>
<ons-col class="action-col">
<div class="action-icon"><ons-icon icon="ion-bookmark"></ons-icon></div>
<div class="action-label">Favorite</div>
</ons-col>
<ons-col class="action-col">
<div class="action-icon" onclick="window.open('tel:647-428-3076', '_system', 'location=yes')"><ons-icon icon="ion-ios-telephone"></ons-icon></div>
<div class="action-label" onclick="window.open('tel:647-428-3076', '_system', 'location=yes')">Call</div>
</ons-col>
<ons-col class="action-col">
<div class="action-icon" onclick="window.open('http://maps.google.com/maps?q=43.664639,-79.384649', '_system', 'location=yes'), window.location('maps://maps.apple.com/?q=43.664639,-79.384649')"><ons-icon icon="ion-map"></ons-icon></div>
<div class="action-label" onclick="window.open('http://maps.google.com/maps?q=43.664639,-79.384649', '_system', 'location=yes'), window.location('maps://maps.apple.com/?q=43.664639,-79.384649')">Directions</div>
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
<ons-list modifier="inset" style="margin-top: 10px">
<ons-list-item>
<div class="app-open-desc">
<ons-icon icon="ion-android-clock"></ons-icon>
Monday <span class="label label-danger">{{ shours1 }}</span>
</div>
</ons-list-item>
<ons-list-item>
<div class="app-open-desc">
<ons-icon icon="ion-android-clock"></ons-icon>
Tuesday-Thursday <span class="label label-default">{{ shours2 }}</span>
</div>
</ons-list-item>
<ons-list-item>
<div class="app-open-desc">
<ons-icon icon="ion-android-clock"></ons-icon>
Friday-Sunday <span class="label label-default">{{ shours3 }}</span>
</div>
</ons-list-item>
</ons-list>
</div>
</div>
</ons-page>
It seems to be working partially. The shours do load, but only after I rotate my android or click on the menu. It doesn't load off-hand immediately. It basically needs some sort of a refresh to get it to load. I would appreciate it if someone can help me out with this.

Thanks a lot to Andreas Argelius. I wrapped the
$scope.shoursX
in
$scope.$evalAsync(function() { ... })
and that did it.
EDIT: I spoke too soon. It worked and it didn't. The issue still persists.

Cordova android camera plugin doesn't show image after capturing

I am using cordova 3.5 and want to take a picture from camera and show it on bootstrap modal. In my application there is a button that will show bootstrap modal and let you choose to take a picture from camera or gallery. After you choose you will send to camera (if you choose camrea) or gallery (if you choose gallery). It works fine until this step. But after I capture from my camera or choose image from gallery, It doesn't show any image. I don't know what to do now..
This is my code for camera and gallery, I write it on head
var pictureSource; // picture source
var destinationType; // sets the format of returned value
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
var devID;
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
//$('#header').append("pic:" + pictureSource + " dest:" + destinationType);
}
function onPhotoDataSuccess(imageData) {
$("#addPhotoModal").modal('hide');
$("#checkinModal").modal('show');
var smallImage = document.getElementById('smallImage');
smallImage.style.display = 'block';
smallImage.src = "data:image/jpeg;base64," + imageData;
}
function onPhotoURISuccess(imageURI) {
$("#addPhotoModal").modal('hide');
$("#checkinModal").modal('show');
var largeImage = document.getElementById('smallImage');
largeImage.style.display = 'block';
largeImage.src = imageURI;
}
function capturePhoto() {
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
destinationType: destinationType.DATA_URL });
}
function getPhoto(source) {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source });
}
function onFail(message) {
$('#header').append("fail" + message);
alert('Failed because: ' + message);
}
This is my first modal to choose between camera and gallery:
<div class="modal fade rate-modal-box" id="addPhotoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title share-modal-title" id="myModalLabel">Add Photo</h4>
</div>
<div class="modal-body photo-modal-body">
<button id="camera-btn" type="button" class="btn btn-default photo-btn">Take a Photo</button><br />
<button id="gallery-btn" type="button" class="btn btn-default photo-btn">Photo Gallery</button>
</div>
<div class="modal-footer share-modal-button">
<button type="button" class="btn btn-default share-btn" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
This is the second modal that will show the image from camera and gallery
<div class="modal fade rate-modal-box" id="checkinModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title share-modal-title" id="myModalLabel">Check In At</h4>
</div>
<div class="modal-body photo-modal-body">
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
<textarea class="form-control share-text-comment" id="comment-share" name="comment" placeholder="What do you want to share"></textarea>
</div>
<div class="modal-footer share-modal-button">
<button id="save-checkin" type="button" class="btn btn-default share-btn">Submit</button>
<button type="button" class="btn btn-default share-btn" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
And here is the function to call the bootstrap modal, I write this on body
function startModalPhoto(){
$("#addPhotoModal").modal('show');
$("#camera-btn").click(function(){
capturePhoto();
});
$("#gallery-btn").click(function(){
getPhoto(pictureSource.PHOTOLIBRARY);
});
}
I hope you can help me with this.. Thanks before..

For the Gallery image, there is nowhere for the image to show:
var largeImage = document.getElementById('largeImage');
...
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
Will that display anything if you make that change?
Also, I've had much more success with FILE_URI than DATA_URL in the past when getting camera/gallery images to display in app.