diff --git a/assets/zip/personnal-data-export-navigator/assets/css/main.css b/assets/zip/personnal-data-export-navigator/assets/css/main.css
index e11ae8f6..9c4797a0 100644
--- a/assets/zip/personnal-data-export-navigator/assets/css/main.css
+++ b/assets/zip/personnal-data-export-navigator/assets/css/main.css
@@ -4,7 +4,9 @@
* @author Pierre HUBERT
*/
-
+/**
+ * Global rules
+ */
.sidenav.sidenav-fixed {
/*transform: unset;*/
/*margin-top: 80px;*/
@@ -16,4 +18,24 @@ main {
main .container {
display: none;
+}
+
+h1 {
+ font-size: 150%;
+}
+
+
+/**
+ * User information rules
+ */
+.user-information-table td:first-child {
+ font-weight: bold;
+}
+
+.account-image {
+ width: 50px;
+}
+
+.background-image {
+ max-width: 100px;
}
\ No newline at end of file
diff --git a/assets/zip/personnal-data-export-navigator/assets/js/main.js b/assets/zip/personnal-data-export-navigator/assets/js/main.js
index 472f58eb..6e9afce3 100644
--- a/assets/zip/personnal-data-export-navigator/assets/js/main.js
+++ b/assets/zip/personnal-data-export-navigator/assets/js/main.js
@@ -4,6 +4,100 @@
* @author Pierre HUBERT
*/
+/**
+ * This object will contains all the exported data
+ * once it will have been decoded by the JSON parser
+ * of the browser
+ */
+let data;
+
+/**
+ * Get and return an element specified by its ID
+ *
+ * @param {String} id The ID of the element to get
+ * @return {HTMLElement} Target element
+ */
+function byId(id){
+ return document.getElementById(id);
+}
+
+/**
+ * Set the content of an HTML element queried by
+ * its ID
+ *
+ * @param {String} id The ID of the element to get
+ * @param {String} html HTML content to apply
+ */
+function setInnerHTMLById(id, html){
+ byId(id).innerHTML = html;
+}
+
+/**
+ * Set the content of an HTML element queried by
+ * its ID for a specified boolean
+ *
+ * @param {String} id The ID of the element to get
+ * @param {Boolean} bool The boolean to apply
+ */
+function setBoolInnerHTMLById(id, bool){
+ setInnerHTMLById(id, bool == true ? "Yes " : "No")
+}
+
+/**
+ * Display an error
+ *
+ * @param {String} message The message of the error to display
+ */
+function error(message){
+ M.toast({html: "Error: " + message, classes: 'rounded', length: 1000});
+}
+
+/**
+ * Get the path to an image
+ *
+ * @param {String} url The original URL of the image
+ * @return {String} Locally accessible path to the image
+ */
+function getImagePath(url){
+ return STORAGE_URL + url.replace("://", "/");
+}
+
+/**
+ * Turn a timestamp into a string date
+ *
+ * @param {Number} time The time to convert
+ * @return {String} Matching date
+ */
+function timeToStr(time){
+ let date = new Date();
+ date.setTime(time*1000);
+ return date.toGMTString();
+}
+
+/**
+ * Apply an orignially remote image to an element
+ * of the page
+ *
+ * @param {HTMLElement} el Image HTML Element that will receive
+ * the image
+ * @param {String} url The original URL of the image
+ */
+function applyURLToImage(el, url){
+ el.src = getImagePath(url);
+ el.className + " responsive-img";
+}
+
+/**
+ * Apply a user image to an image object
+ *
+ * @param {HTMLElement} el Target HTML element
+ * @param {Object} info Information about the related object
+ */
+function applyUserAccountImage(el, info){
+ applyURLToImage(el, info.accountImage);
+ el.className += " circle account-image"
+}
+
/**
* Refresh tabs visibility accordingly to the hash of
* the current URL
@@ -23,6 +117,31 @@ function RefreshTabsVisibility(){
}
+/**
+ * Apply user information
+ */
+function ApplyUserInfo() {
+
+ let userInfo = data.advanced_info;
+ setInnerHTMLById("u-uid", userInfo.userID);
+ setInnerHTMLById("u-firstname", userInfo.firstName);
+ setInnerHTMLById("u-lastname", userInfo.lastName);
+ setBoolInnerHTMLById("u-pagepublic", userInfo.publicPage);
+ setBoolInnerHTMLById("u-pageopen", userInfo.openPage);
+ setInnerHTMLById("u-virtualdirectory", userInfo.virtualDirectory);
+ applyUserAccountImage(byId("u-accountimage"), userInfo);
+ setBoolInnerHTMLById("u-publicfriendslist", userInfo.friend_list_public);
+ setInnerHTMLById("u-personnalwebsite", userInfo.personnalWebsite);
+ setInnerHTMLById("u-publicnote", userInfo.publicNote);
+ setBoolInnerHTMLById("u-commentsforbidden", userInfo.noCommentOnHisPage);
+ setBoolInnerHTMLById("u-allowpostsfromfriends", userInfo.allowPostFromFriendOnHisPage);
+ setInnerHTMLById("u-accountcreationtime", timeToStr(userInfo.account_creation_time));
+ applyURLToImage(byId("u-bgimage"), userInfo.backgroundImage);
+ setInnerHTMLById("u-pagelikes", timeToStr(userInfo.pageLikes));
+}
+
+
+
/**
* Automatically switch the tab when it
* is required by the user
@@ -31,4 +150,29 @@ window.addEventListener("hashchange", RefreshTabsVisibility);
//Page initialization
-RefreshTabsVisibility();
\ No newline at end of file
+RefreshTabsVisibility();
+
+/**
+ * Get the content of the source file
+ */
+let xhr = new XMLHttpRequest();
+xhr.open("GET", SOURCE_URL);
+
+xhr.onload = function(){
+
+ if(xhr.status != 200)
+ return error("Could not access " + SOURCE_URL + " !");
+
+ //Parse data
+ try {
+ data = JSON.parse(xhr.response);
+ }
+ catch(e){
+ return error("Could not parse " + SOURCE_URL + " !");
+ }
+
+ //Now we can apply specific process for each data block
+ ApplyUserInfo();
+}
+
+xhr.send(null);
\ No newline at end of file