Handle password fails, document API calls & domain list/add

css/style.css

@@ -35,11 +35,11 @@ html, body {
     padding: 5px;
 }
 
-.panel-title {
+/*.panel-title {*/
-    font-size: 18px;
+    /*font-size: 18px;*/
-    font-weight: bold;
+    /*font-weight: bold;*/
-    line-height: 25px;
+    /*line-height: 25px;*/
-}
+/*}*/
 
 body .form-control {
     padding: 6px;

index.html

@@ -33,6 +33,7 @@
     <script type="text/javascript" src="js/vendor/sammy.mustache.js"></script>
     <script type="text/javascript" src="js/vendor/sammy.json.js"></script>
     <script type="text/javascript" src="js/vendor/sammy.storage.js"></script>
+    <script type="text/javascript" src="js/vendor/bootstrap.min.js"></script>
     <script type="text/javascript" src="js/app.js"></script>
 
 </body>

js/app.js

@@ -63,7 +63,14 @@ app = Sammy('#main', function (sam) {
                 callback(data);
             })
             .fail(function(xhr) {
+                console.log(xhr);
+                if (xhr.status == 401) {
+                    c.flash('fail', 'Wrong password');
+                } else if (typeof xhr.responseJSON !== 'undefined') {
                     c.flash('fail', xhr.responseJSON.error);
+                } else {
+                    c.flash('fail', 'Server error');
+                }
                 c.redirect(store.get('path-1'));
                 store.clear('slide');
             })
@@ -129,7 +136,7 @@ app = Sammy('#main', function (sam) {
         store.set('path', req.path);
 
         // Redirect to login page if no credentials stored
-        if (!store.get('password')) {
+        if (!store.get('connected')) {
             req.redirect('#/login');
             return false;
         }
@@ -160,6 +167,7 @@ app = Sammy('#main', function (sam) {
 
     sam.get('#/login', function (c) {
         $('#disconnect-button').hide();
+        store.set('path-1', '#/login');
         c.view('login');
     });
 
@@ -168,6 +176,7 @@ app = Sammy('#main', function (sam) {
         store.set('user', 'admin');
         store.set('password', btoa(c.params['password']));
         c.api('/users', function(data) {
+            store.set('connected', true);
             $('#disconnect-button').fadeIn();
             if (store.get('path')) {
                 c.redirect(store.get('path'));
@@ -177,14 +186,19 @@ app = Sammy('#main', function (sam) {
         });
     });
 
+    /**
+     * Users
+     *
+     */
+
     sam.get('#/users', function (c) {
-        c.api('/users', function(data) {
+        c.api('/users', function(data) { // http://api.yunohost.org/#!/user/user_list_get_3
             c.view('user_list', data);
         });
     });
 
     sam.get('#/users/create', function (c) {
-        c.api('/domains', function(data) {
+        c.api('/domains', function(data) { // http://api.yunohost.org/#!/domain/domain_list_get_2
             c.view('user_create', data);
         });
     });
@@ -192,7 +206,7 @@ app = Sammy('#main', function (sam) {
     sam.post('#/users', function (c) {
         if (c.params['password'] == c.params['confirmation']) {
             c.params['mail'] = c.params['email'] + '@' + c.params['domain'];
-            c.api('/users', function(data) {
+            c.api('/users', function(data) { // http://api.yunohost.org/#!/user/user_create_post_2
                 c.redirect('#/users');
             }, 'POST', c.params.toHash());
         } else {
@@ -203,13 +217,13 @@ app = Sammy('#main', function (sam) {
     });
 
     sam.get('#/users/:user', function (c) {
-        c.api('/users/'+ c.params['user'], function(data) {
+        c.api('/users/'+ c.params['user'], function(data) { // http://api.yunohost.org/#!/user/user_info_get_0
             c.view('user_info', data);
         });
     });
 
     sam.get('#/users/:user/edit', function (c) {
-        c.api('/users/'+ c.params['user'], function(data) {
+        c.api('/users/'+ c.params['user'], function(data) { // http://api.yunohost.org/#!/user/user_info_get_0
             c.view('user_edit', data);
         });
     });
@@ -224,7 +238,7 @@ app = Sammy('#main', function (sam) {
             store.clear('slide');
             c.redirect('#/users/'+ c.params['user'] + '/edit');
         } else {
-            c.api('/users/'+ c.params['user'], function(data) {
+            c.api('/users/'+ c.params['user'], function(data) { // http://api.yunohost.org/#!/user/user_update_put_1
                 c.redirect('#/users/'+ c.params['user']);
             }, 'PUT', params);
         }
@@ -232,7 +246,7 @@ app = Sammy('#main', function (sam) {
 
     sam.get('#/users/:user/delete', function (c) {
         if (confirm('Are you sure you want to delete '+ c.params['user'] +' ?')) {
-            c.api('/users/'+ c.params['user'], function(data) {
+            c.api('/users/'+ c.params['user'], function(data) { // http://api.yunohost.org/#!/user/user_delete_delete_4
                 c.redirect('#/users');
             }, 'DELETE');
         } else {
@@ -240,6 +254,38 @@ app = Sammy('#main', function (sam) {
             c.redirect('#/users/'+ c.params['user']);
         }
     });
+
+    /**
+     * Domains
+     *
+     */
+
+    sam.get('#/domains', function (c) {
+        c.api('/domains', function(data) { // http://api.yunohost.org/#!/domain/domain_list_get_2
+            c.view('domain_list', data);
+        });
+    });
+
+    sam.get('#/domains/add', function (c) {
+        c.view('domain_add', {'DDomains': ['.nohost.me', '.noho.st']});
+    });
+
+    sam.post('#/domains', function (c) {
+        if (c.params['domain'] == '') {
+            if (c.params['ddomain'] == '') {
+                c.flash('fail', "You should indicate a domain");
+                store.clear('slide');
+                c.redirect('#/domains/add');
+            }
+            params = { 'domains': c.params['ddomain'] + c.params['ddomain-ext'] }
+        } else {
+            params = { 'domains': c.params['domain'] }
+        }
+
+        c.api('/domains', function(data) { // http://api.yunohost.org/#!/domain/domain_add_post_1
+            c.redirect('#/domains');
+        }, 'POST', params);
+    });
 });
 
 

views/domain_add.ms

@@ -0,0 +1,69 @@
+<div class="pull-left">
+    <a class="btn btn-lg btn-default slide back" href="#/domains"><span class="glyphicon glyphicon-chevron-left"></span> Domain list</a>
+</div>
+<div class="clearfix"></div>
+<div class="view-title">Add domain</div>
+
+<div class="br"></div>
+
+<form action="#/domains" method="POST" class="form-horizontal">
+
+<div class="panel-group" id="accordion">
+  <div class="panel panel-default">
+    <div class="panel-heading">
+      <h4 class="panel-title">
+        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
+          I already have a domain ...
+        </a>
+      </h4>
+    </div>
+    <div id="collapseOne" class="panel-collapse collapse">
+      <div class="panel-body">
+        <small>... and I have <a href="http://doc.yunohost.org">set my DNS correctly</a>.</small>
+        <hr>
+        <div class="form-group">
+            <label for="domain" class="col-sm-4 control-label">Domain name</label>
+            <div class="col-sm-8">
+                <input type="text" name="domain" class="form-control" placeholder="myserver.org">
+            </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="panel panel-default">
+    <div class="panel-heading">
+      <h4 class="panel-title">
+        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
+          I don't have a domain ...
+        </a>
+      </h4>
+    </div>
+    <div id="collapseTwo" class="panel-collapse collapse">
+      <div class="panel-body">
+        <small>... and I want a dynamic DNS service.</small>
+        <hr>
+        <div class="form-group">
+            <label for="ddomain" class="col-sm-4 control-label">Domain name</label>
+            <div class="col-sm-3" style="padding-right: 3px">
+                <input type="text" name="ddomain" class="form-control" placeholder="myserver">
+            </div>
+            <div class="col-sm-5" style="padding-left: 0">
+               <select class="form-control" name="ddomain-ext">
+                   {{#DDomains}}
+                       <option>{{.}}</option>
+                   {{/DDomains}}
+               </select>
+            </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="br"></div>
+
+<div class="text-center">
+    <input type="submit" class="btn btn-lg btn-success slide back" value="Save">
+</div>
+
+</form>

views/domain_list.ms

@@ -0,0 +1,19 @@
+<div class="pull-left">
+    <a href="#/" class="btn btn-lg btn-default slide back"><span class="glyphicon glyphicon-chevron-left"></span> Menu</a>
+</div>
+<div class="pull-right">
+    <a href="#/domains/add" class="btn btn-lg btn-success slide"><span class="glyphicon glyphicon-plus"></span> Add domain</a>
+</div>
+<div class="clearfix"></div>
+<div class="view-title">Domains</div>
+<div class="br"></div>
+
+<div class="list-group">
+{{#Domains}}
+    <a href="#/domains/{{.}}" class="list-group-item slide">
+        <h4 class="pull-left list-group-item-heading">{{.}}</h4>
+        <span class="glyphicon glyphicon-chevron-right pull-right"></span>
+        <div class="clearfix"></div>
+    </a>
+{{/Domains}}
+</div>

views/user_create.ms

@@ -32,16 +32,13 @@
                 <input type="text" name="email" class="form-control" placeholder="johndoe" required>
             </div>
             <div class="col-sm-5" style="padding-left: 0">
-                <div class="input-group">
-                    <span class="input-group-addon">@</span>
                <select class="form-control" name="domain">
                    {{#Domains}}
-                            <option>{{.}}</option>
+                       <option>@{{.}}</option>
                    {{/Domains}}
                </select>
             </div>
         </div>
-        </div>
         <hr>
         <div class="form-group">
             <label for="password" class="col-sm-4 control-label">Password</label>