add some ui

src/static/css/calendar.css

@@ -29,6 +29,10 @@
     overflow: hidden;
 }
 
+#ccn-calendar-calendarBody > div > div[isCurrentMonth=false] {
+    background: #d0d0d0;
+}
+
 #ccn-calendar-calendarBody > div {
     display: flex;
     flex-flow: row;
@@ -42,7 +46,7 @@
 div.calendarItem-eventBox {
     border: 1px solid black;
     border-radius: 2px;
-    margin: 0.2rem;
+    margin-top: 0.2rem;
     height: 0.75rem;
     width: 100%;
 }

src/static/i18n/strings_en-US.properties

@@ -63,10 +63,21 @@ ccn-i18n-todo-todoList=Todo list
 ccn-i18n-calendar-calendar-jump=Jump
 ccn-i18n-calendar-calendar-today=Today
 ccn-i18n-calendar-calendar-add=Add...
+ccn-i18n-calendar-calendar-stripedEvents={0} items
 ccn-i18n-calendar-calendar-scheduleList=Schedule
 ccn-i18n-calendar-tabcontrol-tabCalendar=Calendar
 ccn-i18n-calendar-tabcontrol-tabCollection=Collection
 ccn-i18n-calendar-tabcontrol-tabDisplay=Display
+ccn-i18n-calendar-owned-list=My collections
+ccn-i18n-calendar-shared-list=Shared collections
+ccn-i18n-calendar-display-firstDayOfWeek=The first day of week
+ccn-i18n-calendar-display-subcalendar=Sub-Calendar
+
+ccn-i18n-calendar-display-subcalendar-chineseLunisolarCalendar=Chinese Lunisolar Calendar
+
+ccn-i18n-collection-owned-list=Owned
+ccn-i18n-collection-sharing-list=Sharing target
+ccn-i18n-collection-sharing-editing=Editing: 
 
 ccn-i18n-event-header=Edit Event
 ccn-i18n-event-title=Title
@@ -107,16 +118,20 @@ ccn-i18n-event-strictMode-strict=Strict Mode. If ordered day is not existing, sk
 ccn-i18n-event-strictMode-rough=Rough mode. If ordered day is not existing, choose the day closing with original day to arrange event.
 ccn-i18n-event-btnSubmit=Submit
 ccn-i18n-event-btnCancel=Cancel
-ccn-i18n-calendar-shared-list=Shared
-ccn-i18n-collection-owned-list=Owned
-ccn-i18n-collection-sharing-list=Sharing target
-ccn-i18n-collection-sharing-editing=Editing: 
 
 ccn-i18n-sharedItem-sharedBy=Shared by: 
 
 ccn-i18n-admin-tabcontrol-tabProfile=My Profile
+ccn-i18n-admin-tabcontrol-tabToken=Manage Multi-login
 ccn-i18n-admin-tabcontrol-tabUserList=Manager User
 ccn-i18n-admin-changePassword=Change Password
+ccn-i18n-admin-manageToken=Manage multi-login
+ccn-i18n-admin-manageToken-desc=Manage the multi-login of the current account. You can forced logout some login in there.
 ccn-i18n-admin-userList=User List
+
 ccn-i18n-userItem-newPassword=New Password
 ccn-i18n-userItem-isAdmin=Is Admin
+
+ccn-i18n-tokenItem-ua=User Agent: 
+ccn-i18n-tokenItem-ip=IP: 
+ccn-i18n-tokenItem-isMe=This is the login credentials you are currently using.

src/static/i18n/strings_zh-CN.properties

@@ -63,12 +63,17 @@ ccn-i18n-todo-todoList=待办列表
 ccn-i18n-calendar-calendar-jump=转到
 ccn-i18n-calendar-calendar-today=今天
 ccn-i18n-calendar-calendar-add=添加...
+ccn-i18n-calendar-calendar-stripedEvents=共{0}项
 ccn-i18n-calendar-calendar-scheduleList=日程安排
 ccn-i18n-calendar-tabcontrol-tabCalendar=日历
 ccn-i18n-calendar-tabcontrol-tabCollection=集合
 ccn-i18n-calendar-tabcontrol-tabDisplay=显示设置
 ccn-i18n-calendar-owned-list=我的集合
 ccn-i18n-calendar-shared-list=被共享的集合
+ccn-i18n-calendar-display-firstDayOfWeek=每周开始星期
+ccn-i18n-calendar-display-subcalendar=副日历
+
+ccn-i18n-calendar-display-subcalendar-chineseLunisolarCalendar=中国农历
 
 ccn-i18n-collection-owned-list=我的集合
 ccn-i18n-collection-sharing-list=分享目标
@@ -117,10 +122,16 @@ ccn-i18n-event-btnCancel=取消
 ccn-i18n-sharedItem-sharedBy=共享人：
 
 ccn-i18n-admin-tabcontrol-tabProfile=我的资料
+ccn-i18n-admin-tabcontrol-tabToken=管理多端登录
 ccn-i18n-admin-tabcontrol-tabUserList=管理用户
 ccn-i18n-admin-changePassword=更改密码
+ccn-i18n-admin-manageToken=管理多端登录
+ccn-i18n-admin-manageToken-desc=管理当前帐号的多端登录。您可以在这里强制下线某些地方的帐号。
 ccn-i18n-admin-userList=用户列表
 
 ccn-i18n-userItem-newPassword=新密码
 ccn-i18n-userItem-isAdmin=是管理员
 
+ccn-i18n-tokenItem-ua=UA：
+ccn-i18n-tokenItem-ip=IP：
+ccn-i18n-tokenItem-isMe=这是你当前使用的登录凭据

src/static/js/api.js

@@ -45,7 +45,7 @@ function ccn_api_common_login(_username, password) {
         }
     });
     if (IsResponseOK(gotten_data) && gotten_data['data'] != '') {
-        SetApiToken(gotten_data['data']);
+        ccn_localstorageAssist_SetApiToken(gotten_data['data']);
         cached_salt = undefined;
         return true;
     } else return false;
@@ -127,7 +127,7 @@ function ccn_api_common_webLogin(_username, _password) {
         }
     });
     if (IsResponseOK(gotten_data)) {
-        SetApiToken(gotten_data['data']);
+        ccn_localstorageAssist_SetApiToken(gotten_data['data']);
         return true;
     } else return false;
 }
@@ -140,7 +140,7 @@ function ccn_api_common_logout() {
         type: "POST",
         async: false,
         data: {
-            token: GetApiToken()
+            token: ccn_localstorageAssist_GetApiToken()
         },
         success: function (data) {
             gotten_data = data;
@@ -148,7 +148,7 @@ function ccn_api_common_logout() {
     });
 
     if (IsResponseOK(gotten_data) && gotten_data['data']) {
-        SetApiToken('');
+        ccn_localstorageAssist_SetApiToken('');
         return true;
     } return false;
 }
@@ -156,7 +156,7 @@ function ccn_api_common_logout() {
 function ccn_api_common_tokenValid() {
     // get from local database first, then judge it via post
     // return true or false
-    var gotten_token = GetApiToken();
+    var gotten_token = ccn_localstorageAssist_GetApiToken();
     if (gotten_token == '') return false;
 
     var gotten_data = undefined;
@@ -165,7 +165,7 @@ function ccn_api_common_tokenValid() {
         type: "POST",
         async: false,
         data: {
-            token: GetApiToken()
+            token: ccn_localstorageAssist_GetApiToken()
         },
         success: function (data) {
             gotten_data = data;
@@ -174,7 +174,7 @@ function ccn_api_common_tokenValid() {
 
     if (IsResponseOK(gotten_data) && gotten_data['data']) return true;
     else {
-        SetApiToken('');
+        ccn_localstorageAssist_SetApiToken('');
         return false;
     }
 }
@@ -183,7 +183,7 @@ function ccn_api_common_isAdmin() {
     return ccn_api_boolTemplate(
         '/api/common/isAdmin',
         {
-            token: GetApiToken()
+            token: ccn_localstorageAssist_GetApiToken()
         }
     );
 }
@@ -192,7 +192,7 @@ function ccn_api_common_changePassword(_password) {
     return ccn_api_boolTemplate(
         '/api/common/changePassword',
         {
-            token: GetApiToken(),
+            token: ccn_localstorageAssist_GetApiToken(),
             password: _password
         }
     );
@@ -204,7 +204,7 @@ function ccn_api_calendar_getFull(_startDateTime, _endDateTime) {
     return ccn_api_dataTemplate(
         '/api/calendar/getFull',
         {
-            token: GetApiToken(),
+            token: ccn_localstorageAssist_GetApiToken(),
             startDateTime: _startDateTime,
             endDateTime: _endDateTime
         }
@@ -215,7 +215,7 @@ function ccn_api_calendar_getDetail(_uuid) {
     return ccn_api_dataTemplate(
         '/api/calendar/getDetail',
         {
-            token: GetApiToken(),
+            token: ccn_localstorageAssist_GetApiToken(),
             uuid: _uuid
         }
     );
@@ -238,7 +238,7 @@ function ccn_api_calendar_update(_uuid, _belongTo, _title, _description, _eventD
     if (typeof(_timezoneOffset) != 'undefined')
         data.timezoneOffset = _timezoneOffset;
 
-    data.token = GetApiToken();
+    data.token = ccn_localstorageAssist_GetApiToken();
     data.uuid = _uuid;
     data.lastChange = _lastChange;
     return ccn_api_dataTemplate(
@@ -251,7 +251,7 @@ function ccn_api_calendar_add(_belongTo, _title, _description, _eventDateTimeSta
     return ccn_api_dataTemplate(
         '/api/calendar/add',
         {
-            token: GetApiToken(),
+            token: ccn_localstorageAssist_GetApiToken(),
             belongTo: _belongTo,
             title: _title,
             description: _description,
@@ -267,7 +267,7 @@ function ccn_api_calendar_delete(_uuid, _lastChange) {
     return ccn_api_boolTemplate(
         '/api/calendar/delete',
         {
-            token: GetApiToken(),
+            token: ccn_localstorageAssist_GetApiToken(),
             uuid: _uuid,
             lastChange: _lastChange
         }
@@ -280,7 +280,7 @@ function ccn_api_collection_getFullOwn() {
     return ccn_api_dataTemplate(
         '/api/collection/getFullOwn',
         {
-            token: GetApiToken()
+            token: ccn_localstorageAssist_GetApiToken()
         }
     );
 }
@@ -289,7 +289,7 @@ function ccn_api_collection_getDetailOwn(_uuid) {
     return ccn_api_dataTemplate(
         '/api/collection/getDetailOwn',
         {
-            token: GetApiToken(),
+            token: ccn_localstorageAssist_GetApiToken(),
             uuid: _uuid
         }
     );
@@ -299,7 +299,7 @@ function ccn_api_collection_addOwn(_name) {
     return ccn_api_dataTemplate(
         '/api/collection/addOwn',
         {
-            token: GetApiToken(),
+            token: ccn_localstorageAssist_GetApiToken(),
             name: _name
         }
     );
@@ -309,7 +309,7 @@ function ccn_api_collection_updateOwn(_uuid, _name, _lastChange) {
     return ccn_api_dataTemplate(
         '/api/collection/updateOwn',
         {
-            token: GetApiToken(),
+            token: ccn_localstorageAssist_GetApiToken(),
             uuid: _uuid,
             name: _name,
             lastChange: _lastChange
@@ -321,7 +321,7 @@ function ccn_api_collection_deleteOwn(_uuid, _lastChange) {
     return ccn_api_boolTemplate(
         '/api/collection/deleteOwn',
         {
-            token: GetApiToken(),
+            token: ccn_localstorageAssist_GetApiToken(),
             uuid: _uuid,
             lastChange: _lastChange
         }
@@ -332,7 +332,7 @@ function ccn_api_collection_getSharing(_uuid) {
     return ccn_api_dataTemplate(
         '/api/collection/getSharing',
         {
-            token: GetApiToken(),
+            token: ccn_localstorageAssist_GetApiToken(),
             uuid: _uuid
         }
     );
@@ -342,7 +342,7 @@ function ccn_api_collection_deleteSharing(_uuid, _target, _lastChange) {
     return ccn_api_dataTemplate(
         '/api/collection/deleteSharing',
         {
-            token: GetApiToken(),
+            token: ccn_localstorageAssist_GetApiToken(),
             uuid: _uuid,
             target: _target,
             lastChange: _lastChange
@@ -354,7 +354,7 @@ function ccn_api_collection_addSharing(_uuid, _target, _lastChange) {
     return ccn_api_dataTemplate(
         '/api/collection/addSharing',
         {
-            token: GetApiToken(),
+            token: ccn_localstorageAssist_GetApiToken(),
             uuid: _uuid,
             target: _target,
             lastChange: _lastChange
@@ -366,7 +366,7 @@ function ccn_api_collection_getShared() {
     return ccn_api_dataTemplate(
         '/api/collection/getShared',
         {
-            token: GetApiToken()
+            token: ccn_localstorageAssist_GetApiToken()
         }
     );
 }
@@ -377,7 +377,7 @@ function ccn_api_todo_getFull() {
     return ccn_api_dataTemplate(
         '/api/todo/getFull',
         {
-            token: GetApiToken()
+            token: ccn_localstorageAssist_GetApiToken()
         }
     );
 }
@@ -386,7 +386,7 @@ function ccn_api_todo_add() {
     return ccn_api_dataTemplate(
         '/api/todo/add',
         {
-            token: GetApiToken()
+            token: ccn_localstorageAssist_GetApiToken()
         }
     );
 }
@@ -395,7 +395,7 @@ function ccn_api_todo_update(_uuid, _data, _lastChange) {
     return ccn_api_dataTemplate(
         '/api/todo/update',
         {
-            token: GetApiToken(),
+            token: ccn_localstorageAssist_GetApiToken(),
             uuid: _uuid,
             data: _data,
             lastChange: _lastChange
@@ -407,7 +407,7 @@ function ccn_api_todo_delete(_uuid, _lastChange) {
     return ccn_api_boolTemplate(
         '/api/todo/delete',
         {
-            token: GetApiToken(),
+            token: ccn_localstorageAssist_GetApiToken(),
             uuid: _uuid,
             lastChange: _lastChange
         }
@@ -420,7 +420,7 @@ function ccn_api_admin_get() {
     return ccn_api_dataTemplate(
         '/api/admin/get',
         {
-            token: GetApiToken()
+            token: ccn_localstorageAssist_GetApiToken()
         }
     );
 }
@@ -429,7 +429,7 @@ function ccn_api_admin_add(_username) {
     return ccn_api_dataTemplate(
         '/api/admin/add',
         {
-            token: GetApiToken(),
+            token: ccn_localstorageAssist_GetApiToken(),
             username: _username
         }
     );
@@ -443,7 +443,7 @@ function ccn_api_admin_update(_username, _password, _isAdmin) {
         data.isAdmin = _isAdmin;
 
     if (Object.getOwnPropertyNames(data).length == 0) return false;
-    data.token = GetApiToken();
+    data.token = ccn_localstorageAssist_GetApiToken();
     data.username = _username;
     return ccn_api_boolTemplate(
         '/api/admin/update',
@@ -455,7 +455,7 @@ function ccn_api_admin_delete(_username) {
     return ccn_api_boolTemplate(
         '/api/admin/delete',
         {
-            token: GetApiToken(),
+            token: ccn_localstorageAssist_GetApiToken(),
             username: _username
         }
     );

src/static/js/datetime.js

@@ -1,24 +1,24 @@
 // NOTE: this file is sync with dt.py. if this file or dt.py have bugs, all code should be changed
-ccn_datetime_monthDayCount = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+var ccn_datetime_monthDayCount = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
 
-ccn_datetime_MIN_YEAR = 1950;
+var ccn_datetime_MIN_YEAR = 1950;
-ccn_datetime_MAX_YEAR = 2199;
+var ccn_datetime_MAX_YEAR = 2199;
-ccn_datetime_MIN_DATETIME = new Date(Date.UTC(1950, 1, 1, 0, 0, 0, 0));
+var ccn_datetime_MIN_DATETIME = new Date(Date.UTC(1950, 1, 1, 0, 0, 0, 0));
-ccn_datetime_MAX_DATETIME = new Date(Date.UTC(2200, 1, 1, 0, 0, 0, 0));
+var ccn_datetime_MAX_DATETIME = new Date(Date.UTC(2200, 1, 1, 0, 0, 0, 0));
-ccn_datetime_MIN_TIMESTAMP = Math.floor(ccn_datetime_MIN_DATETIME.getTime() / 60000);
+var ccn_datetime_MIN_TIMESTAMP = Math.floor(ccn_datetime_MIN_DATETIME.getTime() / 60000);
-ccn_datetime_MAX_TIMESTAMP = Math.floor(ccn_datetime_MAX_DATETIME.getTime() / 60000);
+var ccn_datetime_MAX_TIMESTAMP = Math.floor(ccn_datetime_MAX_DATETIME.getTime() / 60000);
 
-ccn_datetime_DAY1_SPAN = 60 * 24;
+var ccn_datetime_DAY1_SPAN = 60 * 24;
-ccn_datetime_DAY7_SPAN = 7 * ccn_datetime_DAY1_SPAN;
+var ccn_datetime_DAY7_SPAN = 7 * ccn_datetime_DAY1_SPAN;
 
-ccn_datetime_precompiledLoopRules = {
+var ccn_datetime_precompiledLoopRules = {
     year: new RegExp(/^Y([SR]{1})([1-9]\d*)$/),
     month: new RegExp(/^M([SR]{1})([ABCD]{1})([1-9]\d*)$/),
     week: new RegExp(/^W([TF]{7})([1-9]\d*)$/),
     day: new RegExp(/^D([1-9]\d*)$/)
 };
 
-ccn_datetime_precompiledLoopStopRules = {
+var ccn_datetime_precompiledLoopStopRules = {
     infinity: new RegExp(/^F$/),
     datetime: new RegExp(/^D([1-9]\d*|0)$/),
     times: new RegExp(/^T([1-9]\d*)$/)

src/static/js/localStorageAssist.js

@@ -9,3 +9,13 @@ function ccn_localstorageAssist_Get(index, defaultValue) {
 function ccn_localstorageAssist_Set(index, value) {
     localStorage.setItem(index, value);
 }
+
+// =================================== seperated data getter setter
+
+function ccn_localstorageAssist_GetApiToken() {
+    return ccn_localstorageAssist_Get('ccn-token', '');
+}
+
+function ccn_localstorageAssist_SetApiToken(value) {
+    ccn_localstorageAssist_Set('ccn-token', value);
+}

src/static/js/page/admin.js

@@ -22,11 +22,14 @@ $(document).ready(function() {
     $("#tabcontrol-tab-1-2").click(function(){
         ccn_tabcontrol_SwitchTab(1, 2);
     });
+    $("#tabcontrol-tab-1-3").click(function(){
+        ccn_tabcontrol_SwitchTab(1, 3);
+    });
     ccn_tabcontrol_SwitchTab(1, 1);
 
     // load user tab according to admin status
     if(!ccn_api_common_isAdmin())
-        $('#tabcontrol-tab-1-2').hide();
+        $('#tabcontrol-tab-1-3').hide();
 
     // apply i18n
     ccn_i18n_LoadLanguage();

src/static/js/page/calendar.js

@@ -108,6 +108,7 @@ function ccn_calendar_calendar_Analyse() {
             day: gottenDateTime.getDate(),
             dayOfWeek: gottenDateTime.getWeekday() + 1,
             subcalendar: "",
+            isCurrentMonth: (gottenDateTime.getMonth() + 1) == gottenMonth,
             events: new Array()
         });
         gottenDateTime.setTime(gottenDateTime.getTime() + ccn_datetime_DAY1_SPAN * 60000);
@@ -205,6 +206,8 @@ function ccn_calendar_calendar_Render() {
             var lenEvents = item.events.length;
             var eventsCounter = 0;
 
+            $('#ccn-calendarItem-' + i + '-' + j).attr('isCurrentMonth', item.isCurrentMonth ? 'true' : 'false');
+
             $('#ccn-calendarItem-title-' + i + '-' + j).text(item.day);
             $('#ccn-calendarItem-desc-' + i + '-' + j).text(item.subcalendar);
 
@@ -216,7 +219,9 @@ function ccn_calendar_calendar_Render() {
             }
             if (lenEvents > 4) {
                 // more than 4 item, write number
-                $('#ccn-calendarItem-task-' + i + '-' + j).text(lenEvents.toString());
+                $('#ccn-calendarItem-task-' + i + '-' + j).text(
+                    $.i18n.prop('ccn-i18n-calendar-calendar-stripedEvents').format(lenEvents.toString())
+                );
             } else {
                 // otherwise, wipe out number
                 $('#ccn-calendarItem-task-' + i + '-' + j).html(' ');

src/static/js/template.js

@@ -9,6 +9,7 @@ var ccn_template_displaySharedItem = undefined;
 var ccn_template_userItem = undefined;
 var ccn_template_todoItem = undefined;
 var ccn_template_optionItem = undefined;
+var ccn_template_tokenItem = undefined;
 
 function ccn_template_Load() {
     $.ajax({
@@ -84,6 +85,14 @@ function ccn_template_Load() {
                     ccn_template_userItem = $.templates(data);
                 }
             });
+            $.ajax({
+                url: $("#jsrender-tmpl-tokenItem").attr('src'),
+                type: "GET",
+                async: false,
+                success: function (data) {
+                    ccn_template_tokenItem = $.templates(data);
+                }
+            });
             break;
         case ccn_pages_enumPages.login:
             break;

src/static/js/utils.js

@@ -30,14 +30,6 @@ function IsResponseOK(data) {
     return true;
 }
 
-function GetApiToken() {
-    return ccn_localstorageAssist_Get('ccn-token', '');
-}
-
-function SetApiToken(value) {
-    ccn_localstorageAssist_Set('ccn-token', value);
-}
-
 function LineBreaker2Br(strl) {
     return $('<div>').text(strl).html().replace(/\n/g, '<br />');
 }

src/static/tmpl/tokenItem.tmpl

@@ -0,0 +1,20 @@
+<div id="ccn-tokenItem-{{:uuid}}" class="token-item card">
+    <div class="token-item-words">
+        <b>{{>token}}</b>
+        {{if isMe}}
+        <p i18n-name="ccn-i18n-tokenItem-isMe"></p>
+        {{/if}}
+        <p>
+            <span i18n-name="ccn-i18n-tokenItem-ua"></span>
+            <span>{{>ua}}</span>
+        </p>
+        <p>
+            <span i18n-name="ccn-i18n-tokenItem-ip"></span>
+            <span>{{>ip}}</span>
+        </p>
+    </div>
+
+    <div id="ccn-tokenItem-btnLogout-{{:uuid}}" uuid="{{:uuid}}" class="token-item-icon control">
+        <a class="button"><span class="icon is-small"><i class="fas fa-sign-out"></i></span></a>
+    </div>
+</div>

src/templates/admin.html

@@ -14,6 +14,7 @@
     <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/x-jsrender" id="jsrender-tmpl-tokenItem" src="/static/tmpl/tokenItem.tmpl"></script>
 
     <script type="text/javascript" src="/static/js/localStorageAssist.js"></script>
     <script type="text/javascript" src="/static/js/i18n.js"></script>
@@ -36,28 +37,41 @@
                 <li id="tabcontrol-tab-1-1" class="tabcontrol-tab-1"><a
                         i18n-name="ccn-i18n-admin-tabcontrol-tabProfile"></a></li>
                 <li id="tabcontrol-tab-1-2" class="tabcontrol-tab-1"><a
+                        i18n-name="ccn-i18n-admin-tabcontrol-tabToken"></a></li>
+                <li id="tabcontrol-tab-1-3" class="tabcontrol-tab-1"><a
                         i18n-name="ccn-i18n-admin-tabcontrol-tabUserList"></a></li>
             </ul>
         </div>
     </div>
 
     <div id="tabcontrol-panel-1-1" class="container tabcontrol-panel-1" style="margin-top: 20px;">
-        <div class="field">
+        <h1 class="title" i18n-name="ccn-i18n-admin-changePassword"></h1>
-            <label class="label" i18n-name="ccn-i18n-admin-changePassword"></label>
+        <div class="field has-addons">
-            <div class="field has-addons">
+            <div class="control">
-                <div class="control">
+                <input id="ccn-admin-profile-inputPassword" class="input" type="password">
-                    <input id="ccn-admin-profile-inputPassword" class="input" type="password">
+            </div>
-                </div>
+            <div class="control">
-                <div class="control">
+                <a id="ccn-admin-profile-btnChangePassword" class="button is-primary">
-                    <a id="ccn-admin-profile-btnChangePassword" class="button is-primary">
+                    <span class="icon is-small"><i class="fas fa-key"></i></span>
-                        <span class="icon is-small"><i class="fas fa-key"></i></span>
+                </a>
-                    </a>
-                </div>
             </div>
         </div>
     </div>
 
     <div id="tabcontrol-panel-1-2" class="container tabcontrol-panel-1" style="margin-top: 20px;">
+        <h1 class="title" i18n-name="ccn-i18n-admin-manageToken"></h1>
+        <h2 class="subtitle" i18n-name="ccn-i18n-admin-manageToken-desc"></h2>
+        <div id="ccn-admin-tokenList-btnRefresh" class="control">
+            <a class="button is-primary">
+                <span class="icon is-small"><i class="fas fa-sync"></i></span>
+            </a>
+        </div>
+
+        <div id="ccn-admin-tokenList" style="display: flex; flex-flow: column; margin-top: 1.25rem;">
+        </div>
+    </div>
+
+    <div id="tabcontrol-panel-1-3" class="container tabcontrol-panel-1" style="margin-top: 20px;">
         <h1 class="title" i18n-name="ccn-i18n-admin-userList"></h1>
         <div class="control-list">
             <div class="field has-addons">

src/templates/calendar.html

@@ -51,6 +51,12 @@
 
     <div id="tabcontrol-panel-1-1" class="container tabcontrol-panel-1" style="margin-top: 20px;">
         <nav class="level">
+            <div class="level-item control">
+                <a id="ccn-calendar-calendar-btnPrevMonth" class="button">
+                    <span class="icon is-small"><i class="fas fa-chevron-circle-left"></i></span>
+                </a>
+            </div>
+
             <div class="level-item">
                 <div class="field has-addons">
                     <div class="control">
@@ -71,6 +77,11 @@
             <div class="level-item control">
                 <a id="ccn-calendar-calendar-btnAdd" i18n-name="ccn-i18n-calendar-calendar-add" class="button is-primary"></a>
             </div>
+            <div class="level-item control">
+                <a id="ccn-calendar-calendar-btnNextMonth" class="button">
+                    <span class="icon is-small"><i class="fas fa-chevron-circle-right"></i></span>
+                </a>
+            </div>
         </nav>
 
         <div id="ccn-calendar-calendarBody" class="card" style="padding: 1.25rem; display: flex; flex-flow: column;">
@@ -98,7 +109,7 @@
     </div>
 
     <div id="tabcontrol-panel-1-2" class="container tabcontrol-panel-1" style="margin-top: 20px;">
-        <div id="ccn-calendar-collection-btnRefresh" class="control">
+        <div id="ccn-calendar-collection-btnRefresh" class="control" style="margin: 0.75rem;">
             <a class="button is-primary">
                 <span class="icon is-small"><i class="fas fa-sync"></i></span>
             </a>
@@ -112,7 +123,32 @@
     </div>
 
     <div id="tabcontrol-panel-1-3" class="container tabcontrol-panel-1" style="margin-top: 20px;">
-
+        <div class="field">
+            <label class="label" i18n-name="ccn-i18n-calendar-display-firstDayOfWeek"></label>
+            <div class="control">
+                <div class="select">
+                    <select id="ccn-calendar-display-firstDayOfWeek">
+                        <option i18n-name="ccn-i18n-universal-week-1"></option>
+                        <option i18n-name="ccn-i18n-universal-week-2"></option>
+                        <option i18n-name="ccn-i18n-universal-week-3"></option>
+                        <option i18n-name="ccn-i18n-universal-week-4"></option>
+                        <option i18n-name="ccn-i18n-universal-week-5"></option>
+                        <option i18n-name="ccn-i18n-universal-week-6"></option>
+                        <option i18n-name="ccn-i18n-universal-week-7"></option>
+                    </select>
+                </div>
+            </div>
+        </div>
+        <div class="field">
+            <label class="label" i18n-name="ccn-i18n-calendar-display-subcalendar"></label>
+            <div class="control">
+                <div class="select">
+                    <select id="ccn-calendar-display-subcalendar">
+                        <option i18n-name="ccn-i18n-calendar-display-subcalendar-chineseLunisolarCalendar"></option>
+                    </select>
+                </div>
+            </div>
+        </div>
     </div>
 
 </body>