nightly commit

documents/Principle_zh-CN.md

@@ -106,7 +106,7 @@ Common类下的为通用请求接口，一般与用户状态等相关
 |username|string|需要登录的用户名|
 |password|string|加盐密码，计算方法是先将密码求SHA256并16进制输出小写，再与盐的字符串形式拼接，然后整体做SHA256输出16进制小写|
 
-返回参数：一个bool，表示是否登陆成功
+返回参数：一个string，作为token由客户端保存，在之后的请求中用于鉴权
 
 此请求与上面的盐获取请求配套使用，用于通常意义下的客户端登录。
 
@@ -121,7 +121,7 @@ Common类下的为通用请求接口，一般与用户状态等相关
 |username|string|需要登陆的用户名|
 |password|string|明文密码|
 
-返回参数：一个bool，表示是否登陆成功
+返回参数：一个string，作为token由客户端保存，在之后的请求中用于鉴权
 
 此请求设计用于Web端进行登录，其安全性由HTTPS保证。
 

src/static/i18n/strings_en-US.properties

@@ -12,9 +12,12 @@ ccn-header-user-login=Login
 ccn-header-user-logout=Logout
 ccn-header-language=Language
 
-ccn-js-failToLogin=Fail to login. Please check your username or password.
+ccn-messagebox-confirm=OK
-ccn-js-failToLogout=Fail to logout due to unknow reason. Consider refreshing page to solve problem.
+ccn-messagebox-title=Notification
-ccn-js-failToOperate=An operation failed. It may caused by your input wrong data, or system error. Refreshing page may fix system problem. Before refreshing page, please backup all your unsaved data.
+
+ccn-js-fail-login=Fail to login. Please check your username or password.
+ccn-js-fail-logout=Fail to logout due to unknow reason. Consider refreshing page to solve problem.
+ccn-js-fail-operate=An operation failed. It may caused by your input wrong data, or system error. Refreshing page may fix system problem. Before refreshing page, please backup all your unsaved data.
 
 ccn-home-desc=<h1 class="title">coconut-leaf</h1><p>A light, self-host calendar system.</p><p>Originally, this app is served for yyc12345 personal use.</p><br /><p>Pull request / issue / translation are welcomed.</p><p>Submit them in our <a href="https://github.com/yyc12345/coconut-leaf">GitHub project</a>.</p><p>This project source code is licensed <a href="https://www.gnu.org/licenses/agpl-3.0.html">AGPL v3</a>.</p>
 

src/static/i18n/strings_zh-CN.properties

@@ -12,9 +12,12 @@ ccn-header-user-login=登录
 ccn-header-user-logout=登出
 ccn-header-language=语言
 
-ccn-js-failToLogin=登陆失败，请检查您的用户名和密码。
+ccn-messagebox-confirm=确认
-ccn-js-failToLogout=由于未知原因，登出失败，请考虑刷新页面解决问题。
+ccn-messagebox-title=通知
-ccn-js-failToOperate=一个操作失败了，可能是您输入了错误的参数，又或者是系统错误。刷新页面可能会解决系统错误问题。请在刷新前备份好自己的数据。
+
+ccn-js-fail-login=登陆失败，请检查您的用户名和密码。
+ccn-js-fail-logout=由于未知原因，登出失败，请考虑刷新页面解决问题。
+ccn-js-fail-operate=一个操作失败了，可能是您输入了错误的参数，又或者是系统错误。刷新页面可能会解决系统错误问题。请在刷新前备份好自己的数据。
 
 ccn-home-desc=<h1 class="title">coconut-leaf</h1><p>一个轻量的自建日历系统</p><p>原本是出于yyc12345的个人使用而制作的。</p><br /><p>欢迎提出Pull request / issue / 翻译</p><p>将他们提交到我们的<a href="https://github.com/yyc12345/coconut-leaf">GitHub项目</a>.</p><p>本工程代码使用<a href="https://www.gnu.org/licenses/agpl-3.0.html">AGPL v3</a>授权。</p>
 

src/static/js/api.js

@@ -1,7 +1,10 @@
+// the api use bool to return status: fail: return false, true: return data(including true and false)
+// the api use other type to return data: fail: return undefined, true: return data(if the returned value have change be null, return undefined instaed).
+
 // var cached_salt = undefined
 
 /*
-function cnn_api_common_salt(_username) {
+function ccn_api_common_salt(_username) {
     // true or false
     // gotten salt store in cached_salt.
     var gotten_data = undefined;
@@ -23,7 +26,7 @@ function cnn_api_common_salt(_username) {
     } else return false;
 }
 
-function cnn_api_common_login(_username, password) {
+function ccn_api_common_login(_username, password) {
     // return true or false, token is managed by this js file self.
     // if cached_salt is undefined, return false directly
     if (typeof(cached_salt) == undefined) return false;
@@ -51,7 +54,7 @@ function cnn_api_common_login(_username, password) {
 
 // ====================================================== common
 
-function cnn_api_common_webLogin(_username, password) {
+function ccn_api_common_webLogin(_username, password) {
     var gotten_data = undefined;
     $.ajax({
         url: '/api/common/webLogin',
@@ -71,7 +74,7 @@ function cnn_api_common_webLogin(_username, password) {
     } else return false;
 }
 
-function cnn_api_common_logout() {
+function ccn_api_common_logout() {
     // return true or false
     var gotten_data = undefined;
     $.ajax({
@@ -86,13 +89,13 @@ function cnn_api_common_logout() {
         }
     });
 
-    if (IsResponseOK(gotten_data)) {
+    if (IsResponseOK(gotten_data) && gotten_data['data']) {
         SetApiToken('');
         return true;
     } return false;
 }
 
-function cnn_api_common_tokenValid() {
+function ccn_api_common_tokenValid() {
     // get from local database first, then judge it via post
     // return true or false
     var gotten_token = GetApiToken();
@@ -111,7 +114,7 @@ function cnn_api_common_tokenValid() {
         }
     });
 
-    if (IsResponseOK(gotten_data)) return true;
+    if (IsResponseOK(gotten_data) && gotten_data['data']) return true;
     else {
         SetApiToken('');
         return false;
@@ -130,7 +133,7 @@ function cnn_api_common_tokenValid() {
 
 // ====================================================== todo
 
-function cnn_api_todo_getFull() {
+function ccn_api_todo_getFull() {
     // return data or undefined
     var gotten_data = undefined;
     $.ajax({
@@ -149,7 +152,7 @@ function cnn_api_todo_getFull() {
     else return undefined;
 }
 
-function cnn_api_todo_add() {
+function ccn_api_todo_add() {
     // return data or undefined
     var gotten_data = undefined;
     $.ajax({
@@ -168,7 +171,7 @@ function cnn_api_todo_add() {
     else return undefined;
 }
 
-function cnn_api_todo_update(_uuid, _data, _lastChange) {
+function ccn_api_todo_update(_uuid, _data, _lastChange) {
     // return data or undefined
     var gotten_data = undefined;
     $.ajax({
@@ -190,7 +193,7 @@ function cnn_api_todo_update(_uuid, _data, _lastChange) {
     else return undefined;
 }
 
-function cnn_api_todo_delete(_uuid, _lastChange) {
+function ccn_api_todo_delete(_uuid, _lastChange) {
     // return true or false
     var gotten_data = undefined;
     $.ajax({
@@ -207,7 +210,7 @@ function cnn_api_todo_delete(_uuid, _lastChange) {
         }
     });
 
-    return IsResponseOK(gotten_data);
+    return (IsResponseOK(gotten_data) && gotten_data['data']);
 }
 
 // ====================================================== admin

src/static/js/headerNav.js

@@ -1,32 +1,32 @@
-function cnn_headerNav_Insert() {
+function ccn_headerNav_Insert() {
     $('body').prepend(ccn_template_headerNav.render());
 }
 
-function cnn_headerNav_LoggedRefresh() {
+function ccn_headerNav_LoggedRefresh() {
-    if (cnn_api_common_tokenValid()) {
+    if (ccn_api_common_tokenValid()) {
         // logged, show all nav button and logout button
-        $("#cnn-header-nav-home").show();
+        $("#ccn-header-nav-home").show();
-        $("#cnn-header-nav-calendar").show();
+        $("#ccn-header-nav-calendar").show();
-        $("#cnn-header-nav-todo").show();
+        $("#ccn-header-nav-todo").show();
-        $("#cnn-header-nav-admin").show();
+        $("#ccn-header-nav-admin").show();
 
-        $("#cnn-header-user-login").hide();
+        $("#ccn-header-user-login").hide();
-        $("#cnn-header-user-logout").show();
+        $("#ccn-header-user-logout").show();
     } else {
-        $("#cnn-header-nav-home").show();
+        $("#ccn-header-nav-home").show();
-        $("#cnn-header-nav-calendar").hide();
+        $("#ccn-header-nav-calendar").hide();
-        $("#cnn-header-nav-todo").hide();
+        $("#ccn-header-nav-todo").hide();
-        $("#cnn-header-nav-admin").hide();
+        $("#ccn-header-nav-admin").hide();
 
-        $("#cnn-header-user-login").show();
+        $("#ccn-header-user-login").show();
-        $("#cnn-header-user-logout").hide();
+        $("#ccn-header-user-logout").hide();
     }
 }
 
 // bind language process and internal process function such as logout and expand menu
-function cnn_headerNav_BindEvents() {
+function ccn_headerNav_BindEvents() {
     // bind function
-    $("#cnn-header-language > *").each(function(){
+    $("#ccn-header-language > *").each(function(){
         $(this).click(function(){
             ccn_i18n_ChangeLanguage($(this).attr("language"));
             ccn_i18n_ApplyLanguage();
@@ -34,14 +34,14 @@ function cnn_headerNav_BindEvents() {
     });
 
     // bind logout
-    $("#cnn-header-user-logout").click(function() {
+    $("#ccn-header-user-logout").click(function() {
-        if (cnn_api_common_logout()) {
+        if (ccn_api_common_logout()) {
             // ok, logout
             // jump into home page again
             window.location.href = '/web/home';
             return;
     
-        } else alert($.i18n.prop("ccn-js-failToLogout"));
+        } else ccn_messagebox_Show($.i18n.prop("ccn-js-fail-logout"));
     });
 
     // bind burger menu

src/static/js/messagebox.js

@@ -0,0 +1,19 @@
+function ccn_messagebox_Insert() {
+    $('body').append(ccn_template_messagebox.render());
+}
+
+function ccn_messagebox_Show(/*title,*/ info) {
+    //$('#ccn-messagebox-title').text(title);
+    $('#ccn-messagebox-body').text(info);
+
+    $('#ccn-messagebox-modal').addClass('is-active');
+}
+
+function ccn_messagebox_BindEvent() {
+    $('#ccn-messagebox-btnClose').click(ccn_messagebox_Hide);
+    $('#ccn-messagebox-btnConfirm').click(ccn_messagebox_Hide);
+}
+
+function ccn_messagebox_Hide() {
+    $('#ccn-messagebox-modal').removeClass('is-active');
+}

src/static/js/page/admin.js

@@ -5,9 +5,13 @@ $(document).ready(function() {
     ccn_template_Load();
     
     // nav process
-    cnn_headerNav_Insert();
+    ccn_headerNav_Insert();
-    cnn_headerNav_BindEvents();
+    ccn_headerNav_BindEvents();
-    cnn_headerNav_LoggedRefresh();
+    ccn_headerNav_LoggedRefresh();
+
+    // messagebox process
+    ccn_messagebox_Insert();
+    ccn_messagebox_BindEvent();
 
     // apply i18n
     ccn_i18n_ApplyLanguage();

src/static/js/page/calendar.js

@@ -5,9 +5,13 @@ $(document).ready(function() {
     ccn_template_Load();
     
     // nav process
-    cnn_headerNav_Insert();
+    ccn_headerNav_Insert();
-    cnn_headerNav_BindEvents();
+    ccn_headerNav_BindEvents();
-    cnn_headerNav_LoggedRefresh();
+    ccn_headerNav_LoggedRefresh();
+
+    // messagebox process
+    ccn_messagebox_Insert();
+    ccn_messagebox_BindEvent();
     
     // process calendar it self
     ccn_calendar_LoadCalendarBody();

src/static/js/page/home.js

@@ -5,9 +5,13 @@ $(document).ready(function() {
     ccn_template_Load();
     
     // nav process
-    cnn_headerNav_Insert();
+    ccn_headerNav_Insert();
-    cnn_headerNav_BindEvents();
+    ccn_headerNav_BindEvents();
-    cnn_headerNav_LoggedRefresh();
+    ccn_headerNav_LoggedRefresh();
+
+    // messagebox process
+    ccn_messagebox_Insert();
+    ccn_messagebox_BindEvent();
     
     // apply i18n
     ccn_i18n_ApplyLanguage();

src/static/js/page/login.js

@@ -5,9 +5,13 @@ $(document).ready(function() {
     ccn_template_Load();
     
     // nav process
-    cnn_headerNav_Insert();
+    ccn_headerNav_Insert();
-    cnn_headerNav_BindEvents();
+    ccn_headerNav_BindEvents();
-    cnn_headerNav_LoggedRefresh();
+    ccn_headerNav_LoggedRefresh();
+
+    // messagebox process
+    ccn_messagebox_Insert();
+    ccn_messagebox_BindEvent();
 
     // apply i18n
     ccn_i18n_ApplyLanguage();
@@ -28,23 +32,23 @@ function ccn_login_startLogin() {
 
     /*
     // try get salt
-    if (cnn_api_common_salt(username)) {
+    if (ccn_api_common_salt(username)) {
         // continue login
-        if (cnn_api_common_login(username, password)) {
+        if (ccn_api_common_login(username, password)) {
             // ok, logged
             // jump into home page again
             window.location.href = '/web/home';
 
-        } else alert($.i18n.prop("ccn-js-failToLogin"));
+        } else ccn_messagebox_Show($.i18n.prop("ccn-js-fail-login"));
-    } else alert($.i18n.prop("ccn-js-failToLogin"));
+    } else ccn_messagebox_Show($.i18n.prop("ccn-js-fail-login"));
     */
-   if (cnn_api_common_webLogin(username, password)) {
+   if (ccn_api_common_webLogin(username, password)) {
         // ok, logged
         // jump into home page again
         window.location.href = '/web/home';
         return;
 
-    } else alert($.i18n.prop("ccn-js-failToLogin"));
+    } else ccn_messagebox_Show($.i18n.prop("ccn-js-fail-login"));
 
     // retore ui
     $("#ccn-login-form-login").removeAttr("disabled");

src/static/js/page/todo.js

@@ -7,9 +7,13 @@ $(document).ready(function() {
     ccn_template_Load();
 
     // nav process
-    cnn_headerNav_Insert();
+    ccn_headerNav_Insert();
-    cnn_headerNav_BindEvents();
+    ccn_headerNav_BindEvents();
-    cnn_headerNav_LoggedRefresh();
+    ccn_headerNav_LoggedRefresh();
+
+    // messagebox process
+    ccn_messagebox_Insert();
+    ccn_messagebox_BindEvent();
 
     // apply i18n
     ccn_i18n_ApplyLanguage();
@@ -26,7 +30,7 @@ function ccn_todo_RefreshCacheList() {
     // clean list cache first
     ccn_todo_todoListCache = new Array();
 
-    var result = cnn_api_todo_getFull();
+    var result = ccn_api_todo_getFull();
     if(typeof(result) != 'undefined') {
         for(var index in result) {
             ccn_todo_todoListCache[result[index][0]] = result[index];
@@ -96,10 +100,10 @@ function ccn_todo_Refresh() {
 }
 
 function ccn_todo_Add() {
-    var result = cnn_api_todo_add();
+    var result = ccn_api_todo_add();
     if (typeof(result) == 'undefined') {
         // fail
-        alert($.i18n.prop("ccn-js-failToOperate"));
+        ccn_messagebox_Show($.i18n.prop("ccn-js-fail-operate"));
     } else {
         // add into cache
         ccn_todo_todoListCache[result[0]] = result;
@@ -138,14 +142,14 @@ function ccn_todo_ItemEdit() {
 function ccn_todo_ItemDelete() {
     var uuid = $(this).attr("uuid");
     
-    var result = cnn_api_todo_delete(
+    var result = ccn_api_todo_delete(
         uuid,
         ccn_todo_todoListCache[uuid][3]
     );
 
     if(typeof(result) == 'undefined') {
         // fail
-        alert($.i18n.prop("ccn-js-failToOperate"));
+        ccn_messagebox_Show($.i18n.prop("ccn-js-fail-operate"));
     } else {
         // remove body
         $("#ccn-todo-todoItem-" + uuid).remove();
@@ -156,7 +160,7 @@ function ccn_todo_ItemUpdate() {
     var uuid = $(this).attr("uuid");
 
     var newData = $("#ccn-todo-todoItem-textarea-" + uuid).val();
-    var result = cnn_api_todo_update(
+    var result = ccn_api_todo_update(
         uuid, 
         newData, 
         ccn_todo_todoListCache[uuid][3]
@@ -164,7 +168,7 @@ function ccn_todo_ItemUpdate() {
 
     if (typeof(result) == 'undefined') {
         // fail
-        alert($.i18n.prop("ccn-js-failToOperate"));
+        ccn_messagebox_Show($.i18n.prop("ccn-js-fail-operate"));
     } else {
         // safely update data & lastChanged and control
         ccn_todo_todoListCache[uuid][2] = newData;

src/static/js/template.js

@@ -1,4 +1,5 @@
 var ccn_template_headerNav = undefined;
+var ccn_template_messagebox = undefined;
 var ccn_template_calendarItem = undefined;
 var ccn_template_scheduleItem = undefined;
 var ccn_template_userItem = undefined;
@@ -13,6 +14,14 @@ function ccn_template_Load() {
             ccn_template_headerNav = $.templates(data);
         }
     });
+    $.ajax({
+        url: $("#jsrender-tmpl-messagebox").attr('src'),
+        type: "GET",
+        async: false,
+        success: function (data) {
+            ccn_template_messagebox = $.templates(data);
+        }
+    });
 
     switch(ccn_pages_currentPage) {
         case ccn_pages_enumPages.home:

src/static/tmpl/headerNav.tmpl

@@ -14,24 +14,24 @@
 
     <div id="navbarBasicExample" class="navbar-menu">
         <div class="navbar-start">
-            <a i18n-name="ccn-header-nav-home" id="cnn-header-nav-home" class="navbar-item" href="/web/home"></a>
+            <a i18n-name="ccn-header-nav-home" id="ccn-header-nav-home" class="navbar-item" href="/web/home"></a>
-            <a i18n-name="ccn-header-nav-calendar" id="cnn-header-nav-calendar" class="navbar-item" href="/web/calendar"></a>
+            <a i18n-name="ccn-header-nav-calendar" id="ccn-header-nav-calendar" class="navbar-item" href="/web/calendar"></a>
-            <a i18n-name="ccn-header-nav-todo" id="cnn-header-nav-todo" class="navbar-item" href="/web/todo"></a>
+            <a i18n-name="ccn-header-nav-todo" id="ccn-header-nav-todo" class="navbar-item" href="/web/todo"></a>
-            <a i18n-name="ccn-header-nav-admin" id="cnn-header-nav-admin" class="navbar-item" href="/web/admin"></a>
+            <a i18n-name="ccn-header-nav-admin" id="ccn-header-nav-admin" class="navbar-item" href="/web/admin"></a>
         </div>
 
         <div class="navbar-end">
-            <p id="cnn-header-user-login" class="navbar-item">
+            <p id="ccn-header-user-login" class="navbar-item">
                 <a class="button is-primary" i18n-name="ccn-header-user-login" href="/web/login"></a>
             </p>
-            <p id="cnn-header-user-logout" class="navbar-item">
+            <p id="ccn-header-user-logout" class="navbar-item">
                 <a class="button is-primary" i18n-name="ccn-header-user-logout"></a>
             </p>
 
             <div class="navbar-item has-dropdown is-hoverable">
                 <a class="navbar-link" i18n-name="ccn-header-language"></a>
 
-                <div id="cnn-header-language" class="navbar-dropdown">
+                <div id="ccn-header-language" class="navbar-dropdown">
                     <a language="en-US" class="navbar-item">English</a>
                     <a language="zh-CN" class="navbar-item">简体中文</a>
                 </div>

src/static/tmpl/messagebox.tmpl

@@ -0,0 +1,15 @@
+<div id="ccn-messagebox-modal" class="modal" style="float: left; position: fixed; top: 0; bottom: 0; left: 0; right: 0;">
+    <div class="modal-background"></div>
+    <div class="modal-card">
+        <header class="modal-card-head">
+            <p id="ccn-messagebox-title" class="modal-card-title" i18n-name="ccn-messagebox-title"></p>
+            <button id="ccn-messagebox-btnClose" class="delete" aria-label="close"></button>
+        </header>
+        <div class="modal-card-body">
+            <p id="ccn-messagebox-body"></p>
+        </div>
+        <footer class="modal-card-foot">
+            <button id="ccn-messagebox-btnConfirm" class="button is-success" i18n-name="ccn-messagebox-confirm"></button>
+        </footer>
+    </div>
+</div>

src/templates/admin.html

@@ -12,6 +12,7 @@
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jsrender@1.0.10/jsrender.min.js"></script>
 
     <script type="text/x-jsrender" id="jsrender-tmpl-headerNav" src="/static/tmpl/headerNav.tmpl"></script>
+    <script type="text/x-jsrender" id="jsrender-tmpl-messagebox" src="/static/tmpl/messagebox.tmpl"></script>
     <script type="text/x-jsrender" id="jsrender-tmpl-userItem" src="/static/tmpl/userItem.tmpl"></script>
 
     <script type="text/javascript" src="/static/js/localStorageAssist.js"></script>
@@ -20,6 +21,7 @@
     <script type="text/javascript" src="/static/js/api.js"></script>
     <script type="text/javascript" src="/static/js/template.js"></script>
     <script type="text/javascript" src="/static/js/headerNav.js"></script>
+    <script type="text/javascript" src="/static/js/messagebox.js"></script>
     
     <script type="text/javascript" src="/static/js/page/admin.js"></script>
     <link rel="stylesheet" href="/static/css/admin.css">

src/templates/calendar.html

@@ -8,10 +8,12 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
     <script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.1/js/all.min.js"></script>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.js"></script>
-    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-i18n-properties@1.2.7/jquery.i18n.properties.js"></script>
+    <script type="text/javascript"
+        src="https://cdn.jsdelivr.net/npm/jquery-i18n-properties@1.2.7/jquery.i18n.properties.js"></script>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jsrender@1.0.10/jsrender.min.js"></script>
 
     <script type="text/x-jsrender" id="jsrender-tmpl-headerNav" src="/static/tmpl/headerNav.tmpl"></script>
+    <script type="text/x-jsrender" id="jsrender-tmpl-messagebox" src="/static/tmpl/messagebox.tmpl"></script>
     <script type="text/x-jsrender" id="jsrender-tmpl-calendarItem" src="/static/tmpl/calendarItem.tmpl"></script>
     <script type="text/x-jsrender" id="jsrender-tmpl-scheduleItem" src="/static/tmpl/scheduleItem.tmpl"></script>
 
@@ -22,6 +24,7 @@
     <script type="text/javascript" src="/static/js/template.js"></script>
     <script type="text/javascript" src="/static/js/headerNav.js"></script>
     <script type="text/javascript" src="/static/js/tabcontrol.js"></script>
+    <script type="text/javascript" src="/static/js/messagebox.js"></script>
 
     <script type="text/javascript" src="/static/js/page/calendar.js"></script>
     <link rel="stylesheet" href="/static/css/calendar.css">
@@ -32,9 +35,12 @@
     <div class="container" style="margin-top: 20px;">
         <div class="tabs">
             <ul>
-                <li id="tabcontrol-tab-1-1" class="tabcontrol-tab-1"><a i18n-name="ccn-calendar-tabcontrol-tabCalendar"></a></li>
+                <li id="tabcontrol-tab-1-1" class="tabcontrol-tab-1"><a
-                <li id="tabcontrol-tab-1-2" class="tabcontrol-tab-1"><a i18n-name="ccn-calendar-tabcontrol-tabShared"></a></li>
+                        i18n-name="ccn-calendar-tabcontrol-tabCalendar"></a></li>
-                <li id="tabcontrol-tab-1-3" class="tabcontrol-tab-1"><a i18n-name="ccn-calendar-tabcontrol-tabSharing"></a></li>
+                <li id="tabcontrol-tab-1-2" class="tabcontrol-tab-1"><a
+                        i18n-name="ccn-calendar-tabcontrol-tabShared"></a></li>
+                <li id="tabcontrol-tab-1-3" class="tabcontrol-tab-1"><a
+                        i18n-name="ccn-calendar-tabcontrol-tabSharing"></a></li>
             </ul>
         </div>
     </div>
@@ -199,7 +205,7 @@
                     <div class="collection-item-words">
                         <b>this is a
                             namewwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</b>
-                            <p><span>Shared by: </span><span>Diablo</span></p>
+                        <p><span>Shared by: </span><span>Diablo</span></p>
                     </div>
 
                     <div class="collection-item-icon control">
@@ -274,7 +280,8 @@
 
         <div class="container" style="display: flex; flex-flow: column;">
             <h1 i18n-name="ccn-calendar-sharing-sharingTargetList" class="title"></h1>
-            <label class="label"><span i18n-name="ccn-calendar-sharing-sharingTargetEditing"></span><span>xxx</span></label>
+            <label class="label"><span
+                    i18n-name="ccn-calendar-sharing-sharingTargetEditing"></span><span>xxx</span></label>
 
             <div class="control-list">
                 <div class="field has-addons">

src/templates/home.html

@@ -12,6 +12,7 @@
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jsrender@1.0.10/jsrender.min.js"></script>
 
     <script type="text/x-jsrender" id="jsrender-tmpl-headerNav" src="/static/tmpl/headerNav.tmpl"></script>
+    <script type="text/x-jsrender" id="jsrender-tmpl-messagebox" src="/static/tmpl/messagebox.tmpl"></script>
 
     <script type="text/javascript" src="/static/js/localStorageAssist.js"></script>
     <script type="text/javascript" src="/static/js/i18n.js"></script>
@@ -19,6 +20,7 @@
     <script type="text/javascript" src="/static/js/api.js"></script>
     <script type="text/javascript" src="/static/js/template.js"></script>
     <script type="text/javascript" src="/static/js/headerNav.js"></script>
+    <script type="text/javascript" src="/static/js/messagebox.js"></script>
     
     <script type="text/javascript" src="/static/js/page/home.js"></script>
 </head>

src/templates/login.html

@@ -12,6 +12,7 @@
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jsrender@1.0.10/jsrender.min.js"></script>
 
     <script type="text/x-jsrender" id="jsrender-tmpl-headerNav" src="/static/tmpl/headerNav.tmpl"></script>
+    <script type="text/x-jsrender" id="jsrender-tmpl-messagebox" src="/static/tmpl/messagebox.tmpl"></script>
 
     <script type="text/javascript" src="/static/js/localStorageAssist.js"></script>
     <script type="text/javascript" src="/static/js/i18n.js"></script>
@@ -19,6 +20,7 @@
     <script type="text/javascript" src="/static/js/api.js"></script>
     <script type="text/javascript" src="/static/js/template.js"></script>
     <script type="text/javascript" src="/static/js/headerNav.js"></script>
+    <script type="text/javascript" src="/static/js/messagebox.js"></script>
     
     <script type="text/javascript" src="/static/js/page/login.js"></script>
 </head>

src/templates/todo.html

@@ -12,6 +12,7 @@
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jsrender@1.0.10/jsrender.min.js"></script>
 
     <script type="text/x-jsrender" id="jsrender-tmpl-headerNav" src="/static/tmpl/headerNav.tmpl"></script>
+    <script type="text/x-jsrender" id="jsrender-tmpl-messagebox" src="/static/tmpl/messagebox.tmpl"></script>
     <script type="text/x-jsrender" id="jsrender-tmpl-todoItem" src="/static/tmpl/todoItem.tmpl"></script>
 
     <script type="text/javascript" src="/static/js/localStorageAssist.js"></script>
@@ -20,6 +21,7 @@
     <script type="text/javascript" src="/static/js/api.js"></script>
     <script type="text/javascript" src="/static/js/template.js"></script>
     <script type="text/javascript" src="/static/js/headerNav.js"></script>
+    <script type="text/javascript" src="/static/js/messagebox.js"></script>
     
     <script type="text/javascript" src="/static/js/page/todo.js"></script>
     <link rel="stylesheet" href="/static/css/todo.css">