CODEWITHSUNDEEP
iosangularjssafariiphone-6
Gaj
Gaj

Reputation: 303

AngularJS Web App stopped working on iPhone 6

I have a AngularJS mobile web site that works really well on iPhone 5, iPhone 5s (both running iOS 8) and also on my iPad (iOS 8 as well). However, the 'login' button does not work on the iPhone 6 (e.g. you click it and nothing happens). That exact same website works on the other iOS mobile platforms no problems at all. This doesn't make sense to me because they are all iOS 8?

On a side note, the website does work on an iPhone 6 emulator via Browser Stack but just not on a physical iPhone 6. I am not sure if it is a default setting on the iPhone 6 but I couldn't find anything.

Here is the code that is invoked when the login button is clicked:

The code snippet for the mark-up is:

<div class="col-sm-6 bordered-form field-padding">
  <form name="loginForm" role="form" novalidate>
    <div class="row">
      <div class="col-sm-12">
        <h4>Existing employers login</h4>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12 form-group">
        <input type="email" name="email" ng-model="user.email" placeholder="Please enter your email address" class="validatedInputField" required>
          <span ng-show="loginForm.email.$valid" class="glyphicon glyphicon-ok icon-success"></span>
          <span ng-show="loginForm.email.$invalid && loginForm.email.$dirty" class="glyphicon glyphicon-remove icon-invalid"></span>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12 form-group">
         <input type="password" name="password" ng-model="user.password" placeholder="Please enter your Password" class="validatedInputField" required ng-minlength="6">
          <span ng-show="loginForm.password.$valid" class="glyphicon glyphicon-ok icon-success"></span>
          <span ng-show="loginForm.password.$invalid && loginForm.password.$dirty" class="glyphicon glyphicon-remove icon-invalid"></span>
      </div>
      <div class="col-sm-12">
        <button class="btn btn-success" ng-disabled="loginForm.$invalid" ng-click="authenticate()"><span class="glyphicon glyphicon-thumbs-up"></span>&nbspLogin</button>
      </div>
    </div>
  </form>
</div>

The angular function is here:

$scope.authenticate = function(){

var credentials = "Basic " + $window.btoa( this.user.email + ":" + this.user.password );

 $http.get( ENV.apiEndpoint + '/auth/basic/', 
     {headers: {'Authorization': credentials}})

    .success( function(data, status, headers, config){

        AuthorisationService.LoginUser(data);

    }).
    error( function(data, status, headers, config) {
        ErrorLoggingService.logError( data, status, headers, config );
    }); 
}

Angular version: 1.2.15

Bootstrap version: ~3.0.3

Has anyone experienced this problem on the iPhone 6?

As I don't have access to a physical iPhone 6, I am having some problems isolating the issue. If someone has access to an iPhone 6, I could give them access to a test account on my website and they could replicate the issue really quickly.

Any help would be greatly appreciated.

Upvotes: 3

Views: 4228

Answers (1)

Gaj
Gaj

Reputation: 303

I debugged this on the actual iPhone 6 that was having the problem and I saw that it was failing when the token returned by the server was being stored in session storage.

I called up Apple support and spent a fair bit of time on the phone with them. The page was working on other iPhone 6 devices but not this one. After trying a few different settings and confirming it was working on Chrome, the fantastic Apple support person asked me to see if the page was set to 'private'.

On the bottom right of the safari browser, you click an icon and you can set individual websites to 'private'. Unchecking this made the website work and I could store the token in session storage. It appears that my client accidentally set the website to 'private' and this was causing the issue.

Hopefully this will save someone else some time with a similar issue. Full credit to Apple support who spent over an hour to resolve this issue.

Upvotes: 5

Related Questions