Merge pull request #298 from ekhae/enh-1365-mail-user-creation-ux

UX improved about mail and domains

src/js/yunohost/controllers/users.js

@@ -203,11 +203,9 @@
             data.password_min_length = PASSWORD_MIN_LENGTH;
             c.view('user/user_create', data, function(){
                 var usernameField = $('#username');
-                usernameField.on('blur', function(){
+                usernameField.on('input', function(){
-                    var emailField = $('#email');
+                    var emailLeft = $('#email-left');
-                    if (emailField.val() == '') {
+                    emailLeft.html(usernameField.val());
-                        emailField.val(usernameField.val());
-                    }
                 });
             });
         });
@@ -225,9 +223,7 @@
                     c.params['mailbox_quota'] += "M";
                 }
                 else {c.params['mailbox_quota'] = 0;}
-
+                c.params['domain'] = c.params['domain'].slice(1);
-                // Compute email field
-                c.params['mail'] = c.params['email'] + c.params['domain'];
 
                 c.api('POST', '/users', c.params.toHash(), function(data) {
                     c.redirect_to('#/users');

src/locales/en.json

@@ -269,6 +269,7 @@
     "system_upgrade_all_applications_btn": "Upgrade all applications",
     "system_upgrade_all_packages_btn": "Upgrade all packages",
     "tcp": "TCP",
+    "tip_about_user_email": "Users are created with an associated email address (and XMPP account) with the format username@domain.tld. Additional email aliases and email forwards can later be added by the admin and the user.",
     "tools": "Tools",
     "tools_adminpw": "Change administration password",
     "tools_adminpw_confirm_placeholder": "Confirm the new password",

src/views/user/user_create.ms

@@ -28,11 +28,26 @@
             </div>
         </div>
         <hr>
+        <div class="alert alert-warning col-sm-offset-3 col-sm-9"><i class="fa fa-lock fa-fw"></i> {{t 'good_practices_about_user_password'}}</div>
+        <div class="form-group">
+            <label for="password" class="col-sm-3 control-label">{{t 'password'}}</label>
+            <div class="col-sm-9">
+                <input type="password" id="password" name="password" class="form-control" placeholder="••••••••••" required>
+            </div>
+        </div>
+        <div class="form-group">
+            <label for="confirmation" class="col-sm-3 control-label">{{t 'password_confirmation'}}</label>
+            <div class="col-sm-9">
+                <input type="password" id="confirmation" name="confirmation" class="form-control" placeholder="••••••••••" required>
+            </div>
+        </div>
+        <hr>
+        <div class="alert alert-info col-sm-offset-3 col-sm-9"><i class="fa fa-envelope fa-fw"></i> {{t 'tip_about_user_email'}}</div>
         <div class="form-group">
             <label for="mail" class="col-sm-3 control-label">{{t 'user_email'}}</label>
             <div class="clearfix visible-xs"></div>
             <div class="col-sm-4 col-xs-6">
-                <input type="text" id="email" name="email" class="form-control" placeholder="johndoe" required>
+                <p id="email-left" class="form-control-static" style="text-align:right;">johndoe</p>
 	    </div>
             <div class="col-sm-5 col-xs-6">
                <select class="form-control" name="domain">
@@ -42,7 +57,6 @@
                </select>
             </div>
         </div>
-        <hr>
         <div class="form-group">
             <label for="mailbox-quota" class="col-sm-3 control-label">{{t 'user_mailbox_quota'}}</label>
             <div class="col-sm-4">
@@ -50,24 +64,10 @@
                     <input type="number" min="0" id="mailbox-quota" name="mailbox_quota" class="form-control" placeholder="{{t 'mailbox_quota_placeholder'}}">
                     <div class="input-group-addon">M</div>
                 </div>
-            </div>
-            <div class="col-sm-5">
                 <div class="help-block quota-help-block">{{t 'mailbox_quota_description'}}</div>
             </div>
         </div>
-        <div class="form-group">
+
-            <label for="password" class="col-sm-3 control-label">{{t 'password'}}</label>
-            <div class="col-sm-9">
-                <input type="password" id="password" name="password" class="form-control" placeholder="•••••" required>
-            </div>
-        </div>
-        <div class="form-group">
-            <label for="confirmation" class="col-sm-3 control-label">{{t 'password_confirmation'}}</label>
-            <div class="col-sm-9">
-                <input type="password" id="confirmation" name="confirmation" class="form-control" placeholder="•••••" required>
-                <div class="help-block">{{t 'good_practices_about_user_password'}}</div>
-            </div>
-        </div>
     </div>
 </div>
 

src/views/user/user_edit.ms

@@ -28,6 +28,21 @@
                 <input type="text" name="lastname" class="form-control" value="{{lastname}}">
             </div>
         </div>
+        <hr>
+        <div class="form-group">
+            <label for="password" class="col-sm-3 control-label">{{t 'password'}}</label>
+            <div class="col-sm-9">
+                <input type="password" id="password" name="password" class="form-control" placeholder="••••••••••">
+            </div>
+        </div>
+        <div class="form-group">
+            <label for="confirmation" class="col-sm-3 control-label">{{t 'password_confirmation'}}</label>
+            <div class="col-sm-9">
+                <input type="password" id="confirmation" name="confirmation" class="form-control" placeholder="••••••••••">
+                <div class="help-block">{{t 'good_practices_about_user_password'}}</div>
+            </div>
+        </div>
+        <hr>
         <div class="form-group">
             <label for="email" class="col-sm-3 control-label">{{t 'user_email'}}</label>
             <div class="clearfix visible-xs"></div>
@@ -77,22 +92,6 @@
             <input id="mailforward" type="email" name="mailforward" class="mailforward-input form-control" placeholder="{{t 'user_new_forward'}}">
             </div>
         </div>
-
-        <hr>
-        <div class="form-group">
-            <label for="password" class="col-sm-3 control-label">{{t 'password'}}</label>
-            <div class="col-sm-9">
-                <input type="password" id="password" name="password" class="form-control" placeholder="•••••">
-            </div>
-        </div>
-        <div class="form-group">
-            <label for="confirmation" class="col-sm-3 control-label">{{t 'password_confirmation'}}</label>
-            <div class="col-sm-9">
-                <input type="password" id="confirmation" name="confirmation" class="form-control" placeholder="•••••">
-                <div class="help-block">{{t 'good_practices_about_user_password'}}</div>
-            </div>
-        </div>
-
     </div>
 </div>