Hello,

Petite note, pour plus tard.
Supposons que je doive utiliser Confluence et que je veuille un module de vote... Et que cette macro ne soit pas disponible !

Comment faire ?

Dans votre page Confluence, rajoutez un composant "HTML" (macro). Si c'est du JS, bon mettez le à la fin de la page, si c'est du css, mettez-le au début (soyons propres).

Confluence propose JQuery. Il est accessible via le raccourci AJS.xxx.

Si vous avez besoin de stocker des variables, l'API REST Confluence (version > 5.5) permet de stocker des properties.
Attention cependant, les seuls types REST dispos sont GET, POST, DELETE. Pas de PUT, ce qui veut dire qu'à chaque changement, il faut faire un DELETE - POST !

Voici un exemple codé rapidement. Ma property à stocker s'appelle "election" :

    <ac:layout-cell>
      <ac:structured-macro ac:macro-id="33e368de-3e17-4323-908c-2bb1639febe3" ac:name="html" ac:schema-version="1">
        <ac:plain-text-body><![CDATA[
<script type="text/javascript">
AJS.toInit(function() {

    var votes= {"votesPourA": 0, "votesPourB": 0};

    function deleteElections() {
       jQuery.ajax({
          contentType: 'application/json',
          type: 'DELETE',
          url: contextPath + "/rest/api/content/" + AJS.params.contentId + "/property/elections",
          success: function(response) {
              updateVotes();
          },
          error: function(error) {
              if(error.status== 401 || error.status== 402 || error.status== 403) {
                  alert("you need to be connected in order to vote")
              }
          }
        });
    }

    function updateVotes() {
        jQuery.ajax({
          contentType: 'application/json',
          type: 'POST',
          url: contextPath + "/rest/api/content/" + AJS.params.contentId + "/property",
          data: "{ \"key\" : \"elections\", \"value\" : \""+ JSON.stringify(votes).replace(/"/g, '\\"') +"\" }",
          success: function(response) {
            retrieveVotes();
          },
          error: function(error) {
              if(error.status== 401 || error.status== 402 || error.status== 403) {
                  alert("you need to be connected in order to vote")
              }
          }
        });
    }  

     function retrieveVotes() {
        jQuery.ajax({
          contentType: 'application/json',
          type: 'GET',
          url: contextPath + "/rest/api/content/" + AJS.params.contentId + "/property/",
          success: function(response) {
             response.results.forEach(function (item, index) {
                if(item.key == "elections") {
            votes = JSON.parse(item.value);
                    AJS.$("#voteAspan").text(votes.votesPourA + ' votes');
                    AJS.$("#voteBspan").text('votes.votesPourB + ' votes');
        }
            });
          }
        });
    }  

    AJS.$("#votePourAButton").click(function() {
         votes.votesPourA = votes.votesPourA + 1;
         deleteElections();
    });

    AJS.$("#votePourBButton").click(function() {
         votes.votesPourB = votes.votesPourB + 1;
         deleteElections();
    });

    setTimeout(() => { retrieveVotes() }, 2000);  // This is because AJS.params.contentId property is not available immediatly.

 });
</script>
]]></ac:plain-text-body>
      </ac:structured-macro>
    </ac:layout-cell>

Certains codes de retour HTTP sont gérés directement par le framework Angular et ne peuvent pas être récupérés au niveau de la requête. C'est notamment le cas pour le code 401, très souvent utilisé puisqu'il informe que l'utilisateur n'est pas loggué en session.

Une manip existante consiste à surcharger le comportement natif du composant HTTP en spécifiant le comportement sur le code erreur de votre choix.

Voici comment rajouter la gestion des codes 401 à une application Angular 4 :

app.module.ts

import { HttpModule, Http } from '@angular/http';

import { AppComponent } from './app.component';

import { AuthenticatedHttpService } from './services/AuthenticatedHttpService';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule
  ],
  providers: [ { provide: Http, useClass: AuthenticatedHttpService } ],
  bootstrap: [ AppComponent ]
})

authenticatedHttpService.ts

import { Injectable } from '@angular/core';
import { Request, XHRBackend, RequestOptions, Response, Http, RequestOptionsArgs, Headers } from '@angular/http';
import { Router, NavigationEnd, Event } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

/**
 * This class handles generically the error on authentication (code 401).
 */
@Injectable()
export class AuthenticatedHttpService extends Http {

  private router: Router;

  constructor(backend: XHRBackend, defaultOptions: RequestOptions, router: Router) {
    super(backend, defaultOptions);
    this.router = router;
  }

  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
    return super.request(url, options).catch((error: Response) => {
            if ((error.status === 401 || error.status === 403) && (window.location.href.match(/\?/g) || []).length < 2) {

                      //DO SOMETHING HERE
                      //exemple : 
                      if(window.location.href != '/login') {
                            this.router.navigate(['/login']);
                       }

            }
            return Observable.throw("request authentication");
        });
  }
}