Can get and set oldest message ID known of a conversation

README.md

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

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/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

@@ -6,4 +6,9 @@
 
 .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 
  */

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/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/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

@@ -176,6 +176,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 +189,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 +199,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 +230,7 @@ var ComunicWeb = {
 		network: {
 
 			/**
-			 * @var {object} Cache contener
+			 * @var {object} Cache container
 			 */
 			cache: {},
 			
@@ -436,6 +441,20 @@ var ComunicWeb = {
 	 */
 	components: {
 
+		/**
+		 * Account component
+		 */
+		account: {
+
+			/**
+			 * Interface
+			 */
+			interface: {
+				//TODO : implement
+			},
+
+		},
+
 		/**
 		 * Menubar
 		 */
@@ -504,6 +523,27 @@ var ComunicWeb = {
 			},
 		},
 
+		/**
+		 * Pages bottom
+		 */
+		bottom: {
+
+			/**
+			 * Main bottom script file
+			 */
+			main: {
+				//TODO : implement
+			},
+
+		},
+
+		/**
+		 * Language picker
+		 */
+		langPicker: {
+			//TODO : implement
+		},
+
 		/**
 		 * Mails caching component
 		 */
@@ -531,6 +571,20 @@ var ComunicWeb = {
 			//TODO : implement
 		},
 
+		/**
+		 * Settings component
+		 */
+		settings: {
+
+			/**
+			 * Settings interface
+			 */
+			interface: {
+				//TODO : implement
+			},
+
+		},
+
 		/**
 		 * Friends list
 		 */
@@ -678,6 +732,13 @@ var ComunicWeb = {
 			list: {
 				//TODO : implement
 			},
+
+			/**
+			 * Emojie picker
+			 */
+			picker: {
+				//TODO : implement
+			},
 			
 		},
 
@@ -1017,6 +1078,60 @@ 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
+				},
+			},
+		},
+
 		/**
 		 * Login controller
 		 */
@@ -1039,6 +1154,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,7 +19,7 @@ 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;
 

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

@@ -111,4 +111,16 @@ function openConversation(id){
     ComunicWeb.components.conversations.manager.addConversation({
         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;
 }
@@ -177,7 +182,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);
 }
 
 /**
@@ -190,13 +195,28 @@ function checkMail(emailAddress){
  * * @info {Boolean} checked Defines if the fields has to be checked or not (checkbox 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 +226,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){
@@ -236,6 +257,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 +278,8 @@ function createFormGroup(infos){
 			type: "textarea",
 			class: "form-control",
 			placeholder: infos.placeholder,
+			value: value,
+			disabled: disabled
 		});
 
 	}
@@ -273,6 +297,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 +315,7 @@ function createFormGroup(infos){
  */
 function create_radio(target, name, label){
 
-	//Contener
+	//Container
 	var radioDiv = createElem2({
 		appendTo: target,
 		type: "div",
@@ -398,4 +424,53 @@ function add_space(target){
 		innerHTML: " "
 	});
 	
-}
+}
+
+/**
+ * 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();
 					});
 
 				});
@@ -237,14 +237,14 @@ ComunicWeb.components.comments.ui = {
 		//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,36 +654,13 @@ ComunicWeb.components.conversations.chatWindows = {
 			ComunicWeb.components.conversations.chatWindows.resetCreateMessageForm(convInfos);
 		}
 
-		//Check if an image is included with the message or not
+		//Send the message throught the interface
-		if(form.inputImage.files[0]){
+		ComunicWeb.components.conversations.interface.sendMessage({
-			//Include the image with the request (export the image as URL)
+			conversationID: convInfos.infos.ID,
-			var reader = new FileReader();
+			message: form.inputText.value,
-			reader.readAsDataURL(form.inputImage.files[0]);
+			image: form.inputImage,
-			var sendImage = reader.result;
+			callback: onceSent
-
+		});
-			//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,
-					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;
@@ -824,7 +831,7 @@ ComunicWeb.components.conversations.chatWindows = {
 			element: textMessage,
 		});
 
-		//Enable slimscrool
+		//Enable slimscroll
 		$(convInfos.box.messagesArea).slimscroll({
 			height: "250px",
 		});
@@ -835,9 +842,54 @@ ComunicWeb.components.conversations.chatWindows = {
 			scrollTo: scrollBottom
 		});
 
+		//Initialize top scroll detection if required
+		this.initTopScrollDetection(conversationID);
+
 		//Success
 		return true;
 	},
+
+	/**
+	 * 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
+			console.log("Fetch old messages");
+		});
+	}
 }
 
 //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 params = {
+
-			message: infos.message,
+		var hasImage = false;
-			conversationID: infos.conversationID,
+		if(infos.image){
+			if(infos.image.files[0])
+				hasImage = true;
 		}
 
-		//Add an image (if any specified)
+		//Check wether an image has to be included or not
-		if(infos.image)
+		if(!hasImage){
-			params.image = infos.image;
-		
-		//Perform an API request
-		ComunicWeb.common.api.makeAPIrequest(apiURI, params, true, infos.callback);
 
+			//Prepare request
+			var params = {
+				message: infos.message,
+				conversationID: infos.conversationID,
+			};
+
+			//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);
+		}
 	},
 
 	/**

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

@@ -51,14 +51,10 @@ ComunicWeb.components.notifications.ui = {
 		//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)
-
+				message += "on his / her page";
-				if(data.from_user_id == data.from_container_id)
+			else
-					message += "on his / her page";
+				message += "on "+userFullName(users["user-"+data.from_container_id])+"'s page";
-				else
-					message += "on "+userFullName(users["user-"+data.from_container_id])+"'s page";
-
-			}
 
 		}
 
@@ -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,7 @@ ComunicWeb.components.posts.edit = {
 		var updateDiv = createElem2({
 			appendTo: modalBody,
 			type: "div",
-			class: "editor-contener"
+			class: "editor-container"
 		});
 
 		//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);
@@ -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";

assets/js/components/settings/interface.js

@@ -0,0 +1,88 @@
+/**
+ * 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);
+	},
+}

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/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,82 @@
+/**
+ * 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");
+		};
+	}
+
+}

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

@@ -0,0 +1,294 @@
+/**
+ * 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.createCalloutElem("Loading", "Please wait while this page is loading...", "info");
+		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 : ""
+		});
+
+		//Virtual directory
+		var virtualDirectory = createFormGroup({
+			target: target,
+			label: "Virtual directory for your user page (" + ComunicWeb.__config.siteURL + "user/{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
+			};
+
+			//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,32 @@
+/**
+ * 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",
+	},
+}

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

@@ -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"
 		});

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! 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,9 +4,21 @@
 	@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">Create account</a>
+			<a class="btn btn-lg btn-success" target="login">Sign in</a>
+		</div>
 	</div>
+
+
 </div>
 
 <!-- Page styles -->
@@ -16,12 +28,23 @@
 		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

@@ -1,40 +1,47 @@
 <!-- Login form -->
 <div class="login-box">
-  <div class="login-logo">
+	<div class="login-logo">
-    <a target="home"><b>Comunic</b></a>
+		<a target="home"><b>Comunic</b></a>
-  </div>
+	</div>
-  <div class="login-box-body">
+	<div class="login-box-body">
 
-    <!-- Login message -->
+		<!-- Login message -->
-    <p class="login-box-msg">{login_top_msg}</p>
+		<p class="login-box-msg">{login_top_msg}</p>
 
-    <!-- Optionnal messages target -->
+		<!-- Optionnal messages target -->
-    <div id="loginMessagesTarget"></div>
+		<div id="loginMessagesTarget"></div>
 
-    <form id="loginForm" action="javascript:(function(){})();">
+		<form id="loginForm" action="javascript:(function(){})();">
-      <div class="form-group has-feedback">
+			<div class="form-group has-feedback">
-        <input type="email" class="form-control" placeholder="{email}" id="usermail" />
+				<input type="email" class="form-control" placeholder="{email}" id="usermail" />
-        <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
+				<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
-      </div>
+			</div>
-      <div class="form-group has-feedback">
+			<div class="form-group has-feedback">
-        <input type="password" class="form-control" placeholder="{password}" id="userpassword" />
+				<input type="password" class="form-control" placeholder="{password}" id="userpassword" />
-        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
+				<span class="glyphicon glyphicon-lock form-control-feedback"></span>
-      </div>
+			</div>
-      <div class="row">
+			<div class="row">
-        <div class="col-xs-8">
+				<div class="col-xs-8">
-          <div class="checkbox icheck">
+					<div class="checkbox icheck">
-            <label>
+						<label>
-              <input type="checkbox" id="rememberLogin" checked /> {_login_page_remember_me}
+							<input type="checkbox" id="rememberLogin" checked /> {_login_page_remember_me}
-            </label>
+						</label>
-          </div>
+					</div>
-        </div>
+				</div>
-        <!-- /.col -->
+				<!-- /.col -->
-        <div class="col-xs-4">
+
-          <button type="submit" class="btn btn-primary btn-block btn-flat btn-login">{sign_in}</button>
+				<!-- Submit button -->
-        </div>
+				<div class="col-xs-4">
-        <!-- /.col -->
+					<button type="submit" class="btn btn-primary btn-block btn-flat btn-login">{sign_in}</button>
-      </div>
+				</div>
-    </form>
+
-  </div>
+				<!-- /.col -->
-  <!-- /.login-box-body -->
+			</div>
+		</form>
+
+		<!-- Create an account -->
+		<a target="create_account">Create an account</a>
+		
+	</div>
+	<!-- /.login-box-body -->
 </div>

system/config/dev.config.php

@@ -48,7 +48,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 +104,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",
 	);
 
 	/**
@@ -116,6 +123,9 @@ class Dev {
 		//Components stylesheets
 			//Menubar stylesheet
 			"css/components/menuBar.css",
+
+			//Language picker stylesheet
+			"css/components/languagePicker.css",
 			
 			//Searchform stylesheet
 			"css/components/searchForm.css",
@@ -136,6 +146,7 @@ class Dev {
 
 			//Emojies
 			"css/components/emoji/parser.css",
+			"css/components/emoji/picker.css",
 
 			//Posts component
 			"css/components/posts/ui.css",
@@ -161,8 +172,20 @@ class Dev {
 			//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",
+
 			//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,16 +224,28 @@ 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",
@@ -238,6 +273,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",
@@ -300,8 +336,22 @@ 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",
+
 			//Login page
 			"js/pages/login.js",
+
+			//Create account page
+			"js/pages/createAccount.js",
+			"js/pages/accountCreated.js",
 			
 			//Logout page
 			"js/pages/logout.js",