Improved profile error handling and fixed nickname identity type

shared/css/modal-settings.scss

@@ -259,6 +259,10 @@
 		justify-content: space-between;
 	}
 
+	.error-message {
+		color: red;
+	}
+
 	.profile-list {
 		user-select: none;
 

shared/html/templates.html

@@ -776,9 +776,6 @@
                                                 <input placeholder="Identity string" style="min-width: 60%; flex-shrink: 1; flex-grow: 2; margin: 5px;" class="identity_string">
                                                 <div style="max-width: 200px; flex-grow: 1; flex-shrink: 4; margin: 5px"><input style="display: flex; width: 100%;" class="identity_file" type="file"></div>
                                             </div>
-                                            <div class="error-message">
-
-                                            </div>
                                         </div>
                                         <div class="identity-settings identity-settings-teaforo">
                                             <div class="connected">
@@ -799,6 +796,7 @@
                                                 <input class="setting-name" placeholder="WolverinDEV">
                                             </div>
                                         </div>
+                                        <div class="error-message"> </div>
                                     </div>
                                 </div>
                             </div>

shared/js/profiles/ConnectionProfile.ts

@@ -14,8 +14,10 @@ namespace profiles {
             this.id = id;
         }
 
-        selected_identity() : identities.Identity {
+        selected_identity(current_type?: identities.IdentitifyType) : identities.Identity {
-            const current_type = this.selected_type();
+            if(!current_type)
+                current_type = this.selected_type();
+
             if(current_type === undefined)
                 return undefined;
 
@@ -61,7 +63,10 @@ namespace profiles {
         }
 
         valid() : boolean {
-            return this.selected_identity() !== undefined && this.default_username !== undefined;
+            const identity = this.selected_identity();
+            if(!identity || !identity.valid()) return false;
+
+            return this.default_username !== undefined;
         }
     }
 

shared/js/profiles/identities/NameIdentity.ts

@@ -48,7 +48,7 @@ namespace profiles.identities {
         }
 
         valid(): boolean {
-            return this._name != undefined && this._name != "";
+            return this._name != undefined && this._name.length >= 3;
         }
 
         decode(data) {

shared/js/ui/modal/ModalSettings.ts

@@ -483,8 +483,9 @@ namespace Modals {
 
                     profiles.mark_need_save();
 
+                    let tag: JQuery;
                     if(selected_type == IdentitifyType.TEAFORO) {
-                        const forum_tag = settings_tag.find(".identity-settings-teaforo");
+                        const forum_tag = tag = settings_tag.find(".identity-settings-teaforo");
 
                         forum_tag.find(".connected, .disconnected").hide();
                         if(identity && identity.valid()) {
@@ -494,18 +495,21 @@ namespace Modals {
                         }
                     } else if(selected_type == IdentitifyType.TEAMSPEAK) {
                         console.log("Set: " + identity);
-                        const teamspeak_tag = settings_tag.find(".identity-settings-teamspeak");
+                        const teamspeak_tag = tag = settings_tag.find(".identity-settings-teamspeak");
                         if(identity)
                             teamspeak_tag.find(".identity_string").val((identity as profiles.identities.TeamSpeakIdentity).exported());
                         else
                             teamspeak_tag.find(".identity_string").val("");
                     } else if(selected_type == IdentitifyType.NICKNAME) {
-                        const name_tag = settings_tag.find(".identity-settings-nickname");
+                        const name_tag = tag = settings_tag.find(".identity-settings-nickname");
                         if(identity)
                             name_tag.find("input").val(identity.name());
                         else
                             name_tag.find("input").val("");
                     }
+
+                    if(tag)
+                        tag.trigger('show');
                 };
 
                 select_tag.value = type;
@@ -549,18 +553,18 @@ namespace Modals {
             }
         };
 
+        const display_error = (error?: string) => {
+            if(error){
+                settings_tag.find(".error-message").show().html(error);
+            } else
+                settings_tag.find(".error-message").hide();
+            status_listener();
+        };
+
         /* identity settings */
         {
             { //TeamSpeak change listener
                 const teamspeak_tag = settings_tag.find(".identity-settings-teamspeak");
-                const display_error = (error?: string) => {
-                    if(error){
-                        teamspeak_tag.find(".error-message").show().html(error);
-                    } else
-                        teamspeak_tag.find(".error-message").hide();
-                    status_listener();
-                };
-
                 teamspeak_tag.find(".identity_file").on('change', event => {
                     if(!selected_profile) return;
 
@@ -612,6 +616,16 @@ namespace Modals {
                         display_error(undefined);
                     }
                 });
+
+                teamspeak_tag.on('show', event => {
+                    const profile = selected_profile.selected_identity(IdentitifyType.TEAMSPEAK);
+                    if(!profile)
+                        display_error("invalid profile");
+                    else if(!profile.valid())
+                        display_error("profile isn't valid");
+                    else
+                        display_error();
+                });
             }
 
             { //The forum
@@ -631,8 +645,36 @@ namespace Modals {
                         }, 0);
                     });
                 }
+
+                teaforo_tag.on('show', event => {
+                    display_error(); /* clear error */
+                });
+            }
+
+            { //The name
+                const name_tag = settings_tag.find(".identity-settings-nickname");
+                name_tag.find(".setting-name").on('change keyup', event => {
+                    const name = name_tag.find(".setting-name").val() as string;
+                    selected_profile.set_identity(IdentitifyType.NICKNAME, new profiles.identities.NameIdentity(name));
+                    profiles.mark_need_save();
+
+                    if(name.length < 3) {
+                        display_error("Name must be at least 3 characters long!");
+                        return;
+                    }
+                    display_error();
+                });
+
+                name_tag.on('show', event => {
+                    const profile = selected_profile.selected_identity(IdentitifyType.NICKNAME);
+                    if(!profile)
+                        display_error("invalid profile");
+                    else if(!profile.valid())
+                        display_error("Name must be at least 3 characters long!");
+                    else
+                        display_error();
+                });
             }
-            //TODO add the name!
         }
 
         /* general settings */