Fix iOS issue : unability to edit large posts

.gitignore

@@ -1,4 +1,5 @@
 # ---> VisualStudioCode
 .settings
 
-
+# Build directory
+output/*

Jenkinsfile

@@ -0,0 +1,11 @@
+pipeline {
+ agent { docker { image "registry.docker.internal/pierre42100/docker-comunicwebappscratch" } }
+ stages {
+  stage("build") {
+   steps {
+    sh 'php --version'
+	sh './builder build offline'
+   }
+  }
+ }
+}

README.md

@@ -20,3 +20,4 @@ ComunicWeb would not exists without the following technologies developped by the
 - VideoJS
 - jquery.hotkeys
 - bootstrap-wysiwyg (https://github.com/steveathon/bootstrap-wysiwyg/)
+- wdt-emoji-bundle (http://ned.im/wdt-emoji-bundle)

assets/3rdparty/adminLTE/plugins/googleFonts/css.css

@@ -2,41 +2,41 @@
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 300;
-  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(toadOcfmlt9b38dHJxOBGNbE_oMaV8t2eFeISPpzbdE.woff) format('woff');
+  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(googleFonts/toadOcfmlt9b38dHJxOBGNbE_oMaV8t2eFeISPpzbdE.woff) format('woff');
 }
 @font-face {
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 400;
-  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(ODelI1aHBYDBqgeIAH2zlBM0YzuT7MdOe03otPbuUS0.woff) format('woff');
+  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(googleFonts/ODelI1aHBYDBqgeIAH2zlBM0YzuT7MdOe03otPbuUS0.woff) format('woff');
 }
 @font-face {
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 600;
-  src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url(toadOcfmlt9b38dHJxOBGJ6-ys_j0H4QL65VLqzI3wI.woff) format('woff');
+  src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url(googleFonts/toadOcfmlt9b38dHJxOBGJ6-ys_j0H4QL65VLqzI3wI.woff) format('woff');
 }
 @font-face {
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 700;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(toadOcfmlt9b38dHJxOBGFkQc6VGVFSmCnC_l7QZG60.woff) format('woff');
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(googleFonts/toadOcfmlt9b38dHJxOBGFkQc6VGVFSmCnC_l7QZG60.woff) format('woff');
 }
 @font-face {
   font-family: 'Source Sans Pro';
   font-style: italic;
   font-weight: 300;
-  src: local('Source Sans Pro Light Italic'), local('SourceSansPro-LightIt'), url(fpTVHK8qsXbIeTHTrnQH6GGomRtBD2u8FwSY4jjlmeA.woff) format('woff');
+  src: local('Source Sans Pro Light Italic'), local('SourceSansPro-LightIt'), url(googleFonts/fpTVHK8qsXbIeTHTrnQH6GGomRtBD2u8FwSY4jjlmeA.woff) format('woff');
 }
 @font-face {
   font-family: 'Source Sans Pro';
   font-style: italic;
   font-weight: 400;
-  src: local('Source Sans Pro Italic'), local('SourceSansPro-It'), url(M2Jd71oPJhLKp0zdtTvoMzNrcjQuD0pTu1za2FULaMs.woff) format('woff');
+  src: local('Source Sans Pro Italic'), local('SourceSansPro-It'), url(googleFonts/M2Jd71oPJhLKp0zdtTvoMzNrcjQuD0pTu1za2FULaMs.woff) format('woff');
 }
 @font-face {
   font-family: 'Source Sans Pro';
   font-style: italic;
   font-weight: 600;
-  src: local('Source Sans Pro Semibold Italic'), local('SourceSansPro-SemiboldIt'), url(fpTVHK8qsXbIeTHTrnQH6PULlOK_XQENnt2ryrY843E.woff) format('woff');
+  src: local('Source Sans Pro Semibold Italic'), local('SourceSansPro-SemiboldIt'), url(googleFonts/fpTVHK8qsXbIeTHTrnQH6PULlOK_XQENnt2ryrY843E.woff) format('woff');
 }

assets/3rdparty/wdt-emoji/wdt-emoji-bundle.css

@@ -0,0 +1,483 @@
+.wdt-emoji-popup,
+.wdt-emoji-popup * {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+/* hide unavailable fonts @todo - check fallbacks */
+body[data-wdt-emoji-bundle='google'] .wdt-emoji[data-has-img-google='false'],
+body[data-wdt-emoji-bundle='emojione'] .wdt-emoji[data-has-img-emojione='false'],
+body[data-wdt-emoji-bundle='google'] .wdt-emoji[data-has-img-google='false'],
+body[data-wdt-emoji-bundle='apple'] .wdt-emoji[data-has-img-apple='false'] {
+  display: none;
+}
+
+/* picker styles */
+.wdt-emoji-picker {
+  position: absolute;
+  right: 5px;
+  bottom: 5px;
+
+  width: 20px;
+  height: 20px;
+}
+
+.wdt-emoji-picker:hover {
+  cursor: pointer;
+}
+
+.wdt-emoji-picker-parent {
+  position: relative;
+}
+
+.wdt-emoji-picker span.emoji-outer.emoji-sizer {
+  width: 18px;
+  height: 18px;
+
+  pointer-events: none;
+}
+
+/* bundle popup styles */
+.wdt-emoji-popup {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  visibility: hidden;
+
+  width: 357px;
+  max-width: 100%;
+  height: 357px;
+  max-height: 100%;
+
+  transition: opacity 50ms ease, bottom 1s ease-out;
+
+  opacity: 0;
+  border: 1px solid #dedede;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  background-color: #fff;
+}
+
+.wdt-emoji-popup.open {
+  visibility: visible;
+
+  opacity: 1;
+}
+
+#wdt-emoji-menu-header {
+  padding: 4px 0 0 7px;
+
+  border-bottom: 1px solid rgba(0, 0, 0, .15);
+  background: #f7f7f7;
+}
+
+.wdt-emoji-tab {
+  display: inline-block;
+
+  width: 28px;
+  margin-right: 2.5px;
+  padding: 4px;
+
+  transition: border-color 150ms ease-out;
+  text-align: center;
+
+  color: #9e9ea6;
+  border-bottom: 3px solid transparent;
+}
+
+.wdt-emoji-tab:hover {
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.wdt-emoji-tab.active {
+  padding-top: 3px;
+
+  color: #9e9ea6;
+  border-bottom: 3px solid #e7543d;
+}
+
+#wdt-emoji-search,
+#wdt-emoji-search:focus {
+  font-size: 15px;
+  line-height: 20px;
+
+  width: 95%;
+  max-width: 100%;
+  height: 28px;
+  margin: .5rem 9px .6rem;
+  padding: 15px 2rem;
+
+  transition: border-color 150ms ease-out;
+
+  color: #444;
+  border: 1px solid #c5c5c5;
+  border-radius: 3px;
+  outline: none;
+}
+
+#wdt-emoji-search:focus {
+  border-color: #a0a0a0;
+}
+
+.wdt-emoji-popup h3 {
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 15px;
+
+  position: relative;
+
+  margin: 0;
+  padding: 8px;
+
+  color: #555;
+  background: rgba(255, 255, 255, .95);
+}
+
+.wdt-emoji-popup h3.sticky {
+  position: absolute;
+  z-index: 4;
+
+  width: 330px;
+}
+
+.wdt-emoji-scroll-wrapper {
+  overflow-x: hidden;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+  overflow-anchor: none;
+  height: 257px;
+  padding-bottom: 30px;
+}
+
+.wdt-emoji-sections {
+  padding: 0 5px;
+}
+
+.wdt-emoji {
+  line-height: 1rem;
+
+  position: relative;
+
+  display: inline-block;
+
+  margin-right: 2.5px !important;
+  margin-bottom: 1px;
+  padding: 6px;
+
+  -webkit-transition: background 500ms ease-out;
+  -moz-transition: background 500ms ease-out;
+  -ms-transition: background 500ms ease-out;
+  -o-transition: background 500ms ease-out;
+  transition: background 500ms ease-out;
+  text-align: center;
+
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  border-radius: 6px;
+}
+
+.wdt-emoji.not-matched {
+  display: none;
+}
+
+.wdt-emoji:hover {
+  cursor: pointer;
+}
+
+.wdt-emoji.gray:hover {
+  background-color: rgba(175, 175, 175, .32);
+}
+
+.wdt-emoji.green:hover {
+  background-color: #b7e887;
+}
+
+.wdt-emoji.pink:hover {
+  background-color: #f3c1fd;
+}
+
+.wdt-emoji.yellow:hover {
+  background-color: #f9ef67;
+}
+
+.wdt-emoji.blue:hover {
+  background-color: #b5e0fe;
+}
+
+.wdt-emoji-tab .emoji-outer {
+  width: 18px;
+  height: 18px;
+}
+
+span.emoji {
+  display: -moz-inline-box;
+  display: inline-block;
+
+  width: 1em;
+  height: 1em;
+
+  vertical-align: baseline;
+  text-indent: -9999px;
+
+  background-repeat: no-repeat;
+  background-position: 50%, 50%;
+  background-size: 1em;
+  background-size: contain;
+
+  -moz-box-orient: vertical;
+  *vertical-align: auto;
+  *zoom: 1;
+  *display: inline;
+}
+
+span.emoji-sizer {
+  font-size: 1em;
+  line-height: .81em;
+}
+
+span.emoji-outer {
+  display: -moz-inline-box;
+  display: inline-block;
+
+  width: 22px;
+  height: 22px;
+  margin-top: -2px;
+
+  vertical-align: middle;
+
+  *display: inline;
+}
+
+span.emoji-inner {
+  display: -moz-inline-box;
+  display: inline-block;
+
+  width: 100%;
+  height: 100%;
+
+  vertical-align: baseline;
+  text-indent: -9999px;
+
+  *vertical-align: auto;
+  *zoom: 1;
+}
+
+img.emoji {
+  width: 1em;
+  height: 1em;
+}
+
+#wdt-emoji-footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+
+  width: 100%;
+  padding-bottom: .4rem;
+
+  border-top: 1px solid rgba(0, 0, 0, .15);
+  background: #f7f7f7;
+}
+
+#wdt-emoji-no-result {
+  font-size: 10px;
+  font-weight: 400;
+
+  clear: both;
+
+  padding: 20px;
+
+  text-align: center;
+
+  color: #bababa;
+}
+
+#wdt-emoji-preview {
+  padding: .3rem 0 0 .7rem;
+
+  -webkit-transition: opacity .1s ease-in .1s;
+  -moz-transition: opacity .1s ease-in .1s;
+  transition: opacity .1s ease-in .1s;
+
+  opacity: 0;
+}
+
+#wdt-emoji-preview-img {
+  font-size: 2rem;
+  line-height: 2rem;
+
+  float: left;
+
+  width: 46px;
+  height: 54px;
+  padding: .6rem .5rem 0 .1rem;
+
+  vertical-align: middle;
+}
+
+#wdt-emoji-preview-bundle {
+  font-size: 17px;
+  font-weight: bold;
+
+  position: absolute;
+  bottom: 19px;
+  left: 14px;
+
+  -webkit-transition: opacity .1s ease-in .1s;
+  -moz-transition: opacity .1s ease-in .1s;
+  transition: opacity .1s ease-in .1s;
+
+  opacity: 1;
+  color: #989ba0;
+}
+
+#wdt-emoji-search-result-title,
+#wdt-emoji-no-result {
+  display: none;
+}
+
+#wdt-emoji-search-result-title.wdt-show,
+#wdt-emoji-no-result.wdt-show {
+  display: block;
+
+  margin: 0 5px;
+}
+
+.wdt-inline {
+  display: inline;
+}
+
+.wdt-search-on {
+  display: none;
+}
+
+.wdt-emoji-popup.preview-mode #wdt-emoji-preview-bundle {
+  opacity: 0;
+}
+
+.wdt-emoji-popup.preview-mode #wdt-emoji-preview {
+  opacity: 1;
+}
+
+#wdt-emoji-preview-img span.emoji-outer.emoji-sizer {
+  position: relative;
+  top: 3px;
+  left: 4px;
+
+  width: 40px;
+  height: 40px;
+}
+
+#wdt-emoji-preview-text {
+  font-size: 13px;
+
+  position: relative;
+  top: 9px;
+  left: 10px !important;
+
+  color: #777;
+}
+
+#wdt-emoji-preview-name {
+  font-weight: bold;
+
+  position: relative;
+  left: 3px;
+
+  color: #444;
+}
+
+.wdt-emoji-popup-mobile-closer {
+  font-size: 25px !important;
+  font-weight: bold;
+  line-height: 35px;
+
+  position: absolute;
+  top: -35px;
+  left: 50%;
+
+  visibility: hidden;
+
+  width: 40px;
+  height: 35px;
+
+  transform: translateX(-50%);
+  text-align: center;
+
+  opacity: 0;
+  color: #444;
+  border: 1px solid rgba(0, 0, 0, .1);
+  border-bottom-color: #e7543d;
+  border-radius: 50% 50% 0 0;
+  background-color: rgba(255, 255, 255, .8);
+}
+
+/* iPhone 2G-4S-5-5S in portrait */
+@media only screen
+and (min-device-width: 320px)
+and (max-device-width: 480px)
+and (orientation: portrait) {
+  .wdt-emoji-picker {
+    display: none;
+  }
+
+  .wdt-emoji-tab {
+    width: 24px;
+  }
+
+  .wdt-emoji {
+    margin-right: 0 !important;
+  }
+
+  #wdt-emoji-footer {
+    display: none;
+  }
+
+  .wdt-emoji-scroll-wrapper {
+    height: 170px;
+  }
+
+  .wdt-emoji-popup {
+    height: 206px;
+
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+  }
+
+  #wdt-emoji-search {
+    display: none;
+  }
+
+  .wdt-emoji-popup-mobile-closer {
+    visibility: visible;
+
+    opacity: 1;
+  }
+
+  .wdt-emoji-popup h3.sticky {
+    width: 300px;
+  }
+}
+
+/* iPhone 6 in portrait */
+@media only screen
+and (min-device-width: 375px)
+and (max-device-width: 667px)
+and (orientation: portrait) {
+  .wdt-emoji {
+    margin-right: -1px !important;
+  }
+
+  .wdt-emoji-tab {
+    width: 30px;
+  }
+
+  .wdt-emoji-popup h3.sticky {
+    width: 359px;
+  }
+}

assets/css/common/global.css

@@ -10,3 +10,17 @@
 a {
     cursor: pointer;
 }
+
+/**
+ * <a> like elements
+ */
+.a {
+    cursor: pointer;
+    outline: none;
+    text-decoration: none;
+    color: #3c8dbc;
+}
+
+.a:focus, .a:hover {
+    color: #72afd2;
+}

assets/css/components/comments/form.css

@@ -12,6 +12,15 @@
 	margin-top: 0px;
 }
 
+.comment-creation-form .input-group-btn .comment-emoji-select .btn {
+	padding-left: 4px;
+	padding-right: 2px;
+}
+.comment-creation-form .input-group-btn .comment-image-select .btn {
+	padding-left: 2px;
+	padding-right: 5px;
+}
+
 .comment-creation-form .comment-image-select {
 	margin-bottom: -2px !important;
 }
@@ -20,6 +29,7 @@
 	display: none;
 }
 
-.comment-creation-form .comment-image-select a {
+.comment-creation-form .comment-image-select a,
+.comment-creation-form .comment-emoji-select a {
 	color: black;
 }

assets/css/components/comments/ui.css

@@ -8,7 +8,7 @@
 	padding: 10px;
 }
 
-.post-comments .comment-img-contener {
+.post-comments .comment-img-container {
 	text-align: center;
 }
 

assets/css/components/conversations/unreadDropdown.css

@@ -7,3 +7,8 @@
 .no-unread-conversation-msg {
 	padding: 20px;
 }
+
+.new-conversations-dropdown .message-content {
+	white-space: normal;
+	font-style: italic;
+}

assets/css/components/conversations/windows.css

@@ -29,15 +29,28 @@
 	padding-right:8px;
 }
 
+#conversationsElem .create-message-form .btn.btn-add-emoji,
 #conversationsElem .create-message-form .btn.btn-add-image {
 	background: none;
 	color: #808080;
 }
 
+#conversationsElem .create-message-form .btn.btn-add-emoji:hover,
 #conversationsElem .create-message-form .btn.btn-add-image:hover{
 	color: black;
 }
 
+#conversationsElem .create-message-form .btn.btn-add-emoji {
+	padding-left: 4px;
+	padding-right: 2px;
+}
+
+#conversationsElem .create-message-form .btn.btn-add-image {
+	padding-left: 2px;
+	padding-right: 5px;
+}
+
+
 /**
  * Conversation settings pane 
  */
@@ -67,15 +80,39 @@
 /**
  * Conversations messages
  */
+
+#conversationsElem .date-conversation-message {
+	margin-top: 2px;
+	text-align: center;
+	font-size: 70%;
+	font-style: italic;
+}
+
 #conversationsElem .conversation-msg-image {
 	height: 50px;
 }
 
+#conversationsElem .direct-chat-text {
+	word-break: break-all;
+}
+
 #conversationsElem .direct-chat-text .emoji {
 	height: 1em;
 }
 
+#conversationsElem .direct-chat-text a, #conversationsElem .direct-chat-text .a {
+	color: inherit;
+}
+
 #conversationsElem .direct-chat-text.not-first-message::before, 
 #conversationsElem .direct-chat-text.not-first-message::after {
 	display: none;
 }
+
+#conversationsElem .direct-chat-msg.not-last-message-from-user {
+	margin-bottom: 0px;
+}
+
+#conversationsElem .direct-chat-msg.not-last-message-from-user .direct-chat-img {
+	margin-bottom: -5px;
+}

assets/css/components/emoji/parser.css

@@ -8,5 +8,6 @@
  * Emoji images global style
  */
 .emoji {
-	height: 2em;
+	width: auto !important;
+	height: 2em !important;
 }

assets/css/components/emoji/picker.css

@@ -0,0 +1,14 @@
+/**
+ * Emoji picker stylesheet
+ *
+ * @author Pierre HUBERT
+ */
+
+#emojiPicker {
+	height: 0;
+}
+
+.wdt-emoji-popup {
+	z-index: 1000;
+	margin-top: 7px;
+}

assets/css/components/languagePicker.css

@@ -0,0 +1,9 @@
+/**
+ * Language picker modal stylesheet
+ *
+ * @author Pierre HUBERT
+ */
+
+.pick-language-modal .modal-body {
+	text-align: center;
+}

assets/css/components/movies/picker.css

@@ -5,7 +5,7 @@
  */
 
 .pick-movie-modal .modal-body {
-	max-height: 500px;
+	/*max-height: 500px;*/
 }
 
 .pick-movie-modal video {

assets/css/components/notifications/ui.css

@@ -4,10 +4,10 @@
  * @author Pierre HUBERT
  */
 
-.notification-contener p {
+.notification-container p {
 	white-space: normal;
 }
 
-.notification-contener .notification-creation-time {
+.notification-container .notification-creation-time {
 	color: #888888;
 }

assets/css/components/posts/form.css

@@ -64,23 +64,23 @@
 /**
  * Visibility choice
  */
-.post-form .post-visiblity-contener {
+.post-form .post-visiblity-container {
 	display: inline-block;
 	margin-right: 10px;
 }
 
-.post-form .post-visiblity-contener label {
+.post-form .post-visiblity-container label {
 	margin-left: 5px;
 }
 
-.post-form .post-visiblity-contener input {
+.post-form .post-visiblity-container input {
 	display: none;
 }
 
-.post-form .post-visiblity-contener span {
+.post-form .post-visiblity-container span {
 	color: #b5bbc8;
 }
 
-.post-form .post-visiblity-contener input:checked ~ span {
+.post-form .post-visiblity-container input:checked ~ span {
 	color: #111111;
 }

assets/css/components/posts/ui.css

@@ -81,7 +81,7 @@
 	text-align: center;
 }
 
-.post .post-survey-chart-contener {
+.post .post-survey-chart-container {
 	margin-bottom: 10px;
 }
 

assets/css/pages/createAccount.css

@@ -0,0 +1,35 @@
+/**
+ * Create account stylesheet
+ *
+ * @author Pierre HUBERT
+ */
+
+.create-account-form {
+	border: 1px gray solid;
+	max-width: 500px;
+	margin: auto;
+	margin-top: 30px;
+	padding: 0px 10px 10px 10px;
+}
+
+.create-account-form h2 {
+	text-align: center;
+	margin-bottom: 20px;
+}
+
+.create-account-form p {
+	text-align: center;
+}
+
+.create-account-form .callout p {
+	text-align: justify;
+}
+
+.create-account-form .submit-form {
+	text-align: center;
+}
+
+.create-account-form .bottom-form-links {
+	text-align: center;
+	margin-top: 15px;
+}

assets/css/pages/settings/main.css

@@ -0,0 +1,11 @@
+/**
+ * Main settings styleesheet
+ *
+ * @author Pierre HUBERT
+ */
+
+.settings-page-container {
+	max-width: 1000px;
+	margin: auto;
+	margin-top: 10px;
+}

assets/css/pages/settings/sections/accountImage.css

@@ -0,0 +1,21 @@
+/**
+ * Account image settings section stylesheet
+ *
+ * @author Pierre HUBERT
+ */
+
+.box-account-image-settings .box-body {
+	text-align: center;
+}
+
+.box-account-image-settings .settings-account-image-preview {
+	max-width: 100%;
+	display: block;
+	margin: auto;
+	margin-top: 10px;
+	margin-bottom: 10px;
+}
+
+.box-account-image-settings .account-image-visibility-form {
+	text-align: justify;
+}

assets/css/pages/settings/sections/general.css

@@ -0,0 +1,27 @@
+/**
+ * General settings stylesheet
+ *
+ * @author Pierre HUBERT
+ */
+
+.box-general-settings .input-user-id {
+	width: 29%;
+	display: inline-block;
+}
+
+.box-general-settings .input-user-email {
+	width: 70%;
+	display: inline-block;
+	margin-left: 1%;
+}
+
+.box-general-settings .submit-form {
+	width: 100px;
+	margin: auto;
+	display: block;
+}
+
+invalidDirectory {
+	color: red;
+	font-size: 120%;
+}

assets/css/pages/settings/sections/password.css

@@ -0,0 +1,11 @@
+/**
+ * Settings password section stylesheet
+ *
+ * @author Pierre HUBERT
+ */
+
+.box-password-settings .submit-form {
+	width: 150px;
+	margin: auto;
+	display: block;
+}

assets/css/pages/settings/sections/security.css

@@ -0,0 +1,35 @@
+/**
+ * Security settings section
+ *
+ * @author Pierre HUBERT
+ */
+
+
+/**
+ * Prompt user password box
+ */
+.box-security-settings .prompt-user-password h4,
+.box-security-settings .prompt-user-password p {
+	text-align: center;
+}
+
+.box-security-settings .prompt-user-password label {
+	display: none;
+}
+
+.box-security-settings .prompt-user-password .submit-form {
+	width: 100px;
+	margin: auto;
+	display: block;
+}
+
+
+
+/**
+ * Global box rules
+ */
+.security-settings-form .submit-form {
+	width: 150px;
+	margin: auto;
+	display: block;
+}

assets/css/pages/userPage/main.css

@@ -4,7 +4,7 @@
  * @author Pierre HUBERT
  */
 
-.page-contener {
+.page-container {
 	max-width: 1500px;
 	margin: auto;
 }

assets/css/pages/userPage/profileInfos.css

@@ -0,0 +1,20 @@
+/**
+ * Profile information stylesheet
+ *
+ * @author Pierre HUBERT
+ */
+
+.user-tag-in-profile {
+	color: #6f737b;
+	text-align: center;
+	font-size: 90%;
+	margin-bottom: 10px;
+}
+
+.about-user-box {
+	word-break: break-all;
+}
+
+.about-user-box .emoji {
+	height: 1em !important;
+}

assets/js/common/api.js

@@ -137,10 +137,31 @@ ComunicWeb.common.api = {
                     },
                 };
             }
-            else
+            else {
-                //Prepare result
+
+                //Catch JSON parsing errors
+                try {
+
+                    //Parse result
                     var result = JSON.parse(apiXHR.responseText);
 
+                } catch (error) {
+                    
+                    //Report error
+                    ComunicWeb.common.error.syntaxtError(error, apiXHR.responseText);
+
+                    //Set arbitray result content
+                    result = {
+                        error : {
+                            code: 1,
+                            message: "Invalid response",
+                        },
+                    };
+
+                }
+            }
+                
+
             //We check if we got any error
             if(result.error){
                 //Log error

assets/js/common/errors.js

@@ -14,7 +14,7 @@
  */
 ComunicWeb.common.error.submitError = function(errorLevel, errorMessage, errorCode, errorData){
 	//Prepare API request
-	var apiURI = "webApp/reportError";
+	/*var apiURI = "webApp/reportError";
 	var params = {
 		"errorLevel": errorLevel,
 		"errorMessage": errorMessage,
@@ -27,7 +27,7 @@ ComunicWeb.common.error.submitError = function(errorLevel, errorMessage, errorCo
 	nextAction = function(){};
 
 	//Send API request
-	ComunicWeb.common.api.makeAPIrequest(apiURI, params, requireLoginToken, nextAction);
+	ComunicWeb.common.api.makeAPIrequest(apiURI, params, requireLoginToken, nextAction);*/
 }
 
 /**
@@ -99,3 +99,74 @@ ComunicWeb.common.error.pageNotFound = function(additionnalData, targetElement){
 	//Everything seems to be OK
 	return true;
 }
+
+/**
+ * Handles and display SyntaxtError
+ * 
+ * @param {SyntaxError} error The error
+ * @param {string} additional Additionnal information to include with
+ * the report
+ */
+ComunicWeb.common.error.syntaxtError = function(error, additional){
+	
+	//Create a modal dialog to report error
+	var dialog = ComunicWeb.common.messages.createDialogSkeleton({
+		type: "danger",
+		title: "An error occurred"
+	});
+
+	//Display modal
+	$(dialog.modal).modal("show");
+
+	//Create close modal function
+	var closeModal = function(){
+		$(dialog.modal).modal('hide');
+        emptyElem(dialog.modal);
+        dialog.modal.remove();
+	}
+	dialog.closeModal.onclick = closeModal;
+	dialog.cancelButton.onclick =  closeModal;
+
+	//Create error container
+	var errorContainer = createElem2({
+		appendTo: dialog.modalBody,
+		type: "div"
+	});
+
+	//Message
+	createElem2({
+		appendTo: errorContainer,
+		type: "p",
+		innerHTML: "An error has just occured. There are the details of the error. If this error occurs several times, please inform us at contact@communiquons.org ."
+	});
+
+	//Locate error
+	createElem2({
+		appendTo: errorContainer,
+		type: "p",
+		innerHTML: "<b>File:</b> "+error.fileName+" <b>Line:</b> " + error.lineNumber+ " <b>Column:</b> " + error.columnNumber
+	});
+
+	//Error message
+	createElem2({
+		appendTo: errorContainer,
+		type: "p",
+		innerHTML: "<b>Message:</b> " + error.message,
+	});
+
+	//Stack trace
+	createElem2({
+		appendTo: errorContainer,
+		type: "pre",
+		innerHTML: error.stack
+	});
+
+	//Check for additional information
+	if(additional){
+		createElem2({
+			appendTo: errorContainer,
+			type: "pre",
+			innerHTML: "Additionnal information: \n " + additional
+		});
+	}
+}

assets/js/common/formChecker.js

@@ -28,7 +28,7 @@ ComunicWeb.common.formChecker = {
 
         //TextInput
         if(inputType == "text"){
-            inputOK = (input.value == "" ? false:true);
+            inputOK = (input.value.length < 3 ? false:true);
         }
 
         //MailInput
@@ -38,7 +38,7 @@ ComunicWeb.common.formChecker = {
 
         //Password input
         else if(inputType == "password"){
-            inputOK = (input.value == "" ? false:true);
+            inputOK = (input.value.length < 3 ? false:true);
         }
 
         //Unsupported input type

assets/js/common/functionsSchema.js

@@ -99,6 +99,16 @@ var ComunicWeb = {
 			 */
 			createCalloutElem: function(calloutTitle, calloutMessage, calloutType){},
 
+			/**
+			 * Create and return a callout element
+			 */
+			createLoadingCallout: function(target){},
+
+			/**
+			 * Create dialog skeleton
+			 */
+			createDialogSkeleton: function(info){},
+
 			/**
 			 * Create and display a confirmation dialog
 			 */
@@ -128,6 +138,11 @@ var ComunicWeb = {
 			 * Handle a 404 not found error
 			 */
 			pageNotFound: function(additionnalData, targetElement){},
+
+			/**
+			 * Handles and display SyntaxtError
+			 */
+			syntaxtError: function(error, additional){},
 		},
 
 		/**
@@ -176,6 +191,11 @@ var ComunicWeb = {
 			 */
 			refresh_current_page: function(){},
 
+			/**
+			 * Inform of page location update
+			 */
+			location_updated: function(new_location){},
+
 			/**
 			 * Prepare a template load by specifying datas
 			 */
@@ -184,7 +204,7 @@ var ComunicWeb = {
 			/**
 			 * Load, parse and show an HTML template
 			 */
-			getAndShowTemplate: function(targetElem, dataTemplate, templateURI, nextAction, cleanContener){},
+			getAndShowTemplate: function(targetElem, dataTemplate, templateURI, nextAction, cleanContainer){},
 
 			/**
 			 * Convert a JSON object into html elements
@@ -194,7 +214,7 @@ var ComunicWeb = {
 			/**
 			 * Get and show a JSON template
 			 */
-			getAndShowJSONtemplate: function(targetElem, templateURI, additionalData, afterParsingJSONtemplate, cleanContener){},
+			getAndShowJSONtemplate: function(targetElem, templateURI, additionalData, afterParsingJSONtemplate, cleanContainer){},
 		},
 
 		/**
@@ -225,7 +245,7 @@ var ComunicWeb = {
 		network: {
 
 			/**
-			 * @var {object} Cache contener
+			 * @var {object} Cache container
 			 */
 			cache: {},
 			
@@ -436,6 +456,20 @@ var ComunicWeb = {
 	 */
 	components: {
 
+		/**
+		 * Account component
+		 */
+		account: {
+
+			/**
+			 * Interface
+			 */
+			interface: {
+				//TODO : implement
+			},
+
+		},
+
 		/**
 		 * Menubar
 		 */
@@ -504,6 +538,27 @@ var ComunicWeb = {
 			},
 		},
 
+		/**
+		 * Pages bottom
+		 */
+		bottom: {
+
+			/**
+			 * Main bottom script file
+			 */
+			main: {
+				//TODO : implement
+			},
+
+		},
+
+		/**
+		 * Language picker
+		 */
+		langPicker: {
+			//TODO : implement
+		},
+
 		/**
 		 * Mails caching component
 		 */
@@ -531,6 +586,20 @@ var ComunicWeb = {
 			//TODO : implement
 		},
 
+		/**
+		 * Settings component
+		 */
+		settings: {
+
+			/**
+			 * Settings interface
+			 */
+			interface: {
+				//TODO : implement
+			},
+
+		},
+
 		/**
 		 * Friends list
 		 */
@@ -679,6 +748,13 @@ var ComunicWeb = {
 				//TODO : implement
 			},
 
+			/**
+			 * Emojie picker
+			 */
+			picker: {
+				//TODO : implement
+			},
+			
 		},
 
 		/**
@@ -807,6 +883,13 @@ var ComunicWeb = {
 
 		},
 
+		/**
+		 * Comunic specific text parser
+		 */
+		textParser: {
+			//TODO : implement
+		},
+
 		/**
 		 * Countdown timer
 		 */
@@ -1017,6 +1100,67 @@ var ComunicWeb = {
 
 		},
 
+		/**
+		 * User settings page
+		 */
+		settings: {
+
+			/**
+			 * Main script
+			 */
+			main: {
+				//TODO : implement
+			},
+			
+			/**
+			 * Navigation pane
+			 */
+			navigationPane: {
+				//TODO : implement
+			},
+
+			/**
+			 * Settings sections list
+			 */
+			sectionsList: {
+				//TODO : implement
+			},
+
+			/**
+			 * Settings sections script
+			 */
+			sections: {
+
+				/**
+				 * General section
+				 */
+				general: {
+					//TODO : implement
+				},
+
+				/**
+				 * Security section
+				 */
+				security: {
+					//TODO : implement
+				},
+
+				/**
+				 * Password section
+				 */
+				password: {
+					//TODO : implement
+				},
+
+				/**
+				 * Account image section
+				 */
+				accountImage: {
+					//TODO : implement
+				},
+			},
+		},
+
 		/**
 		 * Login controller
 		 */
@@ -1039,6 +1183,22 @@ var ComunicWeb = {
 			displayLoginError: function(){},
 		},
 
+		/**
+		 * Create account controller
+		 */
+		createAccount: {
+
+			//TODO : implement
+
+		},
+
+		/**
+		 * Account created controller
+		 */
+		accountCreated: {
+			//TODO : implement
+		},
+
 		/**
 		 * Logout controller
 		 */

assets/js/common/messages.js

@@ -19,14 +19,16 @@ ComunicWeb.common.messages.createCalloutElem = function(calloutTitle, calloutMes
     if(!calloutType)
         var calloutType = "info";
 
-    //Create callout main contener
+    //Create callout main container
     var calloutElem = document.createElement('div');
     calloutElem.className = "callout callout-" + calloutType;
 
     //Add title
+    if(calloutTitle != ""){
         var calloutTitleElem = document.createElement("h4");
         calloutTitleElem.innerHTML =  calloutTitle;
         calloutElem.appendChild(calloutTitleElem)
+    }
 
     //Add callout body
     var calloutBody = document.createElement("div");
@@ -37,6 +39,111 @@ ComunicWeb.common.messages.createCalloutElem = function(calloutTitle, calloutMes
     return calloutElem;
 }
 
+/**
+ * Create loading callout element
+ * 
+ * @param {HTMLElement} target Optionnal, the target of the callout element
+ * @return {HTMLElement} Generated loading callout element
+ */
+ComunicWeb.common.messages.createLoadingCallout = function(target){
+
+    var elem = this.createCalloutElem("Loading", "Please wait while this page is loading...", "info");
+
+    if(target)
+        target.appendChild(elem);
+
+    return elem;
+
+}
+
+
+/**
+ * Create dialog skeleton
+ * 
+ * @param {object} info Information about the callout to create
+ * @argument {string} type The type of modal
+ * @param {string} title The title of the modal
+ * @return {object} Information about the created dialog
+ */
+ComunicWeb.common.messages.createDialogSkeleton = function(info){
+
+    data = {};
+
+    //Get modal type
+    var modalType = info.type ? info.type : "default";
+
+    //Get modal title
+    var modalTitle = info.title ? info.title : "";
+
+    //Create a modal root
+    data.modal = createElem2({
+        type: "div",
+        class: "modal modal-" + modalType
+    });
+
+    var modalDialog = createElem2({
+        appendTo: data.modal,
+        type: "div",
+        class: "modal-dialog"
+    });
+
+    data.modalContent = createElem2({
+        appendTo: modalDialog,
+        type: "div",
+        class: "modal-content",
+    });
+
+    //Modal header
+    data.modalHeader = createElem2({
+        appendTo: data.modalContent,
+        type: "div",
+        class: "modal-header"
+    });
+
+    data.closeModal = createElem2({
+        appendTo: data.modalHeader,
+        type: "button",
+        class: "close",
+    });
+
+    createElem2({
+        appendTo: data.closeModal,
+        type: "span",
+        innerHTML: "x"
+    });
+
+    //Modal title
+    data.modalTitle = createElem2({
+        appendTo: data.modalHeader,
+        type: "h4",
+        class: "modal-title",
+        innerHTML: modalTitle
+    });
+
+    //Modal body
+    data.modalBody = createElem2({
+        appendTo: data.modalContent,
+        type: "div",
+        class: "modal-body",
+    });
+
+    //Modal footer
+    data.modalFooter = createElem2({
+        appendTo: data.modalContent,
+        type: "div",
+        class: "modal-footer"
+    });
+
+    data.cancelButton = createElem2({
+        appendTo: data.modalFooter,
+        type: "button",
+        class: "btn btn-default",
+        innerHTML: "Cancel"
+    });
+
+    return data;
+}
+
 /**
  * Create a confirmation dialog
  * 

assets/js/common/network.js

@@ -7,7 +7,7 @@
 ComunicWeb.common.network = {
 
 	/**
-	 * @var {object} Cache contener
+	 * @var {object} Cache container
 	 */
 	cache: {},
 
@@ -100,7 +100,7 @@ ComunicWeb.common.network = {
 
 			//Check if error message exists or not
 			if(!byId("networkErrorMessage")){
-				//Create error message contener
+				//Create error message container
 				var networkErrorMessage = createElem("div", document.body);
 				networkErrorMessage.id = "networkErrorMessage";
 

assets/js/common/page.js

@@ -5,6 +5,12 @@
  */
 
 ComunicWeb.common.page = {
+
+    /**
+     * Save the current page url
+     */
+    _current_url: "",
+
     /**
      * Empty current page content
      * 
@@ -183,19 +189,22 @@ ComunicWeb.common.page = {
         //Change page URL
         ComunicWeb.common.url.changeURI(document.title, pageURI);
 
-        //Get the main contener of the page
+        //Save new url
-        var mainContenerElem = byId("wrapper");
+        this._current_url = window.location.href.toString();
+
+        //Get the main container of the page
+        var mainContainerElem = byId("wrapper");
 
         //If we didn't get anything, clean the page and create a wrapper element
-        if(!mainContenerElem){
+        if(!mainContainerElem){
-           var mainContenerElem = this.emptyPage(true);
+           var mainContainerElem = this.emptyPage(true);
         }
 
         //We check if the page is a full screen page or not
         if(pageInfos.disableMenus){
             //We force the screen to be cleaned
-             var mainContenerElem = this.emptyPage(true);
+            var mainContainerElem = this.emptyPage(true);
-             var pageTarget = mainContenerElem; //The page directly goes to the main target
+            var pageTarget = mainContainerElem; //The page directly goes to the main target
         }
         //Else
         else {
@@ -205,10 +214,10 @@ ComunicWeb.common.page = {
 
             //We empty screen if we couldn't rich it
             if(!pageTarget){
-                mainContenerElem.innerHTML = "";
+                mainContainerElem.innerHTML = "";
 
                 //We create the pagetTarget element
-                var pageTarget = createElem("div", mainContenerElem);
+                var pageTarget = createElem("div", mainContainerElem);
                 pageTarget.id = "pageTarget";
             }
             else{
@@ -219,9 +228,7 @@ ComunicWeb.common.page = {
             //Set wrapper class
             pageTarget.className = "content-wrapper";
 
-            //Ask adminLTE to fix layout
+            
-            if($.AdminLTE.layout)
-                $.AdminLTE.layout.fix();
 
             //Set body class
             document.body.className="hold-transition fixed skin-blue layout-top-nav";
@@ -229,6 +236,9 @@ ComunicWeb.common.page = {
             //We load the menubar
             ComunicWeb.components.menuBar.common.display();
 
+            //Bottom
+            ComunicWeb.components.bottom.main.display();
+
             //We load specific components for logged in users
             if(ComunicWeb.user.userLogin.getUserLoginState()){
                 
@@ -238,6 +248,10 @@ ComunicWeb.common.page = {
                 //We load conversations manager (login required)
                 ComunicWeb.components.conversations.manager.display();
             }
+            
+            //Ask adminLTE to fix layout
+            if($.AdminLTE.layout)
+                $.AdminLTE.layout.fix();
         }
 
         //Add the subfolder URI (if any)
@@ -263,10 +277,25 @@ ComunicWeb.common.page = {
         this.openPage(currentPage);
     },
 
+    /**
+     * Inform of page location update
+     * 
+     * @param {location} new_location The new location of the page
+     */
+    location_updated: function(new_location){
+
+        //Check if the url change has already been handled or not
+        if(new_location.href.toString() != this._current_url)
+
+            //Open the page using url detection
+            this.refresh_current_page();
+
+    },
+
     /**
      * Prepare a template load by specifiying datas
      * 
-     * @return {Object} The object contener with all required infos
+     * @return {Object} The object container with all required infos
      */
     prepareLoadTemplate: function(){
         //Create an object
@@ -286,10 +315,10 @@ ComunicWeb.common.page = {
      * @param {Object} dataTemplate Datas to pass to the template (to parse it)
      * @param {String} templateURI URI pointing on the template
      * @param {function} afterParsingHTMLtemplate What to do once the template is loaded
-     * @param {Boolean} cleanContener Specify if contener has to be cleaned or not
+     * @param {Boolean} cleanContainer Specify if container has to be cleaned or not
      * @return {Boolean} False if it fails
      */
-    getAndShowTemplate: function(targetElem, dataTemplate, templateURI, afterParsingHTMLtemplate, cleanContener){
+    getAndShowTemplate: function(targetElem, dataTemplate, templateURI, afterParsingHTMLtemplate, cleanContainer){
 
         //First, get the template URL
         templateURL = ComunicWeb.__config.templatesURL + templateURI;
@@ -297,8 +326,8 @@ ComunicWeb.common.page = {
         //Define how to apply the template
         var afterDownloadTemplateContent = function(templateContent){
 
-            //If required, clean the contener
+            //If required, clean the container
-            if(cleanContener){
+            if(cleanContainer){
                 targetElem.innerHTML = "";
             }
 
@@ -418,10 +447,10 @@ ComunicWeb.common.page = {
      * @param {String} templateURI URI pointing on the template
      * @param {Object} additionalData Additionnal to pass to the template
      * @param {function} afterParsingJSONtemplate What to do once JSON template is loaded
-     * @param {Boolean} cleanContener Specify wether the template contener has to be cleaned or not
+     * @param {Boolean} cleanContainer Specify wether the template container has to be cleaned or not
      * @return {Boolean} Flase if it fails
      */
-    getAndShowJSONtemplate: function(targetElem, templateURI, additionalData, afterParsingJSONtemplate, cleanContener){
+    getAndShowJSONtemplate: function(targetElem, templateURI, additionalData, afterParsingJSONtemplate, cleanContainer){
         //Define template URL
         var templateURL = ComunicWeb.__config.templatesURL + templateURI;
 

assets/js/common/shorcuts.js

@@ -112,3 +112,15 @@ function openConversation(id){
         conversationID: id
     });
 }
+
+/**
+ * Display a notification
+ * 
+ * @param {string} message The message of the notification
+ * @param {string} type The type of the notification (danger, info, success, primary)
+ * @param {number} duration The notification duration
+ * @param {string} title The title of the notification
+ */
+function notify(message, type, duration, title){
+    ComunicWeb.common.notificationSystem.showNotification(message, type, duration, title)
+}

assets/js/common/system.js

@@ -24,6 +24,11 @@ ComunicWeb.common.system = {
 			$(document.body).tooltip("disable");
 		});
 
+		//Enable page URLs detection
+		window.location.changed = function(e){
+			ComunicWeb.common.page.location_updated(e);
+		}
+
 		/**
 		 * Prepare login
 		 */

assets/js/common/utils.js

@@ -39,6 +39,7 @@ function createElem(nodeType, appendTo){
  * @info {String} value The value of the new element
  * @info {String} placeholder The placeholder of the new element
  * @info {String} innerHTML Specify the html content of the newly created element
+ * @info {boolean} disabled Set whether the field should be disabled or not (input only)
  * @return {HTMLElement} The newly created element
  */
 function createElem2(infos){
@@ -101,6 +102,10 @@ function createElem2(infos){
 	if(infos.innerHTML)
 		newElem.innerHTML = infos.innerHTML;
 
+	//Set field state
+	if(infos.disabled)
+		infos.disabled = true;
+
 	//Return newly created element
 	return newElem;
 }
@@ -122,8 +127,6 @@ function byId(nodeName){
  * @return {Boolean} True for a success
  */
 function emptyElem(container){
-	//Get children references
-	var children = container.children;
 
 	//Process each child
 	while(container.children.length > 0){
@@ -177,7 +180,7 @@ function clearObject(object){
  * @return {Boolean} True for a valid email address / false else
  */
 function checkMail(emailAddress){
-	return (emailAddress.match(/^[a-zA-Z0-9_.]+@[a-zA-Z0-9-.]{1,}[.][a-zA-Z]{2,5}$/) === null ? false : true);
+	return (emailAddress.match(/^[a-zA-Z0-9_.]+@[a-zA-Z0-9-.]{1,}[.][a-zA-Z]{2,8}$/) === null ? false : true);
 }
 
 /**
@@ -186,17 +189,33 @@ function checkMail(emailAddress){
  * @param {Object} infos Informations about the formgroup element to create
  * * @info {HTMLElement} target The target of the field
  * * @info {String} label The label of the field
+ * * @info {string} name The name of the field
  * * @info {String} placeholder The placeholder of the field
- * * @info {Boolean} checked Defines if the fields has to be checked or not (checkbox only)
+ * * @info {Boolean} checked Defines if the fields has to be checked or not (checkbox/radio only)
  * * @info {Boolean} multiple Defines if the fields can accept more than one response
  * * @info {String} type The type of the field
+ * * @info {string} value The default value of the input
+ * * @info {boolean} disabled Set whether the field should be disabled or not
+ * * @info {string} additionalGroupClasses Additionnal form group class names
  * @return {HTMLElement} The input 
  */
 function createFormGroup(infos){
+
+	//Check for default value
+	var value = infos.value ? infos.value : "";
+
+	//Check if the field has to be disabled
+	var disabled = infos.disabled;
+
 	//Create formgroup
 	var formGroup = createElem("div", infos.target);
 	formGroup.className = "form-group";
 
+	//Add optionnal classes if required
+	if(infos.additionalGroupClasses){
+		formGroup.className += " " + infos.additionalGroupClasses;
+	}
+
 	//Add label
 	var labelElem = createElem("label", formGroup);
 
@@ -206,6 +225,7 @@ function createFormGroup(infos){
 		//Create checkbox
 		var input = createElem("input", labelElem) ;
 		input.type = "checkbox";
+		input.disabled = disabled;
 
 		//Check if input has to be checked by default
 		if(infos.checked){
@@ -224,6 +244,41 @@ function createFormGroup(infos){
       		radioClass: 'iradio_flat-blue'
 		});
 	}
+
+	//In case of radio input
+	else if(infos.type == "radio"){
+
+		//Create radio
+		var input = createElem("input", labelElem) ;
+		input.type = "radio";
+		input.disabled = disabled;
+
+		if(infos.name)
+			input.name = infos.name;
+		
+		if(infos.value)
+			input.value = infos.value;
+
+		//Check if input has to be checked by default
+		if(infos.checked){
+			if(infos.checked === true){
+				input.checked = "true";
+			}
+		}
+
+		//Add label value
+		var labelValue = createElem("span", labelElem);
+		labelValue.innerHTML = " "+infos.label;
+
+		//Enable iCheck
+		$(input).iCheck({
+			checkboxClass: 'icheckbox_flat-blue',
+      		radioClass: 'iradio_flat-blue'
+		});
+
+	}
+
+	//Select2
 	else if(infos.type == "select2"){
 		//In case of select2 element
 		//Check for label
@@ -236,6 +291,7 @@ function createFormGroup(infos){
 		var input = createElem("select", formGroup);
 		input.style.width = "100%";
 		input.className = "form-control select2";
+		input.disabled = disabled;
 		if(infos.multiple) //For multiple changes
 			input.setAttribute("multiple", "multiple");
 		if(infos.placeholder) //Placeholder if required
@@ -256,6 +312,8 @@ function createFormGroup(infos){
 			type: "textarea",
 			class: "form-control",
 			placeholder: infos.placeholder,
+			value: value,
+			disabled: disabled
 		});
 
 	}
@@ -273,6 +331,8 @@ function createFormGroup(infos){
 		input.className = "form-control";
 		input.type = infos.type;
 		input.placeholder = infos.placeholder;
+		input.value = value;
+		input.disabled = disabled;
 	}
 
 	//Return input
@@ -289,7 +349,7 @@ function createFormGroup(infos){
  */
 function create_radio(target, name, label){
 
-	//Contener
+	//Container
 	var radioDiv = createElem2({
 		appendTo: target,
 		type: "div",
@@ -311,7 +371,7 @@ function create_radio(target, name, label){
 	});
 
 	//Add label
-	var labelElem = createElem2({
+	createElem2({
 		appendTo: radioLabel,
 		type: "span",
 		innerHTML: " "+ label
@@ -399,3 +459,52 @@ function add_space(target){
 	});
 	
 }
+
+/**
+ * Get the current absolute position bottom of the screen
+ * 
+ * @return {number} The bottom on the screen
+ */
+function abs_height_bottom_screen(){
+	return window.scrollY + $(window).height();
+}
+
+/**
+ * Page URL update detection
+ * 
+ * @source https://stackoverflow.com/a/1931090/3781411
+ */
+window.location.changed = function(e){};
+
+(function() //create a scope so 'location' is not global
+{
+    var m_loc = window.location.href;
+    setInterval(function()
+    {
+        if(m_loc != window.location.href)
+        {
+			m_loc = window.location.href;
+			window.location.changed(window.location);
+        }
+    }, 900);
+})();
+
+
+/**
+ * jQuery special event that detects the deletion
+ * of a DOM element
+ * 
+ * @source StackOverFlow answer from mtkopone
+ */
+(function($){
+
+	$.event.special.destroyed = {
+
+		remove: function(o){
+			if(o.handler)
+				o.handler();
+		}
+
+	}
+
+})(jQuery);

assets/js/components/account/interface.js

@@ -0,0 +1,34 @@
+/**
+ * Account interface
+ * 
+ * @author Pierre HUBERT
+ */
+
+ComunicWeb.components.account.interface = {
+
+	/**
+	 * Send a request on the server to create an account
+	 * 
+	 * @param {string} firstName The first name of the user
+	 * @param {string} lastName The last name of the user
+	 * @param {email} emailAddress The email adress of the user
+	 * @param {password} password The password of the user
+	 * @param {callback} callback The callback function
+	 */
+	createAccount: function(firstName, lastName, emailAddress, password, callback){
+
+		//Make an API request
+		var apiURI = "account/create";
+		var params = {
+			"firstName": firstName,
+			"lastName": lastName,
+			"emailAddress": emailAddress,
+			"password": password
+		};
+
+		//Perform an API request
+		ComunicWeb.common.api.makeAPIrequest(apiURI, params, false, callback);
+
+	},
+
+}

assets/js/components/bottom/main.js

@@ -0,0 +1,57 @@
+/**
+ * Main bottom script file
+ * 
+ * @author Pierre HUBERT
+ */
+
+ComunicWeb.components.bottom.main = {
+
+	/**
+	 * Display the footer of the pages
+	 */
+	display: function(){
+
+		ComunicWeb.debug.logMessage("Display bottom page.");
+		
+		//Check if the footer is already shown or not
+		var footer = byId("footer");
+
+		if(footer){
+			ComunicWeb.debug.logMessage("Notice : The footer is already shown on the screen !");
+			return;
+		}
+
+		//Create and apply footer
+		footer = createElem2({
+			type: "footer",
+			appendTo: byId("wrapper"),
+			id: "footer",
+			class: "main-footer"
+		});
+
+		//Add right element
+		/*var rightElements = createElem2({
+			appendTo: footer,
+			type: "div",
+			class: "pull-right"
+		});*/
+
+		//Left elements
+		var leftElements = createElem2({
+			appendTo: footer,
+			type: "span",
+			innerHTML: "Comunic     "
+		});
+
+		//Put the language selector link on the right
+		var langLink = createElem2({
+			appendTo: leftElements,
+			type: "a",
+			innerHTML: "<i class='fa fa-globe'></i> Language"
+		});
+		langLink.onclick = function(){
+			ComunicWeb.components.langPicker.show();
+		};
+	}
+
+}

assets/js/components/comments/form.js

@@ -16,7 +16,7 @@ ComunicWeb.components.comments.form = {
 		//Check if we are creating a new comment of or reseting an existing one
 		if(target.className != "comment-creation-form"){
 
-			//Create form contener
+			//Create form container
 			var commentForm = createElem2({
 				appendTo: target,
 				type: "form",
@@ -58,6 +58,27 @@ ComunicWeb.components.comments.form = {
 			class: "input-group-btn"
 		});
 
+
+
+		//Add emoji pick button
+		var addEmojieLabel = createElem2({
+			appendTo: buttonsGroup,
+			type: "label",
+			class: "comment-emoji-select"
+		});
+
+		var imageLabel = createElem2({
+			appendTo: addEmojieLabel,
+			type: "a",
+			class: "btn btn-flat",
+			innerHTML: "<i class='fa fa-smile-o'></i>"
+		});
+
+		//Add a picker on the label
+		ComunicWeb.components.emoji.picker.addPicker(newCommentText, addEmojieLabel);
+
+
+
 		//Add image pick button
 		var addImageLabel = createElem2({
 			appendTo: buttonsGroup,
@@ -77,7 +98,7 @@ ComunicWeb.components.comments.form = {
 			type: "a",
 			class: "btn btn-flat",
 			innerHTML: "<i class='fa fa-picture-o'></i>"
-		})
+		});
 
 		//Add send button
 		var sendButton = createElem2({

assets/js/components/comments/ui.js

@@ -43,8 +43,8 @@ ComunicWeb.components.comments.ui = {
 	 */
 	_process_comments: function(infos, usersInfos, postID, target){
 
-		//Create comments contener
+		//Create comments container
-		var contener = createElem2({
+		var container = createElem2({
 			appendTo: target,
 			type: "div",
 			class: "box-comments post-comments"
@@ -52,12 +52,12 @@ ComunicWeb.components.comments.ui = {
 
 		//Process the list of comments
 		for(i in infos){
-			this._show_comment(infos[i], usersInfos['user-' + infos[i].userID], contener);
+			this._show_comment(infos[i], usersInfos['user-' + infos[i].userID], container);
 		}
 
 		//Add comment creation form (if possible)
 		if(signed_in()){
-			ComunicWeb.components.comments.form.display(postID, contener)
+			ComunicWeb.components.comments.form.display(postID, container)
 		}
 
 	},
@@ -95,10 +95,10 @@ ComunicWeb.components.comments.ui = {
 	 */
 	_show_comment: function(infos, user, target){
 		
-		//Create comment contener (if required)
+		//Create comment container (if required)
 		if(target.className != "box-comment"){
 
-			var commentContener = createElem2({
+			var commentContainer = createElem2({
 				appendTo: target,
 				type: "div",
 				class: "box-comment"
@@ -106,16 +106,16 @@ ComunicWeb.components.comments.ui = {
 
 		}
 
-		//Empty comment contener
+		//Empty comment container
 		else {
 			emptyElem(target);
-			var commentContener = target;
+			var commentContainer = target;
 		}
 		
 
 		//Add user image
 		createElem2({
-			appendTo: commentContener,
+			appendTo: commentContainer,
 			type: "img",
 			class: "img-circle imgs-sm",
 			src: user.accountImage
@@ -123,13 +123,13 @@ ComunicWeb.components.comments.ui = {
 
 		//Create comment text
 		var commentText = createElem2({
-			appendTo: commentContener,
+			appendTo: commentContainer,
 			type: "div",
 			class: "comment-text"
 		});
 
 		//Add username
-		var userNameContener = createElem2({
+		var userNameContainer = createElem2({
 			appendTo: commentText,
 			type: "span",
 			class: "username",
@@ -137,15 +137,15 @@ ComunicWeb.components.comments.ui = {
 		});
 
 		//Add right elements
-		var rightContener = createElem2({
+		var rightContainer = createElem2({
-			appendTo: userNameContener,
+			appendTo: userNameContainer,
 			type: "span",
 			class: "text-muted pull-right"
 		});
 
 		//Add comment creation date
 		createElem2({
-			appendTo: rightContener,
+			appendTo: rightContainer,
 			type: "span",
 			innerHTML: ComunicWeb.common.date.timeDiffToStr(infos.time_sent) + " ago"
 		});
@@ -155,7 +155,7 @@ ComunicWeb.components.comments.ui = {
 
 			//Create a button to update the comment
 			var editCommentLink = createElem2({
-				appendTo: rightContener,
+				appendTo: rightContainer,
 				type: "a",
 				class: "edit-comment-link"
 			});
@@ -170,14 +170,14 @@ ComunicWeb.components.comments.ui = {
 			editCommentLink.onclick = function(){
 
 				//Open comment editor
-				ComunicWeb.components.comments.editor.open(infos, commentContener);
+				ComunicWeb.components.comments.editor.open(infos, commentContainer);
 				
 			}
 
 
 			//Create a button to delete the comment
 			var deleteCommentLink = createElem2({
-				appendTo: rightContener,
+				appendTo: rightContainer,
 				type: "a",
 				class: "delete-comment-link"
 			});
@@ -198,12 +198,12 @@ ComunicWeb.components.comments.ui = {
 						return;
 					
 					//Hide the comment
-					commentContener.style.visibility = "hidden";
+					commentContainer.style.visibility = "hidden";
 					
 					//Delete the comment
 					ComunicWeb.components.comments.interface.delete(infos.ID, function(response){
 
-						commentContener.style.visibility = "visible";
+						commentContainer.style.visibility = "visible";
 
 						//Check for errors
 						if(response.error){
@@ -212,8 +212,8 @@ ComunicWeb.components.comments.ui = {
 						}
 
 						//Delete the comment node
-						emptyElem(commentContener);
+						emptyElem(commentContainer);
-						commentContener.remove();
+						commentContainer.remove();
 					});
 
 				});
@@ -230,21 +230,21 @@ ComunicWeb.components.comments.ui = {
 		});
 
 		//Parse emojies
-		ComunicWeb.components.emoji.parser.parse({
+		ComunicWeb.components.textParser.parse({
 			element: commentContent
 		});
 
 		//Add comment image (if any)
 		if(infos.img_url != null){
 			
-			var commentImageContener = createElem2({
+			var commentImageContainer = createElem2({
 				appendTo: commentText,
 				type: "div",
-				class: "comment-img-contener"
+				class: "comment-img-container"
 			});
 
 			var commentImageLink = createElem2({
-				appendTo: commentImageContener,
+				appendTo: commentImageContainer,
 				type: "a",
 				href: infos.img_url
 			});

assets/js/components/conversations/chatWindows.js

@@ -24,7 +24,7 @@ ComunicWeb.components.conversations.chatWindows = {
 
 		//Create a conversation window
 		var conversationWindow = this.create({
-			target: byId(ComunicWeb.components.conversations.manager.__conversationsContenerID),
+			target: byId(ComunicWeb.components.conversations.manager.__conversationsContainerID),
 			conversationID: conversationID,
 		});
 
@@ -75,7 +75,7 @@ ComunicWeb.components.conversations.chatWindows = {
 
 
 		//Debug
-		//Create messages contener
+		//Create messages container
 		infosBox.messagesArea = createElem2({
 			appendTo: infosBox.boxBody,
 			type: "div",
@@ -120,8 +120,8 @@ ComunicWeb.components.conversations.chatWindows = {
 	 */
 	addMessageform: function(infosBox){
 
-		//Create form contener
+		//Create form container
-		var conversationFormContener = createElem2({
+		var conversationFormContainer = createElem2({
 			appendTo: infosBox.boxFooter,
 			type: "form",
 			class: "create-message-form"
@@ -129,7 +129,7 @@ ComunicWeb.components.conversations.chatWindows = {
 
 		//Create input group
 		var inputGroup = createElem2({
-			appendTo: conversationFormContener,
+			appendTo: conversationFormContainer,
 			type: "div",
 			class: "input-group"
 		});
@@ -165,6 +165,36 @@ ComunicWeb.components.conversations.chatWindows = {
 			class: "input-group-btn",
 		});
 
+		//Add emojie button
+		var emojiButton = createElem2({
+			appendTo: buttonGroup,
+			type: "button",
+			elemType: "button",
+			class: "btn btn-flat btn-add-emoji",
+		});
+		
+			//Add image icon
+			createElem2({
+				type: "i",
+				appendTo: emojiButton, 
+				class: "fa fa-smile-o"
+			});
+		
+		//Make emojie button lives
+		ComunicWeb.components.emoji.picker.addPicker(inputText, emojiButton, function(){
+			
+			//Make the emojie picker visible
+			wdtEmojiBundle.popup.style.top = (abs_height_bottom_screen()-357)+"px";
+
+			//Make the smile button visible
+			var currLeft = Number(wdtEmojiBundle.popup.style.left.replace("px", ""));
+			var potentialLeft = currLeft - 20;
+
+			if(potentialLeft > 0)
+				wdtEmojiBundle.popup.style.left = potentialLeft + "px";
+
+		});
+
 		//Add image button
 		var imageButton = createElem2({
 			appendTo: buttonGroup,
@@ -209,7 +239,7 @@ ComunicWeb.components.conversations.chatWindows = {
 
 		//Add required elements to infosBox
 		infosBox.sendMessageForm = {
-			formRoot: conversationFormContener,
+			formRoot: conversationFormContainer,
 			sendButton: sendButton,
 			inputText: inputText,
 			textarea2: textarea2,
@@ -624,37 +654,14 @@ ComunicWeb.components.conversations.chatWindows = {
 			ComunicWeb.components.conversations.chatWindows.resetCreateMessageForm(convInfos);
 		}
 
-		//Check if an image is included with the message or not
-		if(form.inputImage.files[0]){
-			//Include the image with the request (export the image as URL)
-			var reader = new FileReader();
-			reader.readAsDataURL(form.inputImage.files[0]);
-			var sendImage = reader.result;
-
-			//The function will resume once the image is fully converted
-			reader.addEventListener("load", function() {
-
 		//Send the message throught the interface
 		ComunicWeb.components.conversations.interface.sendMessage({
 			conversationID: convInfos.infos.ID,
 			message: form.inputText.value,
-					image: reader.result,
+			image: form.inputImage,
 			callback: onceSent
 		});
 		
-			}, false);
-
-		}
-		else {
-			//Send the message throught the interface
-			ComunicWeb.components.conversations.interface.sendMessage({
-				conversationID: convInfos.infos.ID,
-				message: form.inputText.value,
-				callback: onceSent
-			});
-		}
-			
-		
 		//Success
 		return true;
 	},
@@ -688,12 +695,12 @@ ComunicWeb.components.conversations.chatWindows = {
 	 * Add a message to a conversation window
 	 * 
 	 * @param {Integer} conversationID The ID of the conversation to update
-	 * @param {Object} messageInfos Informations about the message to add
+	 * @param {Object} messageInfo Information about the message to add
 	 * @return {Boolean} True for a success
 	 */
-	addMessage: function(conversationID, messageInfos){
+	addMessage: function(conversationID, messageInfo){
 
-		//First, check if the conversation informations can be found
+		//First, check if the conversation information can be found
 		if(!this.__conversationsCache["conversation-"+conversationID]){
 			ComunicWeb.debug.logMessage("Conversation Chat Windows : Error ! Couldn't add a message to the conversation because the conversation was not found !");
 			return false;
@@ -702,31 +709,100 @@ ComunicWeb.components.conversations.chatWindows = {
 		//Else extract conversation informations
 		var convInfos = this.__conversationsCache["conversation-"+conversationID];
 
-		//Check if it is the current user who sent the message
-		var userIsPoster = messageInfos.ID_user == userID();
-
 		//Check if this is the first message of the conversation or not
-		if(!convInfos.lastMessage){
+		if(!convInfos.messages){
-			//Initialize last message object
+			convInfos.messages = [];
-			convInfos.lastMessage = {
-				userID: 0,
-				messageContainer: false,
-			}
 		}
 
-		//Check if message poster is the same as the last message
+		//Get message HTML element add append it
-		if(convInfos.lastMessage.userID == messageInfos.ID_user){
+		var uiMessageInfo = this._get_message_element(convInfos, messageInfo);
-			//Skip message container creation & user avatar rendering...
+		convInfos.box.messagesArea.appendChild(uiMessageInfo.rootElem);
-			var messageContainer = convInfos.lastMessage.messageContainer;
+
-			var firstMessageFromUser = false;
+		//Perform post-processing operations
+		var num = convInfos.messages.push(uiMessageInfo);
+
+		//Check if it is not the first message from the current user
+		this._makeMessageFollowAnotherMessage(convInfos, num - 1);
+
+		//Enable slimscroll
+		$(convInfos.box.messagesArea).slimscroll({
+			height: "250px",
+		});
+
+		//Scroll to the bottom of the conversation
+		var scrollBottom = $(convInfos.box.messagesArea).prop("scrollHeight")+"px";
+		$(convInfos.box.messagesArea).slimScroll({
+			scrollTo: scrollBottom
+		});
+
+		//Initialize top scroll detection if required
+		this.initTopScrollDetection(conversationID);
+
+		//Success
+		return true;
+	},
+
+	/**
+	 * Add old messages to a conversation window
+	 * 
+	 * @param {number} conversationID The ID of the target conversation
+	 * @param {array} messages The list of messages to add
+	 */
+	addOldMessages: function(conversationID, messages){
+
+		//First, check if the conversation information can be found
+		if(!this.__conversationsCache["conversation-"+conversationID]){
+			ComunicWeb.debug.logMessage("Conversation Chat Windows : Error ! Couldn't add a message to the conversation because the conversation was not found !");
+			return false;
 		}
-		else {
+
-			//Initialize user & message informations elements
+		//Else extract conversation informations
-			var firstMessageFromUser = true;
+		var conv = this.__conversationsCache["conversation-"+conversationID];
+
+		//Save the position of the oldest message element
+		var currOldestMessageElem = conv.messages[0].rootElem;
+
+		//Process the list of messages in reverse order
+		messages.reverse();
+		messages.forEach(function(message){
+
+			//Get message element
+			var uiMessageInfo = ComunicWeb.components.conversations.chatWindows._get_message_element(conv, message);
+
+			//Add the messages at the begining of the conversation
+			conv.box.messagesArea.insertBefore(uiMessageInfo.rootElem, conv.messages[0].rootElem);
+
+			//Add the message to the list
+			conv.messages.unshift(uiMessageInfo);			
+
+			//Check if some information about the post can be updated
+			ComunicWeb.components.conversations.chatWindows._makeMessageFollowAnotherMessage(conv, 1);
+
+		});
+
+		//Update slimscroll
+		newScrollPos = currOldestMessageElem.offsetTop - 30;
+		if(newScrollPos < 0)
+			newScrollPos = 0;
+		$(conv.box.messagesArea).slimScroll({
+			scrollTo: newScrollPos + "px"
+		});
+	},
+
+	/**
+	 * Generate message HTML node based on given information
+	 * 
+	 * @param {object} conversationInfo Information about the created conversation
+	 * @param {object} message Information about the target message
+	 * @return {object} Information about the created message element
+	 */
+	_get_message_element: function(conversationInfo, message){
+
+		//Check if it is the current user who sent the message
+		var userIsPoster = message.ID_user == userID();
 
 		//Create message element
 		var messageContainer = createElem2({
-				appendTo: convInfos.box.messagesArea,
 			type: "div",
 			class: "direct-chat-msg " + (userIsPoster ? "right" : "")
 		});
@@ -738,11 +814,17 @@ ComunicWeb.components.conversations.chatWindows = {
 			class: "direct-chat-info clearfix"
 		});
 
+		//Add top information
+		var topInfosElem = createElem2({
+			appendTo: messageHeader,
+			type: "div",
+			class: "direct-chat-name pull-" + (userIsPoster ? "right" : "left"),
+		});
+
 		//Add user name
 		var usernameElem = createElem2({
-				appendTo: messageHeader,
+			appendTo: topInfosElem,
 			type: "span",
-				class: "direct-chat-name pull-" + (userIsPoster ? "right" : "left"),
 			innerHTML: "Loading",
 		});
 
@@ -760,53 +842,45 @@ ComunicWeb.components.conversations.chatWindows = {
 		});
 
 		//Load user informations
-			if(convInfos.membersInfos["user-" + messageInfos.ID_user]){
+		if(conversationInfo.membersInfos["user-" + message.ID_user]){
 
 			//Get informations
-				var userInfos = convInfos.membersInfos["user-" + messageInfos.ID_user];
+			var userInfos = conversationInfo.membersInfos["user-" + message.ID_user];
 
 			//Replace poster name
 			usernameElem.innerHTML = userInfos.firstName + " " + userInfos.lastName;
 			userAccountImage.src = userInfos.accountImage;
 		}
 
-			//Update conversation informations
-			convInfos.lastMessage = {
-				userID: messageInfos.ID_user,
-				messageContainer: messageContainer,
-			}
-		}
-		
-
 		//Add message
 		var messageTargetElem = createElem2({
 			appendTo: messageContainer,
 			type: "div",
-			class: "direct-chat-text " + (!firstMessageFromUser ? "not-first-message" : ""),
+			class: "direct-chat-text ",
 		});
 
 		//Add text message
 		var textMessage = createElem2({
 			appendTo: messageTargetElem,
 			type: "span",
-			innerHTML: removeHtmlTags(messageInfos.message), //Remove HTML tags
+			innerHTML: removeHtmlTags(message.message), //Remove HTML tags
 		});
 
 		//Check if an image has to be added
-		if(messageInfos.image_path != null){
+		if(message.image_path != null){
 			
 			//Image link
 			var imageLink = createElem2({
 				appendTo: messageTargetElem,
 				type:"a",
-				href: messageInfos.image_path,
+				href: message.image_path,
 			});
 
 			//Image element
 			createElem2({
 				appendTo: imageLink,
 				type: "img",
-				src: messageInfos.image_path,
+				src: message.image_path,
 				class: "conversation-msg-image"
 			});
 
@@ -819,25 +893,135 @@ ComunicWeb.components.conversations.chatWindows = {
 			}
 		}
 
+		//Add date
+		var dateElem = createElem2({
+			appendTo: messageContainer,
+			type: "div",
+			class: "date-conversation-message",
+			innerHTML: ComunicWeb.common.date.timeDiffToStr(message.time_insert)
+		});
+
 		//Parse emojies in text message
-		ComunicWeb.components.emoji.parser.parse({
+		ComunicWeb.components.textParser.parse({
 			element: textMessage,
 		});
 
-		//Enable slimscrool
+		//Return information about the message
-		$(convInfos.box.messagesArea).slimscroll({
+		return {
-			height: "250px",
+			userID: message.ID_user,
-		});
+			rootElem: messageContainer,
+			userNameElem: usernameElem,
+			dateElem: dateElem,
+			time_insert: message.time_insert,
+			messageTargetElem: messageTargetElem,
+			accountImage: userAccountImage
+		};
 
-		//Scroll to the bottom of the conversation
-		var scrollBottom = $(convInfos.box.messagesArea).prop("scrollHeight")+"px";
-		$(convInfos.box.messagesArea).slimScroll({
-			scrollTo: scrollBottom
-		});
-
-		//Success
-		return true;
 	},
+
+	/**
+	 * Make a conversation message "follow" another conversation message from the
+	 * same user
+	 * 
+	 * @param {object} conv Information about the target conversation
+	 * @param {number} num The number of the conversation message to update
+	 */
+	_makeMessageFollowAnotherMessage: function(conv, num){
+
+		if(conv.messages[num - 1]){
+			
+			if(conv.messages[num-1].userID == conv.messages[num].userID){
+				
+				//Update object class name
+				conv.messages[num].messageTargetElem.className += " not-first-message";
+
+				//Hide user name and account image
+				conv.messages[num].userNameElem.style.display = "none";
+				conv.messages[num].accountImage.style.display = "none";
+
+				//Update the class of the previous message
+				conv.messages[num-1].rootElem.className += " not-last-message-from-user";
+
+			}
+
+
+			//Check the difference of time between the two messages
+			if(conv.messages[num].time_insert - conv.messages[num - 1].time_insert < 3600
+				|| conv.messages[num].dateElem.innerHTML == conv.messages[num - 1].dateElem.innerHTML)
+				conv.messages[num].dateElem.style.display = "none";
+		}
+
+	},
+
+	/**
+	 * Init top scroll detection (if required)
+	 * 
+	 * @param {number} conversationID The ID of the target conversation
+	 */
+	initTopScrollDetection: function(conversationID){
+
+		//Extract conversation informations
+		var convInfo = this.__conversationsCache["conversation-"+conversationID];
+		
+		//Check if nothing has to be done
+		if(convInfo.box.initializedScrollDetection)
+			return;
+		
+		//Mark scroll detection as initialized
+		convInfo.box.initializedScrollDetection = true;
+
+		var scrollDetectionLocked = false;
+		var scrollTopCount = 0;
+		$(convInfo.box.messagesArea).slimScroll().bind("slimscrolling", function(e, pos){
+
+			if(scrollDetectionLocked)
+				return;
+
+			if(pos != 0){
+				scrollTopCount = 0;
+			}
+
+			scrollTopCount++;
+
+			//Check top count
+			if(scrollTopCount < 3)
+				return;
+			
+			//Lock the detection
+			scrollDetectionLocked = true;
+
+			//Fetch older messages
+			ComunicWeb.components.conversations.interface.getOlderMessages(
+				conversationID,
+				ComunicWeb.components.conversations.service.getOldestMessageID(conversationID),
+				10,
+				function(result){
+
+					//Unlock scroll detection
+					scrollDetectionLocked = false;
+
+					//Check for errors
+					if(result.error){
+						notify("An error occured while trying to fetch older messages for the conversation !");
+						return;
+					}
+
+					//Check for results
+					if(result.length == 0){
+						//Lock scroll detection in order to avoid useless traffic
+						scrollDetectionLocked = true;
+						return;
+					}
+
+					//Save the ID of the oldest message
+					ComunicWeb.components.conversations.service.setOldestMessageID(conversationID, result[0].ID);
+
+					//Display the list of messages
+					ComunicWeb.components.conversations.chatWindows.addOldMessages(conversationID, result);
+				}
+			);
+		});
+	}
 }
 
 //Register conversations cache cleaning function

assets/js/components/conversations/interface.js

@@ -242,7 +242,7 @@ ComunicWeb.components.conversations.interface = {
 	 * @param {Object} infos Informations about the message to send
 	 * @info {Integer} conversationID The ID of the conversation
 	 * @info {String} message The message to send
-	 * @info {String} image Optionnal, base64-encoded image
+	 * @info {HTMLElement} image Optionnal, input field with an image
 	 * @info {function} callback What to do once the image was successfully sent
 	 * @return {Boolean} true for a success
 	 */
@@ -250,18 +250,37 @@ ComunicWeb.components.conversations.interface = {
 
 		//Perform an API request
 		var apiURI = "conversations/sendMessage";
+
+		var hasImage = false;
+		if(infos.image){
+			if(infos.image.files[0])
+				hasImage = true;
+		}
+
+		//Check wether an image has to be included or not
+		if(!hasImage){
+
+			//Prepare request
 			var params = {
 				message: infos.message,
 				conversationID: infos.conversationID,
-		}
+			};
-
-		//Add an image (if any specified)
-		if(infos.image)
-			params.image = infos.image;
 
 			//Perform an API request
 			ComunicWeb.common.api.makeAPIrequest(apiURI, params, true, infos.callback);
+		}
 
+		//If we have an image, we must do a formdata request
+		else {
+
+			var fd = new FormData();
+			fd.append("message", infos.message);
+			fd.append("conversationID", infos.conversationID);
+			fd.append("image", infos.image.files[0], infos.image.files[0].name);
+
+			//Perform an API request
+			ComunicWeb.common.api.makeFormDatarequest(apiURI, fd, true, infos.callback);
+		}
 	},
 
 	/**
@@ -303,6 +322,27 @@ ComunicWeb.components.conversations.interface = {
 
 	},
 
+	/**
+	 * Get older message of a conversation
+	 * 
+	 * @param {number} conversationID The ID of the conversation
+	 * @param {number} oldestMessageID The ID of the oldest message known
+	 * @param {number} limit The limit
+	 * @param {function} callback
+	 */
+	getOlderMessages: function(conversationID, oldestMessageID, limit, callback){
+
+		//Perform a request on the API
+		var apiURI = "conversations/get_older_messages";
+		var params = {
+			conversationID: conversationID,
+			oldest_message_id: oldestMessageID,
+			limit: limit
+		};
+
+		ComunicWeb.common.api.makeAPIrequest(apiURI, params, true, callback);
+	},
+
 	/**
 	 * Empty conversations cache
 	 * 

assets/js/components/conversations/manager.js

@@ -7,9 +7,9 @@
 ComunicWeb.components.conversations.manager = {
 
 	/**
-	 * @var {String} The ID of the conversation contener
+	 * @var {String} The ID of the conversation container
 	 */
-	__conversationsContenerID: "conversationsElem",
+	__conversationsContainerID: "conversationsElem",
 
 	/**
 	 * Display conversations manager
@@ -19,7 +19,7 @@ ComunicWeb.components.conversations.manager = {
 	display: function(){
 
 		//Try to get conversation manager
-		var conversationsContainerElem = byId(this.__conversationsContenerID);
+		var conversationsContainerElem = byId(this.__conversationsContainerID);
 
 		//Check if element exists or not
 		if(conversationsContainerElem){
@@ -33,7 +33,7 @@ ComunicWeb.components.conversations.manager = {
 
 		//Create conversations manager element
 		var conversationsContainerElem = createElem("div");
-		conversationsContainerElem.id = this.__conversationsContenerID;
+		conversationsContainerElem.id = this.__conversationsContainerID;
 		
 		//Insert the element at the right place
 		var pageTarget = byId("pageTarget");

assets/js/components/conversations/service.js

@@ -3,7 +3,7 @@
  * 
  * Ensure that the content of the conversations is up to date
  * 
- * @author Pierre HUBER
+ * @author Pierre HUBERT
  */
 
 ComunicWeb.components.conversations.service = {
@@ -19,7 +19,7 @@ ComunicWeb.components.conversations.service = {
 	__serviceCache: false,
 
 	/**
-	 * @var {Boolean} __serviceLock Specify wether the service is already in use or not
+	 * @var {Boolean} __serviceLock Specify whether the service is already in use or not
 	 */
 	__serviceLock: false,
 	
@@ -162,7 +162,9 @@ ComunicWeb.components.conversations.service = {
 				//Extract conversation ID
 				var messages = result[i];
 
-				//We update last message ID with the last message ID
+				//We update first and last message ID with the last message ID
+				if(messages[0].ID < this.__serviceCache[i].first_message_id || this.__serviceCache[i].first_message_id == 0)
+					this.__serviceCache[i].first_message_id = messages[0].ID;
 				this.__serviceCache[i].last_message_id = messages[messages.length-1].ID;
 
 				//We process each message by calling chat windows script to ask it to add messages
@@ -195,6 +197,7 @@ ComunicWeb.components.conversations.service = {
 		//Register conversation
 		this.__serviceCache['conversation-' + conversationID] = {
 			conversationID: conversationID,
+			first_message_id: 0,
 			last_message_id: 0,
 		};
 
@@ -223,6 +226,41 @@ ComunicWeb.components.conversations.service = {
 		return true;
 	},
 
+	/**
+	 * Get the oldest messages of a conversation
+	 * 
+	 * @param {number} conversationID The ID of the target conversation
+	 * @return {numbert} The ID of the oldest message / -1 in case of failure
+	 */
+	getOldestMessageID: function(conversationID){
+
+		//Try to fetch information
+		if(this.__serviceCache){
+			if(this.__serviceCache['conversation-'+conversationID]){
+				return this.__serviceCache['conversation-'+conversationID].first_message_id;
+			}
+		}
+
+		//The conversation was not found
+		return -1;
+	},
+
+	/**
+	 * Set the oldest messages of a conversation
+	 * 
+	 * @param {number} conversationID The ID of the target conversation
+	 * @param {numbert} firstMessageID New value for the first known message id
+	 */
+	setOldestMessageID: function(conversationID, firstMessageID){
+
+		//Try to fetch information
+		if(this.__serviceCache){
+			if(this.__serviceCache['conversation-'+conversationID]){
+				this.__serviceCache['conversation-'+conversationID].first_message_id = firstMessageID;
+			}
+		}
+	},
+
 	/**
 	 * Empty service cache (unregister all conversations)
 	 * 

assets/js/components/conversations/unreadDropdown.js

@@ -18,7 +18,7 @@ ComunicWeb.components.conversations.unreadDropdown = {
 		var dropdown = createElem2({
 			appendTo: target,
 			type: "li",
-			class: "dropdown messages-menu"
+			class: "dropdown messages-menu new-conversations-dropdown"
 		});
 
 		//Add dropdown toggle
@@ -55,12 +55,12 @@ ComunicWeb.components.conversations.unreadDropdown = {
 		});
 
 		//Add conversations list
-		var conversationsListContener = createElem2({
+		var conversationsListContainer = createElem2({
 			appendTo: dropdownMenu,
 			type: "li"
 		});
 		var conversationsList = createElem2({
-			appendTo: conversationsListContener,
+			appendTo: conversationsListContainer,
 			type: "ul",
 			class: "menu"
 		});
@@ -115,7 +115,7 @@ ComunicWeb.components.conversations.unreadDropdown = {
 			var usersID = [];
 
 			//Process the list of conversations
-			for (let index = 0; index < conversations.length; index++) {
+			for (var index = 0; index < conversations.length; index++) {
 				const entry = conversations[index];
 				
 				var userID = entry.userID;
@@ -153,7 +153,7 @@ ComunicWeb.components.conversations.unreadDropdown = {
 		target.innerHTML = "";
 
 		//Process each conversation
-		for (let index = 0; index < conversations.length; index++) {
+		for (var index = 0; index < conversations.length; index++) {
 			
 			//Get the conversation
 			const conversation = conversations[index];
@@ -225,7 +225,8 @@ ComunicWeb.components.conversations.unreadDropdown = {
 			var conversationMessage = createElem2({
 				appendTo: convLink,
 				type: "p",
-				innerHTML: "<em>"+conversation.message+"</em>"
+				class: "message-content",
+				innerHTML: removeHtmlTags(conversation.message)
 			});
 
 			//Make the conversation link lives

assets/js/components/emoji/parser.js

@@ -14,6 +14,11 @@ ComunicWeb.components.emoji.parser = {
 	 */
 	__twemojiBase: ComunicWeb.__config.assetsURL + "3rdparty/twemoji/2/",
 
+	/**
+	 * EmojiConvertor instance
+	 */
+	__emojiConvertor: null,
+
 	/**
 	 * Parse emojies
 	 * 
@@ -26,6 +31,9 @@ ComunicWeb.components.emoji.parser = {
 		//Peform string parsing
 		infos.element.innerHTML = this.shorcutToHTMLcode(infos.element.innerHTML);
 
+		//Perform colon conversion
+		infos.element.innerHTML = this.colonConversion(infos.element.innerHTML);
+
 		//Perform Twitter parsing
 		this.twitterEmojiesParsing(infos.element);
 
@@ -33,6 +41,25 @@ ComunicWeb.components.emoji.parser = {
 		return true;
 	},
 
+	/**
+	 * Perform the conversion from colon code to Emoji code
+	 * 
+	 * @param {string} string The string to convert
+	 * @return {string} Converted string
+	 */
+	colonConversion: function(string){
+
+		//Check if the emoji convertor has to be created
+		if(this.__emojiConvertor == null){
+			this.__emojiConvertor = new EmojiConvertor();
+			this.__emojiConvertor.init_env(); // else auto-detection will trigger when we first convert
+			this.__emojiConvertor.replace_mode = 'unified';
+			this.__emojiConvertor.allow_native = true;
+		}
+
+		return this.__emojiConvertor.replace_colons(string);
+	},
+
 	/**
 	 * Perform Twitter emojies parsing
 	 * 

assets/js/components/emoji/picker.js

@@ -0,0 +1,104 @@
+/**
+ * Emojies picker
+ * 
+ * @author Pierre HUBERT
+ */
+
+ComunicWeb.components.emoji.picker = {
+
+	//Source code of the emojies picker
+	pickerSrc: '<div class="wdt-emoji-popup">'+
+	'<a href="#" class="wdt-emoji-popup-mobile-closer"> &times; </a>' +
+	'<div class="wdt-emoji-menu-content">' +
+	'	<div id="wdt-emoji-menu-header">' +
+	'		<!--<a class="wdt-emoji-tab active" data-group-name="Recent"></a>-->' +
+	'		<a class="wdt-emoji-tab" data-group-name="People"></a>' +
+	'		<a class="wdt-emoji-tab" data-group-name="Nature"></a>' +
+	'		<a class="wdt-emoji-tab" data-group-name="Foods"></a>' +
+	'		<a class="wdt-emoji-tab" data-group-name="Activity"></a>' +
+	'		<a class="wdt-emoji-tab" data-group-name="Places"></a>' +
+	'		<a class="wdt-emoji-tab" data-group-name="Objects"></a>' +
+	'		<a class="wdt-emoji-tab" data-group-name="Symbols"></a>' +
+	'		<a class="wdt-emoji-tab" data-group-name="Flags"></a>' +
+	'		<!--<a class="wdt-emoji-tab" data-group-name="Custom"></a>-->' +
+	'	</div>' +
+	'	<div class="wdt-emoji-scroll-wrapper">' +
+	'		<div id="wdt-emoji-menu-items">' +
+	'			<input id="wdt-emoji-search" type="text" placeholder="Search">' +
+	'			<h3 id="wdt-emoji-search-result-title">Search Results</h3>' +
+	'			<div class="wdt-emoji-sections"></div>' +
+	'			<div id="wdt-emoji-no-result">No emoji found</div>' +
+	'		</div>' +
+	'	</div>' +
+	'	<div id="wdt-emoji-footer">' +
+	'		<div id="wdt-emoji-preview">' +
+	'			<span id="wdt-emoji-preview-img"></span>' +
+	'			<div id="wdt-emoji-preview-text">' +
+	'				<span id="wdt-emoji-preview-name"></span><br>' +
+	'				<span id="wdt-emoji-preview-aliases"></span>' +
+	'			</div>' +
+	'		</div>' +
+
+	'		<div id="wdt-emoji-preview-bundle">' +
+	'			<span>WDT Emoji Bundle</span>' +
+	'		</div>' +
+	'	</div>' +
+	'</div>' +
+	'</div>";',
+
+
+	/**
+	 * Initialize Emojie picker
+	 */
+	init: function(){
+
+		//Check if the picker has to be included in the page
+		var targetPicker = byId("emojiPicker");
+		if(!targetPicker){
+
+			targetPicker = createElem2({
+				appendTo: byId("wrapper"),
+				type: "div",
+				id: "emojiPicker",
+				innerHTML: this.pickerSrc
+			});
+
+			wdtEmojiBundle.defaults.emojiSheets.twitter = ComunicWeb.__config.assetsURL + "3rdparty/wdt-emoji/sheets/sheet_twitter_64_indexed_128.png";
+			wdtEmojiBundle.init('.wdt-emoji-bundle-enabled');
+			wdtEmojiBundle.changeType("twitter");
+		
+		}
+	},
+
+	/**
+	 * Add a picker for an element
+	 * 
+	 * @param {HTMLElement} elem Target element
+	 * @param {HTMLElement} trigger Alternative element to trigger picker
+	 * @param {function} afterPicker Optionnal function to call once the openPicker
+	 * function has been called on trigger click
+	 */
+	addPicker: function(elem, trigger, afterPicker){
+
+		//Make sure the system is ready
+		this.init();
+
+		//Check if the default features of the framework can be used
+		if(!trigger){
+			wdtEmojiBundle.addPicker(elem);
+			return;
+		}
+
+		trigger.addEventListener('click', function(e){
+			wdtEmojiBundle.openPicker.call(this, e);
+
+			if(afterPicker)
+				afterPicker(e);
+		});
+
+		var parent = elem.parentNode;
+		parent.className += ' wdt-emoji-picker-parent';
+		elem.className += ' wdt-emoji-bundle-enabled wdt-emoji-picker-ready';
+	}
+
+}

assets/js/components/friends/friendsBar.js

@@ -160,6 +160,9 @@ ComunicWeb.components.friends.bar = {
 		//Make the link lives
 		friendLink.onclick = function(){
 			openUserPage(userIDorPath(userInfos));
+
+			//For the responsive mode
+			ComunicWeb.components.friends.bar.toggleShowHide();
 		}
 
 		//Add user account image

assets/js/components/friends/listModal.js

@@ -162,7 +162,7 @@ ComunicWeb.components.friends.listModal = {
 	 */
 	_show_read_only: function(target, ids, user){
 
-		//Create the friends list contener
+		//Create the friends list container
 		var list = createElem2({
 			appendTo: target,
 			type: "div",
@@ -179,10 +179,10 @@ ComunicWeb.components.friends.listModal = {
 			}
 
 			//Parse the list of friends
-			ids.forEach(id => {
+			ids.forEach(function(id){
 				
 				//Display the user
-				const userContener = createElem2({
+				const userContainer = createElem2({
 					appendTo: list,
 					type: "div",
 					class: "friend"
@@ -190,7 +190,7 @@ ComunicWeb.components.friends.listModal = {
 
 				//Create user link
 				const userLink = createElem2({
-					appendTo: userContener,
+					appendTo: userContainer,
 					type: "a"
 				});
 
@@ -253,7 +253,7 @@ ComunicWeb.components.friends.listModal = {
 			}
 
 			//Display each friend
-			list.forEach(friend => {
+			list.forEach(function(friend){
 
 				//Display the friend
 				ComunicWeb.components.friends.ui.show_personnal_friend(listTarget, friend, users["user-"+friend.ID_friend]);

assets/js/components/friends/ui.js

@@ -15,13 +15,13 @@ ComunicWeb.components.friends.ui = {
 	 */
 	show_personnal_friend: function(target, friend, user){
 
-		//Create friend contener, if required
+		//Create friend container, if required
 		if(target.className == "friend"){
-			var friendContener = target;
+			var friendContainer = target;
-			emptyElem(friendContener);
+			emptyElem(friendContainer);
 		}
 		else
-			var friendContener = createElem2({
+			var friendContainer = createElem2({
 				appendTo: target,
 				type: "div",
 				class: "friend"
@@ -32,7 +32,7 @@ ComunicWeb.components.friends.ui = {
 
 		//Create user link
 		const userLink = createElem2({
-			appendTo: friendContener,
+			appendTo: friendContainer,
 			type: "a"
 		});
 
@@ -64,7 +64,7 @@ ComunicWeb.components.friends.ui = {
 
 		//Create actions area
 		var actionsOnFriendArea = createElem2({
-			appendTo: friendContener, 
+			appendTo: friendContainer, 
 			type: "div",
 			class: "friends-actions"
 		});
@@ -112,12 +112,12 @@ ComunicWeb.components.friends.ui = {
 					}
 
 					if(!accept){
-						friendContener.remove();
+						friendContainer.remove();
 					}
 					else {
 
 						//Update friendship informations
-						ComunicWeb.components.friends.actions.refresh_single_personnal(friendID, friendContener);
+						ComunicWeb.components.friends.actions.refresh_single_personnal(friendID, friendContainer);
 					}
 
 				});
@@ -165,7 +165,7 @@ ComunicWeb.components.friends.ui = {
 					}
 
 					//Update friendship informations
-					ComunicWeb.components.friends.actions.refresh_single_personnal(friendID, friendContener);
+					ComunicWeb.components.friends.actions.refresh_single_personnal(friendID, friendContainer);
 				});
 
 			}
@@ -199,7 +199,7 @@ ComunicWeb.components.friends.ui = {
 						ComunicWeb.common.notificationSystem.showNotification("Could not update posts creation status !", "danger");
 					
 					//Update friendship informations
-					ComunicWeb.components.friends.actions.refresh_single_personnal(friendID, friendContener);
+					ComunicWeb.components.friends.actions.refresh_single_personnal(friendID, friendContainer);
 
 				});
 			}
@@ -209,7 +209,7 @@ ComunicWeb.components.friends.ui = {
 
 		//Offer to delete friendship
 		const deleteLink = createElem2({
-			appendTo: friendContener,
+			appendTo: friendContainer,
 			type: "a",
 			innerHTML: "<i class='fa fa-trash'></i>"
 		});
@@ -225,11 +225,11 @@ ComunicWeb.components.friends.ui = {
 					return;
 				
 				//Try to delete the friend from the list
-				friendContener.style.visibility = "hidden";
+				friendContainer.style.visibility = "hidden";
 				ComunicWeb.components.friends.interface.remove_friend(friendID, function(result){
 
-					//Make friend contener visible
+					//Make friend container visible
-					friendContener.style.visibility = "visible";
+					friendContainer.style.visibility = "visible";
 
 					//Check for errors
 					if(result.error){
@@ -238,7 +238,7 @@ ComunicWeb.components.friends.ui = {
 					}
 
 					//Delete the element
-					friendContener.remove();
+					friendContainer.remove();
 
 				});
 

assets/js/components/friends/utils.js

@@ -16,7 +16,7 @@ ComunicWeb.components.friends.utils = {
 
 		//Parse the list
 		usersID = [];
-		list.forEach(friend => {
+		list.forEach(function(friend){
 			//Extract user id
 			usersID.push(friend.ID_friend);
 		});

assets/js/components/languagePicker.js

@@ -0,0 +1,132 @@
+/**
+ * Language picker
+ * 
+ * @author Pierre HUBERT
+ */
+
+ComunicWeb.components.langPicker = {
+
+	/**
+	 * Show the language picker
+	 */
+	show: function(){
+		
+		//Create a modal root
+		var modal = createElem2({
+			type: "div",
+			class: "modal modal-primary pick-language-modal"
+		});
+	
+		var modalDialog = createElem2({
+			appendTo: modal,
+			type: "div",
+			class: "modal-dialog"
+		});
+	
+		var modalContent = createElem2({
+			appendTo: modalDialog,
+			type: "div",
+			class: "modal-content",
+		});
+	
+		//Modal header
+		var modalHeader = createElem2({
+			appendTo: modalContent,
+			type: "div",
+			class: "modal-header"
+		});
+	
+		var closeModal = createElem2({
+			appendTo: modalHeader,
+			type: "button",
+			class: "close",
+		});
+	
+		createElem2({
+			appendTo: closeModal,
+			type: "span",
+			innerHTML: "x"
+		});
+	
+		var modalTitle = createElem2({
+			appendTo: modalHeader,
+			type: "h4",
+			class: "modal-title",
+			innerHTML: "Change the language"
+		});
+	
+		//Modal body
+		var modalBody = createElem2({
+			appendTo: modalContent,
+			type: "div",
+			class: "modal-body",
+		});
+	
+		//Display the list of languages
+		var langs = [
+			["fr", "Français"],
+			["en", "English"]
+		];
+
+		var buttons = [];
+		langs.forEach(function(lang){
+
+			const button = createElem2({
+				appendTo: modalBody,
+				type: "div",
+				class: "btn btn-default",
+				innerHTML: lang[1]
+			});
+			button.setAttribute("data-lang", lang[0]);
+			buttons.push(button);
+
+			add_space(modalBody);
+
+		});
+	
+		//Modal footer
+		var modalFooter = createElem2({
+			appendTo: modalContent,
+			type: "div",
+			class: "modal-footer"
+		});
+	
+		var cancelButton = createElem2({
+			appendTo: modalFooter,
+			type: "button",
+			class: "btn btn-default",
+			innerHTML: "Cancel"
+		});
+	
+	
+		var closeModal = function(){
+			//Close modal
+			$(modal).modal('hide');
+			emptyElem(modal);
+			modal.remove();
+		}
+
+		//Create the response function
+		var respond = function(){
+	
+			//Close the modal
+			closeModal();
+			
+			//Set the language
+			ComunicWeb.common.langs.setLang(this.getAttribute("data-lang"));
+
+			//Restart the app
+			ComunicWeb.common.system.reset();
+		}
+		buttons.forEach(function(btn){btn.onclick  = respond;});
+	
+		//Make the buttons live
+		cancelButton.onclick = closeModal;
+		closeModal.onclick = closeModal;
+	
+		//Show the modal
+		$(modal).modal('show');
+
+	}
+
+}

assets/js/components/menuBar/authenticated.js

@@ -75,6 +75,20 @@ ComunicWeb.components.menuBar.authenticated = {
 		dropdownContent.className = "dropdown-menu"
 		dropdownContent.setAttribute("role", "menu");
 
+		//Add settings link
+		var settingsButton = createElem2({
+			appendTo: dropdownContent,
+			type: "li"
+		});
+		var settingsLink = createElem2({
+			appendTo: settingsButton,
+			type: "a",
+			innerHTML: "Settings"
+		});
+		settingsButton.onclick = function(){
+			openPage("settings");
+		};
+
 		//Add logout link
 		var logoutButton = createElem("li", dropdownContent);
 		var logoutButtonLink = createElem("a", logoutButton);

assets/js/components/notifications/dropdown.js

@@ -72,12 +72,12 @@ ComunicWeb.components.notifications.dropdown = {
 		});
 
 		//Add notifications list
-		var notificationsListContener = createElem2({
+		var notificationsListContainer = createElem2({
 			appendTo: dropdownMenu,
 			type: "li"
 		});
 		var notificationsList = createElem2({
-			appendTo: notificationsListContener,
+			appendTo: notificationsListContainer,
 			type: "ul",
 			class: "menu"
 		});
@@ -93,7 +93,6 @@ ComunicWeb.components.notifications.dropdown = {
 		var deleteAllLink = createElem2({
 			appendTo: dropdownBottom,
 			type: "a",
-			href: "#",
 			innerHTML: "Delete all"
 		});
 
@@ -172,7 +171,7 @@ ComunicWeb.components.notifications.dropdown = {
 				list.innerHTML = "";
 
 				//Process the list of notifications
-				for (let i = 0; i < result.length; i++) {
+				for (var i = 0; i < result.length; i++) {
 					const notification = result[i];
 					
 					//Display the notification

assets/js/components/notifications/ui.js

@@ -49,8 +49,6 @@ ComunicWeb.components.notifications.ui = {
 		message += " ";
 
 		//Notification target
-		if(data.from_container_type == "user_page"){
-
 		if(data.from_container_type == "user_page"){
 
 			if(data.from_user_id == data.from_container_id)
@@ -60,8 +58,6 @@ ComunicWeb.components.notifications.ui = {
 
 		}
 
-		}
-
 		//Create notification action
 		var action = function(){
 
@@ -88,15 +84,15 @@ ComunicWeb.components.notifications.ui = {
 		};
 
 		//Create the notification object
-		var notificationContener = createElem2({
+		var notificationContainer = createElem2({
 			appendTo: target,
 			type: "li",
-			class: "notification-contener"
+			class: "notification-container"
 		});
 
 		//Create notification link
 		var notificationLink = createElem2({
-			appendTo: notificationContener,
+			appendTo: notificationContainer,
 			type: "a"
 		});
 		notificationLink.onclick = action;

assets/js/components/notifications/utils.js

@@ -16,7 +16,7 @@ ComunicWeb.components.notifications.utils = {
 
 		var users = [];
 
-		for (let index = 0; index < list.length; index++) {
+		for (var index = 0; index < list.length; index++) {
 			const notif = list[index];
 			
 			if(!users.includes(notif.from_user_id))

assets/js/components/posts/edit.js

@@ -96,7 +96,13 @@ ComunicWeb.components.posts.edit = {
 		var updateDiv = createElem2({
 			appendTo: modalBody,
 			type: "div",
-			class: "editor-contener"
+			class: "editor-container"
+		});
+
+		//iOS fix : use slimscroll if required
+		updateDiv.style.maxHeight = (window.innerHeight - 200) + "px";
+		$(updateDiv).slimscroll({
+			height: "100%"
 		});
 
 		//Create update editor

assets/js/components/posts/form.js

@@ -32,48 +32,61 @@ ComunicWeb.components.posts.form = {
 			class: "box-body"
 		});
 
+		//Make sure emojie picker is already initialized
+		ComunicWeb.components.emoji.picker.init();
+
+		//Create post message contener
+		var newPostMessageContener = createElem2({
+			appendTo: boxBody,
+			type: "div"
+		});
+
 		//Create post message textarea
 		var inputMessageDiv = createElem2({
-			appendTo: boxBody,
+			appendTo: newPostMessageContener,
 			type: "div",
-			class: "new-message",
+			class: "new-message wdt-emoji-bundle-enabled",
 			innerHTML: ""
 		});
 
 		//Enable bootstrap-wysiwyg
 		$(inputMessageDiv).wysiwyg();
 
+		//Enable emojies picker
+		ComunicWeb.components.emoji.picker.addPicker(inputMessageDiv);
+
+
 		//Add the different post types
-		var postTypesContener = createElem2({
+		var postTypesContainer = createElem2({
 			appendTo: boxBody,
 			type: "div",
 			class: "post-types"
 		});
 
 		//Text
-		var textType = this._add_post_type(postTypesContener, "text", lang("_post_type_text"));
+		var textType = this._add_post_type(postTypesContainer, "text", lang("_post_type_text"));
 		textType.checked = true;
 
 		//Image
-		var imageType = this._add_post_type(postTypesContener, "image", "<i class='fa fa-picture-o'></i> <span class='hidden-xs'>"+lang("_post_type_image")+"</span>");
+		var imageType = this._add_post_type(postTypesContainer, "image", "<i class='fa fa-picture-o'></i> <span class='hidden-xs'>"+lang("_post_type_image")+"</span>");
 
 		//Youtube
-		var youtubeType = this._add_post_type(postTypesContener, "youtube", "<i class='fa fa-youtube-play'></i> <span class='hidden-xs'>"+lang("_post_type_youtube")+"</span>");
+		var youtubeType = this._add_post_type(postTypesContainer, "youtube", "<i class='fa fa-youtube-play'></i> <span class='hidden-xs'>"+lang("_post_type_youtube")+"</span>");
 
 		//Movie
-		var movieType = this._add_post_type(postTypesContener, "movie", "<i class='fa fa-file-movie-o'></i> <span class='hidden-xs'>"+lang("_post_type_movie")+"</span>");
+		var movieType = this._add_post_type(postTypesContainer, "movie", "<i class='fa fa-file-movie-o'></i> <span class='hidden-xs'>"+lang("_post_type_movie")+"</span>");
 
 		//Link
-		var linkType = this._add_post_type(postTypesContener, "link", "<i class='fa fa-link'></i> <span class='hidden-xs'>"+lang("_post_type_link")+"</span>");
+		var linkType = this._add_post_type(postTypesContainer, "link", "<i class='fa fa-link'></i> <span class='hidden-xs'>"+lang("_post_type_link")+"</span>");
 
 		//PDF
-		var pdfType = this._add_post_type(postTypesContener, "pdf", "<i class='fa fa-file-pdf-o'></i> <span class='hidden-xs'>"+lang("_post_type_pdf")+"</span>");
+		var pdfType = this._add_post_type(postTypesContainer, "pdf", "<i class='fa fa-file-pdf-o'></i> <span class='hidden-xs'>"+lang("_post_type_pdf")+"</span>");
 
 		//Countdown timer
-		var countdownType = this._add_post_type(postTypesContener, "countdown", "<i class='fa fa-clock-o'></i> <span class='hidden-xs'>"+lang("_post_type_countdown")+"</span>");
+		var countdownType = this._add_post_type(postTypesContainer, "countdown", "<i class='fa fa-clock-o'></i> <span class='hidden-xs'>"+lang("_post_type_countdown")+"</span>");
 
 		//Survey
-		var surveyType = this._add_post_type(postTypesContener, "survey", "<i class='fa fa-pie-chart'></i> <span class='hidden-xs'>"+lang("_post_type_survey")+"</span>");
+		var surveyType = this._add_post_type(postTypesContainer, "survey", "<i class='fa fa-pie-chart'></i> <span class='hidden-xs'>"+lang("_post_type_survey")+"</span>");
 
 
 
@@ -255,7 +268,7 @@ ComunicWeb.components.posts.form = {
 		countdownType.onclick = changesHandler;
 		surveyType.onclick = changesHandler;
 
-		//Right contener
+		//Right container
 		var rightDiv = createElem2({
 			appendTo: boxBody,
 			type: "div",
@@ -263,24 +276,24 @@ ComunicWeb.components.posts.form = {
 		})
 
 		//Add visibility level choice
-		var visibility_choices_contener = createElem2({
+		var visibility_choices_container = createElem2({
 			appendTo: rightDiv,
 			type: "div",
-			class: "post-visiblity-contener"
+			class: "post-visiblity-container"
 		});
 
 		//Private post
 		var privateLevel = ComunicWeb.components.posts.visibilityLevels.private;
-		var privateInput = this._add_visiblity_choice(visibility_choices_contener, "private", privateLevel.name, privateLevel.icon);
+		var privateInput = this._add_visiblity_choice(visibility_choices_container, "private", privateLevel.name, privateLevel.icon);
 
 		//Friends-visible post
 		var friendsLevel = ComunicWeb.components.posts.visibilityLevels.friends;
-		var friendsInput = this._add_visiblity_choice(visibility_choices_contener, "friends", friendsLevel.name, friendsLevel.icon);
+		var friendsInput = this._add_visiblity_choice(visibility_choices_container, "friends", friendsLevel.name, friendsLevel.icon);
 		friendsInput.checked = true;
 
 		//Worldwide post
 		var publicLevel = ComunicWeb.components.posts.visibilityLevels.public;
-		this._add_visiblity_choice(visibility_choices_contener, "public", publicLevel.name, publicLevel.icon);
+		this._add_visiblity_choice(visibility_choices_container, "public", publicLevel.name, publicLevel.icon);
 
 		//Add send button
 		var sendButton = createElem2({
@@ -459,7 +472,7 @@ ComunicWeb.components.posts.form = {
 			}
 
 			//Get the visibility level
-			var visibilityLevel = visibility_choices_contener.querySelector("input:checked").value;
+			var visibilityLevel = visibility_choices_container.querySelector("input:checked").value;
 			datas.append("visibility", visibilityLevel);
 
 			//Lock the send button
@@ -495,14 +508,14 @@ ComunicWeb.components.posts.form = {
 	 */
 	_add_post_type: function(target, value, label){
 
-		var postTypeContener = createElem2({
+		var postTypeContainer = createElem2({
 			appendTo: target,
 			type: "label",
 			class: "post-form-choice"
 		});
 		
 		var input = createElem2({
-			appendTo: postTypeContener,
+			appendTo: postTypeContainer,
 			type: "input",
 			elemType: "radio",
 			name: "post_type",
@@ -510,7 +523,7 @@ ComunicWeb.components.posts.form = {
 		});
 
 		createElem2({
-			appendTo: postTypeContener,
+			appendTo: postTypeContainer,
 			type: "span",
 			innerHTML: label
 		});
@@ -530,14 +543,14 @@ ComunicWeb.components.posts.form = {
 	_add_visiblity_choice: function(target, value, title, icon){
 
 		//Visibility label
-		var visibility_contener = createElem2({
+		var visibility_container = createElem2({
 			appendTo: target,
 			type: "label",
 		});
 
 		//Create input
 		var visibilityInput = createElem2({
-			appendTo: visibility_contener,
+			appendTo: visibility_container,
 			type: "input",
 			elemType: "radio",
 			name: "post_visibility",
@@ -546,7 +559,7 @@ ComunicWeb.components.posts.form = {
 
 		//Create icon
 		var visibility_label = createElem2({
-			appendTo: visibility_contener,
+			appendTo: visibility_container,
 			type: "span",
 			innerHTML: "<i class='fa " + icon + "'></i>"
 		});

assets/js/components/posts/ui.js

@@ -285,7 +285,7 @@ ComunicWeb.components.posts.ui = {
 		//In case of video
 		else if(infos.kind == "movie"){
 
-			var videoContener = createElem2({
+			var videoContainer = createElem2({
 				appendTo: postRoot,
 				type: "div",
 				class: "post-video"
@@ -293,7 +293,7 @@ ComunicWeb.components.posts.ui = {
 
 			//Create video element
 			var video = createElem2({
-				appendTo: videoContener,
+				appendTo: videoContainer,
 				type: "video",
 				class: "video-js vjs-default-skin"
 			});
@@ -303,9 +303,9 @@ ComunicWeb.components.posts.ui = {
 			var video_src = createElem2({
 				appendTo: video,
 				type: "source",
-				src: infos.video_infos.url
+				src: infos.video_info.url
 			});
-			video_src.type = infos.video_infos.file_type;
+			video_src.type = infos.video_info.file_type;
 
 			//Enable videoJS
 			//videojs(video);
@@ -374,7 +374,7 @@ ComunicWeb.components.posts.ui = {
 			var link_img = createElem2({
 				appendTo: linkContainer,
 				type: "img",
-				src: (infos.link_image != "default" ? infos.link_image : ComunicWeb.__config.assetsURL + "img/world.png"),
+				src: (infos.link_image != null ? infos.link_image : ComunicWeb.__config.assetsURL + "img/world.png"),
 				class: "attachment-img",
 			});
 
@@ -383,7 +383,7 @@ ComunicWeb.components.posts.ui = {
 				appendTo: linkContainer,
 				type: "h4",
 				class: "attachment-heading",
-				innerHTML: (infos.link_title != "default" ? infos.link_title : "Web page")
+				innerHTML: (infos.link_title != null ? infos.link_title : "Web page")
 			});
 
 
@@ -403,7 +403,7 @@ ComunicWeb.components.posts.ui = {
 			link_a_url.target = "_blank";
 
 			//Add description (if any)
-			if(infos.link_description != "default"){
+			if(infos.link_description != null){
 				var link_description = createElem2({
 					appendTo: link_attachment_text,
 					type: "p",
@@ -435,11 +435,11 @@ ComunicWeb.components.posts.ui = {
 			var surveyQuestion = createElem2({
 				appendTo: postRoot,
 				type: "h4",
-				innerHTML: infos.data_survey.infos.question,
+				innerHTML: infos.data_survey.question,
 				class: "post-survey-question"
 			});
 
-			//Answer contener
+			//Answer container
 			var surveyResponse = createElem2({
 				appendTo: postRoot,
 				type: "div",
@@ -449,7 +449,7 @@ ComunicWeb.components.posts.ui = {
 			var row = createElem2({
 				appendTo: postRoot,
 				type: "div",
-				class: "row post-survey-chart-contener"
+				class: "row post-survey-chart-container"
 			});
 
 			//Create canvas column
@@ -459,8 +459,8 @@ ComunicWeb.components.posts.ui = {
 				class: "col-md-8"
 			});
 
-			//Chart contener
+			//Chart container
-			var chartContener = createElem2({
+			var chartContainer = createElem2({
 				appendTo: leftColumn,
 				type: "div",
 				class: "chart-responsive"
@@ -468,7 +468,7 @@ ComunicWeb.components.posts.ui = {
 
 			//Create canvas
 			var canvas = createElem2({
-				appendTo: chartContener,
+				appendTo: chartContainer,
 				type: "canvas",
 			});
 			canvas.style.height = "150px";
@@ -721,7 +721,7 @@ ComunicWeb.components.posts.ui = {
 		});
 
 		//Parse emojies
-		ComunicWeb.components.emoji.parser.parse({
+		ComunicWeb.components.textParser.parse({
 			element: postContent
 		});
 

assets/js/components/settings/interface.js

@@ -0,0 +1,135 @@
+/**
+ * Settings interface
+ * 
+ * @author Pierre HUBERT
+ */
+
+ComunicWeb.components.settings.interface = {
+
+	/**
+	 * Get general account settings
+	 * 
+	 * @param {function} callback
+	 */
+	getGeneral: function(callback){
+
+		//Make a request over the API
+		var apiURI = "settings/get_general";
+		var params = {};
+		ComunicWeb.common.api.makeAPIrequest(apiURI, params, true, callback);
+
+	},
+
+	/**
+	 * Set (update) general account settings
+	 * 
+	 * @param {object} settings New general account settings
+	 * @param {function} callback Callback function
+	 */
+	setGeneral: function(settings, callback){
+		var apiURI = "settings/set_general";
+		ComunicWeb.common.api.makeAPIrequest(apiURI, settings, true, callback);
+	},
+
+	/**
+	 * Check the availability of the virtual directory for user
+	 * 
+	 * @param {string} directory The directory to check
+	 * @param {function} callback
+	 */
+	checkUserDirectoryAvailability: function(directory, callback){
+		var apiURI = "settings/check_user_directory_availability";
+		var params = {
+			directory: directory
+		};
+		ComunicWeb.common.api.makeAPIrequest(apiURI, params, true, callback);
+	},
+
+	/**
+	 * Get security account settings
+	 * 
+	 * @param {string} password The password of the user
+	 * @param {function} callback Callback function
+	 */
+	getSecurity: function(password, callback){
+		var apiURI = "settings/get_security";
+		var params = {
+			password: password
+		};
+		ComunicWeb.common.api.makeAPIrequest(apiURI, params, true, callback);
+	},
+
+	/**
+	 * Set (update) security account settings
+	 * 
+	 * @param {object} settings New settings
+	 * @param {function} callback 
+	 */
+	setSecurity: function(settings, callback){
+		var apiURI = "settings/set_security";
+		ComunicWeb.common.api.makeAPIrequest(apiURI, settings, true, callback);
+	},
+
+	/**
+	 * Update the password of the user
+	 * 
+	 * @param {string} oldPassword The old password of the user
+	 * @param {string} newPassword The new password
+	 * @param {function} callback
+	 */
+	updatePassword: function(oldPassword, newPassword, callback){
+		var apiURI = "settings/update_password";
+		var params = {
+			oldPassword: oldPassword,
+			newPassword: newPassword
+		};
+		ComunicWeb.common.api.makeAPIrequest(apiURI, params, true, callback);
+	},
+
+	/**
+	 * Get account image settings from the API
+	 * 
+	 * @param {function} callback
+	 */
+	getAccountImage: function(callback){
+		var apiURI = "settings/get_account_image";
+		var params = {};
+		ComunicWeb.common.api.makeAPIrequest(apiURI, params, true, callback);
+	},
+
+	/**
+	 * Upload a new account image
+	 * 
+	 * @param {FormData} data The data containing information about the new account image
+	 * @param {function} callback
+	 */
+	uploadAccountImage: function(data, callback){
+		var apiURI = "settings/upload_account_image";
+		ComunicWeb.common.api.makeFormDatarequest(apiURI, data, true, callback);
+	},
+
+	/**
+	 * Delete current user account image
+	 * 
+	 * @param {function} callback
+	 */
+	deleteAccountImage: function(callback){
+		var apiURI = "settings/delete_account_image";
+		var params = {};
+		ComunicWeb.common.api.makeAPIrequest(apiURI, params, true, callback);
+	},
+
+	/**
+	 * Update the visibility of the account image
+	 * 
+	 * @param {string} visibility The new visibility level for the account image
+	 * @param {function} callback
+	 */
+	updateAccountImageVisibility: function(visibility, callback){
+		var apiURI = "settings/set_account_image_visibility";
+		var params = {
+			visibility: visibility
+		};
+		ComunicWeb.common.api.makeAPIrequest(apiURI, params, true, callback);
+	}
+}

assets/js/components/textParser.js

@@ -0,0 +1,87 @@
+/**
+ * Comunic specific text parser
+ * 
+ * @author Pierre HUBERT
+ */
+
+ComunicWeb.components.textParser = {
+
+	/**
+	 * Parse an element that contains some user input
+	 * 
+	 * @param {object} info Information about the element to parse
+	 */
+	parse: function(info){
+
+		//Add space at the begining and the end of the content to ensure
+		//parsing will not encounter errors
+		info.element.innerHTML = " " + info.element.innerHTML + " ";
+
+		//Prepare users tag parsing
+		this._prepare_user_tag_parsing(info.element);
+
+		//Parse emojies
+		ComunicWeb.components.emoji.parser.parse({
+			element: info.element
+		});
+
+		//Parse users tags
+		this._parse_users_tag(info.element);
+	},
+
+	/**
+	 * Prepare users tag parsing
+	 * 
+	 * @param {HTMLElement} target The target element to prepare
+	 */
+	_prepare_user_tag_parsing: function(target){
+
+		//Find all occurences of users tag
+		while(target.innerHTML.match(/@[a-zA-Z0-9.]+/i)){
+
+			//Get user tag
+			var userTag = target.innerHTML.match(/@[a-zA-Z0-9.]+/i)[0];
+			var userID = userTag.replace("@", "");
+
+			target.innerHTML = target.innerHTML.replace(userTag, "<userTag>"+userID+"</userTag>");
+
+		}
+
+	},
+
+	/**
+	 * Parse users tag
+	 * 
+	 * @param {HTMLElement} target The target element where user tags has
+	 * to be parsed
+	 */
+	_parse_users_tag: function(target){
+
+		//Get the list of user tags of the target
+		var nodes = target.getElementsByTagName("userTag");
+
+		for (const num in nodes) {
+			if (nodes.hasOwnProperty(num)) {
+				const node = nodes[num];
+				
+				//Get target user ID
+				const userID = node.innerHTML;
+
+				//Adapt node content
+				node.innerHTML = "@" + userID;
+				node.className = "a";
+
+				//Set event listener
+				node.addEventListener("click", function(ev){
+
+					//Open user page
+					openUserPage(userID);
+
+				});
+			}
+		}
+
+	},
+
+
+}

assets/js/components/userSelect/userSelect.js

@@ -109,7 +109,7 @@ ComunicWeb.components.userSelect = {
 	 * @param {array} usersID The ID of the users to push in select2 element
 	 * @return {Boolean} True for a success
 	 */
-	pushEntries(inputSelect, usersID){
+	pushEntries: function(inputSelect, usersID){
 
 		//Get informations about the entries
 		getMultipleUsersInfos(usersID, function(usersInfos){

assets/js/langs/en.inc.js

@@ -16,7 +16,7 @@ ComunicWeb.common.langs.en = {
 
     //Login form
     _login_page_top_msg: "Login to your Comunic account.",
-    _login_page_remember_me: "Rememeber me",
+    _login_page_remember_me: "Remember me",
     _login_page_email_placeholder: "Email",
     _login_page_password_placeholder: "Password",
     _login_page_submit: "Sign In",

assets/js/pages/accountCreated.js

@@ -0,0 +1,28 @@
+/**
+ * Account created page
+ * 
+ * @author Pierre HUBERT
+ */
+
+ComunicWeb.pages.accountCreated = {
+
+	/**
+	 * Open the account created page
+	 * 
+	 * @param {Object} additionnalData Additionnal data passed in the method
+	 * @param {element} target Where the page will be applied
+	 */
+	open: function(additionnalData, target){
+
+		var data = {
+
+			//Background image URL
+			background_img_url: ComunicWeb.__config.assetsURL + "img/pages/accountCreated/background.jpg"
+
+		};
+
+		//Apply the template
+		ComunicWeb.common.page.getAndShowTemplate(target, data, "pages/accountCreated.tpl", null, true);
+	}
+
+}

assets/js/pages/createAccount.js

@@ -0,0 +1,184 @@
+/**
+ * Create account page
+ * 
+ * @author Pierre HUBERT
+ */
+
+ComunicWeb.pages.createAccount = {
+
+	/**
+	 * Open create account page
+	 * 
+	 * @param {Object} additionnalData Additionnal data passed in the method
+	 * @param {element} target Where the page will be applied
+	 */
+	openPage: function(additionnalData, target){
+
+		//Display the account creation form
+		this._display_form(target);
+
+	},
+
+	/**
+	 * Display the account creation form
+	 * 
+	 * @param {HTMLElement} target The target for the page
+	 */
+	_display_form: function(target){
+
+		//Create form root
+		var formRoot = createElem2({
+			appendTo: target,
+			type: "div",
+			class: "create-account-form"
+		});
+
+		//Add a title
+		createElem2({
+			appendTo: formRoot,
+			type: "h2",
+			innerHTML: "Create an account"
+		});
+
+		//Add a message
+		createElem2({
+			appendTo: formRoot,
+			type: "p",
+			innerHTML: "Use the following form to create an account and join the network : "
+		});
+
+		//Create the message target
+		var messagesTarget = createElem2({
+			appendTo: formRoot,
+			type: "div"
+		});
+
+		//Input user first name
+		var firstNameInput = createFormGroup({
+			target: formRoot,
+			label: "First name",
+			placeholder: "Your first name",
+			type: "text"
+		});
+
+		//Input user last name
+		var lastNameInput = createFormGroup({
+			target: formRoot,
+			label: "Last name",
+			placeholder: "Your last name",
+			type: "text"
+		});
+
+		//Input user email
+		var emailInput = createFormGroup({
+			target: formRoot,
+			label: "Email address <small><i class='fa fa-warning'></i> Warning! You will not be able to change this later !</small>",
+			placeholder: "Your email address",
+			type: "email"
+		});
+
+		//Input user password
+		var passwordInput = createFormGroup({
+			target: formRoot,
+			label: "Password",
+			placeholder: "Your password",
+			type: "password"
+		});
+
+		//Confirm user password
+		var confirmPasswordInput = createFormGroup({
+			target: formRoot,
+			label: "Confirm your password",
+			placeholder: "Your password",
+			type: "password"
+		});
+
+		//Submit form
+		var submitButtonContainer = createElem2({
+			appendTo: formRoot,
+			type: "div",
+			class: "submit-form"
+		});
+		var submitButton = createElem2({
+			appendTo: submitButtonContainer,
+			type: "button",
+			class: "btn btn-primary",
+			innerHTML: "Create the account"
+		});
+
+		//Add bottom links area
+		var bottomLinks = createElem2({
+			appendTo: formRoot,
+			type: "div",
+			class: "bottom-form-links"
+		});
+
+		//Create a link to redirect to the login page
+		var loginLink = createElem2({
+			appendTo: bottomLinks,
+			type: "a",
+			innerHTML: "Login with an existing account"
+		});
+		loginLink.onclick = function(){
+			openPage("login");
+		}
+
+
+		//Make the form lives
+		submitButton.onclick = function(){
+
+			//Empty the message target
+			emptyElem(messagesTarget);
+
+			//Check the first name
+			if(!ComunicWeb.common.formChecker.checkInput(firstNameInput, true))
+				return notify("Please check your first name !", "danger");
+			
+			//Check the last name
+			if(!ComunicWeb.common.formChecker.checkInput(lastNameInput, true))
+				return notify("Please check your last name !", "danger");
+
+			//Check the email address
+			if(!ComunicWeb.common.formChecker.checkInput(emailInput, true))
+				return notify("Please check your email address !", "danger");
+			
+			//Check the password
+			if(!ComunicWeb.common.formChecker.checkInput(passwordInput, true))
+				return notify("Please check your password !", "danger");
+			
+			//Check the confirmation password
+			if(passwordInput.value != confirmPasswordInput.value)
+				return notify("The two passwords are not the same !", "danger");
+			
+			//Lock create account button
+			submitButton.disabled = true;
+			
+			//Try to create the account
+			if(ComunicWeb.components.account.interface.createAccount(
+				firstNameInput.value,
+				lastNameInput.value,
+				emailInput.value,
+				passwordInput.value,
+				function(response){
+
+					//Unlock button
+					submitButton.disabled = false;
+
+					//Check for error
+					if(response.error){
+						//Display an error
+						messagesTarget.appendChild(ComunicWeb.common.messages.createCalloutElem(
+							"Account creation failed",
+							"An error occured while trying to create your account. It is most likely to be a server error, or the given email address is already associated with an account.",
+							"danger"
+						));
+						return;
+					}
+
+					//Redirect to the account created page
+					openPage("account_created");
+				}
+			));
+		};
+	},
+}

assets/js/pages/home/landingPage.js

@@ -17,16 +17,14 @@ ComunicWeb.pages.home.landingPage = {
         document.title = "Comunic, a transparent social network";
 
         //Prepare additional data
-        var additionalData = {};
+        var additionalData = {
             
-        //Preparing next actions
+            //Background image URL
-        var afterParsingTemplate = function(){
+            backgroundImage: ComunicWeb.__config.assetsURL + "img/pages/home/landingPage/img_background.jpg"
 
-            //Change home background
-            byId("homeLandingScreen").style.backgroundImage = "url('"+ComunicWeb.__config.assetsURL + "img/pages/home/landingPage/img_background.jpg')";
         };
 
         //Apply template
-        ComunicWeb.common.page.getAndShowTemplate(targetElement, additionalData, "pages/home/landingPage/home.tpl", afterParsingTemplate, true);
+        ComunicWeb.common.page.getAndShowTemplate(targetElement, additionalData, "pages/home/landingPage/home.tpl", false, true);
     }
 };

assets/js/pages/latestPosts/main.js

@@ -121,7 +121,7 @@ ComunicWeb.pages.latestPosts.main = {
 	_display_list: function(list, target){
 
 		//Process the list of posts
-		for (let index = 0; index < list.length; index++) {
+		for (var index = 0; index < list.length; index++) {
 
 			//Display the post
 			ComunicWeb.components.posts.ui.display_post(list[index], target);
@@ -135,7 +135,7 @@ ComunicWeb.pages.latestPosts.main = {
 			//Display message
 			var message = ComunicWeb.common.messages.createCalloutElem("No post to display", "Posts from you and your friend will appear here...", "info");
 			message.className += " noLatestPosts";
-			boxBody.appendChild(message);
+			target.appendChild(message);
 		}
 	}
 }

assets/js/pages/settings/main.js

@@ -0,0 +1,69 @@
+/**
+ * User settings main script file
+ * 
+ * @author Pierre HUBERT
+ */
+
+ComunicWeb.pages.settings.main = {
+
+	/**
+	 * Open settings page
+	 * 
+	 * @param {object} args Optionnal arguments
+	 * @param {HTMLElement} target The target for the page
+	 */
+	open: function(args, target){
+
+		//Settings page is organized like an array with two columns
+		//Left column : settings sections menu
+		//Rigth column : current settings section
+
+		//Create a row
+		var row = createElem2({
+			appendTo: target,
+			type: "div",
+			class: "row settings-page-container"
+		});
+
+		//Left area
+		var leftArea = createElem2({
+			appendTo: row,
+			type: "div",
+			class: "col-md-3"
+		});
+
+		//Right area
+		var rightArea = createElem2({
+			appendTo: row,
+			type: "div",
+			class: "col-md-9"
+		});
+
+		//Display left navigation pane
+		ComunicWeb.pages.settings.navigationPane.display(leftArea);
+
+		//Determine which page to open
+		var section = args.subfolder ? args.subfolder : "general";
+		
+		//Check if the section exists or not
+		if(ComunicWeb.pages.settings.sectionsList[section]){
+			
+			//Extract section information
+			var section = ComunicWeb.pages.settings.sectionsList[section];
+			
+			//Update document title
+			document.title += " - " + section.title;
+
+			//Call handler
+			eval(section.handler + "(args, rightArea);");
+
+		}
+
+		//The section is not found
+		else {
+			//Display error page (404)
+			ComunicWeb.common.error.pageNotFound(args, target);
+		}
+	},
+
+}

assets/js/pages/settings/navigationPane.js

@@ -0,0 +1,96 @@
+/**
+ * Settings navigation pane
+ * 
+ * @author Pierre HUBERT
+ */
+
+ComunicWeb.pages.settings.navigationPane = {
+
+	/**
+	 * Display the settings navigation pane
+	 * 
+	 * @param {HTMLElement} target The target for the navigation pane
+	 */
+	display: function(target){
+
+		//Create a box
+		var navigationBox = createElem2({
+			appendTo: target,
+			type: "div",
+			class: "box box-solid"
+		});
+
+		//Set box header
+		var boxHeader = createElem2({
+			appendTo: navigationBox, 
+			type: "div",
+			class: "box-header with-border",
+			
+		});
+
+		//Set box title
+		createElem2({
+			appendTo: boxHeader,
+			type: "h3",
+			class: "box-title",
+			innerHTML: "Sections"
+		});
+
+		//Create box body
+		var boxBody = createElem2({
+			appendTo: navigationBox,
+			type: "div",
+			class: "box-body no-padding"
+		});
+
+		//Display the list of sections
+		var elemList = createElem2({
+			appendTo: boxBody,
+			type: "ul",
+			class: "nav nav-pills nav-stacked"
+		});
+
+		//General account information
+		var sectionGeneral = createElem2({
+			appendTo: elemList,
+			type: "li",
+		});
+		var sectionGeneralLink = createElem2({
+			appendTo: sectionGeneral,
+			type: "a",
+			innerHTML: "<i class='fa fa-user'></i> General"
+		});
+		sectionGeneralLink.onclick = function(){
+			openPage("settings/general");
+		};
+
+		//Account security
+		var sectionSecurity = createElem2({
+			appendTo: elemList,
+			type: "li",
+		});
+		var sectionSecurityLink = createElem2({
+			appendTo: sectionSecurity,
+			type: "a",
+			innerHTML: "<i class='fa fa-lock'></i> Security"
+		});
+		sectionSecurityLink.onclick = function(){
+			openPage("settings/security");
+		};
+
+		//Account image
+		var sectionSecurity = createElem2({
+			appendTo: elemList,
+			type: "li",
+		});
+		var sectionSecurityLink = createElem2({
+			appendTo: sectionSecurity,
+			type: "a",
+			innerHTML: "<i class='fa fa-file-image-o'></i> Account image"
+		});
+		sectionSecurityLink.onclick = function(){
+			openPage("settings/account_image");
+		};
+	}
+
+}

assets/js/pages/settings/sections/accountImage.js

@@ -0,0 +1,261 @@
+/**
+ * Account image settings section
+ * 
+ * @author Pierre HUBERT
+ */
+
+ComunicWeb.pages.settings.sections.accountImage = {
+
+	/**
+	 * Open settings section
+	 * 
+	 * @param {object} args Additionnal arguments
+	 * @param {HTMLElement} target The target for the page
+	 */
+	open: function(args, target){
+		
+		//Create a box
+		var box = createElem2({
+			appendTo: target,
+			type: "div",
+			class: "box box-primary box-account-image-settings"
+		});
+
+		//Add box header
+		var boxHead = createElem2({
+			appendTo: box,
+			type: "div",
+			class: "box-header",
+		});
+		var boxTitle = createElem2({
+			appendTo: boxHead,
+			type: "h3",
+			class: "box-title",
+			innerHTML: "Account image"
+		});
+
+		//Create box body
+		var boxBody = createElem2({
+			appendTo: box,
+			type: "div",
+			class: "box-body"
+		});
+
+		//Add loading callout
+		var loadMsg = ComunicWeb.common.messages.createLoadingCallout(boxBody);
+		
+		//Fetch information about account image on the API
+		ComunicWeb.components.settings.interface.getAccountImage(function(result){
+
+			//Remove loading message
+			loadMsg.remove();
+
+			//Check for errors
+			if(result.error){
+				notify("Could not get account image information !", "danger");
+				return;
+			}
+
+			//Display the form
+			ComunicWeb.pages.settings.sections.accountImage._show_form(boxBody, result);
+		});
+	},
+
+	/**
+	 * Display account images form
+	 * 
+	 * @param {HTMLElement} target The target for the form
+	 * @param {object} info Information about the form
+	 */
+	_show_form: function(target, info){
+
+		//Apply account image settings
+		var accountImageForm = createElem2({
+			type: "div",
+			appendTo: target
+		});
+		
+		//First, offer the user to upload a new account image
+		var newAccountImageLabel = createElem2({
+			appendTo: accountImageForm,
+			type: "label"
+		});
+		var fileInput = createElem2({
+			appendTo: newAccountImageLabel,
+			type: "input",
+			elemType: "file"
+		});
+		fileInput.style.display = "none";
+		var chooseButton = createElem2({
+			appendTo: newAccountImageLabel,
+			type: "div",
+			class: "btn btn-primary",
+			innerHTML: "Upload a new account image"
+		});
+
+		//Add event listener
+		fileInput.addEventListener("change", function(e){
+			
+			//Check if no file have been selected
+			if(fileInput.files.length == 0)
+				return;
+
+			//Upload the new file
+			//Display a callout message
+			var message = ComunicWeb.common.messages.createCalloutElem("", "Please wait while your picture is being uploaded...");
+			target.insertBefore(message, accountImageForm);
+
+			//Upload the image
+			var fd = new FormData();
+			fd.append("picture", fileInput.files[0], fileInput.files[0].name);
+			ComunicWeb.components.settings.interface.uploadAccountImage(fd, function(result){
+
+				//Remove message
+				message.remove();
+
+				//Check for errors
+				if(result.error){
+					notify("An error occured while trying to upload your image !", "danger");
+					return;
+				}
+
+				notify("Your picture has been successfully uploaded !", "success");
+				
+				//Reload current page
+				ComunicWeb.common.system.reset();
+			});
+		});
+
+		//Stop here if the user does not have any account image
+		if(!info.has_image)
+			return;
+		
+		//Display user account image
+		createElem2({
+			appendTo: accountImageForm,
+			type: "img",
+			src: info.image_url,
+			class: "settings-account-image-preview"
+		});
+
+		//Create actions contener
+		var actionsContener = createElem2({
+			appendTo: accountImageForm,
+			type: "div"
+		});
+
+		//Delete account image
+		var deleteImage = createElem2({
+			appendTo: accountImageForm,
+			type: "div",
+			class: "btn btn-danger",
+			innerHTML: "Delete image"
+		});
+
+		//Make delete button lives
+		deleteImage.addEventListener("click", function(e){
+			ComunicWeb.common.messages.confirm("Do you really want to delete your account image ? The operation can not be reverted !", function(res){
+
+				if(!res)
+					return;
+
+				//Make a request on the server
+				ComunicWeb.components.settings.interface.deleteAccountImage(function(callback){
+
+					//Delay action to let the time to the page to restart
+					setTimeout(function(){
+
+						//Check for errors
+						if(callback.error){
+							notify("Could not delete your account image !", "danger");
+						}
+						else
+							notify("Your account image has been successfully deleted!", "success");
+
+					}, 500);
+					
+					
+					//Reset the page
+					ComunicWeb.common.system.reset();
+
+				});
+
+			});
+		});
+
+		//Add the form to update visibility level
+		add_space(accountImageForm);
+		add_space(accountImageForm);
+
+		var visibilityForm = createElem2({
+			appendTo: accountImageForm,
+			type: "form",
+			class: "account-image-visibility-form"
+		});
+
+		//Title
+		createElem2({
+			appendTo: visibilityForm,
+			type: "h4",
+			innerHTML: "Account image visibility"
+		});
+
+		//Add the options
+		//Open
+		createFormGroup({
+			target: visibilityForm,
+			label: "Everyone",
+			name: "account-image-visibility",
+			type: "radio",
+			value: "open",
+			checked: info.visibility == "open"
+		});
+
+		//Public
+		createFormGroup({
+			target: visibilityForm,
+			label: "All Comunic users",
+			name: "account-image-visibility",
+			type: "radio",
+			value: "public",
+			checked: info.visibility == "public"
+		});
+
+		//Friends
+		createFormGroup({
+			target: visibilityForm,
+			label: "My friends only",
+			name: "account-image-visibility",
+			type: "radio", 
+			value: "friends",
+			checked: info.visibility == "friends"
+		});
+
+		//Add update button
+		var updateButton = createElem2({
+			appendTo: visibilityForm,
+			type: "div",
+			class: "btn btn-primary",
+			innerHTML: "Update visibility"
+		});
+
+		updateButton.addEventListener("click", function(e){
+
+			//Get the new visibility level
+			var newVisibility = visibilityForm.elements["account-image-visibility"].value;
+
+			//Make a request over the server
+			ComunicWeb.components.settings.interface.updateAccountImageVisibility(newVisibility, function(callback){
+
+				//Check for errors
+				if(callback.error){
+					notify("Could update the visibility of your account image!", "danger");
+				}
+				else
+					notify("The visibility of your account image have been successfully updated!", "success");
+
+			});
+
+		});
+	}
+}

assets/js/pages/settings/sections/general.js

@@ -0,0 +1,304 @@
+/**
+ * Settings general section
+ * 
+ * @author Pierre HUBERT
+ */
+
+ComunicWeb.pages.settings.sections.general = {
+
+	/**
+	 * Open settings section
+	 * 
+	 * @param {object} args Additionnal arguments
+	 * @param {HTMLElement} target The target for the page
+	 */
+	open: function(args, target){
+		
+		//Create a box
+		var box = createElem2({
+			appendTo: target,
+			type: "div",
+			class: "box box-primary box-general-settings"
+		});
+
+		//Add box header
+		var boxHead = createElem2({
+			appendTo: box,
+			type: "div",
+			class: "box-header",
+		});
+		var boxTitle = createElem2({
+			appendTo: boxHead,
+			type: "h3",
+			class: "box-title",
+			innerHTML: "General settings"
+		});
+
+		//Create box body
+		var boxBody = createElem2({
+			appendTo: box,
+			type: "div",
+			class: "box-body"
+		});
+
+		//Display loading message
+		var loadingMsg = ComunicWeb.common.messages.createLoadingCallout();
+		boxBody.appendChild(loadingMsg);
+
+		//Load general settings information
+		ComunicWeb.components.settings.interface.getGeneral(function(infos){
+
+			//Remove loading message
+			loadingMsg.remove();
+
+			//Check for errors
+			if(infos.error){
+				var errMsg = ComunicWeb.common.messages.createCalloutElem("Error", "An error occured while retrieving account settings...", "danger");
+				boxBody.appendChild(errMsg);
+				return;
+			}
+
+			//Display the settings form
+			ComunicWeb.pages.settings.sections.general._show_form(infos, boxBody);
+		});
+	},
+
+	/**
+	 * Show the settings form
+	 * 
+	 * @param {object} infos Informations about the user (General settings)
+	 * @param {HTMLElement} target The target for the page
+	 */
+	_show_form: function(infos, target){
+
+		//Main account information
+		createElem2({
+			appendTo: target,
+			type: "h4",
+			innerHTML: "Main account information"
+		});
+
+		//Display user ID
+		createFormGroup({
+			target: target,
+			label: "User ID",
+			type: "text",
+			value: infos.id,
+			disabled: true,
+			additionalGroupClasses: "input-user-id"
+		});
+
+		//Display user email
+		createFormGroup({
+			target: target,
+			label: "Email address",
+			type: "email",
+			value: infos.email,
+			disabled: true,
+			additionalGroupClasses: "input-user-email"
+		});
+
+		//Display user first name
+		var firstName = createFormGroup({
+			target: target,
+			label: "First name",
+			placeholder: "Your first name",
+			type: "text",
+			value: infos.firstName,
+		});
+
+		//Last name
+		var lastName = createFormGroup({
+			target: target,
+			label: "Last name",
+			placeholder: "Your last name",
+			type: "text",
+			value: infos.lastName
+		});
+
+		//Allow mails from Comunic
+		var allowEmails = createFormGroup({
+			target: target,
+			type: "checkbox",
+			label: "Allow Comunic to send you emails",
+			checked: infos.allow_comunic_mails
+		});
+
+		//Page settings
+		add_space(target);
+		createElem2({
+			appendTo: target,
+			type: "h4",
+			innerHTML: "Page settings"
+		});
+
+		//Public page
+		var publicPage = createFormGroup({
+			target: target,
+			type: "checkbox",
+			label: "Make your page public (available to every Comunic users)",
+			checked: infos.is_public
+		});
+
+		//Open page
+		var openPage = createFormGroup({
+			target: target,
+			type: "checkbox",
+			label: "Make your page open (available for the entire world)",
+			checked: infos.is_open
+		});
+		
+		//Make the public and open button begin synchronized
+		$(publicPage).on("ifChanged", function(){
+			if(!publicPage.checked){
+				$(openPage).iCheck("uncheck");
+			}
+		});
+		$(openPage).on("ifChanged", function(){
+			if(openPage.checked){
+				$(publicPage).iCheck("check");
+			}
+		});
+
+
+		//Allow comments creation
+		var allowComments = createFormGroup({
+			target: target,
+			type: "checkbox",
+			label: "Allow the comments on your page",
+			checked: infos.allow_comments
+		});
+
+		//Allow posts from friends
+		var allowPostsFromFriends = createFormGroup({
+			target: target,
+			type: "checkbox",
+			label: "Allow the posts from your friends on your page",
+			checked: infos.allow_posts_from_friends
+		});
+
+		//Public friends list
+		var publicFriendsList = createFormGroup({
+			target: target,
+			type: "checkbox",
+			label: "Make your friend list public",
+			checked: infos.public_friends_list
+		});
+
+		//Personnal website
+		var personnalWebsite = createFormGroup({
+			target: target,
+			label: "Personnal website (optionnal)",
+			type: "text",
+			placeholder: "https://...",
+			value: infos.personnal_website != "null" ? infos.personnal_website : ""
+		});
+
+		//Public notes
+		var publicNotes = createFormGroup({
+			target: target,
+			label: "Public notes for your account 255 characters max (optionnal)",
+			type: "textarea",
+			placeholder: "Notes about your account...",
+			value: infos.publicNote != "null" ? infos.publicNote : ""
+		});
+
+		//Virtual directory
+		var virtualDirectory = createFormGroup({
+			target: target,
+			label: "Virtual directory for your user page (" + ComunicWeb.__config.siteURL + "user/{virtual_directory})<br />Account tag (in the form @{virtual_directory})",
+			type: "text",
+			placeholder: "Eg. john.way",
+			value: infos.virtual_directory != "null" ? infos.virtual_directory : ""
+		});
+
+		//Auto-check the virtual directory when it is updated
+		var checkTarget = createElem2({
+			appendTo: target,
+			type: "small"
+		});
+		
+		virtualDirectory.onkeyup = function(){
+			checkTarget.innerHTML = "Checking availability...";
+
+			//Get the directory to check
+			var directory = virtualDirectory.value;
+
+			//Check if the directory is empty
+			if(directory == ""){
+				checkTarget.innerHTML = "";
+				return;
+			}
+
+			//Perform a request on the API
+			ComunicWeb.components.settings.interface.checkUserDirectoryAvailability(directory, function(callback){
+
+				//Check if the directory is available or not
+				checkTarget.innerHTML = callback.error ? "<invalidDirectory>This directory is not available!</invalidDirectory>" : "This directory seems to be available!";
+
+			})
+		}
+
+		//Submit button
+		var sendButton = createElem2({
+			appendTo: target,
+			type: "div",
+			class: "btn btn-primary submit-form",
+			innerHTML: "Update"
+		});
+
+		//Make the submit button lives
+		sendButton.onclick = function(){
+
+			//Check the given values
+			if(!ComunicWeb.common.formChecker.checkInput(firstName, true))
+				return notify("Please check your first name!", "danger");
+
+			if(!ComunicWeb.common.formChecker.checkInput(lastName, true))
+				return notify("Please check your last name!", "danger");
+			
+			if(personnalWebsite.value != ""){
+				if(!check_url(personnalWebsite.value))
+					return notify("Please check the given URL !", "danger");
+			}
+
+			//Pack all the values in an object
+			var settings = {
+				firstName: firstName.value,
+				lastName: lastName.value,
+				allow_comunic_mails: allowEmails.checked,
+				isPublic: publicPage.checked,
+				isOpen: openPage.checked,
+				allowComments: allowComments.checked,
+				allowPostsFromFriends: allowPostsFromFriends.checked,
+				publicFriendsList: publicFriendsList.checked,
+				personnalWebsite: personnalWebsite.value,
+				virtualDirectory: virtualDirectory.value,
+				publicNote: publicNotes.value,
+			};
+
+			//Lock send button
+			sendButton.style.visibility = "hidden";
+
+			//Perform the request over the API
+			ComunicWeb.components.settings.interface.setGeneral(settings, function(result){
+
+				//Unlock send button
+				sendButton.style.visibility = "visible";
+
+				//Check for errors
+				if(result.error){
+					notify("An error occured while updating user settings!", "danger");
+					return;
+				}
+
+				//Success
+				notify("Your settings have been successfully saved !", "success");
+
+				//Reset the system
+				ComunicWeb.common.system.reset();
+			});
+		};
+	},
+
+};

assets/js/pages/settings/sections/password.js

@@ -0,0 +1,125 @@
+/**
+ * Password update section
+ * 
+ * @author Pierre HUBERT
+ */
+
+ComunicWeb.pages.settings.sections.password = {
+
+	/**
+	 * Open settings section
+	 * 
+	 * @param {object} args Additionnal arguments
+	 * @param {HTMLElement} target The target for the page
+	 */
+	open: function(args, target){
+		
+		//Create a box
+		var box = createElem2({
+			appendTo: target,
+			type: "div",
+			class: "box box-primary box-password-settings"
+		});
+
+		//Add box header
+		var boxHead = createElem2({
+			appendTo: box,
+			type: "div",
+			class: "box-header",
+		});
+		var boxTitle = createElem2({
+			appendTo: boxHead,
+			type: "h3",
+			class: "box-title",
+			innerHTML: "Password update"
+		});
+
+		//Create box body
+		var boxBody = createElem2({
+			appendTo: box,
+			type: "div",
+			class: "box-body"
+		});
+
+		//Create a form contener
+		var formContener = createElem2({
+			appendTo: boxBody,
+			type: "div"
+		});
+
+		//Ask the user to enter its old password
+		var oldPasswordInput = createFormGroup({
+			target: formContener,
+			label: "Old password",
+			placeholder: "Your old (current) password",
+			type: "password"
+		});
+
+		//Ask the user to enter its new password
+		var newPasswordInput = createFormGroup({
+			target: formContener,
+			label: "New password",
+			placeholder: "Your new password",
+			type: "password"
+		});
+
+		//Ask the user to confirm its new password
+		var confirmNewPasswordInput = createFormGroup({
+			target: formContener,
+			label: "Confirm your password",
+			placeholder: "Your new password",
+			type: "password"
+		});
+
+		//Add submit button
+		var sendButton = createElem2({
+			appendTo: formContener,
+			type: "div",
+			class: "btn btn-primary submit-form",
+			innerHTML: "Update password"
+		});
+
+		//Make submit button lives
+		sendButton.onclick = function(){
+
+			//Check the old and the new password
+			if(!ComunicWeb.common.formChecker.checkInput(oldPasswordInput, true)){
+				notify("Please specify your old password to update your password!", "danger");
+				return;
+			}
+
+			if(!ComunicWeb.common.formChecker.checkInput(newPasswordInput, true)){
+				notify("Please specify a new password to update your password!", "danger");
+				return;
+			}
+
+			//Check if the old and the new password are the same or not
+			if(newPasswordInput.value !== confirmNewPasswordInput.value){
+				notify("The new password and its confirmation are not the same!", "danger");
+				return;
+			}
+
+			//Perform a request over the server
+			sendButton.style.visibility = "hidden";
+
+			//Perform a request over the server
+			ComunicWeb.components.settings.interface.updatePassword(oldPasswordInput.value, newPasswordInput.value, function(result){
+
+				sendButton.style.visibility = "visible";
+
+				//Check for errors
+				if(result.error){
+					notify("An error occurred while trying to udpate user password!", "danger");
+					return;
+				}
+
+				//Success
+				notify("Your password has been successfully updated !");
+
+				//Refresh current page to remove passwords (security)
+				ComunicWeb.common.page.refresh_current_page();
+			});
+		}
+	}
+
+};

assets/js/pages/settings/sections/security.js

@@ -0,0 +1,258 @@
+/**
+ * Settings security section script
+ * 
+ * @author Pierre HUBERT
+ */
+
+ComunicWeb.pages.settings.sections.security = {
+
+	/**
+	 * Open security settings section
+	 * 
+	 * @param {object} args Additionnal arguments
+	 * @param {HTMLElement} target The target for the page
+	 */
+	open: function(args, target){
+		
+		//Create a box
+		var box = createElem2({
+			appendTo: target,
+			type: "div",
+			class: "box box-primary box-security-settings"
+		});
+
+		//Add box header
+		var boxHead = createElem2({
+			appendTo: box,
+			type: "div",
+			class: "box-header",
+		});
+		var boxTitle = createElem2({
+			appendTo: boxHead,
+			type: "h3",
+			class: "box-title",
+			innerHTML: "Security settings"
+		});
+
+		//Create box body
+		var boxBody = createElem2({
+			appendTo: box,
+			type: "div",
+			class: "box-body"
+		});
+
+		//Append the form to query user password
+		this._append_form_prompt_user_password(boxBody);
+
+		//Offer the user to update its password too
+		ComunicWeb.pages.settings.sections.password.open(args, target);
+	},
+
+	/**
+	 * Append a form to prompt user password
+	 * 
+	 * @param {HMTLElement} target The target for the form
+	 */
+	_append_form_prompt_user_password: function(target){
+
+		//Create form contener (allows easier manipulations then)
+		var formContener = createElem2({
+			appendTo: target,
+			type: "form",
+			class: "prompt-user-password"
+		});
+
+		//Add title
+		createElem2({
+			appendTo: formContener,
+			type: "h4",
+			innerHTML: "Password required"
+		});
+
+		//Add explanation
+		createElem2({
+			appendTo: formContener,
+			type: "p",
+			innerHTML: "In order to protect these sensitive information, your password is required to access this page."
+		});
+
+		//User password form
+		var passwordInput = createFormGroup({
+			target: formContener,
+			label: "Your password",
+			placeholder: "Your password",
+			type: "password"
+		});
+
+		//Add submit button
+		var sendButton = createElem2({
+			appendTo: formContener,
+			type: "div",
+			class: "btn btn-primary submit-form",
+			innerHTML: "Submit"
+		});
+
+		//Make submit button lives
+		sendButton.onclick = function(){
+
+			//Check the validity of the input
+			if(!ComunicWeb.common.formChecker.checkInput(passwordInput, true)){
+				notify("Please input your password !", "danger");
+				return;
+			}
+
+			//Hide send button
+			sendButton.style.visibility = "hide";
+
+			//Perform a request over the server to fetch security settings
+			ComunicWeb.components.settings.interface.getSecurity(passwordInput.value, function(result){
+
+				//Show send button
+				sendButton.style.visibility = "visible";
+
+				//Check for errors
+				if(result.error){
+					notify("An error occured while retrieving security settings! Please check your password...", "danger");
+					return;
+				}
+
+				//Remove password input form
+				emptyElem(formContener);
+
+				//Show security information update form
+				ComunicWeb.pages.settings.sections.security._show_update_form(result, target);
+			});
+		};
+
+		//Make the submit button triggered when the user hit enter
+		formContener.onsubmit = function(){
+			sendButton.onclick();
+			return false;
+		}
+	},
+
+	/**
+	 * Show security update form
+	 * 
+	 * @param {object} settings The settings to update
+	 * @param {HTMLElement} target The target for the form
+	 */
+	_show_update_form: function(settings, target){
+
+		//Create form contener
+		var formContener = createElem2({
+			appendTo: target,
+			type: "div",
+			class: "security-settings-form"
+		})
+
+		//Display a message to explain to the user what is on this page
+		createElem2({
+			appendTo: formContener,
+			type: "p",
+			innerHTML: "In this section, you can set two security question that will help you to " + 
+				"recover an access to your account if you lose your password. Do not worry about " +
+				"uppercase and lowercase characters. <br /> <strong>Warning !</strong> All the fields " +
+				"on the page must be filled to get the security questions usable."
+		});
+
+		//Display first security question
+		var firstSecurityQuestion = createFormGroup({
+			target: formContener,
+			label: "First security question",
+			type: "text",
+			placeholder: "Type your question here...",
+			value: settings.security_question_1
+		});
+
+		//Display first security answer
+		var firstSecurityAnswer = createFormGroup({
+			target: formContener,
+			label: "First security answer",
+			type: "text",
+			placeholder: "Type your answer here...",
+			value: settings.security_answer_1
+		});
+
+		//Display second security question
+		var secondSecurityQuestion = createFormGroup({
+			target: formContener,
+			label: "Second security question",
+			type: "text",
+			placeholder: "Type your question here...",
+			value: settings.security_question_2
+		});
+
+		//Display second security answer
+		var secondSecurityAnswer = createFormGroup({
+			target: formContener,
+			label: "Second security answer",
+			type: "text",
+			placeholder: "Type your answer here...",
+			value: settings.security_answer_2
+		});
+
+
+		//User password form
+		add_space(formContener);
+		createElem2({
+			appendTo: formContener,
+			type: "p",
+			innerHTML: "We need your password to update these information..."
+		});
+		var passwordInput = createFormGroup({
+			target: formContener,
+			label: "Your password",
+			placeholder: "Your password",
+			type: "password"
+		});
+
+		//Add submit button
+		var sendButton = createElem2({
+			appendTo: formContener,
+			type: "div",
+			class: "btn btn-primary submit-form",
+			innerHTML: "Update information"
+		});
+
+		//Make the send button lives
+		sendButton.onclick = function(){
+
+			//Check the values given by the user
+			if(!ComunicWeb.common.formChecker.checkInput(passwordInput, true)){
+				notify("Please specify your password to submit information!", "danger");
+				return;
+			}
+
+			//Prepare the request over the server
+			var params = {
+				security_question_1: firstSecurityQuestion.value,
+				security_answer_1: firstSecurityAnswer.value,
+				security_question_2: secondSecurityQuestion.value,
+				security_answer_2: secondSecurityAnswer.value,
+
+				//Security check
+				password: passwordInput.value
+			};
+
+			//Hide send button
+			sendButton.style.visibility = "hidden";
+
+			//Perform the request on the server
+			ComunicWeb.components.settings.interface.setSecurity(params, function(response){
+
+				//Show send button
+				sendButton.style.visibility = "visible";
+
+				//Check for errors
+				if(response.error){
+					notify("An error occurred while trying to update security settings ! Please check your password...", "danger");
+					return;
+				}
+
+				//Success
+				notify("Your security settings have been successfully updated!", "success");
+			});
+		}
+	}
+}

assets/js/pages/settings/sectionsList.js

@@ -0,0 +1,40 @@
+/**
+ * Settings pages list
+ * 
+ * @author Pierre HUBERT
+ */
+
+ComunicWeb.pages.settings.sectionsList = {
+
+	/**
+	 * General settings
+	 */
+	general: {
+		title: "General",
+		handler: "ComunicWeb.pages.settings.sections.general.open",
+	},
+
+	/**
+	 * Security settings
+	 */
+	security: {
+		title: "Security",
+		handler: "ComunicWeb.pages.settings.sections.security.open",
+	},
+
+	/**
+	 * Password settings
+	 */
+	password: {
+		title: "Password",
+		handler: "ComunicWeb.pages.settings.sections.password.open",
+	},
+
+	/**
+	 * Account image
+	 */
+	account_image: {
+		title: "Account image",
+		handler: "ComunicWeb.pages.settings.sections.accountImage.open"
+	},
+}

assets/js/pages/userPage/main.js

@@ -134,7 +134,7 @@ ComunicWeb.pages.userPage.main = {
 		var row = createElem2({
 			appendTo: sectionContent,
 			type: "div",
-			class: "row page-contener"
+			class: "row page-container"
 		});
 
 		//Create left column

assets/js/pages/userPage/posts.js

@@ -87,7 +87,7 @@ ComunicWeb.pages.userPage.posts = {
 	 * @param {HTMLElement} target The target for the posts
 	 * @param {function} callback What to do once the posts have been loaded
 	 */
-	_load_posts(userInfos, target, callback){
+	_load_posts: function(userInfos, target, callback){
 
 		//Get the posts from the API
 		ComunicWeb.components.posts.interface.get_user(userInfos.userID, this._last_post_id, function(result){
@@ -150,20 +150,20 @@ ComunicWeb.pages.userPage.posts = {
 	 */
 	_no_posts_msg: function(target){
 		
-		var msgContener = createElem2({
+		var msgContainer = createElem2({
 			appendTo: target,
 			type: "div"
 		});
 
 		var msgTitle = createElem2({
-			appendTo: msgContener,
+			appendTo: msgContainer,
 			type: "h2",
 			innerHTML: "No post yet"
 		});
 		msgTitle.style.textAlign = "center";
 
 		var msgContent = createElem2({
-			appendTo: msgContener,
+			appendTo: msgContainer,
 			type: "p",
 			innerHTML: "Nobody has posted a message on this page yet."
 		}).style.textAlign = "center";

assets/js/pages/userPage/profileInfos.js

@@ -33,8 +33,8 @@ ComunicWeb.pages.userPage.profileInfos = {
 	 */
 	createMainBox: function(infos, target){
 		
-		//Create box contener
+		//Create box container
-		var boxContener = createElem2({
+		var boxContainer = createElem2({
 			appendTo: target,
 			type: "div",
 			class: "box box-primary"
@@ -42,7 +42,7 @@ ComunicWeb.pages.userPage.profileInfos = {
 
 		//Setup box body
 		var boxBody = createElem2({
-			appendTo: boxContener,
+			appendTo: boxContainer,
 			type: "div",
 			class: "box-body box-profile"
 		});
@@ -64,6 +64,16 @@ ComunicWeb.pages.userPage.profileInfos = {
 		});
 
 
+		//Add user virtual directory (if any)
+		if(infos.virtualDirectory != ""){
+			var userTag = createElem2({
+				appendTo: boxBody,
+				type: "div",
+				innerHTML: "@"+ infos.virtualDirectory,
+				class: "user-tag-in-profile"
+			});
+		}
+
 
 		//Show user likes
 		var userLikesTarget = createElem2({
@@ -166,7 +176,7 @@ ComunicWeb.pages.userPage.profileInfos = {
 		var boxRoot = createElem2({
 			appendTo: target,
 			type: "div",
-			class: "box box-primary"
+			class: "box box-primary about-user-box"
 		});
 
 		//Add box header
@@ -227,6 +237,41 @@ ComunicWeb.pages.userPage.profileInfos = {
 			});
 		}
 
+		//Add user public note (if any)
+		if(infos.publicNote){
+			var userNote = createElem2({
+				appendTo: boxBody,
+				type: "strong"
+			});
+			createElem2({
+				appendTo: userNote,
+				type: "i",
+				class: "fa fa-file-text-o margin-r-5"
+			});
+			createElem2({
+				appendTo: userNote,
+				type: "span",
+				innerHTML: "Note"
+			});
+			var publicNotes = createElem2({
+				appendTo: boxBody,
+				type: "p",
+				class: "text-muted",
+				innerHTML: infos.publicNote
+			});
+
+			//Parse text
+			ComunicWeb.components.textParser.parse({
+				element: publicNotes
+			});
+
+			//Add separator
+			createElem2({
+				appendTo: boxBody,
+				type: "hr",
+			});
+		}
+
 		//Add informations about membership
 		var membershipInfos = createElem2({
 			appendTo: boxBody,

assets/js/pagesList.js

@@ -41,6 +41,15 @@ ComunicWeb.pagesList = {
         disableMenus: false
     },
 
+    /**
+     * User settings page
+     */
+    settings: {
+        pageTitle: "Settings",
+        methodHandler: "ComunicWeb.pages.settings.main.open",
+        disableMenus: false
+    },
+
     /**
      * Login page
      */
@@ -50,6 +59,24 @@ ComunicWeb.pagesList = {
         disableMenus: true,
     },
 
+    /**
+     * Create account page
+     */
+    create_account: {
+        pageTitle: "Create an account",
+        methodHandler: "ComunicWeb.pages.createAccount.openPage",
+        disableMenus: false
+    },
+
+    /**
+     * Account created page
+     */
+    account_created: {
+        pageTitle: "Account created",
+        methodHandler: "ComunicWeb.pages.accountCreated.open",
+        disableMenus: false,
+    },
+
     /**
      * Logout page
      */

assets/templates/pages/accountCreated.tpl

@@ -0,0 +1,47 @@
+<!-- 
+	Account created template
+
+	@author Pierre HUBERT
+-->
+
+<!-- Page style updated -->
+<style>
+	.content-wrapper {
+		background-image: url({background_img_url});
+		background-position: 10% 50%;
+	}
+
+	.page_account_created {
+		display: table;
+		padding-top: 20px;
+		width: 100%;
+	}
+
+	.message_container {
+		display: table-cell;
+		vertical-align: middle;
+	}
+
+	.message {
+		background-color: #fff9;
+		max-width: 500px;
+		margin: auto;
+		text-align: center;
+		padding: 20px;
+	}
+</style>
+
+<!-- Page content -->
+<div class="page_account_created">
+	<div class="message_container">
+
+		<div class="message">
+			<h1>Congratulations!</h1>
+			<br />
+			<h4>Your account has been successfully created! <br /> Login now to use all the features of Comunic!</h4>
+			<br />
+			<a target="login" class="btn btn-primary btn-lg">Login</a>
+		</div>
+
+	</div>
+</div>

assets/templates/pages/home/landingPage/home.tpl

@@ -4,24 +4,49 @@
 	@author Pierre HUBERT
 -->
 <div id="homeLandingScreen">
-	<div class="landingMessage">
+	
-		<h1>ComunicWeb V2 Experimental preview</h1>
+	<div id="homeMessageContainer">
+
+		<div id="homeMessage">
+			<h1>Comunic</h1>
+
+			<h3>Free social network that respect your privacy.</h3>
+			<br />
+
+			<a class="btn btn-lg btn-primary" target="create_account">Sign up</a>
+			<a class="btn btn-lg btn-success" target="login">Sign in</a>
 		</div>
+	</div>
+
+
 </div>
 
 <!-- Page styles -->
 <style type="text/css">
+
 	#homeLandingScreen{
+		background-image: url("{backgroundImage}");
+		background-position: 0% 50%;
 		width: 100%;
 		height: 100%;
 		position: fixed;
 		text-align: center;
-		padding: 60px;
+		padding: 10px;
-		background-position: 50% 50%;
+		display: table;
+		top: 0;
 	}
 
-	#homeLandingScreen .landingMessage {
+	#homeMessageContainer {
-		position: relative;
+		display: table-cell;
-		background-color: #fff6;
+		vertical-align: middle;
 	}
+
+	#homeMessage {
+		background-color: #ffffff80;
+		max-width: 400px;
+		padding: 30px;
+		margin: auto;
+		border-radius: 5px;
+	}
+
 </style>

assets/templates/pages/login/loginPage.tpl

@@ -29,12 +29,19 @@
 					</div>
 				</div>
 				<!-- /.col -->
+
+				<!-- Submit button -->
 				<div class="col-xs-4">
 					<button type="submit" class="btn btn-primary btn-block btn-flat btn-login">{sign_in}</button>
 				</div>
+
 				<!-- /.col -->
 			</div>
 		</form>
+
+		<!-- Create an account -->
+		<a target="create_account">Create an account</a>
+		
 	</div>
 	<!-- /.login-box-body -->
 </div>

builder

@@ -0,0 +1,286 @@
+#!/usr/bin/env php
+
+###########################
+# ComunicWeb build script #
+#                         #
+# @author Pierre HUBERT   #
+###########################
+
+<?php
+
+//Output directory
+define("OUTPUT_DIRECTORY", __DIR__."/output/");
+
+//Temporary file
+define("TEMP_FILE", __DIR__."/output/temp");
+
+//Defines some utilities
+
+/**
+ * Display a message on the screen
+ * 
+ * @param string $message The message to display on the screen
+ * @param bool $new_section Specify whether the message refers to a 
+ * new build section or not
+ */
+function notice(string $message, bool $new_section = false) {
+	echo ($new_section ? "\n\n" : "").$message,"\n";
+}
+
+/**
+ * Append a string at the begining of each entry of an array
+ * 
+ * @param string $input The string to append to each array entry
+ * @param array $array The array to process
+ * @return array Updated array
+ */
+function array_put_begining(string $input, array $array){
+	
+	foreach($array as $num => $val)
+		$array[$num] = $input.$val;
+	
+	return $array;
+}
+
+/**
+ * Copy an array of file into a specific target file
+ * 
+ * @param array $files The list of file to copy
+ * @param string $target The target file to create
+ * @param bool TRUE for a success / FALSE else
+ */
+function files_to_file(array $files, string $target) : bool {
+
+	$source = "";
+
+	foreach($files as $file){
+		$source .= file_get_contents($file)."\n";
+	}
+
+	return file_put_contents($target, $source) != FALSE;
+}
+
+/**
+ * Copy an array of files into a specific target file using uglifyJS
+ * 
+ * @param array $files The name of the source file
+ * @param string $target The target file
+ * @return bool TRUE in case of success / FALSE in case of failure
+ */
+function js_files_to_file(array $files, string $target){
+
+	$source = "";
+
+	//Delete any previous temporary file
+	if(file_exists(TEMP_FILE))
+		unlink(TEMP_FILE);
+
+	foreach($files as $file){
+
+		//Compress file
+		notice("Parsing with UGLIFYJS: ".$file);
+		exec("/usr/bin/uglifyjs '".$file."' -c -o ".TEMP_FILE, $output, $exit_code);
+		
+		//Get the content of the file
+		$source .= "\n".file_get_contents(TEMP_FILE);
+
+		if($exit_code != 0){
+			notice("An error (".$exit_code.") occured while parsing file ".$file, TRUE);
+			exit(10);
+		}
+	}
+
+	//Delete the temp file
+	unlink(TEMP_FILE);
+
+	return file_put_contents($target, $source) != FALSE;
+
+}
+
+/**
+ * Delete the entire content of directory
+ * 
+ * @param string $path The path of the directory to delete
+ */
+function delDir(string $path){
+	if(is_dir($path) == TRUE){
+		$rootFolder = scandir($path);
+		if(sizeof($rootFolder) > 2){
+			foreach($rootFolder as $folder){
+				if($folder != "." && $folder != ".."){
+					//Pass the subfolder to function
+					delDir($path."/".$folder);
+				}
+			}
+
+			//On the end of foreach the directory will be cleaned, and you will can use rmdir, to remove it
+			rmdir($path);
+		}
+	}
+	else {
+		if(file_exists($path) == TRUE){
+			//Suppression du fichier
+			unlink($path);
+		}
+	}
+}
+
+// copies files and non-empty directories
+function rcopy(string $src, string $dst) {
+	if (is_dir($src)) {
+	  mkdir($dst, 0777, true);
+	  $files = scandir($src);
+	  foreach ($files as $file)
+	  if ($file != "." && $file != "..") rcopy("$src/$file", "$dst/$file"); 
+	}
+	else if (file_exists($src)) copy($src, $dst);
+}
+
+
+//Initialize page
+require_once __DIR__."/system/system.php";
+
+
+/**
+ * Build application
+ */
+function build() {
+
+if(!isset($_SERVER['argv'][2]))
+	exit(notice("Usage: ./build build [configuration]", TRUE));
+
+//Defines some variables
+$debug_conf = "dev";
+$release_conf = $_SERVER['argv'][2];
+
+
+//Load configurations
+notice("Load configurations.", TRUE);
+notice("Debug config: ".$debug_conf);
+notice("Release config: ".$release_conf);
+
+load_config($debug_conf);
+$debug = new $debug_conf;
+$path_debug_assets = __DIR__."/".$debug::PATH_ASSETS;
+
+load_config($release_conf);
+$release = new $release_conf;
+$path_release_assets = OUTPUT_DIRECTORY.$release::PATH_ASSETS;
+
+
+
+
+//Clean directory
+notice("Clean build directory", TRUE);
+if(file_exists(OUTPUT_DIRECTORY))
+	delDir(OUTPUT_DIRECTORY);
+mkdir(OUTPUT_DIRECTORY, 0777, true);
+mkdir($path_release_assets, 0777, true);
+
+
+
+//Create unminified version
+notice("Create unminified files versions", TRUE);
+
+//3rd party CSS
+notice("Third Party CSS");
+$thirdPartyDebugFiles = array_put_begining($path_debug_assets, $debug::THIRD_PARTY_CSS);
+$targetThirdPartyCSS = $path_release_assets.$release::THIRD_PARTY_CSS;
+files_to_file($thirdPartyDebugFiles, $targetThirdPartyCSS);
+
+//3rd party JS
+notice("Third Party JS");
+$thirdPartyDebugFiles = array_put_begining($path_debug_assets, $debug::THIRD_PARTY_JS);
+$targetThirdPartyJS = $path_release_assets.$release::THIRD_PARTY_JS;
+js_files_to_file($thirdPartyDebugFiles, $targetThirdPartyJS);
+
+//App CSS
+notice("App CSS");
+$appDebugFiles = array_put_begining($path_debug_assets, $debug::APP_CSS);
+$targetAppCSS = $path_release_assets.$release::APP_CSS;
+files_to_file($appDebugFiles, $targetAppCSS);
+
+//App JS
+notice("App JS");
+$appDebugFiles = array_put_begining($path_debug_assets, $debug::APP_JS);
+$targetAppJS = $path_release_assets.$release::APP_JS;
+js_files_to_file($appDebugFiles, $targetAppJS);
+
+
+//Make some adpations on third party files
+$source = file_get_contents($targetThirdPartyCSS);
+$source = str_replace("../fonts/fontawesome", "fontawesome_fonts/fontawesome", $source);
+file_put_contents($targetThirdPartyCSS, $source);
+
+//Copy font awesome files and twemojies files + Google Fonts
+rcopy($path_debug_assets."3rdparty/adminLTE/plugins/font-awesome/fonts", $path_release_assets."fontawesome_fonts");
+rcopy($path_debug_assets."3rdparty/twemoji/2/72x72/", $path_release_assets."3rdparty/twemoji/2/72x72/");
+rcopy($path_debug_assets."3rdparty/adminLTE/plugins/googleFonts/googleFonts/", $path_release_assets."googleFonts/");
+rcopy($path_debug_assets."3rdparty/wdt-emoji/sheets/", $path_release_assets."3rdparty/wdt-emoji/sheets/");
+
+
+//Copy images and templates
+rcopy($path_debug_assets."img/", $path_release_assets."img/");
+rcopy($path_debug_assets."templates/", $path_release_assets."templates/");
+
+
+//Create main HTML file
+notice("Generate PHP root file");
+$page_src = '<?php
+//We check if it is a redirection to handle 404 errors
+if(isset($_SERVER["REDIRECT_URL"])){
+    //We check if it is an asset request
+    if(preg_match("<assets>", $_SERVER["REDIRECT_URL"])){
+        //This is a 404 not found error...
+        echo "<p>Error! 404 not found</p>";
+        http_response_code(404);
+        exit();
+    }
+} ?>';
+$page_src .= load_page($release_conf);
+file_put_contents(OUTPUT_DIRECTORY."index.php", $page_src);
+
+// Add .htaccess file
+$htaccess = '<IfModule mod_rewrite.c>
+RewriteEngine On
+RewriteRule ^index\.php$ - [L]
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteRule . index.php [L]
+</IfModule>
+';
+file_put_contents(OUTPUT_DIRECTORY.".htaccess", $htaccess);
+
+
+//Done
+notice("Done.", TRUE);
+
+} //BUILD
+
+/**
+ * Clean build directory
+ */
+function clean(){
+	notice("Cleaning build directory.", TRUE);
+	delDir(OUTPUT_DIRECTORY);
+}
+
+//Get the action and do it
+if(!isset($_SERVER['argv'][1]))
+	exit("Usage: ./build [action]");
+$action = $_SERVER['argv'][1];
+
+switch($action){
+
+	case "build":
+		build();
+		break;
+	
+	case "clean":
+		clean();
+		break;
+	
+	default:
+		notice("Accepted commands are build, clean.", TRUE);
+
+}

system/config/dev.config.php

@@ -7,6 +7,13 @@
 
 class Dev {
 
+	/**
+	 * API access and credentials
+	 */
+	const API_URL = "http://devweb.local/comunic/api/";
+	const API_SERVICE_NAME = "ComunicWeb";
+	const API_SERVICE_TOKEN = "12XU67pJUlnNQ";
+
 	/**
 	 * Site URL
 	 */
@@ -18,7 +25,12 @@ class Dev {
 	const PROD_MODE = false;
 
 	/**
-	 * Path to assets
+	 * Path to assets (relative to the base project)
+	 */
+	const PATH_ASSETS = "assets/";
+
+	/**
+	 * URL to assets
 	 */
 	const ASSETS_URL = "http://devweb.local/comunic/v2/assets/";
 
@@ -30,6 +42,7 @@ class Dev {
 		"3rdparty/adminLTE/bootstrap/css/bootstrap.min.css",
 		"3rdparty/adminLTE/plugins/font-awesome/css/font-awesome.min.css",
 		"3rdparty/adminLTE/plugins/ionicons/css/ionicons.min.css",
+		"3rdparty/adminLTE/plugins/googleFonts/css.css",
 
 		//iCheck
 		"3rdparty/adminLTE/plugins/iCheck/square/blue.css",
@@ -48,7 +61,10 @@ class Dev {
 		"3rdparty/adminLTE/plugins/datepicker/datepicker3.css",
 
 		//VideoJS
-		//"3rdparty/videojs/6.4.0/video-js.min.css"
+		//"3rdparty/videojs/6.4.0/video-js.min.css",
+
+		//Emoji picker
+		"3rdparty/wdt-emoji/wdt-emoji-bundle.css",
 	);
 
 	/**
@@ -101,7 +117,11 @@ class Dev {
 		"3rdparty/adminLTE/plugins/datepicker/bootstrap-datepicker.js",
 
 		//VideoJS
-		//"3rdparty/videojs/6.4.0/video.min.js"
+		//"3rdparty/videojs/6.4.0/video.min.js",
+
+		//Emoji picker
+		"3rdparty/wdt-emoji/emoji.min.js",
+		"3rdparty/wdt-emoji/wdt-emoji-bundle.js",
 	);
 
 	/**
@@ -117,6 +137,9 @@ class Dev {
 			//Menubar stylesheet
 			"css/components/menuBar.css",
 
+			//Language picker stylesheet
+			"css/components/languagePicker.css",
+			
 			//Searchform stylesheet
 			"css/components/searchForm.css",
 			
@@ -136,6 +159,7 @@ class Dev {
 
 			//Emojies
 			"css/components/emoji/parser.css",
+			"css/components/emoji/picker.css",
 
 			//Posts component
 			"css/components/posts/ui.css",
@@ -157,12 +181,26 @@ class Dev {
 			//User Page
 			"css/pages/userPage/main.css",
 			"css/pages/userPage/accessForbidden.css",
+			"css/pages/userPage/profileInfos.css",
 
 			//Post page
 			"css/pages/postPage/main.css",
 
+			//Settings page
+				//Sections sections
+				"css/pages/settings/sections/general.css",
+				"css/pages/settings/sections/security.css",
+				"css/pages/settings/sections/password.css",
+				"css/pages/settings/sections/accountImage.css",
+
 			//Latest post page stylesheet
 			"css/pages/latestPosts/main.css",
+
+			//User account page
+			"css/pages/settings/main.css",
+
+			//Create account page
+			"css/pages/createAccount.css",
 	);
 
 	/**
@@ -201,17 +239,29 @@ class Dev {
 		"js/langs/fr.inc.js",
 
 		//Components
+			//Account component
+			"js/components/account/interface.js",
+
 			//Mail caching
 			"js/components/mailCaching.js",
 			
 			//Search form
 			"js/components/searchForm/searchForm.js",
 
+			//Settings
+			"js/components/settings/interface.js",
+			
 			//Main menubar
 			"js/components/menuBar/common.js",
 			"js/components/menuBar/notAuthenticated.js",
 			"js/components/menuBar/authenticated.js",
 
+			//Bottom view
+			"js/components/bottom/main.js",
+
+			//Language picker
+			"js/components/languagePicker.js",
+			
 			//Friends components
 			"js/components/friends/friendsList.js",
 			"js/components/friends/friendsBar.js",
@@ -238,6 +288,7 @@ class Dev {
 			//Emojies
 			"js/components/emoji/parser.js",
 			"js/components/emoji/list.js",
+			"js/components/emoji/picker.js",
 
 			//Like button
 			"js/components/like/button.js",
@@ -262,6 +313,9 @@ class Dev {
 			//Modern textarea handler
 			"js/components/textarea.js",
 
+			//Comunic custom text parser
+			"js/components/textParser.js",
+
 			//Countdown timer
 			"js/components/countdown.js",
 
@@ -300,9 +354,24 @@ class Dev {
 			//Latest posts page
 			"js/pages/latestPosts/main.js",
 
+			//User settings page
+			"js/pages/settings/main.js",
+			"js/pages/settings/navigationPane.js",
+			"js/pages/settings/sectionsList.js",
+
+				//Settings sections
+				"js/pages/settings/sections/general.js",
+				"js/pages/settings/sections/security.js",
+				"js/pages/settings/sections/password.js",
+				"js/pages/settings/sections/accountImage.js",
+
 			//Login page
 			"js/pages/login.js",
 
+			//Create account page
+			"js/pages/createAccount.js",
+			"js/pages/accountCreated.js",
+			
 			//Logout page
 			"js/pages/logout.js",
 

system/config/global.config.php

@@ -12,11 +12,4 @@ class Config {
 	 */
 	const VERSION = "0.1.1";
 
-	/**
-	 * API access and credentials
-	 */
-	const API_URL = "http://devweb.local/comunic/api/";
-	const API_SERVICE_NAME = "ComunicWeb";
-	const API_SERVICE_TOKEN = "12XU67pJUlnNQ";
-
 }

system/config/offline.config.php

@@ -0,0 +1,76 @@
+<?php
+/**
+ * PHP offline build config for the website
+ *
+ * @author Pierre HUBERT
+ */
+
+class Offline {
+
+	/**
+	 * API access and credentials
+	 */
+	const API_URL = "http://devweb.local/comunic/api/";
+	const API_SERVICE_NAME = "ComunicWeb";
+	const API_SERVICE_TOKEN = "12XU67pJUlnNQ";
+
+	/**
+	 * Site URL
+	 */
+	const SITE_URL = "http://devweb.local/comunic/v2/output/";
+
+	/**
+	 * Site production mode
+	 */
+	const PROD_MODE = TRUE;
+
+	/**
+	 * Path to assets (relative to the build folder)
+	 */
+	const PATH_ASSETS = "assets/";
+
+	/**
+	 * Path to assets (URL)
+	 */
+	const ASSETS_URL = "http://devweb.local/comunic/v2/output/assets/";
+
+	/**
+	 * Third party CSS files
+	 */
+	const THIRD_PARTY_CSS = "third_party_css.css";
+
+	/**
+	 * Third party Javascript files
+	 */
+	const THIRD_PARTY_JS = "third_party.js";
+
+	/**
+	 * Third party Javascript files (unminified)
+	 */
+	const THIRD_PARTY_UNMINIFIED_JS = "third_party.unminified.js";
+
+	/**
+	 * Application CSS files
+	 */
+	const APP_CSS = "app.css";
+
+	/**
+	 * Application JS files
+	 */
+	const APP_JS = "app.js";
+
+	/**
+	 * Application JS files (unminifieds)
+	 */
+	const APP_UNMINIFIED_JS = "app.unminified.js";
+
+	/**
+	 * Language settings
+	 */
+	const DEFAULT_LANGUAGE = "en";
+
+	/**
+	 * Templates settings
+	 */
+	const TEMPLATES_PATH = "templates/";
+}

system/system.php

@@ -16,10 +16,10 @@ require_once __DIR__."/config/global.config.php";
  * @param string $config The configuration to use to load a page
  * @return string Generated source page
  */
-function load_page(string $config) : string{
+function load_page(string $config) : string {
 
     //Load configuration
-    require __DIR__."/config/".$config.".config.php";
+    load_config($config);
     $conf = new $config();
 
     //Load page template
@@ -32,14 +32,31 @@ function load_page(string $config) : string{
     $source = str_replace("{js_config}", get_javascript_config($conf), $source);
 
     //Update assets inclusion
+    if(is_array($conf::THIRD_PARTY_CSS)){
         $source = str_replace("{THIRD_PARTY_CSS}", src_inc_list_css($conf::ASSETS_URL, $conf::THIRD_PARTY_CSS), $source);
         $source = str_replace("{APP_CSS}", src_inc_list_css($conf::ASSETS_URL, $conf::APP_CSS), $source);
         $source = str_replace("{THIRD_PARTY_JS}", src_inc_list_js($conf::ASSETS_URL, $conf::THIRD_PARTY_JS), $source);
         $source = str_replace("{APP_JS}", src_inc_list_js($conf::ASSETS_URL, $conf::APP_JS), $source);
+    }
+    else {
+        $source = str_replace("{THIRD_PARTY_CSS}", src_inc_css($conf::ASSETS_URL.$conf::THIRD_PARTY_CSS), $source);
+        $source = str_replace("{APP_CSS}", src_inc_css($conf::ASSETS_URL.$conf::APP_CSS), $source);
+        $source = str_replace("{THIRD_PARTY_JS}", src_inc_js($conf::ASSETS_URL.$conf::THIRD_PARTY_JS), $source);
+        $source = str_replace("{APP_JS}", src_inc_js($conf::ASSETS_URL.$conf::APP_JS), $source);
+    }
 
     return $source;
 }
 
+/**
+ * Load a configuration
+ * 
+ * @param string $name The name of the configuration to load
+ */
+function load_config(string $config){
+    require_once __DIR__."/config/".$config.".config.php";
+}
+
 /**
  * Get javascript configuration
  * 
@@ -67,15 +84,15 @@ function get_javascript_config($config) : string {
         siteURL: '".$config::SITE_URL."',
 
         //API configuration
-        apiURL: '".Config::API_URL."',
+        apiURL: '".$config::API_URL."',
-        apiServiceName: '".Config::API_SERVICE_NAME."',
+        apiServiceName: '".$config::API_SERVICE_NAME."',
-        apiServiceToken: '".Config::API_SERVICE_TOKEN."',
+        apiServiceToken: '".$config::API_SERVICE_TOKEN."',
 
         //Default language
         defaultLanguage: '".$config::DEFAULT_LANGUAGE."',
 
-        //LanguagesPath
+        "/*LanguagesPath
-        languagesPath: '".$config::ASSETS_URL.$config::LANGUAGE_PATH."', 
+        "languagesPath: '".$config::ASSETS_URL.$config::LANGUAGE_PATH."', */."
 
     };