Bastien Donjon

Développeur web à Bordeaux

Javascript Archive

Friday

9

September 2016

0

COMMENTS

Set local default on your Angular 2 RC6 app

Written by , Posted in Javascript, typescript

Juste set LOCALE_ID in your app.module.ts file :

import {NgModule, ReflectiveInjector, LOCALE_ID}      from '@angular/core';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        routing
    ],
    declarations: [
        AppComponent,
    ],
    providers: [
        {provide: LOCALE_ID, useValue: 'fr-FR'},
        BaseRequestOptions
    ],
    bootstrap: [AppComponent]
})

Tuesday

6

September 2016

0

COMMENTS

Round number with Angular 2, pipe and Typescript

Written by , Posted in Javascript, typescript

// round.pipe.ts
import {Pipe, PipeTransform} from "@angular/core";

/**
 *
 */
@Pipe({name: 'round'})
export class RoundPipe implements PipeTransform {
    /**
     *
     * @param value
     * @returns {number}
     */
    transform(value: number): number {
        return Math.round(value);
    }
}
// app.module.ts
@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        routing
    ],
    declarations: [
        AppComponent,
        RoundPipe
    ],
    providers: [
        BaseRequestOptions
    ],
    bootstrap: [AppComponent]
})
<!-- exemple -->
<span>{{ yournumber | round }}</span>

Builded with TypeScript 1.8 for Angular 2.RC5

Wednesday

14

January 2015

0

COMMENTS

[Javascript] For in extended Array prototype

Written by , Posted in Javascript

If you have extended Array prototype with functions like this :

Array.prototype.inArray = function(){
    console.log('inArray function');
}

The result of your ‘for’ will contain the properties and new functions.

var values = ['value1', 'value2'];
console.log(testArray);

// => ["value1", "value2", inArray: function]

for(var i in values){
    console.log(i + ' : ' + values[i]);
}

// =>
// 0 : value1
// 1 : value2
// inArray : function (){
//   console.log('inArray function');
// }

To fix this issue :

Case 1 with hasOwnProperty

for(var i in values){
    if (values.hasOwnProperty(i)) {
        console.log(i + ' : ' + values[i]);
    }
}

// =>
// 0 : value1
// 1 : value2

Case 2 with forEach

function logArrayElements(element, index, array) {
    console.log("a[" + index + "] = " + element);
}
values.forEach(logArrayElements);

// =>
// 0 : value1
// 1 : value2

Run on JsFiddle

Thursday

24

April 2014

0

COMMENTS

Basic authentification with AngularJs and Laravel

Written by , Posted in Javascript, PHP

Here’s a simple solution to install basic authentication system with AngularJs.

This is a subject that is not much developed. Probably because of the different authentication methods and functional needs.

For me I needed:
– Authentication Required
– To authenticate the user on my RESTful API
– Not to send the user name and password to each request
– Not to make cross-domain
– To have a persistent connection (F5 or close browser window)
– To block access to the application if the authentication server is lost

Laravel configuration

route.php
// Route with basic authentification and custom method
Route::group(
    [ 'before' => 'auth.basicCustom' ], function () {
        // User authenticate with sesssion
        Route::post('authenticate', function(){
            echo 'ok';
        });
    }
);

// Logout current user
Route::get('/logout', function(){
    Auth::logout();
});

// Check state of current user authentification
Route::get('/guest', function(){
    if(Auth::guest()){
        throw new \Symfony\Component\HttpKernel\Exception\UnauthorizedHttpException('x-Basic')
    }else{
        echo 'ok';
    }
});

filters.php

Route::filter(
    'auth.basicCustom', function () {
        $credentials = [ 'email' => Request::getUser(), 'password' => Request::getPassword() ];

        if (!Auth::check()) {
            if (!Auth::once($credentials)) {
                throw new \Symfony\Component\HttpKernel\Exception\UnauthorizedHttpException('x-Basic');
            }
        }
    }
);

Configuration AngularJs

app.js

angular.module('App', [
    'LocalStorageModule',
    'authServices'
  ])

  .config(['$httpProvider' ,
    function ($httpProvider) {

      /* -- Add your routes or states -- */

      // Authentification provider
      $httpProvider.interceptors.push('authInterceptor');
  }]);

authInterceptor.js

'use strict';

/**
 * Authentification Services
 */
angular.module('authServices', [])

  /**
   * Add callback after/befor http request
   */
  .factory('authInterceptor', ['$rootScope', '$q', '$window', 'localStorageService',
      function ($rootScope, $q, $window, localStorageService) {
        return {

          /**
           * Before request
           * @param config
           * @returns {*}
           */
          request: function (config) {
            config.headers = config.headers || {};
            return config;
          },

          /**
           * After success request
           * @param response
           * @returns {*|Promise}
           */
          response: function (response) {
            return response || $q.when(response);
          },

          /**
           * After error request
           * @param rejection
           * @returns {Promise}
           */
          responseError: function (rejection) {
            localStorageService.add('authenticate', false);
            $rootScope.authenticate = false;
            return $q.reject(rejection);
          }
        };
    }]);

userController.js

angular.module('App')

  .controller('UserCtrl', ['$rootScope', '$scope', '$http', '$window', 'localStorageService',
    function ($rootScope, $scope, $http, $window, localStorageService) {
      $scope.submit = function () {
        $http
          .post('/api/authenticate', {}, {
            // Forcage du type d'authentification
            headers: {
              Authorization : 'Basic ' + btoa($scope.user.username + ":" + $scope.user.password)
            }
          })
          .success(function (data, status, headers, config) {
            localStorageService.add('authenticate', true);
            $rootScope.authenticate = true;
            // Suppression des informations utilisation pour ne pas les garder en claire dans le scope
            delete $scope.user;
          })
          .error(function (data, status, headers, config) {
            localStorageService.add('authenticate', false);
            $rootScope.authenticate = false;
          });
      };
  }]);

directives.js

'use strict';

angular.module('App')
  .directive('ngLogin', function () {
    return {
      restrict: 'E',
      templateUrl: 'partials/login.html'
    };
  });

login.html

<div id="login-wrapper">
    <table>
        <tbody>
            <tr>
                <td>
                    <form id="login-form" role="form">
                        <div class="form-group"><a id="login-logo" href="#/"><img alt="Chilican" src="/images/logo.png" /></a></div>
                        <div class="form-group">
                              <label for="userEmail">Adresse email</label>
                              <input class="form-control" id="userEmail" type="email" name="user" placeholder="ex : email@domain.com" />
                        </div>
                        <div class="form-group">
                              <label for="userPassword">Mot de passe</label>
                              <input class="form-control" id="userPassword" type="password" name="pass" />
                        </div>
                        <button class="btn btn-default" type="submit">Se connecter</button></form>
                 </td>
             </tr>
       </tbody>
   </table>
</div>

sources :

Thursday

3

April 2014

0

COMMENTS

Basic authentification with EmberJs and Laravel

Written by , Posted in Javascript, PHP

The following example uses the ember-simple-auth plugin. This is an early implementation for the Basic authentication with Laravel session and RestFul Api.

Currently, it can :

  • Require authentication to the IndexRoute and DashboardRoute
  • Refresh authentication if you refresh the page

Not being a specialist EmberJs this code is incomplete like :

  • Retrieving information form
  • Error handling in a loss of authentication with an API call
  • Proper use of the accessToken property

For safety reasons use the HTTPS protocol.

I am at your service if you have any comments or questions.

Ember configuration

Template : login.hbs

</pre>
<form action=""><label for="identification">Login</label>
 {{input id='identification' placeholder='Enter Login' value=identification}}
 <label for="password">Password</label>
 {{input id='password' placeholder='Enter Password' type='password' value=password}}
 <button type="submit">Login</button></form>
<pre>

app.js


// Defining a custom authentication with Basic method.
var CustomAuthenticator = Ember.SimpleAuth.Authenticators.Base.extend({
    // Check session if you refresh browser (F5)
    restore: function(properties) {
        return new Ember.RSVP.Promise(function(resolve, reject){
            Ember.$.ajax({
                url: 'http://localhost.com/api/guest',
                success : function(datas){
                    resolve(properties);
                },
                error: function(datas){
                    reject();
                }
            });
         });
    },
    // Initialized authentification
    authenticate: function(options) {
        return new Ember.RSVP.Promise(function(resolve, reject){
            Ember.$.ajax({
                url: 'http://localhost.com/api/profile',
                success : function(datas){
                    resolve({accessToken : 'fddfgdfgfdgfg'});
                },
                headers: {
                    "Authorization": "Basic " + btoa("email4@domain.fr:password4")
                }
            });
        });
    },
    invalidate: function(options) {
        return new Ember.RSVP.Promise(function(resolve, reject){
            Ember.$.ajax({
                url: 'http://localhost.com/api/logout',
                success : function(datas){
                    resolve({accessToken : 'fddfgdfgfdgfg'});
                }
            }).then(function(response){
                Ember.run(resolve);
            }, function(xhr, status, error){
                Ember.run(reject);
            });
        });
    }
});

// Initialied a custom authentication.
Ember.Application.initializer({
    name: 'authentication',
    initialize: function(container, application) {
        container.register('authenticators:custom', CustomAuthenticator);
        Ember.SimpleAuth.setup(container, application);
    }
});

BackendWebapp.LoginController = Ember.Controller.extend(Ember.SimpleAuth.LoginControllerMixin, {
    authenticatorFactory: 'authenticators:custom'
});

// Add authentification for Route Index
BackendWebapp.IndexRoute = Ember.Route.extend(Ember.SimpleAuth.AuthenticatedRouteMixin);

// Add authentification for DashBoardIndex
BackendWebapp.IndexRoute = Ember.Route.extend(Ember.SimpleAuth.AuthenticatedRouteMixin);

Laravel configuration

route.php

// Logout current user
Route::get('/logout', function(){
    Auth::logout();
});

// Chech current authentification state
Route::get('/guest', function(){
    if(Auth::guest()){
        throw new \Symfony\Component\HttpKernel\Exception\UnauthorizedHttpException();
    }else{
        echo 'ok';
    }
});

filters.php

Change Authentification method “Basic” to “x-Basic” to desactivate authentification popup in Google Chrome with ajax request.

Route::filter(
    'auth.basicCustom', function () {
        $credentials = [ 'email' => Request::getUser(), 'password' => Request::getPassword() ];

        if (!Auth::once($credentials)) {
            throw new \Symfony\Component\HttpKernel\Exception\UnauthorizedHttpException('x-Basic');
        }
    }
);

sources :

Tuesday

16

April 2013

0

COMMENTS

Moment.js : Le couteau Suisse pour travailler avec les dates en javascript

Written by , Posted in Javascript

A en juger par le nombre d’étoiles que Moment.js a recueilli sur GitHub, vous le connaissez peut être déjà. Mais pour ceux qui ne l’ont pas, Moment.js est une librairie JavaScript bien documentée pour l’analyse, la validation, la manipulation et le formatage des dates.

La librairie peut s’utiliser dans le navigateur ou Node.js et prend en charge de nombreuses langues.

Voici quelques exemples d’utilisation :

moment().format('MMMM Do YYYY, h:mm:ss a');
// => April 16th 2013, 5:16:17 pm
moment().format('dddd');
// => Tuesday
moment().format("MMM Do YY");
// => Apr 16th 13
moment().format('YYYY [escaped] YYYY');
// => 2013 escaped 2013
moment().format();
// => 2013-04-16T17:18:04+02:00

La bibliothèque ne pèse que 5,5 kb et a récemment atteint la version 2.0, donc si vous n’avez pas regardé depuis un certain temps maintenant c’est le temps de vous mettre à jour.

Saturday

30

March 2013

0

COMMENTS

Gérer toutes les erreurs javascripts (Parse, ReferenceError et Exception)

Written by , Posted in Javascript

En production plusieurs cause peuvent entraîner l’arrêt ou le dysfonctionnement d’une application javascript. Avec l’augmentation des développements front end il est maintenant indispensable de savoir les éviter et les gérer pour une analyse ultérieur. Cet article traite de 3 niveaux de gestion à mettre en place.

1. Eviter les erreurs de syntaxe

C’est indéniablement l’erreur qui a la plus grave conséquence, l’arrêt total de l’application. Mais c’est aussi la plus simple à avoir si le code produit n’est pas rigoureusement testé.

Beaucoup d’IDE permettent d’éviter les erreurs grossières de syntaxe, mais nous ne somme jamais à l’abri d’un d’oubli… Ce n’est donc pas du luxe que d’analyser une dernière fois le code avant une mise en production. L’analyseur de code JSHINT permet de dresser un rapport sur l’état de votre code avant une éventuelle mise en production. Il ne s’arrête pas là puisqu’il vous fournira aussi un rapport contenant en autre les variables “undefined”, non utilisées, déclarées plusieurs fois …

2. Capturer les “exception”, les erreurs type ReferenceError ou toutes les erreurs provenant de librairies externes

En production, il peut être intéressant de garder un œil sur les erreurs qui peuvent être levées, qu’elles soit originaires de votre propre développement ou de librairies externes. Les navigateurs proposent l’événement window.onerror  levé à chaque erreurs javascript rencontrées. Il permet ainsi de détecter les exceptions, mais aussi les erreurs de référence ou toutes erreurs des librairies externes.

window.onerror = function(message, url, lineNumber) {
    console.info(message);
    console.info(url);
    console.info(lineNumber);
};

Attention au crossdomaine. Si cet évènement est levé par un script qui ne se trouve pas sur le même domaine/sous domaine alors le message sera “Script error.” et le code “0”. C’est une limitation volontaire des navigateurs pour une raison de sécurité.

Cette technique est donc le dernier filet avant de perdre la trace d’une erreur. Elle peut s’avérer peu précise pour les exceptions levées avec un objet. Limité aux paramètres “message”, “url”, “lineNumber”, les données contenues dans un object ne seront pas transmises par l’évènement. Pour une gestion plus poussées dans exceptions il faudra passer au point 3.

3 – Capturer les exceptions

Aucun autre moyen à ma connaissance existe pour capturer et traiter une exception. Il faudra passer pas un bloc try..catch général à votre application.

Couplé à une requête ajax, les 2 derniers points vous permettront de mettre en place un système de log de toutes les erreurs rencontrées coté client.