Improve user quota field UX. Fix #283

src/css/style.less

@@ -335,6 +335,11 @@ div.br {
     text-align: right;
 }
 
+.quota-help-block {
+    text-align: left;
+    line-height: 1.2;
+}
+
 th h3,
 th h4 {
     margin-bottom: 5px;

src/js/yunohost/controllers/users.js

@@ -30,7 +30,15 @@
                 store.clear('slide');
             }
             else {
+                // Force unit or disable quota
+                if (c.params['mailbox_quota']) {
+                    c.params['mailbox_quota'] += "M";
+                }
+                else {c.params['mailbox_quota'] = 0;}
+
+                // Compute email field
                 c.params['mail'] = c.params['email'] + c.params['domain'];
+
                 c.api('/users', function(data) { // http://api.yunohost.org/#!/user/user_create_post_2
                     c.redirect('#/users');
                 }, 'POST', c.params.toHash());
@@ -60,6 +68,28 @@
                     username : email[0],
                     domain : email[1]
                 };
+console.log(data);
+                // Return quota with M unit
+                if (data['mailbox-quota'].limit) {
+                    var unit = data['mailbox-quota'].limit.slice(-1);
+                    var value = data['mailbox-quota'].limit.substr(0, data['mailbox-quota'].limit.length -1);
+                    if (unit == 'b') {
+                        data.quota = Math.ceil(value / (1024 * 1024));
+                    }
+                    else if (unit == 'k') {
+                        data.quota = Math.ceil(value / 1024);
+                    }
+                    else if (unit == 'M') {
+                        data.quota = value;
+                    }
+                    else if (unit == 'G') {
+                        data.quota = Math.ceil(value * 1024);
+                    }
+                    else if (unit == 'T') {
+                        data.quota = Math.ceil(value * 1024 * 1024);
+                    }
+                }
+                else {data.quota = 0;}
 
                 // Domains
                 data.domains = [];
@@ -79,6 +109,11 @@
     app.put('#/users/:user', function (c) {
         // Get full user object
         c.api('/users/'+ c.params['user'], function(user) {
+            // Force unit or disable quota
+            if (c.params['mailbox_quota']) {
+                c.params['mailbox_quota'] += "M";
+            }
+            else {c.params['mailbox_quota'] = 0;}
 
             // concat email/domain pseudo field
             if (c.params['mail'] !== c.params['email'] + c.params['domain']) {

src/locales/en.json

@@ -263,7 +263,8 @@
     "user_new_mail": "newmail@mydomain.org",
     "user_new_forward": "newforward@myforeigndomain.org",
     "user_mailbox_quota": "Mailbox quota",
-    "mailbox_quota_description": "Mailbox quota must be a size with b/k/M/G/T suffix or 0 to disable the quota.",
+    "mailbox_quota_description": "For example, 700M is a CD, 4700M is a DVD.",
+    "mailbox_quota_placeholder": "Leave empty or 0 to disable.",
 
     "backup_content": "Backup content",
     "local_archives": "Local archives",

src/views/user/user_create.ms

@@ -45,9 +45,14 @@
         <hr>
         <div class="form-group">
             <label for="mailbox-quota" class="col-sm-3 control-label">{{t 'user_mailbox_quota'}}</label>
-            <div class="col-sm-9">
+            <div class="col-sm-4">
-                <input type="text" id="mailbox-quota" name="mailbox_quota" class="form-control" placeholder="500M" required>
+                <div class="input-group">
-                <div class="help-block">{{t 'mailbox_quota_description'}}</div>
+                    <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">

src/views/user/user_edit.ms

@@ -45,9 +45,14 @@
         </div>
         <div class="form-group">
             <label for="mailbox-quota" class="col-sm-3 control-label">{{t 'user_mailbox_quota'}}</label>
-            <div class="col-sm-9">
+            <div class="col-sm-4">
-                <input type="text" id="mailbox-quota" name="mailbox_quota" class="form-control" value="{{mailbox-quota.limit}}">
+                <div class="input-group">
-                <div class="help-block">{{t 'mailbox_quota_description'}}</div>
+                    <input type="number" min="0" id="mailbox-quota" name="mailbox_quota" class="form-control" value="{{quota}}" 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>