[invitations] bugfix & improvment

media/css/seahub.css

@@ -158,6 +158,7 @@
 .sf2-icon-copy:before { content: "\e028"; }
 .sf2-icon-move:before { content: "\e029"; }
 .sf2-icon-reply:before { content: "\e02a"; }
+.sf2-icon-invite:before { content: "\e02b"; }
 
 /******* tags **********/
 body,

media/css/sf_font2/seafile-font2.svg

@@ -50,4 +50,5 @@
 <glyph glyph-name="copy241" unicode="&#57384;" d="M160 382l273 0 0-333-273 0z m-79 83l0-333 53 0 0 278 218 0 0 55z"/>
 <glyph glyph-name="move241" unicode="&#57385;" d="M256 386l0 51-203 0 0-362 406 0 0 311z m55-226l0 53-181 0 0 52 184 0 0 53 76-77z"/>
 <glyph glyph-name="reply" unicode="&#57386;" d="M235 326c108 0 207-98 213-217-53 47-119 77-192 77-6 0-15 0-21 0l0-94c0-7-5-9-9-5l-158 160c-4 5-4 11 0 15l158 163c4 4 9 2 9-5z"/>
+<glyph glyph-name="invite" unicode="&#57387;" d="M303 286l177 0 0-43-177 0z m68 72l39 0 0-189-39 0z m-170-125c53 0 85 87 85 136 0 49-39 92-85 92-47 0-86-41-86-92 0-51 32-136 86-136z m0-184c147 0 168 0 168 45 0 64-75 115-168 115-94 0-169-51-169-115 0-45 21-45 169-45z"/>
 </font></defs></svg>

seahub/invitations/templates/invitations/invitation_email.html

@@ -9,7 +9,7 @@
 <p style="color:#121214;font-size:14px;">{% trans "Hi," %}</p>
 
 <p style="font-size:14px;color:#434144;">
-{% blocktrans %}{{ inviter }} invites you to join {{ site_name }}. Please click the link below:{% endblocktrans %}
+{% blocktrans %}{{ inviter }} invited you to join {{ site_name }}. Please click the link below:{% endblocktrans %}
 </p>
 
 <a href="{{ url_base }}{% url 'invitations:token_view' token %}" target="_blank">{{ url_base }}{% url 'invitations:token_view' token %}</a>

seahub/invitations/templates/invitations/invitation_email_subject.txt

@@ -1 +1 @@
-{% load i18n%}{% blocktrans %}{{ inviter }} invite you to join {{ site_name}}{% endblocktrans %}
+{% load i18n%}{% blocktrans %}{{ inviter }} invited you to join {{ site_name}}{% endblocktrans %}

seahub/invitations/templates/invitations/token_view.html

@@ -1,19 +1,16 @@
 {% extends "base.html" %}
 
 {% load i18n %}
-{% block sub_title %}{% trans "Create Account" %}{% endblock %}
+{% block sub_title %}{% trans "Create Account" %} - {% endblock %}
 
-{% block extra_style %}
-<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/bootstrap.popover.min.css" />
-{% endblock %}
-
-{% block main_panel %}
+{% block main_content %}
 <div class="new-narrow-panel">
     <h2 class="hd">{% trans "Set your password" %}</h2>
     <form action="" method="post" class="con">{% csrf_token %}
-    <label for="id_email">{% trans "Email address" %} {{ iv.accepter }}</label><br/>
+        <label>{% trans "Email" %} </label><br />
+        <input type="text" disabled="disabled" value="{{ iv.accepter }}" class="input input-disabled" /><br />
 
-    <label for="id_new_password1">{% trans "Password" %}</label>
+        <label for="password">{% trans "Password" %}</label>
         <input type="password" name="password" id="password" value="" class="input" autocomplete="off" />
 
         <p class="error hide"></p>
@@ -23,9 +20,12 @@
 {% endblock %}
 
 {% block extra_script %}
-<script type="text/javascript" src="{{MEDIA_URL}}js/bootstrap.min.js"></script>
 <script type="text/javascript">
-$('[type="password"]').addClass('input');
-
+$('form').submit(function() {
+    if (!$.trim($('[name="password"]', $(this)).val())) {
+        $('.error').html("{% trans "It is required." %}").show();
+        return false;
+    }
+});
 </script>
 {% endblock %}

seahub/templates/home_base.html

@@ -45,6 +45,11 @@
             {% endif %}
             {% endfor %}
             <li class="tab"><a href="{{ SITE_ROOT }}#devices/" class="ellipsis" title="{% trans "Linked Devices" %}"><span class="sf2-icon-monitor" aria-hidden="true"></span>{% trans "Linked Devices" %}</a></li>
+            {% if user.permissions.can_invite_guest %}
+            <li class="tab">
+                <a href="{{ SITE_ROOT }}#invitations/"><span aria-hidden="true" class="sf2-icon-invite"></span>{% trans "Invite People" %}</a>
+            </li>
+            {% endif %}
         </ul>
 
         <h3 class="hd">{% trans "Share Admin" %}</h3>

seahub/templates/js/sysadmin-templates.html

@@ -56,6 +56,9 @@
             <a href="{{ SITE_ROOT }}sys/virus_scan_records/"><span class="sf2-icon-security"></span>{% trans "Virus Scan" %}</a>
         </li>
         {% endif %}
+        <li class="tab">
+        <a href="{{ SITE_ROOT }}sys/invitationadmin/"><span class="sf2-icon-invite"></span>{% trans "Invitations" %}</a>
+        </li>
     </ul>
     <% if (cur_tab == 'libraries') { %>
         <% if (option == 'all') { %>

seahub/templates/js/templates.html

@@ -696,7 +696,7 @@
         </li>
         {% if user.permissions.can_invite_guest %}
         <li class="tab<% if (cur_tab == 'invitations') { %> tab-cur<% } %>">
-            <a href="{{ SITE_ROOT }}#invitations/"><span aria-hidden="true" class="sf2-icon-clock"></span>{% trans "Invite People" %}</a>
+            <a href="{{ SITE_ROOT }}#invitations/"><span aria-hidden="true" class="sf2-icon-invite"></span>{% trans "Invite People" %}</a>
         </li>
         {% endif %}
     </ul>
@@ -1688,20 +1688,20 @@
         <h3 class="fleft">{% trans "Invite People" %}</h3>
         <button id="invite-people" class="btn-white fright"><span aria-hidden="true" class="icon-plus-square add vam"></span><span class="vam">{% trans "Invite People" %}</span></button>
     </div>
+    <span class="loading-icon loading-tip"></span>
     <table class="hide">
         <thead>
             <tr>
                 <th width="35%">{% trans "Email" %}</th>
-                <th width="20%">{% trans "Invite at" %}</th>
+                <th width="20%">{% trans "Invite Time" %}</th>
                 <th width="20%">{% trans "Expiration" %}</th>
-                <th width="17%">{% trans "Accpted" %}</th>
-                <th width="8%"><!--Operations--></th>
+                <th width="18%">{% trans "Accepted" %}</th>
+                <th width="7%"><!--Operations--></th>
             </tr>
         </thead>
         <tbody>
         </tbody>
     </table>
-    <span class="loading-icon loading-tip"></span>
     <div class="empty-tips hide">
         <h2 class="alc">{% trans "You have not invited any people." %}</h2>
     </div>
@@ -1710,10 +1710,10 @@
 
 <script type="text/template" id="invitation-item-tmpl">
     <td><%- accepter %></td>
-    <td><time title='<%- invite_time_format %>'><%- invite_time_from_now %></time></td>
-    <td><time title='<%- expire_time_format %>'><%- expire_time_from_now %></time></td>
+    <td><time title='<%= invite_time_format %>'><%= invite_time_from_now %></time></td>
+    <td><time title='<%= expire_time_format %>'><%= expire_time_from_now %></time></td>
     <% if (accept_time) { %>
-    <td><span class="sf2-icon-tick tick-yes"></span></td>
+    <td><span class="sf2-icon-tick tick-green"></span></td>
     <td></td>
     <% } else { %>
     <td></td>
@@ -1723,10 +1723,11 @@
 
 <script type="text/template" id="invitation-form-tmpl">
     <form id="invitation-form" action="" method="post">{% csrf_token %}
-        <h3 id="dialogTitle">{% trans "Invite People"%}</h3>
-        <label for="accepter">{% trans "email"%}</label><br/>
-        <input type="text" name="accepter" value="" class="input" /><br />
+        <h3 id="dialogTitle">{% trans "Invite People" %}</h3>
+        <label for="accepter">{% trans "Email" %}</label><br/>
+        <input id="accepter" type="text" name="accepter" value="" class="input" /><br />
         <p class="error hide"></p>
-        <input type="submit" value="{% trans "Submit"%}" class="submit" />
+        <input type="submit" value="{% trans "Submit" %}" class="submit vam" />
+        <span class="loading-icon vam" style="margin-left:5px;display:none;"></span>
     </form>
 </script>

seahub/templates/sysadmin/base.html

@@ -63,7 +63,7 @@
             </li>
             {% endif %}
             <li class="tab {% block cur_invitations %}{% endblock %}">
-                <a href="{{ SITE_ROOT }}sys/invitationadmin/"><span class="sf2-icon-security"></span>{% trans "Invitations" %}</a>
+                <a href="{{ SITE_ROOT }}sys/invitationadmin/"><span class="sf2-icon-invite"></span>{% trans "Invitations" %}</a>
             </li>
             
         </ul>

seahub/templates/sysadmin/sys_invitations_admin.html

@@ -18,7 +18,11 @@
     {% for invitation in invitations %}
     <tr>
         <td><a href="{% url 'user_info' invitation.inviter %}">{{ invitation.inviter }}</a></td>
+        {% if invitation.accept_time %}
         <td><a href="{% url 'user_info' invitation.accepter %}">{{ invitation.accepter }}</a></td>
+        {% else %}
+        <td>{{ invitation.accepter }}</td>
+        {% endif %}
         <td>{{ invitation.invite_type }}</td>
         <td>{{ invitation.invite_time|translate_seahub_time }} </td>
         {% if invitation.accept_time %}
@@ -32,7 +36,9 @@
 
 {% include "snippets/admin_paginator.html" %}
 {% else %}
-<p>{% trans "Empty" %}</p>
+<div class="empty-tips">
+    <p>{% trans "There is no invitation yet." %}</p>
+</div>
 {% endif %}
 {% endblock %}
 

static/scripts/app/collections/invitations.js

@@ -8,7 +8,7 @@ define([
 
     var Invitations = Backbone.Collection.extend({
         model: Invitation,
-        url: function () {
+        url: function() {
             return Common.getUrl({name: 'invitations'});
         }
     });

static/scripts/app/views/invitation.js

@@ -18,7 +18,7 @@ define([
         },
 
         events: {
-            'click .rm-invitation': 'removeInvitation',
+            'click .rm-invitation': 'removeInvitation'
         },
 
         removeInvitation: function() {
@@ -30,6 +30,7 @@ define([
                     'token': this.model.get('token')
                 }),
                 type: 'DELETE',
+                cache: false,
                 beforeSend: Common.prepareCSRFToken,
                 success: function() {
                     _this.remove();

static/scripts/app/views/invitations.js

@@ -4,7 +4,7 @@ define([
     'backbone',
     'common',
     'app/views/invitation',
-    'app/collections/invitations',
+    'app/collections/invitations'
 ], function($, _, Backbone, Common, InvitedPeopleView,
     InvitedPeopleCollection) {
 
@@ -12,83 +12,105 @@ define([
 
     var InvitationsView = Backbone.View.extend({
 
-        id: 'invited_peoples',
+        id: 'invitations',
 
         template: _.template($('#invitations-tmpl').html()),
-        invitePeopleFormTemplate: _.template($('#invitation-form-tmpl').html()),
+        inviteFormTemplate: _.template($('#invitation-form-tmpl').html()),
 
         initialize: function() {
-            this.invitedPeoples = new InvitedPeopleCollection();
-            this.listenTo(this.invitedPeoples, 'reset', this.reset);
+            this.collection = new InvitedPeopleCollection();
+            this.listenTo(this.collection, 'add', this.addOne);
+            this.listenTo(this.collection, 'reset', this.reset);
             this.render();
         },
 
+        render: function() {
+            this.$el.html(this.template());
+            this.$loadingTip = this.$('.loading-tip');
+            this.$table = this.$('table');
+            this.$tableBody = $('tbody', this.$table);
+            this.$emptyTip = this.$('.empty-tips');
+            this.$error = this.$('.error');
+        },
+
         events: {
             'click #invite-people': 'invitePeople'
         },
 
         invitePeople: function() {
-            var form = $(this.invitePeopleFormTemplate()),
-                form_id = form.attr('id'),
-                _this = this;
+            var _this = this;
+            var $form = $(this.inviteFormTemplate());
+            var form_id = $form.attr('id');
 
-            form.modal({appendTo:'#main'});
+            $form.modal({appendTo:'#main'});
             $('#simplemodal-container').css({'height':'auto'});
 
-            form.submit(function() {
-                var accepter = $.trim($('input[name="accepter"]', form).val());
-
+            $form.submit(function() {
+                var accepter = $.trim($('input[name="accepter"]', $form).val());
+                var $error = $('.error', $form);
+                var $submitBtn = $('[type="submit"]', $form);
+                var $loading = $('.loading-icon', $form);
                 if (!accepter) {
-                    Common.showFormError(form_id, gettext("It is required."));
+                    $error.html(gettext("It is required.")).show();
                     return false;
                 };
 
-                var post_data = {'type': 'guest', 'accepter': accepter},
-                    post_url = Common.getUrl({name: "invitations"});
-
-                var after_op_success = function(data) {
+                $error.hide();
+                Common.disableButton($submitBtn);
+                $loading.show();
+                _this.collection.create({
+                    'type': 'guest',
+                    'accepter': accepter
+                }, {
+                    wait: true,
+                    prepend: true,
+                    success: function() {
+                        if (_this.collection.length == 1) {
+                            _this.reset();
+                        }
                         $.modal.close();
-                    var new_people_invited = _this.invitedPeoples.add({
-                        'accepter': data['accepter'],
-                        'type': data['type'],
-                        'accept_time': '',
-                        'invite_time': data['invite_time'],
-                        'expire_time': data['expire_time']
-                    }, {silent:true});
-
-                    var view = new InvitedPeopleView({model: new_people_invited});
-                    _this.$tableBody.prepend(view.render().el);
-                };
-
-                Common.ajaxPost({
-                    'form': form,
-                    'post_url': post_url,
-                    'post_data': post_data,
-                    'after_op_success': after_op_success,
-                    'form_id': form_id
+                    },
+                    error: function(collection, response, options) {
+                        var err_msg;
+                        if (response.responseText) {
+                            err_msg = response.responseJSON.error_msg;
+                        } else {
+                            err_msg = gettext('Please check the network.');
+                        }
+                        $error.html(err_msg).show();
+                        Common.enableButton($submitBtn);
+                    },
+                    complete: function() {
+                        $loading.hide();
+                    }
                 });
 
                 return false;
             });
         },
 
-        addOne: function(invitedPeople) {
-            var view = new InvitedPeopleView({model: invitedPeople});
+        addOne: function(item, collection, options) {
+            var view = new InvitedPeopleView({model: item});
+            if (options.prepend) {
+                this.$tableBody.prepend(view.render().el);
+            } else {
                 this.$tableBody.append(view.render().el);
+            }
         },
 
         initPage: function() {
+            this.$loadingTip.show();
             this.$table.hide();
             this.$tableBody.empty();
-            this.$loadingTip.show();
             this.$emptyTip.hide();
+            this.$error.hide();
         },
 
         reset: function() {
+            this.$error.hide();
+            if (this.collection.length) {
                 this.$tableBody.empty();
-            this.$loadingTip.hide();
-            this.invitedPeoples.each(this.addOne, this);
-            if (this.invitedPeoples.length) {
+                this.collection.each(this.addOne, this);
                 this.$emptyTip.hide();
                 this.$table.show();
             } else {
@@ -97,31 +119,22 @@ define([
             }
         },
 
-        render: function() {
-            this.$el.html(this.template());
-            this.$tip = this.$('.tip');
-            this.$table = this.$('table');
-            this.$tableBody = $('tbody', this.$table);
-            this.$loadingTip = this.$('.loading-tip');
-            this.$emptyTip = this.$('.empty-tips');
-        },
-
         show: function() {
             if (!this.attached) {
                 this.attached = true;
                 $("#right-panel").html(this.$el);
             }
-            this.showInvitedPeoples();
+            this.showContent();
         },
 
-        showInvitedPeoples: function() {
-            this.initPage();
+        showContent: function() {
             var _this = this;
 
-            this.invitedPeoples.fetch({
+            this.initPage();
+            this.collection.fetch({
                 cache: false,
                 reset: true,
-                error: function (collection, response, opts) {
+                error: function(collection, response, opts) {
                     var err_msg;
                     if (response.responseText) {
                         if (response['status'] == 401 || response['status'] == 403) {
@@ -132,8 +145,10 @@ define([
                     } else {
                         err_msg = gettext("Failed. Please check the network.");
                     }
-
-                    Common.feedback(err_msg, 'error');
+                    _this.$error.html(err_msg).show();
+                },
+                complete: function() {
+                    _this.$loadingTip.hide();
                 }
             });
         },