refactor: move individual css into global css for sharing use

- migrate old API into typescript but not finished (only webLogin works now)
- seperate the logger of backend due to the shitty behavior of Flask (change logging level)

ROADMAP.md

@@ -0,0 +1,10 @@
+# Roadmap
+
+1. 前后端分离，将前端静态文件和后端Python分装到两个文件夹中。同时辅助类文件夹改换位置。
+1. 后端使用Astral UV重构，使得项目可以跑起来。
+1. 定为1.1版本。1.0版本也要打tag然后提交。然后分叉v1-maintain分支。后续在master上开发v2。
+1. 后端数据库字段重命名。
+1. 前后端通信API命名格式修改。
+1. 使用Vue重写前端
+1. 使用Tailwind重写前端CSS
+1. 使用Go重写后端。

assets/.nginx.conf

@@ -0,0 +1,61 @@
+# ============================
+# 路由 1: /web -> 静态文件
+# ============================
+location /web {
+	# 使用 alias 精确映射
+	# 请求 /web/index.html -> /var/www/static/index.html
+	alias /var/www/static;
+	
+	# 静态文件优化
+	expires 7d;
+	add_header Cache-Control "public, max-age=604800";
+	
+	# 尝试返回文件，不存在则返回404（避免落入其他location）
+	try_files $uri $uri/ =404;
+	
+	# 可选：启用 gzip 压缩
+	gzip_static on;
+}
+
+# ============================
+# 路由 2: /api -> Go 程序 (8848端口)
+# ============================
+location /api {
+	# 反向代理到本地 Go 服务
+	proxy_pass http://127.0.0.1:8848;
+	
+	# 重要：保留原始请求头
+	proxy_set_header Host $host;
+	proxy_set_header X-Real-IP $remote_addr;
+	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+	proxy_set_header X-Forwarded-Proto $scheme;
+	
+	# WebSocket 支持（如果 Go 程序需要）
+	# proxy_http_version 1.1;
+	# proxy_set_header Upgrade $http_upgrade;
+	# proxy_set_header Connection "upgrade";
+	
+	# 超时设置（根据业务调整）
+	proxy_connect_timeout 60s;
+	proxy_send_timeout 60s;
+	proxy_read_timeout 60s;
+	
+	# 缓冲设置（可选，大文件上传时注意调整）
+	proxy_buffering on;
+	proxy_buffer_size 4k;
+	proxy_buffers 8 4k;
+}
+
+# ============================
+# 可选：根路径处理
+# ============================
+location = / {
+	# 重定向到 /web
+	return 302 /web/;
+}
+
+# 禁止访问隐藏文件
+location ~ /\. {
+	deny all;
+	return 404;
+}

assets/ics2csv.py

@@ -0,0 +1,101 @@
+import icalendar
+
+def DumpComponentHeader(file, component):
+    fields = []
+    inclusiveUnitCounter = 0
+    fields += map(lambda x: x + ' - required', component.required)
+    fields += map(lambda x: x + ' - singletons', component.singletons)
+    for units in component.inclusive:
+        fields += map(lambda x: x + ' - inclusive{}'.format(inclusiveUnitCounter), units)
+        inclusiveUnitCounter += 1
+    fields += ('exclusive - name', 'exclusive - data')
+    fields += ('multiple', )
+    file.write(','.join(fields))
+    file.write('\n')
+
+def DumpComponentData(file, component):
+    data = []
+    gotten_instance = None
+
+    for item in component.required:
+        gotten_instance = component.get(item)
+        if gotten_instance is not None:
+            data.append(AdvancedFormater(gotten_instance))
+        else:
+            data.append('')
+    for item in component.singletons:
+        gotten_instance = component.get(item)
+        if gotten_instance is not None:
+            data.append(AdvancedFormater(gotten_instance))
+        else:
+            data.append('')
+    for units in component.inclusive:
+        for item in units:
+            gotten_instance = component.get(item)
+            if gotten_instance is not None:
+                data.append(AdvancedFormater(gotten_instance))
+            else:
+                data.append('')
+
+    gotten_name = ""
+    gotten_data = ""
+    for item in component.exclusive:
+        gotten_instance = component.get(item)
+        if gotten_instance is not None:
+            gotten_name = item
+            gotten_data = AdvancedFormater(gotten_instance)
+            break
+    data.append(gotten_name)
+    data.append(gotten_data)
+
+    for item in component.multiple:
+        gotten_instance = component.get(item)
+        if gotten_instance is not None:
+            data.append('- {} -'.format(item))
+            data.append(AdvancedFormater(gotten_instance))
+        else:
+            data.append('')
+
+    file.write(','.join(data))
+    file.write('\n')
+
+def AdvancedFormater(data):
+    if isinstance(data, icalendar.prop.vDDDTypes):
+        return str(data.dt)
+    else:
+        return str(data)
+
+# read file
+icsFile = open('test.ics', 'rb')
+cal = icalendar.Calendar.from_ical(icsFile.read())
+icsFile.close()
+
+# analyse file
+csvEvent = open('event.csv', 'w')
+csvEventHeader = False
+csvAlarm = open('alarm.csv', 'w')
+csvAlarmHeader = False
+
+eventCount = 0
+alarmCount = 0
+miscCount = 0
+for component in cal.walk():
+    if component.name == 'VEVENT':
+        eventCount += 1
+        if not csvEventHeader:
+            DumpComponentHeader(csvEvent, component)
+            csvEventHeader = True
+        DumpComponentData(csvEvent, component)
+    elif component.name == 'VALARM':
+        alarmCount += 1
+        if not csvAlarmHeader:
+            DumpComponentHeader(csvAlarm, component)
+            csvAlarmHeader = True
+        DumpComponentData(csvAlarm, component)
+    else:
+        miscCount += 1
+    
+        
+csvEvent.close()
+csvAlarm.close()
+print('Event count: {}\nAlarm count: {}\nMisc count: {}'.format(eventCount, alarmCount, miscCount))

assets/ics_converter.py

@@ -0,0 +1,156 @@
+import icalendar
+import sys
+import os
+import database
+import json
+import datetime
+import dt as localdt
+
+def AdvancedDatetTimeGet(dt, isStartDateTime):
+    if isinstance(dt, datetime.datetime):
+        gottenDatetime = int(dt.timestamp() / 60)
+    elif isinstance(dt, datetime.date):
+        gottenDatetime = int(datetime.datetime(
+            dt.year,
+            dt.month,
+            dt.day,
+            0 if isStartDateTime else 23, 
+            0 if isStartDateTime else 59,
+            0 if isStartDateTime else 59,
+            0, tzinfo=LOCAL_TZ
+        ).timestamp() / 60)
+    else:
+        raise Exception('Unexpected data')
+
+    timezoneOffset = LOCAL_UTC_OFFSET
+    return (gottenDatetime, timezoneOffset)
+
+def AdvancedDateTimeAnalyser(component):
+    startDatetimeRef = component.get('DTSTART').dt
+    (startDatetime, timezoneOffset) = AdvancedDatetTimeGet(startDatetimeRef, True)
+
+    if component.get('DTEND') is not None:
+        (endDatetime, _) = AdvancedDatetTimeGet(startDatetimeRef, False)
+    elif component.get('DURATION') is not None:
+        endDurationRef = component.get('DURATION').dt
+        if isinstance(endDurationRef, datetime.timedelta):
+            endDatetime = startDatetime + int(endDurationRef.total_seconds() / 60)
+        else:
+            raise Exception('Unexpected data')
+    else:
+        raise Exception('Unexpected data')
+
+    return (startDatetime, endDatetime, timezoneOffset)
+
+def LoopRulesConverter(component):
+    jsonData = component.get('RRULE')
+    if jsonData is None:
+        return ""
+
+    loopRules = ""
+    loopStopRules = ""
+    freq = jsonData.get('FREQ')[0]
+    if freq == 'MONTHLY':
+        loopRules = 'MSA{}'.format(str(jsonData.get('INTERVAL')[0]))
+    elif freq == 'WEEKLY':
+        occupiedWeek = [False, ] * 7
+        for item in jsonData.get('BYDAY'):
+            occupiedWeek[WEEK_DICT[item]] = True
+        loopRules = 'W{}{}'.format(
+            ''.join(map(lambda x: 'T' if x else 'F', occupiedWeek)),
+            str(jsonData.get('INTERVAL')[0])
+        )
+    elif freq == 'YEARLY':
+        loopRules = 'YS{}'.format(str(jsonData.get('INTERVAL')[0]))
+    else:
+        raise Exception('Unexpected data')
+
+    if jsonData.get('COUNT') is not None:
+        loopStopRules = 'T{}'.format(str(jsonData.get('COUNT')[0]))
+    else:
+        loopStopRules = 'F'
+
+    return loopRules + '-' + loopStopRules
+
+# ============================ read args
+icsFilePath = sys.argv[1]
+if not os.path.isfile(icsFilePath):
+    print('Fail to load ics file')
+    sys.exit(1)
+
+# read file
+icsFile = open(icsFilePath, 'rb')
+cal = icalendar.Calendar.from_ical(icsFile.read())
+icsFile.close()
+
+#  ============================ init const
+utfOffset = float(input('Input this ics file\'s utc offset (time unit: hour)>'))
+LOCAL_UTC_OFFSET = int(utfOffset * 60)
+LOCAL_TZ = localdt.UTCTimezone(LOCAL_UTC_OFFSET)
+WEEK_DICT = {
+    "SU": 6, "MO": 0, "TU": 1, "WE": 2, "TH": 3, "FR": 4, "SA": 5,
+}
+
+# ============================ pick database
+
+db = database.CalendarDatabase()
+db.open()
+username = input('Input username >')
+password = input('Input password >')
+(status, error, token) = db.common_webLogin(username, password, 'Python backend', '127.0.0.1')
+if not status:
+    print('Fail to login.')
+    sys.exit(1)
+(status, error, collectionList) = db.collection_getFullOwn(token)
+if not status:
+    print('Database return an error')
+    sys.exit(1)
+print('Pick a collection to insert imported events')
+counter = 0
+for i in collectionList:
+    print('{}\t{}'.format(counter, i[1]))
+    counter += 1
+pickedIndex = int(input())
+collectionUuid = collectionList[pickedIndex][0]
+
+# ============================ analyse file
+eventCount = 0
+allCount = 0
+for component in cal.walk():
+    allCount += 1
+    # only import event chunk
+    if component.name == 'VEVENT':
+        eventCount += 1
+        title = str(component.get('SUMMARY'))
+        descriptionPrototype = {
+            'color': '#1e90ff',
+            'description': None
+        }
+        descriptionList = []
+        if component.get('DESCRIPTION') is not None and str(component.get('DESCRIPTION')) != '':
+            descriptionList.append(component.get('DESCRIPTION'))
+        if component.get('LOCATION') is not None and str(component.get('LOCATION')) != '':
+            descriptionList.append(component.get('LOCATION'))
+        descriptionPrototype['description'] = '\n'.join(descriptionList)
+        description = json.dumps(descriptionPrototype)
+    
+        (eventDateTimeStart, eventDateTimeEnd, timezoneOffset) = AdvancedDateTimeAnalyser(component)
+        loopRules = LoopRulesConverter(component)
+
+        (status, _, _) = db.calendar_add(
+            token,
+            collectionUuid,
+            title,
+            description,
+            eventDateTimeStart,
+            eventDateTimeEnd,
+            loopRules,
+            timezoneOffset
+        )
+        if not status:
+            print('Database return an error')
+            sys.exit(1)
+        
+db.common_logout(token)
+db.close()
+print('All chunk: {}\nEvent count: {}'.format(allCount, eventCount))

assets/migration/README.md

@@ -0,0 +1,3 @@
+# Migration
+
+This directory contains the migration scripts for the database.

assets/migration/v1_to_v2.sqlite.sql

@@ -0,0 +1,49 @@
+-- Migration script for coconut-leaf database v1 to v2
+-- This script updates field names by:
+-- 1. Removing 'ccn_' prefix from all fields
+-- 2. Converting camelCase to snake_case
+
+-- Step 1: Rename user table columns
+ALTER TABLE user RENAME COLUMN ccn_name TO name;
+ALTER TABLE user RENAME COLUMN ccn_password TO password;
+ALTER TABLE user RENAME COLUMN ccn_isAdmin TO is_admin;
+ALTER TABLE user RENAME COLUMN ccn_salt TO salt;
+
+-- Step 2: Rename token table columns
+ALTER TABLE token RENAME COLUMN ccn_user TO user;
+ALTER TABLE token RENAME COLUMN ccn_token TO token;
+ALTER TABLE token RENAME COLUMN ccn_tokenExpireOn TO token_expire_on;
+ALTER TABLE token RENAME COLUMN ccn_ua TO ua;
+ALTER TABLE token RENAME COLUMN ccn_ip TO ip;
+
+-- Step 3: Rename collection table columns
+ALTER TABLE collection RENAME COLUMN ccn_uuid TO uuid;
+ALTER TABLE collection RENAME COLUMN ccn_name TO name;
+ALTER TABLE collection RENAME COLUMN ccn_user TO user;
+ALTER TABLE collection RENAME COLUMN ccn_lastChange TO last_change;
+
+-- Step 4: Rename share table columns
+ALTER TABLE share RENAME COLUMN ccn_uuid TO uuid;
+ALTER TABLE share RENAME COLUMN ccn_target TO target;
+
+-- Step 5: Rename calendar table columns
+ALTER TABLE calendar RENAME COLUMN ccn_uuid TO uuid;
+ALTER TABLE calendar RENAME COLUMN ccn_belongTo TO belong_to;
+ALTER TABLE calendar RENAME COLUMN ccn_title TO title;
+ALTER TABLE calendar RENAME COLUMN ccn_description TO description;
+ALTER TABLE calendar RENAME COLUMN ccn_lastChange TO last_change;
+ALTER TABLE calendar RENAME COLUMN ccn_eventDateTimeStart TO event_date_time_start;
+ALTER TABLE calendar RENAME COLUMN ccn_eventDateTimeEnd TO event_date_time_end;
+ALTER TABLE calendar RENAME COLUMN ccn_timezoneOffset TO timezone_offset;
+ALTER TABLE calendar RENAME COLUMN ccn_loopRules TO loop_rules;
+ALTER TABLE calendar RENAME COLUMN ccn_loopDateTimeStart TO loop_date_time_start;
+ALTER TABLE calendar RENAME COLUMN ccn_loopDateTimeEnd TO loop_date_time_end;
+
+-- Step 6: Rename todo table columns
+ALTER TABLE todo RENAME COLUMN ccn_uuid TO uuid;
+ALTER TABLE todo RENAME COLUMN ccn_belongTo TO belong_to;
+ALTER TABLE todo RENAME COLUMN ccn_data TO data;
+ALTER TABLE todo RENAME COLUMN ccn_lastChange TO last_change;
+
+-- Note: Foreign key constraints will be automatically updated by SQLite when renaming columns
+-- No additional steps needed for foreign keys

backend/coconut-leaf.py

@@ -1,15 +1,17 @@
 import sys
-import logging
 from argparse import ArgumentParser
 from typing import cast
 from pathlib import Path
+
 import server
 import config
 import utils
 import database
+import logger
+from logger import LOGGER, LoggerLevel
 
 
-def GetUsernamePassword():
+def GetUsernamePassword() -> tuple[str, str]:
     print("What is the first username of this calendar system?")
     cache = input()
     while not utils.IsValidUsername(cache):
@@ -26,15 +28,15 @@ def GetUsernamePassword():
 
     return (username, password)
 
-
 if __name__ == "__main__":
-    print("Coconut-leaf")
-    print("A self-host, multi-account calendar system.")
-    print("Project: https://github.com/yyc12345/coconut-leaf")
-    print("===================")
+    # Set as INFO level in default first,
+    # and we will change it once we load the configuration file.
+    logger.set_level(LoggerLevel.INFO)
 
     # Receive arguments
-    parser = ArgumentParser(description="Coconut-leaf")
+    parser = ArgumentParser(
+        description="The server of light, self-host and multi-account calendar system."
+    )
     parser.add_argument(
         "-c",
         "--config",
@@ -54,16 +56,22 @@ if __name__ == "__main__":
     )
     args = parser.parse_args()
 
+    # Show splash
+    LOGGER.info("Coconut-leaf")
+    LOGGER.info("A light, self-host and multi-account calendar system")
+    LOGGER.info("Project: https://github.com/yyc12345/coconut-leaf")
+    LOGGER.info("===================")
+
     # Load config file
     try:
         config.setup_config(cast(Path, args.config))
     except Exception as e:
-        print(f"Error loading config file: {e}")
+        LOGGER.critical(f"Error loading config file: {e}")
         sys.exit(1)
 
-    # Setup logging level
-    logging_level = logging.DEBUG if config.get_config().others.debug else logging.INFO
-    logging.basicConfig(format='[%(levelname)s] %(message)s', level=logging_level)
+    # Change logging level again according to whether enable debug mode
+    logging_level = LoggerLevel.DEBUG if config.get_config().others.debug else LoggerLevel.INFO
+    logger.set_level(logging_level)
 
     # Initialize the calendar system if needed
     if cast(bool, args.init):
@@ -72,5 +80,5 @@ if __name__ == "__main__":
         calendar.init(*gotten_data)
         calendar.close()
 
-    logging.info("Staring server...")
+    LOGGER.info("Staring server...")
     server.run()

backend/coconut-leaf.template.toml

@@ -15,7 +15,7 @@ path = "coconut-leaf.db"
 # database = "coconut_leaf"
 
 [web]
-port = 8888
+port = 8848
 
 [others]
 auto-token-clean-duration = 86400

backend/config.cfg.template

@@ -1,14 +0,0 @@
-{
-    "database-type": "sqlite",
-    "database-config": {
-        "user": "",
-        "password": "",
-        "db": "",
-        "url": "",
-        "port": 3306
-    },
-    "web": {
-        "port": 8888
-    },
-    "debug": true
-}

backend/database.py

@@ -1,54 +1,81 @@
-import config
 import sqlite3
-import utils
 import threading
-import logging
-import dt
 from typing import cast
 from pathlib import Path
+from dataclasses import dataclass
+from typing import Callable, ParamSpec, TypeVar, Generic
 
-def SafeDatabaseOperation(func):
-    def wrapper(self: 'CalendarDatabase', *args, **kwargs):
+import dt
+import utils
+import config
+from logger import LOGGER
+
+
+T = TypeVar('T')
+P = ParamSpec('P')
+R = TypeVar('R')
+
+
+@dataclass(frozen=True)
+class ResponseBody(Generic[T]):
+    """The generic response body for API return."""
+
+    success: bool
+    """True if this operation is successful, otherwise false."""
+    error: str
+    """The error message provided when operation failed."""
+    data: T | None
+    """The payload provided when operation successed."""
+
+
+class DbException(Exception):
+    """Error occurs when manipulating with database."""
+    pass
+
+
+def SafeDatabaseOperation(inner: Callable[P, R]) -> Callable[P, ResponseBody[R]]:
+    def wrapper(*args, **kwargs) -> ResponseBody[R]:
+        # extract self from args
+        self: 'CalendarDatabase' = args[0]
+        # get config
         cfg = config.get_config()
 
         with self.mutex:
-            # check database and acquire cursor
+            # try to fetching database and allocate database cursor
             try:
-                self.check_database()
-                self.cursor = self.db.cursor()
+                db = self._get_db()
+                self._allocate_cursor()
             except Exception as e:
-                self.cursor = None
+                self._free_cursor()
                 if cfg.others.debug:
-                    logging.exception(e)
-                return (False, str(e), None)
+                    LOGGER.exception(e)
+                return ResponseBody(False, str(e), None)
 
             # do real data work
             try:
                 currentTime = utils.GetCurrentTimestamp()
                 if currentTime - self.latestClean > cfg.others.auto_token_clean_duration:
                     self.latestClean = currentTime
-                    logging.info('Cleaning outdated token...')
+                    LOGGER.info('Cleaning outdated token...')
                     self.tokenOper_clean()
 
-                result = (True, '', func(self, *args, **kwargs))
-                self.cursor.close()
-                self.cursor = None
-                self.db.commit()
+                result = ResponseBody(True, '', inner(*args, **kwargs))
+                self._free_cursor()
+                db.commit()
                 return result
             except Exception as e:
-                self.cursor.close()
-                self.cursor = None
-                self.db.rollback()
+                self._free_cursor()
+                db.rollback()
                 if cfg.others.debug:
-                    logging.exception(e)
-                return (False, str(e), None)
+                    LOGGER.exception(e)
+                return ResponseBody(False, str(e), None)
 
     return wrapper
 
 class CalendarDatabase:
 
-    db: sqlite3.Connection
-    cursor: sqlite3.Cursor
+    db: sqlite3.Connection | None
+    cursor: sqlite3.Cursor | None
     mutex: threading.Lock
     latestClean: int
 
@@ -59,8 +86,8 @@ class CalendarDatabase:
         self.latestClean = 0
 
     def open(self):
-        if (self.is_database_valid()):
-            raise Exception('Databade is opened')
+        if (self.db is not None):
+            raise DbException('Database is already opened')
 
         cfg = config.get_config()
         match cfg.database.driver:
@@ -69,13 +96,13 @@ class CalendarDatabase:
                 self.db.execute('PRAGMA encoding = "UTF-8";')
                 self.db.execute('PRAGMA foreign_keys = ON;')
             case config.DatabaseDriver.MYSQL:
-                raise Exception('Not implemented database')
+                raise DbException('Not implemented database')
             case _:
-                raise Exception('Unknow database type')
+                raise DbException('Unknow database type')
 
-    def init(self, username, password):
-        if (self.is_database_valid()):
-            raise Exception('Database is opened')
+    def init(self, username: str, password: str):
+        if (self.db is not None):
+            raise DbException('Database is already opened')
 
         # establish tables
         cfg = config.get_config()
@@ -85,44 +112,74 @@ class CalendarDatabase:
             case config.DatabaseDriver.SQLITE:
                 sql_file = backend_sql_path / 'sqlite.sql'
             case config.DatabaseDriver.MYSQL:
-                raise Exception('Not implemented database')
+                raise DbException('Not implemented database')
             case _:
-                raise Exception('Unknow database type')
+                raise DbException('Unknow database type')
 
         self.open()
-        cursor = self.db.cursor()
+        db = self._get_db()
+
+        self._allocate_cursor()
+        cursor = self._get_cursor()
+
+        # execute script for creating tables
         with open(sql_file, 'r', encoding='utf-8') as fsql:
             cursor.executescript(fsql.read())
-
-        # finish init
+        # add default user in user table
         cursor.execute('INSERT INTO user VALUES (?, ?, ?, ?);', (
             username,
             utils.ComputePasswordHash(password),
             1,
             utils.GenerateSalt()
         ))
-        cursor.close()
-        self.db.commit()
+
+        self._free_cursor()
+
+        # commit to database
+        db.commit()
 
     def close(self):
-        self.check_database()
+        if (self.db is None):
+            LOGGER.warning('Try to close null database.')
+        else:
+            self._free_cursor()
             self.db.close()
             self.db = None
 
-    def check_database(self):
-        if (not self.is_database_valid()):
-            raise Exception('Databade is None')
+    def _get_db(self) -> sqlite3.Connection:
+        if (self.db is None):
+            raise DbException('There is no opened database')
+        else:
+            return self.db
 
-    def is_database_valid(self):
-        return not (self.db == None)
+    def _allocate_cursor(self) -> None:
+        if (self.cursor is not None):
+            raise DbException('There is already opened database cursor')
+        else:
+            self.cursor = self._get_db().cursor()
+
+    def _get_cursor(self) -> sqlite3.Cursor:
+        if (self.cursor is None):
+            raise DbException('There is no opened database cursor')
+        else:
+            return self.cursor
+
+    def _free_cursor(self) -> None:
+        if (self.cursor is None):
+            LOGGER.warning('Try to free null databse cursor.')
+        else:
+            self.cursor.close()
+            self.cursor = None
 
     # ======================= token related internal operation
     def tokenOper_clean(self):
         # remove outdated token
-        self.cursor.execute('DELETE FROM token WHERE [ccn_tokenExpireOn] <= ?',(utils.GetCurrentTimestamp(), ))
+        cursor = self._get_cursor()
+        cursor.execute('DELETE FROM token WHERE [token_expire_on] <= ?',(utils.GetCurrentTimestamp(), ))
 
     def tokenOper_postpone_expireOn(self, token):
-        self.cursor.execute('UPDATE token SET [ccn_tokenExpireOn] = ? WHERE [ccn_token] = ?;', (
+        cursor = self._get_cursor()
+        cursor.execute('UPDATE token SET [token_expire_on] = ? WHERE [token] = ?;', (
             utils.GetTokenExpireOn(),
             token
         ))
@@ -131,16 +188,18 @@ class CalendarDatabase:
         self.tokenOper_get_username(token)
 
     def tokenOper_is_admin(self, username):
-        self.cursor.execute('SELECT [ccn_isAdmin] FROM user WHERE [ccn_name] = ?;',(username, ))
-        cache = self.cursor.fetchone()[0]
+        cursor = self._get_cursor()
+        cursor.execute('SELECT [is_admin] FROM user WHERE [name] = ?;',(username, ))
+        cache = cursor.fetchone()[0]
         return cache == 1
 
     def tokenOper_get_username(self, token):
-        self.cursor.execute('SELECT [ccn_user] FROM token WHERE [ccn_token] = ? AND [ccn_tokenExpireOn] > ?;',(
+        cursor = self._get_cursor()
+        cursor.execute('SELECT [user] FROM token WHERE [token] = ? AND [token_expire_on] > ?;',(
             token,
             utils.GetCurrentTimestamp()
         ))
-        result = self.cursor.fetchone()[0]
+        result = cursor.fetchone()[0]
         # need postpone expire on time
         self.tokenOper_postpone_expireOn(token)
         return result
@@ -150,8 +209,9 @@ class CalendarDatabase:
     
     @SafeDatabaseOperation
     def common_salt(self, username):
+        cursor = self._get_cursor()
         salt = utils.GenerateSalt()
-        self.cursor.execute('UPDATE user SET [ccn_salt] = ? WHERE [ccn_name] = ?;', (
+        cursor.execute('UPDATE user SET [salt] = ? WHERE [name] = ?;', (
             salt,
             username
         ))
@@ -159,16 +219,17 @@ class CalendarDatabase:
 
     @SafeDatabaseOperation
     def common_login(self, username, password, clientUa, clientIp):
-        self.cursor.execute('SELECT [ccn_password], [ccn_salt] FROM user WHERE [ccn_name] = ?;', (username, ))
-        (gotten_salt, gotten_password) = self.cursor.fetchone()
+        cursor = self._get_cursor()
+        cursor.execute('SELECT [password], [salt] FROM user WHERE [name] = ?;', (username, ))
+        (gotten_salt, gotten_password) = cursor.fetchone()
         
         if password == utils.ComputePasswordHashWithSalt(gotten_password, gotten_salt):
             token = utils.GenerateToken(username)
-            self.cursor.execute('UPDATE user SET [ccn_salt] = ? WHERE [ccn_name] = ?;', (
+            cursor.execute('UPDATE user SET [salt] = ? WHERE [name] = ?;', (
                 utils.GenerateSalt(), # regenerate a new slat to prevent re-login try
                 username
             ))
-            self.cursor.execute('INSERT INTO token VALUES (?, ?, ?, ?, ?);', (
+            cursor.execute('INSERT INTO token VALUES (?, ?, ?, ?, ?);', (
                 username,
                 token,
                 utils.GetTokenExpireOn(), # add 2 day from now
@@ -178,15 +239,21 @@ class CalendarDatabase:
             return token
         else:
             # throw a exception to indicate fail to login
-            raise Exception('Login authentication failed')
+            raise DbException('Login authentication failed')
 
     @SafeDatabaseOperation
     def common_webLogin(self, username, password, clientUa, clientIp):
-        self.cursor.execute('SELECT [ccn_name] FROM user WHERE [ccn_name] = ? AND [ccn_password] = ?;', (username, utils.ComputePasswordHash(password)))
+        cursor = self._get_cursor()
+        LOGGER.debug(f'WebLogin Username: {username}')
+        LOGGER.debug(f'WebLogin Password: {password}')
+        passwordHash = utils.ComputePasswordHash(password)
+        LOGGER.debug(f'WebLogin Password Hash: {passwordHash}')
 
-        if len(self.cursor.fetchall()) != 0:
+        cursor.execute('SELECT [name] FROM user WHERE [name] = ? AND [password] = ?;', (username, passwordHash))
+
+        if len(cursor.fetchall()) != 0:
             token = utils.GenerateToken(username)
-            self.cursor.execute('INSERT INTO token VALUES (?, ?, ?, ?, ?);', (
+            cursor.execute('INSERT INTO token VALUES (?, ?, ?, ?, ?);', (
                 username,
                 token,
                 utils.GetTokenExpireOn(), # add 2 day from now
@@ -196,12 +263,13 @@ class CalendarDatabase:
             return token
         else:
             # throw a exception to indicate fail to login
-            raise Exception('Login authentication failed')
+            raise DbException('Login authentication failed')
 
     @SafeDatabaseOperation
     def common_logout(self, token):
+        cursor = self._get_cursor()
         self.tokenOper_check_valid(token)
-        self.cursor.execute('DELETE FROM token WHERE [ccn_token] = ?;', (token, ))
+        cursor.execute('DELETE FROM token WHERE [token] = ?;', (token, ))
         return True
 
     @SafeDatabaseOperation
@@ -212,40 +280,44 @@ class CalendarDatabase:
     # =============================== calendar
     @SafeDatabaseOperation
     def calendar_getFull(self, token, startDateTime, endDateTime):
+        cursor = self._get_cursor()
         username = self.tokenOper_get_username(token)
-        self.cursor.execute('SELECT calendar.* FROM calendar INNER JOIN collection \
-                ON collection.ccn_uuid = calendar.ccn_belongTo \
-                WHERE (collection.ccn_user = ? AND calendar.ccn_loopDateTimeEnd >= ? AND calendar.ccn_loopDateTimeStart - (calendar.ccn_eventDateTimeEnd - calendar.ccn_eventDateTimeStart) <= ?);', 
+        cursor.execute('SELECT calendar.* FROM calendar INNER JOIN collection \
+                ON collection.uuid = calendar.belong_to \
+                WHERE (collection.user = ? AND calendar.loop_date_time_end >= ? AND calendar.loop_date_time_start - (calendar.event_date_time_end - calendar.event_date_time_start) <= ?);', 
                 (username, startDateTime, endDateTime))
-        return self.cursor.fetchall()
+        return cursor.fetchall()
 
     @SafeDatabaseOperation
     def calendar_getList(self, token, startDateTime, endDateTime):
+        cursor = self._get_cursor()
         username = self.tokenOper_get_username(token)
-        self.cursor.execute('SELECT calendar.ccn_uuid FROM calendar INNER JOIN collection \
-                ON collection.ccn_uuid = calendar.ccn_belongTo \
-                WHERE (collection.ccn_user = ? AND calendar.ccn_loopDateTimeEnd >= ? AND calendar.ccn_loopDateTimeStart - (calendar.ccn_eventDateTimeEnd - calendar.ccn_eventDateTimeStart) <= ?);', 
+        cursor.execute('SELECT calendar.uuid FROM calendar INNER JOIN collection \
+                ON collection.uuid = calendar.belong_to \
+                WHERE (collection.user = ? AND calendar.loop_date_time_end >= ? AND calendar.loop_date_time_start - (calendar.event_date_time_end - calendar.event_date_time_start) <= ?);', 
                 (username, startDateTime, endDateTime))
-        return tuple(map(lambda x: x[0], self.cursor.fetchall()))
+        return tuple(map(lambda x: x[0], cursor.fetchall()))
 
     @SafeDatabaseOperation
     def calendar_getDetail(self, token, uuid):
+        cursor = self._get_cursor()
         self.tokenOper_check_valid(token)
-        self.cursor.execute('SELECT * FROM calendar WHERE [ccn_uuid] = ?;', (uuid, ))
-        return self.cursor.fetchone()
+        cursor.execute('SELECT * FROM calendar WHERE [uuid] = ?;', (uuid, ))
+        return cursor.fetchone()
 
     @SafeDatabaseOperation
     def calendar_update(self, token, uuid, lastChange, **optArgs):
+        cursor = self._get_cursor()
         self.tokenOper_check_valid(token)
 
         # get prev data
-        self.cursor.execute('SELECT * FROM calendar WHERE [ccn_uuid] = ? AND [ccn_lastChange] = ?;', (uuid, lastChange))
-        analyseData = list(self.cursor.fetchone())
+        cursor.execute('SELECT * FROM calendar WHERE [uuid] = ? AND [last_change] = ?;', (uuid, lastChange))
+        analyseData = list(cursor.fetchone())
 
         # construct update data
         lastupdate = utils.GenerateUUID()
         sqlList = [
-            '[ccn_lastChange] = ?',
+            '[last_change] = ?',
         ]
         argumentsList = [
             lastupdate,
@@ -256,44 +328,44 @@ class CalendarDatabase:
 
         cache = optArgs.get('belongTo', None)
         if cache is not None:
-            sqlList.append('[ccn_belongTo] = ?')
+            sqlList.append('[belong_to] = ?')
             argumentsList.append(cache)
         cache = optArgs.get('title', None)
         if cache is not None:
-            sqlList.append('[ccn_title] = ?')
+            sqlList.append('[title] = ?')
             argumentsList.append(cache)
         cache = optArgs.get('description', None)
         if cache is not None:
-            sqlList.append('[ccn_description] = ?')
+            sqlList.append('[description] = ?')
             argumentsList.append(cache)
         cache = optArgs.get('eventDateTimeStart', None)
         if cache is not None:
-            sqlList.append('[ccn_eventDateTimeStart] = ?')
+            sqlList.append('[event_date_time_start] = ?')
             argumentsList.append(cache)
             reAnalyseLoop = True
             analyseData[5] = cache
         cache = optArgs.get('eventDateTimeEnd', None)
         if cache is not None:
-            sqlList.append('[ccn_eventDateTimeEnd] = ?')
+            sqlList.append('[event_date_time_end] = ?')
             argumentsList.append(cache)
         cache = optArgs.get('loopRules', None)
         if cache is not None:
-            sqlList.append('[ccn_loopRules] = ?')
+            sqlList.append('[loop_rules] = ?')
             argumentsList.append(cache)
             reAnalyseLoop = True
             analyseData[8] = cache
         cache = optArgs.get('timezoneOffset', None)
         if cache is not None:
-            sqlList.append('[ccn_timezoneOffset] = ?')
+            sqlList.append('[timezone_offset] = ?')
             argumentsList.append(cache)
             reAnalyseLoop = True
             analyseData[7] = cache
 
         if reAnalyseLoop:
             # re-compute loop data and upload it into list
-            sqlList.append('[ccn_loopDateTimeStart] = ?')
+            sqlList.append('[loop_date_time_start] = ?')
             argumentsList.append(analyseData[5])
-            sqlList.append('[ccn_loopDateTimeEnd] = ?')
+            sqlList.append('[loop_date_time_end] = ?')
             argumentsList.append(str(dt.ResolveLoopStr(
                 analyseData[8],
                 analyseData[5],
@@ -302,14 +374,15 @@ class CalendarDatabase:
 
         # execute
         argumentsList.append(uuid)
-        self.cursor.execute('UPDATE calendar SET {} WHERE [ccn_uuid] = ?;'.format(', '.join(sqlList)), 
+        cursor.execute('UPDATE calendar SET {} WHERE [uuid] = ?;'.format(', '.join(sqlList)), 
         tuple(argumentsList))
-        if self.cursor.rowcount != 1:
-            raise Exception('Fail to update due to no matched rows or too much rows.')
+        if cursor.rowcount != 1:
+            raise DbException('Fail to update due to no matched rows or too much rows.')
         return lastupdate
 
     @SafeDatabaseOperation
     def calendar_add(self, token, belongTo, title, description, eventDateTimeStart, eventDateTimeEnd, loopRules, timezoneOffset):
+        cursor = self._get_cursor()
         self.tokenOper_check_valid(token)
 
         newuuid = utils.GenerateUUID()
@@ -319,7 +392,7 @@ class CalendarDatabase:
         loopDateTimeStart = eventDateTimeStart
         loopDateTimeEnd = dt.ResolveLoopStr(loopRules, eventDateTimeStart, timezoneOffset)
 
-        self.cursor.execute('INSERT INTO calendar VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?);', 
+        cursor.execute('INSERT INTO calendar VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?);', 
         (newuuid,
         belongTo,
         title,
@@ -335,134 +408,149 @@ class CalendarDatabase:
 
     @SafeDatabaseOperation
     def calendar_delete(self, token, uuid, lastChange):
+        cursor = self._get_cursor()
         self.tokenOper_check_valid(token)
-        self.cursor.execute('DELETE FROM calendar WHERE [ccn_uuid] = ? AND [ccn_lastChange] = ?;', (uuid, lastChange))
-        if self.cursor.rowcount != 1:
-            raise Exception('Fail to delete due to no matched rows or too much rows.')
+        cursor.execute('DELETE FROM calendar WHERE [uuid] = ? AND [last_change] = ?;', (uuid, lastChange))
+        if cursor.rowcount != 1:
+            raise DbException('Fail to delete due to no matched rows or too much rows.')
         return True
 
     # =============================== collection
     @SafeDatabaseOperation
     def collection_getFullOwn(self, token):
+        cursor = self._get_cursor()
         username = self.tokenOper_get_username(token)
-        self.cursor.execute('SELECT [ccn_uuid], [ccn_name], [ccn_lastChange] FROM collection WHERE [ccn_user] = ?;', (username, ))
-        return self.cursor.fetchall()
+        cursor.execute('SELECT [uuid], [name], [last_change] FROM collection WHERE [user] = ?;', (username, ))
+        return cursor.fetchall()
 
     @SafeDatabaseOperation
     def collection_getListOwn(self, token):
+        cursor = self._get_cursor()
         username = self.tokenOper_get_username(token)
-        self.cursor.execute('SELECT [ccn_uuid] FROM collection WHERE [ccn_user] = ?;', (username, ))
-        return tuple(map(lambda x: x[0], self.cursor.fetchall()))
+        cursor.execute('SELECT [uuid] FROM collection WHERE [user] = ?;', (username, ))
+        return tuple(map(lambda x: x[0], cursor.fetchall()))
 
     @SafeDatabaseOperation
     def collection_getDetailOwn(self, token, uuid):
+        cursor = self._get_cursor()
         username = self.tokenOper_get_username(token)
-        self.cursor.execute('SELECT [ccn_uuid], [ccn_name], [ccn_lastChange] FROM collection WHERE [ccn_user] = ? AND [ccn_uuid] = ?;', (username, uuid))
-        return self.cursor.fetchone()
+        cursor.execute('SELECT [uuid], [name], [last_change] FROM collection WHERE [user] = ? AND [uuid] = ?;', (username, uuid))
+        return cursor.fetchone()
 
     @SafeDatabaseOperation
     def collection_addOwn(self, token, newname):
+        cursor = self._get_cursor()
         username = self.tokenOper_get_username(token)
         newuuid = utils.GenerateUUID()
         lastupdate = utils.GenerateUUID()
-        self.cursor.execute('INSERT INTO collection VALUES (?, ?, ?, ?);',
+        cursor.execute('INSERT INTO collection VALUES (?, ?, ?, ?);',
         (newuuid, newname, username, lastupdate))
         return newuuid
 
     @SafeDatabaseOperation
     def collection_updateOwn(self, token, uuid, newname, lastChange):
+        cursor = self._get_cursor()
         self.tokenOper_check_valid(token)
 
         lastupdate = utils.GenerateUUID()
-        self.cursor.execute('UPDATE collection SET [ccn_name] = ?, [ccn_lastChange] = ? WHERE [ccn_uuid] = ? AND [ccn_lastChange] = ?;', (
+        cursor.execute('UPDATE collection SET [name] = ?, [last_change] = ? WHERE [uuid] = ? AND [last_change] = ?;', (
             newname,
             lastupdate,
             uuid,
             lastChange
         ))
-        if self.cursor.rowcount != 1:
-            raise Exception('Fail to update due to no matched rows or too much rows.')
+        if cursor.rowcount != 1:
+            raise DbException('Fail to update due to no matched rows or too much rows.')
         return lastupdate
 
     @SafeDatabaseOperation
     def collection_deleteOwn(self, token, uuid, lastChange):
+        cursor = self._get_cursor()
         self.tokenOper_check_valid(token)
 
-        self.cursor.execute('DELETE FROM collection WHERE [ccn_uuid] = ? AND [ccn_lastChange] = ?;', (
+        cursor.execute('DELETE FROM collection WHERE [uuid] = ? AND [last_change] = ?;', (
             uuid,
             lastChange
         ))
-        if self.cursor.rowcount != 1:
-            raise Exception('Fail to delete due to no matched rows or too much rows.')
+        if cursor.rowcount != 1:
+            raise DbException('Fail to delete due to no matched rows or too much rows.')
         return True
 
     @SafeDatabaseOperation
     def collection_getSharing(self, token, uuid):
+        cursor = self._get_cursor()
         self.tokenOper_check_valid(token)
-        self.cursor.execute('SELECT [ccn_target] FROM share WHERE [ccn_uuid] = ?;', (uuid, ))
-        return tuple(map(lambda x: x[0], self.cursor.fetchall()))
+        cursor.execute('SELECT [target] FROM share WHERE [uuid] = ?;', (uuid, ))
+        return tuple(map(lambda x: x[0], cursor.fetchall()))
 
     @SafeDatabaseOperation
     def collection_deleteSharing(self, token, uuid, target, lastChange):
+        cursor = self._get_cursor()
         self.tokenOper_check_valid(token)
 
         lastupdate = utils.GenerateUUID()
-        self.cursor.execute('UPDATE collection SET [ccn_lastChange] = ?, WHERE [ccn_uuid] = ? AND [ccn_lastChange] = ?;', (lastupdate, uuid, lastChange))
-        if self.cursor.rowcount != 1:
-            raise Exception('Fail to delete due to no matched rows or too much rows.')
+        cursor.execute('UPDATE collection SET [last_change] = ?, WHERE [uuid] = ? AND [last_change] = ?;', (lastupdate, uuid, lastChange))
+        if cursor.rowcount != 1:
+            raise DbException('Fail to delete due to no matched rows or too much rows.')
 
-        self.cursor.execute('DELETE FROM share WHERE [ccn_uuid] = ? AND [ccn_target] = ?;', (uuid, target))
-        if self.cursor.rowcount != 1:
-            raise Exception('Fail to delete due to no matched rows or too much rows.')
+        cursor.execute('DELETE FROM share WHERE [uuid] = ? AND [target] = ?;', (uuid, target))
+        if cursor.rowcount != 1:
+            raise DbException('Fail to delete due to no matched rows or too much rows.')
 
         return lastupdate
 
     @SafeDatabaseOperation
     def collection_addSharing(self, token, uuid, target, lastChange):
+        cursor = self._get_cursor()
         self.tokenOper_check_valid(token)
 
         lastupdate = utils.GenerateUUID()
-        self.cursor.execute('UPDATE collection SET [ccn_lastChange] = ? WHERE [ccn_uuid] = ? AND [ccn_lastChange] = ?;', (lastupdate, uuid, lastChange))
-        if self.cursor.rowcount != 1:
-            raise Exception('Fail to delete due to no matched rows or too much rows.')
+        cursor.execute('UPDATE collection SET [last_change] = ? WHERE [uuid] = ? AND [last_change] = ?;', (lastupdate, uuid, lastChange))
+        if cursor.rowcount != 1:
+            raise DbException('Fail to delete due to no matched rows or too much rows.')
 
-        self.cursor.execute('SELECT * FROM share WHERE [ccn_uuid] = ? AND [ccn_target] = ?;', (uuid, target))
-        if len(self.cursor.fetchall()) != 0:
-            raise Exception('Fail to insert duplicated item.')
-        self.cursor.execute('INSERT INTO share VALUES (?, ?);', (uuid, target))
+        cursor.execute('SELECT * FROM share WHERE [uuid] = ? AND [target] = ?;', (uuid, target))
+        if len(cursor.fetchall()) != 0:
+            raise DbException('Fail to insert duplicated item.')
+        cursor.execute('INSERT INTO share VALUES (?, ?);', (uuid, target))
 
         return lastupdate
 
     @SafeDatabaseOperation
     def collection_getShared(self, token):
+        cursor = self._get_cursor()
         username = self.tokenOper_get_username(token)
-        self.cursor.execute('SELECT collection.ccn_uuid, collection.ccn_name, collection.ccn_user \
+        cursor.execute('SELECT collection.uuid, collection.name, collection.user \
                 FROM share INNER JOIN collection \
-                ON share.ccn_uuid = collection.ccn_uuid \
-                WHERE share.ccn_target = ?;', (username, ))
-        return self.cursor.fetchall()
+                ON share.uuid = collection.uuid \
+                WHERE share.target = ?;', (username, ))
+        return cursor.fetchall()
 
     # =============================== todo
     @SafeDatabaseOperation
     def todo_getFull(self, token):
+        cursor = self._get_cursor()
         username = self.tokenOper_get_username(token)
-        self.cursor.execute('SELECT * FROM todo WHERE [ccn_belongTo] = ?;', (username, ))
-        return self.cursor.fetchall()
+        cursor.execute('SELECT * FROM todo WHERE [belong_to] = ?;', (username, ))
+        return cursor.fetchall()
 
     @SafeDatabaseOperation
     def todo_getList(self, token):
+        cursor = self._get_cursor()
         username = self.tokenOper_get_username(token)
-        self.cursor.execute('SELECT [ccn_uuid] FROM todo WHERE [ccn_belongTo] = ?;', (username, ))
-        return tuple(map(lambda x: x[0], self.cursor.fetchall()))
+        cursor.execute('SELECT [uuid] FROM todo WHERE [belong_to] = ?;', (username, ))
+        return tuple(map(lambda x: x[0], cursor.fetchall()))
 
     @SafeDatabaseOperation
     def todo_getDetail(self, token, uuid):
+        cursor = self._get_cursor()
         username = self.tokenOper_get_username(token)
-        self.cursor.execute('SELECT * FROM todo WHERE [ccn_belongTo] = ? AND [ccn_uuid] = ?;', (username, uuid))
-        return self.cursor.fetchone()
+        cursor.execute('SELECT * FROM todo WHERE [belong_to] = ? AND [uuid] = ?;', (username, uuid))
+        return cursor.fetchone()
 
     @SafeDatabaseOperation
     def todo_add(self, token):
+        cursor = self._get_cursor()
         username = self.tokenOper_get_username(token)
         newuuid = utils.GenerateUUID()
         lastupdate = utils.GenerateUUID()
@@ -472,56 +560,60 @@ class CalendarDatabase:
             '',
             lastupdate,
         )
-        self.cursor.execute('INSERT INTO todo VALUES (?, ?, ?, ?);', returnedData)
+        cursor.execute('INSERT INTO todo VALUES (?, ?, ?, ?);', returnedData)
         return returnedData
 
     @SafeDatabaseOperation
     def todo_update(self, token, uuid, data, lastChange):
+        cursor = self._get_cursor()
         # check valid token
         self.tokenOper_check_valid(token)
 
         # update
         newLastChange = utils.GenerateUUID()
-        self.cursor.execute('UPDATE todo SET [ccn_data] = ?, [ccn_lastChange] = ? WHERE [ccn_uuid] = ? AND [ccn_lastChange] = ?;', (
+        cursor.execute('UPDATE todo SET [data] = ?, [last_change] = ? WHERE [uuid] = ? AND [last_change] = ?;', (
             data,
             newLastChange,
             uuid,
             lastChange
         ))
-        if self.cursor.rowcount != 1:
-            raise Exception('Fail to update due to no matched rows or too much rows.')
+        if cursor.rowcount != 1:
+            raise DbException('Fail to update due to no matched rows or too much rows.')
         return newLastChange
 
     @SafeDatabaseOperation
     def todo_delete(self, token, uuid, lastChange):
+        cursor = self._get_cursor()
         # check valid token
         self.tokenOper_check_valid(token)
 
         # delete
-        self.cursor.execute('DELETE FROM todo WHERE [ccn_uuid] = ? AND [ccn_lastChange] = ?;', (uuid, lastChange))
-        if self.cursor.rowcount != 1:
-            raise Exception('Fail to delete due to no matched rows or too much rows.')
+        cursor.execute('DELETE FROM todo WHERE [uuid] = ? AND [last_change] = ?;', (uuid, lastChange))
+        if cursor.rowcount != 1:
+            raise DbException('Fail to delete due to no matched rows or too much rows.')
         return True
 
 
     # =============================== admin
     @SafeDatabaseOperation
     def admin_get(self, token):
+        cursor = self._get_cursor()
         username = self.tokenOper_get_username(token)
         if not self.tokenOper_is_admin(username):
-            raise Exception('Permission denied.')
+            raise DbException('Permission denied.')
 
-        self.cursor.execute('SELECT [ccn_name], [ccn_isAdmin] FROM user;')
-        return tuple(map(lambda x: (x[0], x[1] == 1), self.cursor.fetchall()))
+        cursor.execute('SELECT [name], [is_admin] FROM user;')
+        return tuple(map(lambda x: (x[0], x[1] == 1), cursor.fetchall()))
 
     @SafeDatabaseOperation
     def admin_add(self, token, newname):
+        cursor = self._get_cursor()
         username = self.tokenOper_get_username(token)
         if not self.tokenOper_is_admin(username):
-            raise Exception('Permission denied.')
+            raise DbException('Permission denied.')
 
         newpassword = utils.ComputePasswordHash(utils.GenerateUUID())
-        self.cursor.execute('INSERT INTO user VALUES (?, ?, ?, ?);', (
+        cursor.execute('INSERT INTO user VALUES (?, ?, ?, ?);', (
             newname,
             newpassword,
             0,
@@ -531,9 +623,10 @@ class CalendarDatabase:
 
     @SafeDatabaseOperation
     def admin_update(self, token, _username, **optArgs):
+        cursor = self._get_cursor()
         username = self.tokenOper_get_username(token)
         if not self.tokenOper_is_admin(username):
-            raise Exception('Permission denied.')
+            raise DbException('Permission denied.')
 
         # construct data
         sqlList = []
@@ -542,45 +635,48 @@ class CalendarDatabase:
         # analyse opt arg
         cache = optArgs.get('password', None)
         if cache is not None:
-            sqlList.append('[ccn_password] = ?')
+            sqlList.append('[password] = ?')
             argumentsList.append(utils.ComputePasswordHash(cache))
         cache = optArgs.get('isAdmin', None)
         if cache is not None:
-            sqlList.append('[ccn_isAdmin] = ?')
+            sqlList.append('[is_admin] = ?')
             argumentsList.append(1 if cache else 0)
 
         # execute
         argumentsList.append(_username)
-        self.cursor.execute('UPDATE user SET {} WHERE [ccn_name] = ?;'.format(', '.join(sqlList)), 
+        cursor.execute('UPDATE user SET {} WHERE [name] = ?;'.format(', '.join(sqlList)), 
         tuple(argumentsList))
-        logging.debug(cache)
-        logging.debug(tuple(argumentsList))
-        if self.cursor.rowcount != 1:
-            raise Exception('Fail to update due to no matched rows or too much rows.')
+        LOGGER.debug(cache)
+        LOGGER.debug(tuple(argumentsList))
+        if cursor.rowcount != 1:
+            raise DbException('Fail to update due to no matched rows or too much rows.')
         return True
 
     @SafeDatabaseOperation
     def admin_delete(self, token, username):
+        cursor = self._get_cursor()
         _username = self.tokenOper_get_username(token)
         if not self.tokenOper_is_admin(_username):
-            raise Exception('Permission denied.')
+            raise DbException('Permission denied.')
 
         # delete
-        self.cursor.execute('DELETE FROM user WHERE [ccn_name] = ?;', (username, ))
-        if self.cursor.rowcount != 1:
-            raise Exception('Fail to delete due to no matched rows or too much rows.')
+        cursor.execute('DELETE FROM user WHERE [name] = ?;', (username, ))
+        if cursor.rowcount != 1:
+            raise DbException('Fail to delete due to no matched rows or too much rows.')
         return True
 
     # =============================== profile
     @SafeDatabaseOperation
     def profile_isAdmin(self, token):
+        cursor = self._get_cursor()
         username = self.tokenOper_get_username(token)
         return self.tokenOper_is_admin(username)
 
     @SafeDatabaseOperation
     def profile_changePassword(self, token, newpassword):
+        cursor = self._get_cursor()
         username = self.tokenOper_get_username(token)
-        self.cursor.execute('UPDATE user SET [ccn_password] = ? WHERE [ccn_name] = ?;', (
+        cursor.execute('UPDATE user SET [password] = ? WHERE [name] = ?;', (
             utils.ComputePasswordHash(newpassword),
             username
         ))
@@ -588,23 +684,25 @@ class CalendarDatabase:
 
     @SafeDatabaseOperation
     def profile_getToken(self, token):
+        cursor = self._get_cursor()
         username = self.tokenOper_get_username(token)
 
-        self.cursor.execute('SELECT * FROM token WHERE [ccn_user] = ?;', (
+        cursor.execute('SELECT * FROM token WHERE [user] = ?;', (
             username,
         ))
-        return self.cursor.fetchall()
+        return cursor.fetchall()
 
     @SafeDatabaseOperation
     def profile_deleteToken(self, token, deleteToken):
+        cursor = self._get_cursor()
         _username = self.tokenOper_get_username(token)
 
         # delete
-        self.cursor.execute('DELETE FROM token WHERE [ccn_user] = ? AND [ccn_token] = ?;', (
+        cursor.execute('DELETE FROM token WHERE [user] = ? AND [token] = ?;', (
             _username, 
             deleteToken
         ))
-        if self.cursor.rowcount != 1:
-            raise Exception('Fail to delete due to no matched rows or too much rows.')
+        if cursor.rowcount != 1:
+            raise DbException('Fail to delete due to no matched rows or too much rows.')
         return True
 

backend/logger.py

@@ -0,0 +1,42 @@
+import logging
+import enum
+
+
+def _build_logger() -> tuple[logging.Logger, logging.Handler]:
+    # Create a new logger which is independent with Flask
+    logger = logging.getLogger("my_console_logger")
+    # Avoid message was propagated to root logger or captured by Flask logger.
+    logger.propagate = False
+    # Set initial level.
+    logger.setLevel(logging.INFO)
+
+    # Create StreamHandler to output into stderr.
+    console_handler = logging.StreamHandler()
+    console_handler.setLevel(logging.DEBUG)
+    # Set format for it.
+    formatter = logging.Formatter("[%(levelname)s] %(message)s")
+    console_handler.setFormatter(formatter)
+    # Add handler
+    logger.addHandler(console_handler)
+
+    return (logger, console_handler)
+
+
+(LOGGER, CONSOLE_HANDLER) = _build_logger()
+
+
+class LoggerLevel(enum.IntEnum):
+    DEBUG = enum.auto()
+    INFO = enum.auto()
+
+
+def set_level(level: LoggerLevel) -> None:
+    logging_level: int = logging.INFO
+    match level:
+        case LoggerLevel.DEBUG:
+            logging_level = logging.DEBUG
+        case LoggerLevel.INFO:
+            logging_level = logging.INFO
+
+    LOGGER.setLevel(logging_level)
+    CONSOLE_HANDLER.setLevel(logging_level)

backend/server.py

@@ -1,457 +1,513 @@
 from flask import Flask
-# from flask import g
-from flask import render_template
-from flask import url_for
 from flask import request
-# from flask import abort
-from flask import redirect
-
-# from functools import reduce
-# import json
-# import os
+from dataclasses import dataclass
+from typing import Any, Callable, ParamSpec, TypeVar, Generic
 
 import config
 import database
 import utils
-from pathlib import Path
+from logger import LOGGER
+from database import ResponseBody
 
-_FRONTEND_PATH = Path(__file__).resolve().parent.parent / "frontend"
-app = Flask(
-    __name__,
-    static_folder=_FRONTEND_PATH / "static",
-    template_folder=_FRONTEND_PATH / "templates",
-)
+app = Flask(__name__)
 calendar_db = database.CalendarDatabase()
 
-# render_static_resources = None
+# region: API Route
 
-# =============================================database
-
-# def get_database():
-#     db = getattr(g, '_database', None)
-#     if db is None:
-#         db = database.CalendarDatabase()
-#         db.open()
-#     return db
-
-# @app.teardown_appcontext
-# def close_database(exception):
-#     db = getattr(g, '_database', None)
-#     if db is not None:
-#         db.close()
+# region: Common
 
 
-# ============================================= static page route
-
-@app.route('/', methods=['GET'])
-def nospecHandle():
-    return redirect(url_for('web_homeHandle'))
-
-@app.route('/web/home', methods=['GET'])
-def web_homeHandle():
-    # UpdateStaticResources()
-    return render_template("home.html")
-
-@app.route('/web/calendar', methods=['GET'])
-def web_calendarHandle():
-    # UpdateStaticResources()
-    return render_template("calendar.html")
-
-@app.route('/web/todo', methods=['GET'])
-def web_todoHandle():
-    # UpdateStaticResources()
-    return render_template("todo.html")
-
-@app.route('/web/admin', methods=['GET'])
-def web_adminHandle():
-    # UpdateStaticResources()
-    return render_template("admin.html")
-
-@app.route('/web/login', methods=['GET'])
-def web_loginHandle():
-    # UpdateStaticResources()
-    return render_template("login.html")
-
-@app.route('/web/collection', methods=['GET'])
-def web_collectionHandle():
-    # UpdateStaticResources()
-    return render_template("collection.html")
-
-@app.route('/web/eventAdd', methods=['GET'])
-def web_eventAddHandle():
-    # UpdateStaticResources()
-    return render_template("event.html",
-        uuidPath=''
-    )
-
-@app.route('/web/eventUpdate/<path:uuidPath>', methods=['GET'])
-def web_eventUpdateHandle(uuidPath):
-    # UpdateStaticResources()
-    return render_template("event.html",
-        uuidPath = uuidPath
-    )
-
-# ============================================= query page route
-
-# ================================ common
-
-@app.route('/api/common/salt', methods=['POST'])
+@app.route("/common/salt", methods=["POST"])
 def api_common_saltHandle():
-    return SmartDbCaller(calendar_db.common_salt, 
-    (('username', str, False), ),
-    None)
+    return SmartDbCaller(
+        calendar_db.common_salt, (FormField("username", str, False),), None
+    )
 
-@app.route('/api/common/login', methods=['POST'])
+
+@app.route("/common/login", methods=["POST"])
 def api_common_loginHandle():
-    # construct client data first
-    clientUa = request.user_agent.string
-    if request.headers.getlist("X-Forwarded-For"):
-        clientIp = request.headers.getlist("X-Forwarded-For")[0]
-    else:
-        clientIp = request.remote_addr
+    clientInfo = FetchClientNetworkInfo()
 
-    return SmartDbCaller(calendar_db.common_login, 
-    (('username', str, False), 
-    ('password', str, False),
-    ('clientUa', str, False),
-    ('clientIp', str, False)),
-    {
-        'clientUa': clientUa,
-        'clientIp': clientIp
-    })
+    return SmartDbCaller(
+        calendar_db.common_login,
+        (
+            FormField("username", str, False),
+            FormField("password", str, False),
+            FormField("clientUa", str, False),
+            FormField("clientIp", str, False),
+        ),
+        {"clientUa": clientInfo.user_agent, "clientIp": clientInfo.ip_addr},
+    )
 
-@app.route('/api/common/webLogin', methods=['POST'])
+
+@app.route("/common/webLogin", methods=["POST"])
 def api_common_webLoginHandle():
-    # construct client data first
-    clientUa = request.user_agent.string
-    if request.headers.getlist("X-Forwarded-For"):
-        clientIp = request.headers.getlist("X-Forwarded-For")[0]
-    else:
-        clientIp = request.remote_addr
+    clientInfo = FetchClientNetworkInfo()
 
-    return SmartDbCaller(calendar_db.common_webLogin, 
-    (('username', str, False), 
-    ('password', str, False),
-    ('clientUa', str, False),
-    ('clientIp', str, False)),
-    {
-        'clientUa': clientUa,
-        'clientIp': clientIp
-    })
+    return SmartDbCaller(
+        calendar_db.common_webLogin,
+        (
+            FormField("username", str, False),
+            FormField("password", str, False),
+            FormField("clientUa", str, False),
+            FormField("clientIp", str, False),
+        ),
+        {"clientUa": clientInfo.user_agent, "clientIp": clientInfo.ip_addr},
+    )
 
-@app.route('/api/common/logout', methods=['POST'])
+
+@app.route("/common/logout", methods=["POST"])
 def api_common_logoutHandle():
-    return SmartDbCaller(calendar_db.common_logout, 
-    (('token', str, False), ),
-    None)
+    return SmartDbCaller(
+        calendar_db.common_logout, (FormField("token", str, False),), None
+    )
 
-@app.route('/api/common/tokenValid', methods=['POST'])
+
+@app.route("/common/tokenValid", methods=["POST"])
 def api_common_tokenValidHandle():
-    return SmartDbCaller(calendar_db.common_tokenValid, 
-    (('token', str, False), ),
-    None)
+    return SmartDbCaller(
+        calendar_db.common_tokenValid, (FormField("token", str, False),), None
+    )
 
-# ================================ calendar
 
-@app.route('/api/calendar/getFull', methods=['POST'])
+# endregion
+
+# region: Calendar
+
+
+@app.route("/calendar/getFull", methods=["POST"])
 def api_calendar_getFullHandle():
-    return SmartDbCaller(calendar_db.calendar_getFull, 
-    (('token', str, False),
-    ('startDateTime', int, False),
-    ('endDateTime', int, False)),
-    None)
+    return SmartDbCaller(
+        calendar_db.calendar_getFull,
+        (
+            FormField("token", str, False),
+            FormField("startDateTime", int, False),
+            FormField("endDateTime", int, False),
+        ),
+        None,
+    )
 
-@app.route('/api/calendar/getList', methods=['POST'])
+
+@app.route("/calendar/getList", methods=["POST"])
 def api_calendar_getListHandle():
-    return SmartDbCaller(calendar_db.calendar_getList, 
-    (('token', str, False),
-    ('startDateTime', int, False),
-    ('endDateTime', int, False)),
-    None)
+    return SmartDbCaller(
+        calendar_db.calendar_getList,
+        (
+            FormField("token", str, False),
+            FormField("startDateTime", int, False),
+            FormField("endDateTime", int, False),
+        ),
+        None,
+    )
 
-@app.route('/api/calendar/getDetail', methods=['POST'])
+
+@app.route("/calendar/getDetail", methods=["POST"])
 def api_calendar_getDetailHandle():
-    return SmartDbCaller(calendar_db.calendar_getDetail, 
-    (('token', str, False),
-    ('uuid', str, False)),
-    None)
+    return SmartDbCaller(
+        calendar_db.calendar_getDetail,
+        (FormField("token", str, False), FormField("uuid", str, False)),
+        None,
+    )
 
-@app.route('/api/calendar/update', methods=['POST'])
+
+@app.route("/calendar/update", methods=["POST"])
 def api_calendar_updateHandle():
-    return SmartDbCaller(calendar_db.calendar_update, 
-    (('token', str, False),
-    ('uuid', str, False),
-    ('belongTo', str, True),
-    ('title', str, True),
-    ('description', str, True),
-    ('eventDateTimeStart', int, True),
-    ('eventDateTimeEnd', int, True),
-    ('loopRules', str, True),
-    ('timezoneOffset', int, True),
-    ('lastChange', str, False)),
-    None)
+    return SmartDbCaller(
+        calendar_db.calendar_update,
+        (
+            FormField("token", str, False),
+            FormField("uuid", str, False),
+            FormField("belongTo", str, True),
+            FormField("title", str, True),
+            FormField("description", str, True),
+            FormField("eventDateTimeStart", int, True),
+            FormField("eventDateTimeEnd", int, True),
+            FormField("loopRules", str, True),
+            FormField("timezoneOffset", int, True),
+            FormField("lastChange", str, False),
+        ),
+        None,
+    )
 
-@app.route('/api/calendar/add', methods=['POST'])
+
+@app.route("/calendar/add", methods=["POST"])
 def api_calendar_addHandle():
-    return SmartDbCaller(calendar_db.calendar_add, 
-    (('token', str, False),
-    ('belongTo', str, False),
-    ('title', str, False),
-    ('description', str, False),
-    ('eventDateTimeStart', int, False),
-    ('eventDateTimeEnd', int, False),
-    ('loopRules', str, False),
-    ('timezoneOffset', int, False)),
-    None)
+    return SmartDbCaller(
+        calendar_db.calendar_add,
+        (
+            FormField("token", str, False),
+            FormField("belongTo", str, False),
+            FormField("title", str, False),
+            FormField("description", str, False),
+            FormField("eventDateTimeStart", int, False),
+            FormField("eventDateTimeEnd", int, False),
+            FormField("loopRules", str, False),
+            FormField("timezoneOffset", int, False),
+        ),
+        None,
+    )
 
-@app.route('/api/calendar/delete', methods=['POST'])
+
+@app.route("/calendar/delete", methods=["POST"])
 def api_calendar_deleteHandle():
-    return SmartDbCaller(calendar_db.calendar_delete, 
-    (('token', str, False),
-    ('uuid', str, False),
-    ('lastChange', str, False)),
-    None)
+    return SmartDbCaller(
+        calendar_db.calendar_delete,
+        (
+            FormField("token", str, False),
+            FormField("uuid", str, False),
+            FormField("lastChange", str, False),
+        ),
+        None,
+    )
 
-# ================================ collection
 
-@app.route('/api/collection/getFullOwn', methods=['POST'])
+# endregion
+
+# region: Collection
+
+
+@app.route("/collection/getFullOwn", methods=["POST"])
 def api_collection_getFullOwnHandle():
-    return SmartDbCaller(calendar_db.collection_getFullOwn, 
-    (('token', str, False), ),
-    None)
+    return SmartDbCaller(
+        calendar_db.collection_getFullOwn, (FormField("token", str, False),), None
+    )
 
-@app.route('/api/collection/getListOwn', methods=['POST'])
+
+@app.route("/collection/getListOwn", methods=["POST"])
 def api_collection_getListOwnHandle():
-    return SmartDbCaller(calendar_db.collection_getListOwn, 
-    (('token', str, False), ),
-    None)
+    return SmartDbCaller(
+        calendar_db.collection_getListOwn, (FormField("token", str, False),), None
+    )
 
-@app.route('/api/collection/getDetailOwn', methods=['POST'])
+
+@app.route("/collection/getDetailOwn", methods=["POST"])
 def api_collection_getDetailOwnHandle():
-    return SmartDbCaller(calendar_db.collection_getDetailOwn, 
-    (('token', str, False), 
-    ('uuid', str, False)),
-    None)
+    return SmartDbCaller(
+        calendar_db.collection_getDetailOwn,
+        (FormField("token", str, False), FormField("uuid", str, False)),
+        None,
+    )
 
-@app.route('/api/collection/addOwn', methods=['POST'])
+
+@app.route("/collection/addOwn", methods=["POST"])
 def api_collection_addOwnHandle():
-    return SmartDbCaller(calendar_db.collection_addOwn, 
-    (('token', str, False), 
-    ('name', str, False)),
-    None)
+    return SmartDbCaller(
+        calendar_db.collection_addOwn,
+        (FormField("token", str, False), FormField("name", str, False)),
+        None,
+    )
 
-@app.route('/api/collection/updateOwn', methods=['POST'])
+
+@app.route("/collection/updateOwn", methods=["POST"])
 def api_collection_updateOwnHandle():
-    return SmartDbCaller(calendar_db.collection_updateOwn, 
-    (('token', str, False), 
-    ('uuid', str, False),
-    ('name', str, False), 
-    ('lastChange', str, False)),
-    None)
+    return SmartDbCaller(
+        calendar_db.collection_updateOwn,
+        (
+            FormField("token", str, False),
+            FormField("uuid", str, False),
+            FormField("name", str, False),
+            FormField("lastChange", str, False),
+        ),
+        None,
+    )
 
-@app.route('/api/collection/deleteOwn', methods=['POST'])
+
+@app.route("/collection/deleteOwn", methods=["POST"])
 def api_collection_deleteOwnHandle():
-    return SmartDbCaller(calendar_db.collection_deleteOwn, 
-    (('token', str, False), 
-    ('uuid', str, False),
-    ('lastChange', str, False)),
-    None)
+    return SmartDbCaller(
+        calendar_db.collection_deleteOwn,
+        (
+            FormField("token", str, False),
+            FormField("uuid", str, False),
+            FormField("lastChange", str, False),
+        ),
+        None,
+    )
 
 
-@app.route('/api/collection/getSharing', methods=['POST'])
+@app.route("/collection/getSharing", methods=["POST"])
 def api_collection_getSharingHandle():
-    return SmartDbCaller(calendar_db.collection_getSharing, 
-    (('token', str, False), 
-    ('uuid', str, False)),
-    None)
+    return SmartDbCaller(
+        calendar_db.collection_getSharing,
+        (FormField("token", str, False), FormField("uuid", str, False)),
+        None,
+    )
 
-@app.route('/api/collection/deleteSharing', methods=['POST'])
+
+@app.route("/collection/deleteSharing", methods=["POST"])
 def api_collection_deleteSharingHandle():
-    return SmartDbCaller(calendar_db.collection_deleteSharing, 
-    (('token', str, False), 
-    ('uuid', str, False),
-    ('target', str, False),
-    ('lastChange', str, False)),
-    None)
+    return SmartDbCaller(
+        calendar_db.collection_deleteSharing,
+        (
+            FormField("token", str, False),
+            FormField("uuid", str, False),
+            FormField("target", str, False),
+            FormField("lastChange", str, False),
+        ),
+        None,
+    )
 
-@app.route('/api/collection/addSharing', methods=['POST'])
+
+@app.route("/collection/addSharing", methods=["POST"])
 def api_collection_addSharingHandle():
-    return SmartDbCaller(calendar_db.collection_addSharing, 
-    (('token', str, False), 
-    ('uuid', str, False),
-    ('target', str, False),
-    ('lastChange', str, False)),
-    None)
+    return SmartDbCaller(
+        calendar_db.collection_addSharing,
+        (
+            FormField("token", str, False),
+            FormField("uuid", str, False),
+            FormField("target", str, False),
+            FormField("lastChange", str, False),
+        ),
+        None,
+    )
 
 
-@app.route('/api/collection/getShared', methods=['POST'])
+@app.route("/collection/getShared", methods=["POST"])
 def api_collection_getSharedHandle():
-    return SmartDbCaller(calendar_db.collection_getShared, 
-    (('token', str, False), ),
-    None)
+    return SmartDbCaller(
+        calendar_db.collection_getShared, (FormField("token", str, False),), None
+    )
 
-# ================================ todo
 
-@app.route('/api/todo/getFull', methods=['POST'])
+# endregion
+
+# region: Todo
+
+
+@app.route("/todo/getFull", methods=["POST"])
 def api_todo_getFullHandle():
-    return SmartDbCaller(calendar_db.todo_getFull, 
-    (('token', str, False), ),
-    None)
+    return SmartDbCaller(
+        calendar_db.todo_getFull, (FormField("token", str, False),), None
+    )
 
-@app.route('/api/todo/getList', methods=['POST'])
+
+@app.route("/todo/getList", methods=["POST"])
 def api_todo_getListHandle():
-    return SmartDbCaller(calendar_db.todo_getList, 
-    (('token', str, False), ),
-    None)
+    return SmartDbCaller(
+        calendar_db.todo_getList, (FormField("token", str, False),), None
+    )
 
-@app.route('/api/todo/getDetail', methods=['POST'])
+
+@app.route("/todo/getDetail", methods=["POST"])
 def api_todo_getDetailHandle():
-    return SmartDbCaller(calendar_db.todo_getDetail, 
-    (('token', str, False), 
-    ('uuid', str, False)),
-    None)
+    return SmartDbCaller(
+        calendar_db.todo_getDetail,
+        (FormField("token", str, False), FormField("uuid", str, False)),
+        None,
+    )
 
-@app.route('/api/todo/add', methods=['POST'])
+
+@app.route("/todo/add", methods=["POST"])
 def api_todo_addHandle():
-    return SmartDbCaller(calendar_db.todo_add, 
-    (('token', str, False), ),
-    None)
+    return SmartDbCaller(calendar_db.todo_add, (FormField("token", str, False),), None)
 
-@app.route('/api/todo/update', methods=['POST'])
+
+@app.route("/todo/update", methods=["POST"])
 def api_todo_updateHandle():
-    return SmartDbCaller(calendar_db.todo_update, 
-    (('token', str, False), 
-    ('uuid', str, False), 
-    ('data', str, False), 
-    ('lastChange', str, False)),
-    None)
+    return SmartDbCaller(
+        calendar_db.todo_update,
+        (
+            FormField("token", str, False),
+            FormField("uuid", str, False),
+            FormField("data", str, False),
+            FormField("lastChange", str, False),
+        ),
+        None,
+    )
 
-@app.route('/api/todo/delete', methods=['POST'])
+
+@app.route("/todo/delete", methods=["POST"])
 def api_todo_deleteHandle():
-    return SmartDbCaller(calendar_db.todo_delete, 
-    (('token', str, False), 
-    ('uuid', str, False), 
-    ('lastChange', str, False)),
-    None)
+    return SmartDbCaller(
+        calendar_db.todo_delete,
+        (
+            FormField("token", str, False),
+            FormField("uuid", str, False),
+            FormField("lastChange", str, False),
+        ),
+        None,
+    )
 
-# ================================ admin
 
-@app.route('/api/admin/get', methods=['POST'])
+# endregion
+
+# region: Admin
+
+
+@app.route("/admin/get", methods=["POST"])
 def api_admin_getHandle():
-    return SmartDbCaller(calendar_db.admin_get, 
-    (('token', str, False), ),
-    None)
+    return SmartDbCaller(calendar_db.admin_get, (FormField("token", str, False),), None)
 
-@app.route('/api/admin/add', methods=['POST'])
+
+@app.route("/admin/add", methods=["POST"])
 def api_admin_addHandle():
-    return SmartDbCaller(calendar_db.admin_add, 
-    (('token', str, False), 
-    ('username', str, False)),
-    None)
+    return SmartDbCaller(
+        calendar_db.admin_add,
+        (FormField("token", str, False), FormField("username", str, False)),
+        None,
+    )
 
-@app.route('/api/admin/update', methods=['POST'])
+
+@app.route("/admin/update", methods=["POST"])
 def api_admin_updateHandle():
-    return SmartDbCaller(calendar_db.admin_update, 
-    (('token', str, False), 
-    ('username', str, False),
-    ('password', str, True),
-    ('isAdmin', utils.Str2Bool, True)),
-    None)
+    return SmartDbCaller(
+        calendar_db.admin_update,
+        (
+            FormField("token", str, False),
+            FormField("username", str, False),
+            FormField("password", str, True),
+            FormField("isAdmin", utils.Str2Bool, True),
+        ),
+        None,
+    )
 
-@app.route('/api/admin/delete', methods=['POST'])
+
+@app.route("/admin/delete", methods=["POST"])
 def api_admin_deleteHandle():
-    return SmartDbCaller(calendar_db.admin_delete, 
-    (('token', str, False), 
-    ('username', str, False)),
-    None)
+    return SmartDbCaller(
+        calendar_db.admin_delete,
+        (FormField("token", str, False), FormField("username", str, False)),
+        None,
+    )
 
-# ================================ profile
 
-@app.route('/api/profile/isAdmin', methods=['POST'])
+# endregion
+
+# region: Profile
+
+
+@app.route("/profile/isAdmin", methods=["POST"])
 def api_profile_isAdminHandle():
-    return SmartDbCaller(calendar_db.profile_isAdmin, 
-    (('token', str, False), ),
-    None)
+    return SmartDbCaller(
+        calendar_db.profile_isAdmin, (FormField("token", str, False),), None
+    )
 
-@app.route('/api/profile/changePassword', methods=['POST'])
+
+@app.route("/profile/changePassword", methods=["POST"])
 def api_profile_changePasswordHandle():
-    return SmartDbCaller(calendar_db.profile_changePassword, 
-    (('token', str, False),
-    ('password', str, False)),
-    None)
+    return SmartDbCaller(
+        calendar_db.profile_changePassword,
+        (FormField("token", str, False), FormField("password", str, False)),
+        None,
+    )
 
-@app.route('/api/profile/getToken', methods=['POST'])
+
+@app.route("/profile/getToken", methods=["POST"])
 def api_profile_getTokenHandle():
-    return SmartDbCaller(calendar_db.profile_getToken, 
-    (('token', str, False), ),
-    None)
+    return SmartDbCaller(
+        calendar_db.profile_getToken, (FormField("token", str, False),), None
+    )
 
-@app.route('/api/profile/deleteToken', methods=['POST'])
+
+@app.route("/profile/deleteToken", methods=["POST"])
 def api_profile_deleteTokenHandle():
-    return SmartDbCaller(calendar_db.profile_deleteToken, 
-    (('token', str, False),
-    ('deleteToken', str, False)),
-    None)
+    return SmartDbCaller(
+        calendar_db.profile_deleteToken,
+        (FormField("token", str, False), FormField("deleteToken", str, False)),
+        None,
+    )
 
-# =============================================main run
 
-'''
-def UpdateStaticResources():
-    global render_static_resources
-    if render_static_resources is not None:
-        return
+# endregion
 
-    render_static_resources = {
-        'url_js_localStorageAssist': url_for('static', filename='js/localStorageAssist.js'),
-        'url_js_i18n': url_for('static', filename='js/i18n.js'),
-        'url_js_api': url_for('static', filename='js/api.js'),
-        'url_js_headerNav': url_for('static', filename='js/headerNav.js'),
+# endregion
 
-        'url_tmpl_headerNac': url_for('static', filename='tmpl/headerNav.tmpl'),
+# region: Utilities
 
-        'url_js_pageHome': url_for('static', filename='js/page/home.js')
-    }
-'''
 
-def SmartDbCaller(dbMethod, paramTuple, extraDict):
-    result = (False, 'Invalid parameter', None)
-    optCount = 0
-    paramList = []
-    optParamDict = {}
-    # for each item, 
-    # item[0] is field name. 
-    # item[1] is type. 
-    # item[2] is whether it is optional field
-    realForm = request.form.to_dict()
-    if extraDict is not None:
-        realForm.update(extraDict)
-    for item in paramTuple:
-        cache = item[1](realForm.get(item[0], None))
-        if item[2]:
+@dataclass(frozen=True)
+class ClientNetworkInfo:
+    user_agent: str
+    """The user agent of client."""
+    ip_addr: str
+    """The IP address of client."""
+
+
+def FetchClientNetworkInfo() -> ClientNetworkInfo:
+    clientUa = request.user_agent.string
+    forwardIpList = request.headers.getlist("X-Forwarded-For")
+    if forwardIpList:
+        clientIp = forwardIpList[0]
+    else:
+        directIp = request.remote_addr
+        if directIp is not None:
+            clientIp = directIp
+        else:
+            clientIp = "0.0.0.0"
+
+    return ClientNetworkInfo(clientUa, clientIp)
+
+
+@dataclass(frozen=True)
+class FormField:
+    name: str
+    """The name of form field."""
+    ty: Callable[[str], Any]
+    """The type of form field."""
+    is_optional: bool
+    """True if this form field is optional, otherwise false."""
+
+
+def SmartDbCaller(
+    db_method: Callable[..., ResponseBody[Any]],
+    fields: tuple[FormField, ...],
+    padding_form: dict[str, str] | None,
+) -> dict[str, Any]:
+    opt_param_counter = 0
+    lost_required: bool = False
+    param_list: list[Any] = []
+    opt_param_dict: dict[str, Any] = {}
+
+    # fetch user passed form
+    user_form: dict[str, str] = request.form.to_dict()
+    LOGGER.debug(f"User Form: {user_form}")
+    # overwrite user form by our padding form
+    if padding_form is not None:
+        user_form.update(padding_form)
+    LOGGER.debug(f"Padded User Form: {user_form}")
+
+    # check fields one by one
+    for field in fields:
+        value = user_form.get(field.name, None)
+        if value is not None:
+            value = field.ty(value)
+
+        if field.is_optional:
             # optional param
-            if cache is not None:
-                optParamDict[item[0]] = cache
-            optCount += 1
+            if value is not None:
+                opt_param_dict[field.name] = value
+            opt_param_counter += 1
         else:
-            if cache is None:
-                break
-            paramList.append(cache)
+            # required param
+            if value is None:
+                lost_required = True
             else:
-        # at least one opt param
-        if optCount == 0 or len(optParamDict) != 0:
-            result = dbMethod(*paramList, **optParamDict)
+                param_list.append(value)
+
+    # Only execute database function if there is no lost required fields.
+    # And fulfill one of following requirements:
+    # 1. There are all required fields (optional parameter count is zero).
+    # 1. Or, there is some optional parameter.
+    LOGGER.debug(f"Has Lost Required Parameter: {lost_required}")
+    LOGGER.debug(f"All Optional Parameter Count: {opt_param_counter}")
+    LOGGER.debug(f"Available Optional Parameter Count: {len(opt_param_dict)}")
+    result: ResponseBody[Any]
+    if lost_required == False and (opt_param_counter == 0 or len(opt_param_dict) != 0):
+        result = db_method(*param_list, **opt_param_dict)
+    else:
+        result = ResponseBody(False, "Invalid parameter", None)
 
     return ConstructResponseBody(result)
 
-def ConstructResponseBody(returnedTuple):
-    return {
-        'success': returnedTuple[0],
-        'error': returnedTuple[1],
-        'data': returnedTuple[2]
-    }
+
+def ConstructResponseBody(body: ResponseBody[Any]) -> dict[str, Any]:
+    return {"success": body.success, "error": body.error, "data": body.data}
+
+
+# endregion
+
 
 def run():
     calendar_db.open()
     app.run(port=config.get_config().web.port)
     calendar_db.close()
-    

backend/sql/sqlite.sql

@@ -1,67 +1,67 @@
 CREATE TABLE user(
-    [ccn_name] TEXT NOT NULL,
-    [ccn_password] TEXT NOT NULL,
-    [ccn_isAdmin] TINYINT NOT NULL CHECK(ccn_isAdmin = 1 OR ccn_isAdmin = 0),
-    [ccn_salt] INTEGER NOT NULL,
+    [name] TEXT NOT NULL,
+    [password] TEXT NOT NULL,
+    [is_admin] TINYINT NOT NULL CHECK(is_admin = 1 OR is_admin = 0),
+    [salt] INTEGER NOT NULL,
 
-    PRIMARY KEY (ccn_name)
+    PRIMARY KEY (name)
 );
 
 CREATE TABLE token(
-    [ccn_user] TEXT NOT NULL,
-    [ccn_token] TEXT UNIQUE NOT NULL,
-    [ccn_tokenExpireOn] BIGINT NOT NULL,
-    [ccn_ua] TEXT NOT NULL,
-    [ccn_ip] TEXT NOT NULL,
+    [user] TEXT NOT NULL,
+    [token] TEXT UNIQUE NOT NULL,
+    [token_expire_on] BIGINT NOT NULL,
+    [ua] TEXT NOT NULL,
+    [ip] TEXT NOT NULL,
 
-    FOREIGN KEY (ccn_user) REFERENCES user(ccn_name) ON DELETE CASCADE
+    FOREIGN KEY (user) REFERENCES user(name) ON DELETE CASCADE
 );
 
 CREATE TABLE collection(
-    [ccn_uuid] TEXT NOT NULL,
-    [ccn_name] TEXT NOT NULL,
-    [ccn_user] TEXT NOT NULL,
-    [ccn_lastChange] TEXT NOT NULL,
+    [uuid] TEXT NOT NULL,
+    [name] TEXT NOT NULL,
+    [user] TEXT NOT NULL,
+    [last_change] TEXT NOT NULL,
 
-    PRIMARY KEY (ccn_uuid),
-    FOREIGN KEY (ccn_user) REFERENCES user(ccn_name) ON DELETE CASCADE
+    PRIMARY KEY (uuid),
+    FOREIGN KEY (user) REFERENCES user(name) ON DELETE CASCADE
 );
 
 CREATE TABLE share(
-    [ccn_uuid] TEXT NOT NULL,
-    [ccn_target] TEXT NOT NULL,
+    [uuid] TEXT NOT NULL,
+    [target] TEXT NOT NULL,
 
-    FOREIGN KEY (ccn_uuid) REFERENCES collection(ccn_uuid) ON DELETE CASCADE
-    FOREIGN KEY (ccn_target) REFERENCES user(ccn_name) ON DELETE CASCADE
+    FOREIGN KEY (uuid) REFERENCES collection(uuid) ON DELETE CASCADE
+    FOREIGN KEY (target) REFERENCES user(name) ON DELETE CASCADE
 );
 
 CREATE TABLE calendar(
-    [ccn_uuid] TEXT NOT NULL,
-    [ccn_belongTo] TEXT NOT NULL,
+    [uuid] TEXT NOT NULL,
+    [belong_to] TEXT NOT NULL,
 
-    [ccn_title] TEXT NOT NULL,
-    [ccn_description] TEXT NOT NULL,
-    [ccn_lastChange] TEXT NOT NULL,
+    [title] TEXT NOT NULL,
+    [description] TEXT NOT NULL,
+    [last_change] TEXT NOT NULL,
 
-    [ccn_eventDateTimeStart] BIGINT NOT NULL,
-    [ccn_eventDateTimeEnd] BIGINT NOT NULL,
-    [ccn_timezoneOffset] INT NOT NULL,
+    [event_date_time_start] BIGINT NOT NULL,
+    [event_date_time_end] BIGINT NOT NULL,
+    [timezone_offset] INT NOT NULL,
     
-    [ccn_loopRules] TEXT NOT NULL,
-    [ccn_loopDateTimeStart] BIGINT NOT NULL,
-    [ccn_loopDateTimeEnd] BIGINT NOT NULL,
+    [loop_rules] TEXT NOT NULL,
+    [loop_date_time_start] BIGINT NOT NULL,
+    [loop_date_time_end] BIGINT NOT NULL,
 
-    PRIMARY KEY (ccn_uuid),
-    FOREIGN KEY (ccn_belongTo) REFERENCES collection(ccn_uuid) ON DELETE CASCADE
+    PRIMARY KEY (uuid),
+    FOREIGN KEY (belong_to) REFERENCES collection(uuid) ON DELETE CASCADE
 );
 
 CREATE TABLE todo(
-    [ccn_uuid] TEXT NOT NULL,
-    [ccn_belongTo] TEXT NOT NULL,
+    [uuid] TEXT NOT NULL,
+    [belong_to] TEXT NOT NULL,
 
-    [ccn_data] TEXT NOT NULL,
-    [ccn_lastChange] TEXT NOT NULL,
+    [data] TEXT NOT NULL,
+    [last_change] TEXT NOT NULL,
 
-    PRIMARY KEY (ccn_uuid),
-    FOREIGN KEY (ccn_belongTo) REFERENCES user(ccn_name) ON DELETE CASCADE
+    PRIMARY KEY (uuid),
+    FOREIGN KEY (belong_to) REFERENCES user(name) ON DELETE CASCADE
 );

backend/utils.py

@@ -3,50 +3,62 @@ import random
 import uuid
 import time
 import math
+import re
 
-ValidUsername = set(map(lambda x:chr(x), range(48, 58, 1))) | set(map(lambda x:chr(x), range(65, 91, 1))) | set(map(lambda x:chr(x), range(97, 123, 1)))
-ValidPassword = set(map(lambda x:chr(x), range(33, 127, 1)))
+USERNAME_PATTERN: re.Pattern = re.compile("^[0-9A-Za-z]+$")
+PASSWORD_PATTERN: re.Pattern = re.compile("^[!-~]+$")
 
-def IsValidUsername(strl):
-    return (len(set(strl) - ValidUsername) == 0)
 
-def IsValidPassword(strl):
-    return (len(set(strl) - ValidPassword) == 0)
+def IsValidUsername(strl: str) -> bool:
+    return USERNAME_PATTERN.match(strl) is not None
 
-def ComputePasswordHash(password):
+
+def IsValidPassword(strl: str) -> bool:
+    return PASSWORD_PATTERN.match(strl) is not None
+
+
+def ComputePasswordHash(password: str) -> str:
     s = hashlib.sha256()
-    s.update(password.encode('utf-8'))
+    s.update(password.encode("utf-8"))
     return s.hexdigest()
 
-def GenerateUUID():
+
+def GenerateUUID() -> str:
     return str(uuid.uuid1())
 
-def GenerateToken(username):
+
+def GenerateToken(username: str) -> str:
     s = hashlib.sha256()
-    s.update(username.encode('utf-8'))
-    s.update(GenerateUUID().encode('utf-8'))
+    s.update(username.encode("utf-8"))
+    s.update(GenerateUUID().encode("utf-8"))
     return s.hexdigest()
 
-def GenerateSalt():
+
+def GenerateSalt() -> int:
     return random.randint(0, 6172748)
 
-def ComputePasswordHashWithSalt(passwordHashed, salt):
+
+def ComputePasswordHashWithSalt(passwordHashed: str, salt: int) -> str:
     s = hashlib.sha256()
-    s.update((passwordHashed + str(salt)).encode('utf-8'))
+    s.update((passwordHashed + str(salt)).encode("utf-8"))
     return s.hexdigest()
 
-def GetCurrentTimestamp():
+
+def GetCurrentTimestamp() -> int:
     return int(time.time())
 
-def GetTokenExpireOn():
+
+def GetTokenExpireOn() -> int:
     return GetCurrentTimestamp() + 60 * 60 * 24 * 2  # add 2 day from now
 
-def Str2Bool(strl):
-    return strl.lower() == 'true'
 
-def GCD(a, b):
+def Str2Bool(strl: str) -> bool:
+    return strl.lower() == "true"
+
+
+def GCD(a: int, b: int) -> int:
     return math.gcd(a, b)
 
-def LCM(a, b):
-    return int(a * b / GCD(a, b))
 
+def LCM(a: int, b: int) -> int:
+    return (a * b) // GCD(a, b)

frontend/.editorconfig

@@ -0,0 +1,8 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+end_of_line = lf
+max_line_length = 100

frontend/.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

frontend/.gitignore

@@ -0,0 +1,39 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
+
+.eslintcache
+
+# Cypress
+/cypress/videos/
+/cypress/screenshots/
+
+# Vitest
+__screenshots__/
+
+# Vite
+*.timestamp-*-*.mjs

frontend/.oxlintrc.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["eslint", "typescript", "unicorn", "oxc", "vue"],
+  "env": {
+    "browser": true
+  },
+  "categories": {
+    "correctness": "error"
+  }
+}

frontend/README.md

@@ -0,0 +1,48 @@
+# coleaf-frontend
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Recommended Browser Setup
+
+- Chromium-based browsers (Chrome, Edge, Brave, etc.):
+  - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
+  - [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
+- Firefox:
+  - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
+  - [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+pnpm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+pnpm dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+pnpm build
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+pnpm lint
+```

frontend/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

frontend/eslint.config.ts

@@ -0,0 +1,23 @@
+import { globalIgnores } from 'eslint/config'
+import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
+import pluginVue from 'eslint-plugin-vue'
+import pluginOxlint from 'eslint-plugin-oxlint'
+
+// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
+// import { configureVueProject } from '@vue/eslint-config-typescript'
+// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
+// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
+
+export default defineConfigWithVueTs(
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{vue,ts,mts,tsx}'],
+  },
+
+  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
+
+  ...pluginVue.configs['flat/essential'],
+  vueTsConfigs.recommended,
+
+  ...pluginOxlint.buildFromOxlintConfigFile('.oxlintrc.json'),
+)

frontend/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="">
+
+<head>
+  <meta charset="UTF-8">
+  <link rel="icon" href="/favicon.ico">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>coconut-leaf</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>

frontend/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "coleaf-frontend",
+  "version": "2.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build",
+    "lint": "run-s lint:*",
+    "lint:oxlint": "oxlint . --fix",
+    "lint:eslint": "eslint . --fix --cache"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^7.2.0",
+    "@fortawesome/free-solid-svg-icons": "^7.2.0",
+    "@fortawesome/vue-fontawesome": "^3.2.0",
+    "axios": "1.14.0",
+    "bulma": "0.9.1",
+    "pinia": "^3.0.4",
+    "pinia-plugin-persistedstate": "^4.7.1",
+    "vue": "^3.5.32",
+    "vue-router": "^5.0.4"
+  },
+  "devDependencies": {
+    "@tsconfig/node24": "^24.0.4",
+    "@types/node": "^24.12.2",
+    "@vitejs/plugin-vue": "^6.0.6",
+    "@vue/eslint-config-typescript": "^14.7.0",
+    "@vue/tsconfig": "^0.9.1",
+    "eslint": "^10.2.1",
+    "eslint-plugin-oxlint": "~1.60.0",
+    "eslint-plugin-vue": "~10.8.0",
+    "jiti": "^2.6.1",
+    "npm-run-all2": "^8.0.4",
+    "oxlint": "~1.60.0",
+    "typescript": "~6.0.0",
+    "vite": "^8.0.8",
+    "vite-plugin-vue-devtools": "^8.1.1",
+    "vue-tsc": "^3.2.6"
+  },
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  }
+}

frontend/public/index.scss

@@ -0,0 +1,40 @@
+// 导入 Bulma
+@charset "utf-8";
+@import "bulma/bulma.sass";
+
+// coconut-leaf 全局样式
+
+// 卡片样式（作用于集合列表，Todo列表项等）
+div.paperbox-item {
+  display: flex;
+  flex-flow: row;
+  align-items: flex-start;
+
+  padding: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
+div.paperbox-item-words {
+  flex-grow: 1;
+  flex-basis: 0;
+
+  word-break: break-all;
+}
+
+div.paperbox-item-icon {
+  margin-left: 0.75rem;
+}
+
+// 按钮列表样式
+
+div.button-list {
+  display: flex;
+  flex-flow: row;
+  flex-wrap: wrap;
+}
+
+div.button-list>* {
+  margin-right: 0.75rem;
+  margin-bottom: 0.75rem;
+  margin-left: 0 !important;
+}

frontend/src/App.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useLanguageStore } from './stores/language';
+import { useTokenStore } from './stores/token';
+import MessageBox from '@/components/MessageBox.vue';
+import { logout as apiCommonLogout } from './api/common';
+import { goToHome } from '@/router';
+
+const language = useLanguageStore();
+const token = useTokenStore();
+
+const isBurgerActive = ref<boolean>(false);
+
+const messagebox = ref<InstanceType<typeof MessageBox>>();
+
+const logout = async () => {
+  const tokenStore = useTokenStore();
+  const rv = await apiCommonLogout(tokenStore.currentToken);
+  if (rv) {
+    // OK. We logged out.
+    // Clear token.
+    tokenStore.logout();
+    // And go to Home page
+    goToHome();
+  } else {
+    // Show logout error.
+    messagebox.value?.show("Fail to logout due to unknow reason. Consider refreshing page to solve problem.");
+  }
+}
+
+// Process burger menu.
+// This is copied from Bulma website and modified for Vue.
+// Check for click events on the navbar burger icon
+const toggleBurger = () => {
+  // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+  isBurgerActive.value = !isBurgerActive
+}
+
+</script>
+
+<template>
+  <nav class="navbar has-shadow is-spaced bd-navbar" role="navigation" aria-label="main navigation">
+    <div class="navbar-brand">
+      <router-link class="navbar-item" to="/">
+        <img src="/favicon.ico"><b style="margin:0 0 0 14px;">coconut-leaf</b>
+      </router-link>
+
+      <a role="button" class="navbar-burger burger" :class="{ 'is-active': isBurgerActive }" @click="toggleBurger"
+        aria-label="menu" aria-expanded="false" data-target="coleaf-navbar">
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+      </a>
+    </div>
+
+    <div id="coleaf-navbar" class="navbar-menu" :class="{ 'is-active': isBurgerActive }">
+      <div class="navbar-start">
+        <router-link class="navbar-item" to="/home">Home</router-link>
+        <router-link v-if="token.isLoggedIn" class="navbar-item" to="/collection">Collection</router-link>
+        <router-link v-if="token.isLoggedIn" class="navbar-item" to="/calendar">Calendar</router-link>
+        <router-link v-if="token.isLoggedIn" class="navbar-item" to="/todo">Todo</router-link>
+        <router-link v-if="token.isLoggedIn" class="navbar-item" to="/admin">Admin</router-link>
+      </div>
+
+      <div class="navbar-end">
+        <p class="navbar-item">
+          <router-link v-if="!token.isLoggedIn" class="button is-primary" to="/login">Login</router-link>
+        </p>
+        <p class="navbar-item">
+          <a v-if="token.isLoggedIn" class="button is-primary" @click="logout">Logout</a>
+        </p>
+
+        <div class="navbar-item has-dropdown is-hoverable">
+          <a v-if="language.isEnglish" class="navbar-link">English</a>
+          <a v-else-if="language.isSimplifiedChinese" class="navbar-link">简体中文</a>
+
+          <div class="navbar-dropdown">
+            <a @click="language.changeToEnglish()" class="navbar-item">English</a>
+            <a @click="language.changeToSimplifiedChinese()" class="navbar-item">简体中文</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </nav>
+
+  <!-- The output result of router -->
+  <router-view></router-view>
+
+  <MessageBox ref="messagebox" />
+</template>
+
+<style scoped></style>

frontend/src/api/admin.ts

@@ -0,0 +1,63 @@
+import { apiWrapper, boolApiWrapper } from './index';
+
+/** A raw admin user row as returned by the API (positional from SQL columns) */
+export type AdminUserRow = [
+  name: string,
+  isAdmin: boolean,
+];
+
+/**
+ * Fetch all users (admin only).
+ *
+ * @param token - The auth token (must belong to an admin user)
+ * @returns An array of {@link AdminUserRow} on success, or `undefined` on failure
+ */
+export async function get(token: string): Promise<AdminUserRow[] | undefined> {
+  return apiWrapper<AdminUserRow[]>('/api/admin/get', { token });
+}
+
+/**
+ * Create a new user (admin only).
+ *
+ * @param token - The auth token (must belong to an admin user)
+ * @param username - The new username
+ * @returns A single {@link AdminUserRow} of the newly created user on success, or `undefined` on failure
+ */
+export async function add(token: string, username: string): Promise<AdminUserRow | undefined> {
+  return apiWrapper<AdminUserRow>('/api/admin/add', { token, username });
+}
+
+/**
+ * Update an existing user's password and/or admin status (admin only).
+ *
+ * @param token - The auth token (must belong to an admin user)
+ * @param username - The target user's username
+ * @param password - (optional) The new password (plaintext, will be hashed server-side)
+ * @param isAdmin - (optional) Whether the user should be an admin
+ * @returns `true` on success, `false` on failure (or if no changes were provided)
+ */
+export async function update(
+  token: string,
+  username: string,
+  password?: string,
+  isAdmin?: boolean,
+): Promise<boolean> {
+  const data: Record<string, any> = { token, username };
+  if (password !== undefined) data.password = password;
+  if (isAdmin !== undefined) data.isAdmin = isAdmin;
+
+  if (Object.keys(data).length <= 2) return false;
+
+  return boolApiWrapper('/api/admin/update', data);
+}
+
+/**
+ * Delete a user (admin only).
+ *
+ * @param token - The auth token (must belong to an admin user)
+ * @param username - The username to delete
+ * @returns `true` on success, `false` on failure
+ */
+export async function del(token: string, username: string): Promise<boolean> {
+  return boolApiWrapper('/api/admin/delete', { token, username });
+}

frontend/src/api/calendar.ts

@@ -0,0 +1,172 @@
+import { apiWrapper, boolApiWrapper } from './index';
+
+/** A raw calendar row as returned by the API (positional from SQL columns) */
+export type CalendarRow = [
+  uuid: string,
+  belongTo: string,
+  title: string,
+  description: string,
+  lastChange: string,
+  eventDateTimeStart: number,
+  eventDateTimeEnd: number,
+  timezoneOffset: number,
+  loopRules: string,
+  loopDateTimeStart: number,
+  loopDateTimeEnd: number,
+];
+
+/** Serialized description object stored in the `description` column */
+export interface CalendarDescription {
+  description: string;
+  color: string;
+}
+
+/** Default color used when deserialization fails */
+const DEFAULT_COLOR = '#3388ff';
+
+/**
+ * Serialize a calendar description and color into a JSON string
+ * for storage in the `description` column.
+ *
+ * @param description - The description text
+ * @param color - The color string (e.g. `#ff0000`)
+ * @returns The JSON-serialized string
+ */
+export function serializeDescription(description: string, color: string): string {
+  return JSON.stringify({ description, color });
+}
+
+/**
+ * Deserialize a JSON description string back into an object.
+ * Returns a default object on parse errors.
+ *
+ * @param str - The JSON string to deserialize
+ * @returns The parsed {@link CalendarDescription} object
+ */
+export function deserializeDescription(str: string): CalendarDescription {
+  try {
+    return JSON.parse(str) as CalendarDescription;
+  } catch {
+    return { description: '', color: DEFAULT_COLOR };
+  }
+}
+
+/**
+ * Fetch all calendar events within the given time range for the current user.
+ *
+ * @param token - The auth token
+ * @param startDateTime - Start of the time range (unix timestamp)
+ * @param endDateTime - End of the time range (unix timestamp)
+ * @returns An array of {@link CalendarRow} on success, or `undefined` on failure
+ */
+export async function getFull(token: string, startDateTime: number, endDateTime: number): Promise<CalendarRow[] | undefined> {
+  return apiWrapper<CalendarRow[]>('/api/calendar/getFull', {
+    token,
+    startDateTime,
+    endDateTime,
+  });
+}
+
+/**
+ * Fetch the full detail of a single calendar event by UUID.
+ *
+ * @param token - The auth token
+ * @param uuid - The event UUID
+ * @returns A single {@link CalendarRow} on success, or `undefined` on failure
+ */
+export async function getDetail(token: string, uuid: string): Promise<CalendarRow | undefined> {
+  return apiWrapper<CalendarRow>('/api/calendar/getDetail', {
+    token,
+    uuid,
+  });
+}
+
+/**
+ * Update an existing calendar event. Only the fields provided will be updated.
+ *
+ * @param token - The auth token
+ * @param uuid - The event UUID
+ * @param lastChange - The last known `lastChange` value (optimistic concurrency)
+ * @param belongTo - (optional) Collection UUID this event belongs to
+ * @param title - (optional) Event title
+ * @param description - (optional) Event description (serialized JSON)
+ * @param eventDateTimeStart - (optional) Start time (unix timestamp)
+ * @param eventDateTimeEnd - (optional) End time (unix timestamp)
+ * @param loopRules - (optional) Loop rules string
+ * @param timezoneOffset - (optional) Timezone offset in minutes
+ * @returns The new `lastChange` value on success, or `undefined` on failure
+ */
+export async function update(
+  token: string,
+  uuid: string,
+  lastChange: string,
+  belongTo?: string,
+  title?: string,
+  description?: string,
+  eventDateTimeStart?: number,
+  eventDateTimeEnd?: number,
+  loopRules?: string,
+  timezoneOffset?: number,
+): Promise<string | undefined> {
+  const data: Record<string, any> = { token, uuid, lastChange };
+  if (belongTo !== undefined) data.belongTo = belongTo;
+  if (title !== undefined) data.title = title;
+  if (description !== undefined) data.description = description;
+  if (eventDateTimeStart !== undefined) data.eventDateTimeStart = eventDateTimeStart;
+  if (eventDateTimeEnd !== undefined) data.eventDateTimeEnd = eventDateTimeEnd;
+  if (loopRules !== undefined) data.loopRules = loopRules;
+  if (timezoneOffset !== undefined) data.timezoneOffset = timezoneOffset;
+
+  return apiWrapper<string>('/api/calendar/update', data);
+}
+
+/**
+ * Create a new calendar event.
+ *
+ * @param token - The auth token
+ * @param belongTo - Collection UUID this event belongs to
+ * @param title - Event title
+ * @param description - Event description (serialized JSON)
+ * @param eventDateTimeStart - Start time (unix timestamp)
+ * @param eventDateTimeEnd - End time (unix timestamp)
+ * @param loopRules - Loop rules string
+ * @param timezoneOffset - Timezone offset in minutes
+ * @returns The new event UUID on success, or `undefined` on failure
+ */
+export async function add(
+  token: string,
+  belongTo: string,
+  title: string,
+  description: string,
+  eventDateTimeStart: number,
+  eventDateTimeEnd: number,
+  loopRules: string,
+  timezoneOffset: number,
+): Promise<string | undefined> {
+  return apiWrapper<string>('/api/calendar/add', {
+    token,
+    belongTo,
+    title,
+    description,
+    eventDateTimeStart,
+    eventDateTimeEnd,
+    loopRules,
+    timezoneOffset,
+  });
+}
+
+/**
+ * Delete a calendar event.
+ *
+ * @param token - The auth token
+ * @param uuid - The event UUID
+ * @param lastChange - The last known `lastChange` value (optimistic concurrency)
+ * @returns `true` on success, `false` on failure
+ */
+export async function del(token: string, uuid: string, lastChange: string): Promise<boolean> {
+  return boolApiWrapper('/api/calendar/delete', {
+    token,
+    uuid,
+    lastChange,
+  });
+}

frontend/src/api/collection.ts

@@ -0,0 +1,119 @@
+import { apiWrapper, boolApiWrapper } from './index';
+
+/** A raw collection row as returned by the API (positional from SQL columns) */
+export type CollectionRow = [
+  uuid: string,
+  name: string,
+  lastChange: string,
+];
+
+/** A raw shared collection row as returned by the API */
+export type SharedCollectionRow = [
+  uuid: string,
+  name: string,
+  user: string,
+];
+
+/**
+ * Fetch all collections owned by the current user.
+ *
+ * @param token - The auth token
+ * @returns An array of {@link CollectionRow} on success, or `undefined` on failure
+ */
+export async function getFullOwn(token: string): Promise<CollectionRow[] | undefined> {
+  return apiWrapper<CollectionRow[]>('/api/collection/getFullOwn', { token });
+}
+
+/**
+ * Fetch the detail of a single owned collection by UUID.
+ *
+ * @param token - The auth token
+ * @param uuid - The collection UUID
+ * @returns A single {@link CollectionRow} on success, or `undefined` on failure
+ */
+export async function getDetailOwn(token: string, uuid: string): Promise<CollectionRow | undefined> {
+  return apiWrapper<CollectionRow>('/api/collection/getDetailOwn', { token, uuid });
+}
+
+/**
+ * Create a new collection.
+ *
+ * @param token - The auth token
+ * @param name - The collection name
+ * @returns The new collection UUID on success, or `undefined` on failure
+ */
+export async function addOwn(token: string, name: string): Promise<string | undefined> {
+  return apiWrapper<string>('/api/collection/addOwn', { token, name });
+}
+
+/**
+ * Update an existing collection's name.
+ *
+ * @param token - The auth token
+ * @param uuid - The collection UUID
+ * @param name - The new collection name
+ * @param lastChange - The last known `lastChange` value (optimistic concurrency)
+ * @returns The new `lastChange` value on success, or `undefined` on failure
+ */
+export async function updateOwn(token: string, uuid: string, name: string, lastChange: string): Promise<string | undefined> {
+  return apiWrapper<string>('/api/collection/updateOwn', { token, uuid, name, lastChange });
+}
+
+/**
+ * Delete an owned collection.
+ *
+ * @param token - The auth token
+ * @param uuid - The collection UUID
+ * @param lastChange - The last known `lastChange` value (optimistic concurrency)
+ * @returns `true` on success, `false` on failure
+ */
+export async function deleteOwn(token: string, uuid: string, lastChange: string): Promise<boolean> {
+  return boolApiWrapper('/api/collection/deleteOwn', { token, uuid, lastChange });
+}
+
+/**
+ * Fetch all users this collection is shared with.
+ *
+ * @param token - The auth token
+ * @param uuid - The collection UUID
+ * @returns An array of target usernames on success, or `undefined` on failure
+ */
+export async function getSharing(token: string, uuid: string): Promise<string[] | undefined> {
+  return apiWrapper<string[]>('/api/collection/getSharing', { token, uuid });
+}
+
+/**
+ * Remove a sharing target from a collection.
+ *
+ * @param token - The auth token
+ * @param uuid - The collection UUID
+ * @param target - The username to unshare with
+ * @param lastChange - The last known `lastChange` value (optimistic concurrency)
+ * @returns The new `lastChange` value on success, or `undefined` on failure
+ */
+export async function deleteSharing(token: string, uuid: string, target: string, lastChange: string): Promise<string | undefined> {
+  return apiWrapper<string>('/api/collection/deleteSharing', { token, uuid, target, lastChange });
+}
+
+/**
+ * Add a sharing target to a collection.
+ *
+ * @param token - The auth token
+ * @param uuid - The collection UUID
+ * @param target - The username to share with
+ * @param lastChange - The last known `lastChange` value (optimistic concurrency)
+ * @returns The new `lastChange` value on success, or `undefined` on failure
+ */
+export async function addSharing(token: string, uuid: string, target: string, lastChange: string): Promise<string | undefined> {
+  return apiWrapper<string>('/api/collection/addSharing', { token, uuid, target, lastChange });
+}
+
+/**
+ * Fetch all collections shared with the current user.
+ *
+ * @param token - The auth token
+ * @returns An array of {@link SharedCollectionRow} on success, or `undefined` on failure
+ */
+export async function getShared(token: string): Promise<SharedCollectionRow[] | undefined> {
+  return apiWrapper<SharedCollectionRow[]>('/api/collection/getShared', { token });
+}

frontend/src/api/common.ts

@@ -0,0 +1,59 @@
+import { apiWrapper, boolApiWrapper } from './index';
+
+// /**
+//  * Login via salt-challenge mechanism.
+//  *
+//  * First fetches a salt from the server, then computes the salted password hash
+//  * and sends it to complete login. Returns the auth token on success.
+//  *
+//  * @param username - The username
+//  * @param password - The plaintext password
+//  * @returns The auth token string on success, or `undefined` on failure
+//  */
+// export async function login(username: string, password: string): Promise<string | undefined> {
+//   const salt = await apiWrapper<number>('/api/common/salt', { username });
+//   if (salt === undefined) return undefined;
+
+//   const token = await apiWrapper<string>('/api/common/login', {
+//     username,
+//     password: ComputePasswordWithSalt(password, salt.toString()),
+//   });
+
+//   return token;
+// }
+
+/**
+ * Web login using password hash comparison (no salt challenge).
+ *
+ * @param username - The username
+ * @param password - The plaintext password
+ * @returns The auth token string on success, or `undefined` on failure
+ */
+export async function webLogin(username: string, password: string): Promise<string | undefined> {
+  const token = await apiWrapper<string>('/api/common/webLogin', {
+    username,
+    password,
+  });
+
+  return token;
+}
+
+/**
+ * Logout and invalidate the given token on the server.
+ *
+ * @param token - The auth token to invalidate
+ * @returns `true` on success, `false` on failure
+ */
+export async function logout(token: string): Promise<boolean> {
+  return boolApiWrapper('/api/common/logout', { token });
+}
+
+/**
+ * Check whether the given token is still valid.
+ *
+ * @param token - The auth token to validate
+ * @returns `true` if the token is valid, `false` otherwise
+ */
+export async function tokenValid(token: string): Promise<boolean> {
+  return boolApiWrapper('/api/common/tokenValid', { token });
+}

frontend/src/api/index.ts

@@ -0,0 +1,64 @@
+/** Response interface for all API calls */
+export interface ApiResponse<T = any> {
+  success: boolean;
+  error: string;
+  data: T;
+}
+
+/**
+ * Generic API wrapper that performs a POST request with URL-encoded form data.
+ * Returns the `data` field on success, or `undefined` on failure.
+ *
+ * @param url - The API endpoint URL
+ * @param data - Key-value pairs to send as form data
+ * @returns The response data on success, or `undefined` on failure
+ */
+export async function apiWrapper<T>(url: string, data: Record<string, any>): Promise<T | undefined> {
+  try {
+    const params = new URLSearchParams();
+    Object.entries(data).forEach(([key, value]) => {
+      params.append(key, String(value));
+    });
+    const response = await fetch(url, {
+      method: "POST",
+      mode: "cors",
+      cache: "no-cache",
+      credentials: "same-origin",
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      redirect: "follow",
+      referrerPolicy: "no-referrer",
+      body: params.toString(),
+    });
+
+    if (!response.ok) {
+      console.error(`HTTP failed: ${response.status}`);
+    }
+
+    const payload = await response.json() as ApiResponse<T>;
+
+    if (payload.success) {
+      return payload.data;
+    } else {
+      console.error(`API failed: ${payload.error}`);
+      return undefined;
+    }
+  } catch (error) {
+    console.error(`Fetch failed: ${error}`);
+    return undefined;
+  }
+}
+
+/**
+ * Boolean API wrapper. Calls {@link apiWrapper} and returns `true` if the
+ * response is not `undefined`, otherwise `false`.
+ *
+ * @param url - The API endpoint URL
+ * @param data - Key-value pairs to send as form data
+ * @returns `true` on success, `false` on failure
+ */
+export async function boolApiWrapper(url: string, data: Record<string, any>): Promise<boolean> {
+  const rv = await apiWrapper<null>(url, data);
+  return rv !== undefined;
+}

frontend/src/api/profile.ts

@@ -0,0 +1,52 @@
+import { apiWrapper, boolApiWrapper } from './index';
+
+/** A raw token row as returned by the API (positional from SQL columns) */
+export type TokenRow = [
+  user: string,
+  token: string,
+  tokenExpireOn: number,
+  ua: string,
+  ip: string,
+];
+
+/**
+ * Check whether the current user is an admin.
+ *
+ * @param token - The auth token
+ * @returns `true` if the user is an admin, `false` otherwise
+ */
+export async function isAdmin(token: string): Promise<boolean> {
+  return boolApiWrapper('/api/profile/isAdmin', { token });
+}
+
+/**
+ * Change the current user's password.
+ *
+ * @param token - The auth token
+ * @param password - The new password (plaintext, will be hashed server-side)
+ * @returns `true` on success, `false` on failure
+ */
+export async function changePassword(token: string, password: string): Promise<boolean> {
+  return boolApiWrapper('/api/profile/changePassword', { token, password });
+}
+
+/**
+ * Fetch all tokens associated with the current user.
+ *
+ * @param token - The auth token
+ * @returns An array of {@link TokenRow} on success, or `undefined` on failure
+ */
+export async function getToken(token: string): Promise<TokenRow[] | undefined> {
+  return apiWrapper<TokenRow[]>('/api/profile/getToken', { token });
+}
+
+/**
+ * Delete a specific token belonging to the current user.
+ *
+ * @param token - The auth token
+ * @param deleteToken - The token string to delete
+ * @returns `true` on success, `false` on failure
+ */
+export async function deleteToken(token: string, deleteToken: string): Promise<boolean> {
+  return boolApiWrapper('/api/profile/deleteToken', { token, deleteToken });
+}

frontend/src/api/todo.ts

@@ -0,0 +1,54 @@
+import { apiWrapper, boolApiWrapper } from './index';
+
+/** A raw todo row as returned by the API (positional from SQL columns) */
+export type TodoRow = [
+  uuid: string,
+  belongTo: string,
+  data: string,
+  lastChange: string,
+];
+
+/**
+ * Fetch all todo items belonging to the current user.
+ *
+ * @param token - The auth token
+ * @returns An array of {@link TodoRow} on success, or `undefined` on failure
+ */
+export async function getFull(token: string): Promise<TodoRow[] | undefined> {
+  return apiWrapper<TodoRow[]>('/api/todo/getFull', { token });
+}
+
+/**
+ * Create a new empty todo item.
+ *
+ * @param token - The auth token
+ * @returns A single {@link TodoRow} of the newly created item on success, or `undefined` on failure
+ */
+export async function add(token: string): Promise<TodoRow | undefined> {
+  return apiWrapper<TodoRow>('/api/todo/add', { token });
+}
+
+/**
+ * Update an existing todo item's data.
+ *
+ * @param token - The auth token
+ * @param uuid - The todo UUID
+ * @param data - The new todo data (serialized string)
+ * @param lastChange - The last known `lastChange` value (optimistic concurrency)
+ * @returns The new `lastChange` value on success, or `undefined` on failure
+ */
+export async function update(token: string, uuid: string, data: string, lastChange: string): Promise<string | undefined> {
+  return apiWrapper<string>('/api/todo/update', { token, uuid, data, lastChange });
+}
+
+/**
+ * Delete a todo item.
+ *
+ * @param token - The auth token
+ * @param uuid - The todo UUID
+ * @param lastChange - The last known `lastChange` value (optimistic concurrency)
+ * @returns `true` on success, `false` on failure
+ */
+export async function del(token: string, uuid: string, lastChange: string): Promise<boolean> {
+  return boolApiWrapper('/api/todo/delete', { token, uuid, lastChange });
+}

frontend/src/components/MessageBox.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const isVisible = ref(false);
+const title = ref<string>("");
+const content = ref<string>("");
+
+const show = (_content: string, _title?: string) => {
+  title.value = _title ?? "Notification";
+  content.value = _content;
+  isVisible.value = true;
+}
+
+const hide = () => {
+  isVisible.value = false;
+}
+
+defineExpose({
+  show
+})
+</script>
+
+<template>
+  <div class="modal" :class="{ 'is-active': isVisible }" 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 class="modal-card-title">{{ title }}</p>
+        <button class="delete" aria-label="close" @click="hide"></button>
+      </header>
+      <div class="modal-card-body">
+        <p>{{ content }}</p>
+      </div>
+      <footer class="modal-card-foot">
+        <button class="button is-success" @click="hide">OK</button>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

frontend/src/components/collection/OwnedItem.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const props = defineProps({
+  uuid: {
+    type: String,
+    required: true
+  },
+  name: {
+    type: String,
+    required: true
+  }
+})
+
+const emit = defineEmits<{
+  (e: 'delete', uuid: string): void
+  (e: 'share', uuid: string): void
+  (e: 'update', uuid: string, name: string): void
+}>()
+
+const isEditing = ref<boolean>(false);
+const editingName = ref<string>("");
+
+const editItem = () => {
+  isEditing.value = true;
+  editingName.value = props.name;
+}
+
+const shareItem = () => {
+  emit('share', props.uuid);
+}
+
+const deleteItem = () => {
+  emit('delete', props.uuid);
+}
+
+const updateItem = () => {
+  let new_name = editingName.value;
+  editingName.value = "";
+  isEditing.value = false;
+  emit('update', props.uuid, new_name);
+}
+
+const cancelUpdateItem = () => {
+  editingName.value = "";
+  isEditing.value = false;
+}
+
+</script>
+
+<template>
+  <div class="paperbox-item card">
+    <div class="paperbox-item-words">
+      <p v-show="!isEditing">{{ name }}</p>
+      <div v-show="isEditing" class="control">
+        <input v-model="editingName" class="input" type="text"></input>
+      </div>
+    </div>
+
+    <div class="paperbox-item-icon control" v-show="!isEditing" @click="editItem">
+      <a class="button"><span class="icon is-small"><font-awesome-icon icon="fas fa-pen"></font-awesome-icon></span></a>
+    </div>
+    <div class="paperbox-item-icon control" v-show="!isEditing" @click="shareItem">
+      <a class="button"><span class="icon is-small"><font-awesome-icon
+            icon="fas fa-share"></font-awesome-icon></span></a>
+    </div>
+    <div class="paperbox-item-icon control" v-show="!isEditing" @click="deleteItem">
+      <a class="button"><span class="icon is-small"><font-awesome-icon
+            icon="fas fa-trash"></font-awesome-icon></span></a>
+    </div>
+
+    <div class="paperbox-item-icon control" v-show="isEditing" @click="updateItem">
+      <button class="button"><span class="icon is-small"><font-awesome-icon
+            icon="fas fa-check"></font-awesome-icon></span></button>
+    </div>
+    <div class="paperbox-item-icon control" v-show="isEditing" @click="cancelUpdateItem">
+      <button class="button"><span class="icon is-small"><font-awesome-icon
+            icon="fas fa-times"></font-awesome-icon></span></button>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

frontend/src/components/collection/SharingItem.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+
+const props = defineProps({
+  username: {
+    type: String,
+    required: true
+  }
+})
+
+const emit = defineEmits<{
+  (e: 'delete', username: string): void
+}>()
+
+const deleteItem = () => {
+  emit('delete', props.username);
+};
+
+</script>
+
+<template>
+  <div class="paperbox-item card">
+    <div class="paperbox-item-words">
+      <p>{{ username }}</p>
+    </div>
+
+    <div class="paperbox-item-icon control" @click="deleteItem">
+      <a class="button"><span class="icon is-small"><font-awesome-icon icon="fas fa-trash"></font-awesome-icon></span></a>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

frontend/src/main.ts

@@ -0,0 +1,25 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faUser, faLock, faPen, faShare, faTrash, faCheck, faTimes, faPlus, faSync } from '@fortawesome/free-solid-svg-icons'
+
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+
+import App from './App.vue'
+import router from './router'
+
+import '../public/index.scss'
+
+const pinia = createPinia();
+pinia.use(piniaPluginPersistedstate);
+
+const app = createApp(App);
+app.use(pinia);
+app.use(router);
+
+library.add(faUser, faLock, faPen, faShare, faTrash, faCheck, faTimes, faPlus, faSync);
+app.component('font-awesome-icon', FontAwesomeIcon);
+
+app.mount('#app');

frontend/src/router/index.ts

@@ -0,0 +1,55 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import { useTokenStore } from '@/stores/token'
+
+import Home from '@/views/Home.vue'
+import Collection from '@/views/Collection.vue'
+import Calendar from '@/views/Calendar.vue'
+import CalendarEvent from '@/views/CalendarEvent.vue'
+import Todo from '@/views/Todo.vue'
+import Admin from '@/views/Admin.vue'
+import Login from '@/views/Login.vue'
+
+import NotFound from '@/views/NotFound.vue'
+
+const routes = [
+  { path: '/home', name: "Home", component: Home },
+  { path: '/collection', name: "Collection", meta: { requireLoggedInCheck: true }, component: Collection },
+  { path: '/calendar', name: "Calendar", meta: { requireLoggedInCheck: true }, component: Calendar },
+  { path: '/todo', name: "Todo", meta: { requireLoggedInCheck: true }, component: Todo },
+  { path: '/admin', name: "Admin", meta: { requireLoggedInCheck: true }, component: Admin },
+
+  { path: '/calendar/event', name: "CalendarEvent", meta: { requireLoggedInCheck: true }, component: CalendarEvent },
+  { path: '/login', name: "Login", meta: { requireLoggedOutCheck: true }, component: Login },
+
+  { path: '/404', name: "NotFound", component: NotFound },
+
+  { path: '/', name: "Default", redirect: '/home' },
+  { path: '/:pathMatch(.*)*', redirect: '/404' },
+];
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: routes,
+});
+
+router.beforeEach((to, from) => {
+  // Only check for those flagged.
+  const token = useTokenStore();
+  if (to.meta.requireLoggedInCheck) {
+    if (!token.isLoggedIn) {
+      return { name: 'Default', replace: true };
+    }
+  } else if (to.meta.requireLoggedOutCheck) {
+    if (token.isLoggedIn) {
+      return { name: 'Default', replace: true };
+    }
+  } else {
+    return true;
+  }
+})
+
+export const goToHome = () => {
+  router.push({ name: 'Home' })
+}
+
+export default router

frontend/src/stores/language.ts

@@ -0,0 +1,35 @@
+import { defineStore } from 'pinia'
+import { Language } from '@/utils/i18n'
+
+interface LanguageState {
+  language: Language
+}
+
+export const useLanguageStore = defineStore('language', {
+  state: (): LanguageState => ({
+    language: Language.English
+  }),
+
+  getters: {
+    isEnglish: (state) => state.language === Language.English,
+    isSimplifiedChinese: (state) => state.language === Language.SimplifiedChinese,
+  },
+
+  actions: {
+    changeLanguage(lang: Language) {
+      this.language = lang;
+    },
+    changeToEnglish() {
+      this.changeLanguage(Language.English);
+    },
+    changeToSimplifiedChinese() {
+      this.changeLanguage(Language.SimplifiedChinese);
+    },
+  },
+
+  persist: {
+    key: 'ccn-i18n',
+    storage: localStorage,
+    pick: ['language'],
+  },
+})

frontend/src/stores/token.ts

@@ -0,0 +1,31 @@
+import { defineStore } from 'pinia'
+
+interface TokenState {
+    token: string | null
+}
+
+export const useTokenStore = defineStore('token', {
+  state: (): TokenState => ({
+    token: null,
+  }),
+
+  getters: {
+    isLoggedIn: (state) => typeof state.token === 'string',
+    currentToken: (state) => state.token as string,
+  },
+
+  actions: {
+    login(token: string) {
+        this.token = token;
+    },
+    logout() {
+        this.token = null;
+    },
+  },
+
+  persist: {
+    key: 'ccn-token',
+    storage: localStorage,
+    pick: ['token'],
+  },
+})

frontend/src/utils/datetime.ts

@@ -0,0 +1,570 @@
+import { lcm, format } from "./utils";
+import { universalGetDayOfWeek } from "./i18n";
+
+// YYC MARK:
+// This file is synchronized with "dt.py".
+// If this file or dt.py have bugs, all code should be changed together.
+
+export const MONTH_DAY_COUNT: number[] = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+
+export const MIN_YEAR: number = 1950;
+export const MAX_YEAR: number = 2200;
+export const MIN_DATETIME = new Date(Date.UTC(MIN_YEAR, 0, 1, 0, 0, 0, 0));
+export const MAX_DATETIME = new Date(Date.UTC(MAX_YEAR, 0, 1, 0, 0, 0, 0));
+export const MIN_TIMESTAMP = Math.floor(MIN_DATETIME.getTime() / 60000);
+export const MAX_TIMESTAMP = Math.floor(MAX_DATETIME.getTime() / 60000);
+
+export const DAY1_SPAN: number = 60 * 24;
+export const DAY7_SPAN: number = 7 * DAY1_SPAN;
+
+const PRECOMPILED_LOOP_RULES = {
+  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*)$/)
+};
+
+const PRECOMPILED_LOOP_STOP_RULES = {
+  infinity: new RegExp(/^F$/),
+  datetime: new RegExp(/^D([1-9]\d*|0)$/),
+  times: new RegExp(/^T([1-9]\d*)$/)
+};
+
+// region: Core Functions
+
+/** Year loop: [type=0, isStrict, yearSpan] */
+type YearLoopRule = [0, boolean, number];
+/** Month loop: [type=1, isStrict, mode, monthSpan] */
+type MonthLoopRule = [1, boolean, 'A' | 'B' | 'C' | 'D', number];
+/** Week loop: [type=2, 7 weekday booleans, weekSpan] */
+type WeekLoopRule = [2, boolean, boolean, boolean, boolean, boolean, boolean, boolean, number];
+/** Day loop: [type=3, daySpan] */
+type DayLoopRule = [3, number];
+
+type LoopRule = YearLoopRule | MonthLoopRule | WeekLoopRule | DayLoopRule;
+
+/** Infinity stop: [type=0] */
+type InfinityStopRule = [0];
+/** Datetime stop: [type=1, timestamp] */
+type DatetimeStopRule = [1, number];
+/** Times stop: [type=2, times] */
+type TimesStopRule = [2, number];
+
+type LoopStopRule = InfinityStopRule | DatetimeStopRule | TimesStopRule;
+
+/**
+ * Parses a raw loop rule string (e.g. "YS2-F") into structured rule arrays
+ * for UI display purposes.
+ * @param strl - The loop rule string in format "loopRule-stopRule".
+ * @returns A tuple of [LoopRule, LoopStopRule] on success, or undefined
+ *          when the string is empty, malformed, or contains no valid rule.
+ */
+export function resolveLoopRules4UI(strl: string): [LoopRule, LoopStopRule] | undefined {
+  if (strl == '') return undefined;
+
+  let sp = strl.split('-');
+  if (sp.length != 2) return undefined;
+  let loopRules: LoopRule | undefined = undefined;
+  let loopStopRules: LoopStopRule | undefined = undefined;
+
+  let match: RegExpExecArray | null;
+  if ((match = PRECOMPILED_LOOP_RULES.year.exec(sp[0]!)) !== null) {
+    loopRules = [0, match[1]! == 'S', parseInt(match[2]!)];
+  } else if ((match = PRECOMPILED_LOOP_RULES.month.exec(sp[0]!)) !== null) {
+    loopRules = [1, match[1]! == 'S', match[2]! as 'A' | 'B' | 'C' | 'D', parseInt(match[3]!)];
+  } else if ((match = PRECOMPILED_LOOP_RULES.week.exec(sp[0]!)) !== null) {
+    const w = match[1]!;
+    loopRules = [2, w[0] == 'T', w[1] == 'T', w[2] == 'T', w[3] == 'T', w[4] == 'T', w[5] == 'T', w[6] == 'T', parseInt(match[2]!)] as WeekLoopRule;
+  } else if ((match = PRECOMPILED_LOOP_RULES.day.exec(sp[0]!)) !== null) {
+    loopRules = [3, parseInt(match[1]!)];
+  } else return undefined;
+
+  if ((match = PRECOMPILED_LOOP_STOP_RULES.infinity.exec(sp[1]!)) !== null) {
+    loopStopRules = [0];
+  } else if ((match = PRECOMPILED_LOOP_STOP_RULES.datetime.exec(sp[1]!)) !== null) {
+    loopStopRules = [1, parseInt(match[1]!)];
+  } else if ((match = PRECOMPILED_LOOP_STOP_RULES.times.exec(sp[1]!)) !== null) {
+    loopStopRules = [2, parseInt(match[1]!)];
+  } else return undefined;
+
+  return [loopRules, loopStopRules];
+}
+
+/** A pair of [start, end] timestamps (in minutes) representing a single event occurrence. */
+type TimeRange = [number, number];
+
+/**
+ * Resolves a loop rule string into concrete event date ranges by expanding
+ * the loop pattern across the detection window.
+ * @remark loopDateTimeStart's value does not correspond with the database;
+ *         it is calculated by the program and should point to the closet
+ *         potential event start datetime.
+ * @remark loopDateTimeEnd is performed like loopDateTimeStart and
+ *         it indicates the possible time point of the tail of legal event.
+ * @remark clampStartDateTime is the real clamp datetime of event start
+ *         datetime.
+ * @remark loopDateTimeStart is the start datetime for detection.
+ * @remark In this section, all times should be analysed with
+ *         `Date((time + timezoneOffset) * 60000)` and use `.getUTC...()`
+ *         functions.
+ * @param loopRules - The loop rule string (e.g. "YS2-F").
+ * @param loopDateTimeStart - Start of the detection window (minutes).
+ * @param loopDateTimeEnd - End of the detection window (minutes).
+ * @param eventDateTimeStart - Original event start datetime (minutes).
+ * @param eventDateTimeEnd - Original event end datetime (minutes).
+ * @param timezoneOffset - Timezone offset in minutes.
+ * @param clampStartDateTime - Earliest allowed start datetime (minutes).
+ * @returns An array of [start, end] timestamp pairs representing every
+ *          occurrence within the window, or undefined if the rule is invalid.
+ */
+export function resolveLoopRules2Event(
+  fullLoopRules: string,
+  loopDateTimeStart: number,
+  loopDateTimeEnd: number,
+  eventDateTimeStart: number,
+  eventDateTimeEnd: number,
+  timezoneOffset: number,
+  clampStartDateTime: number): TimeRange[] | undefined {
+  if (fullLoopRules == '') return [
+    [Math.max(eventDateTimeStart, clampStartDateTime),
+    Math.max(loopDateTimeEnd, eventDateTimeEnd)]
+  ];
+
+  let sp = fullLoopRules.split('-');
+  if (sp.length != 2) return undefined;
+  let loopRules = sp[0]!;  // we don't need consider stop flag
+  let result: TimeRange[] = new Array();
+
+  // compute offset and duration
+  let eventDateTime = new Date((eventDateTimeStart + timezoneOffset) * 60000);
+  eventDateTime.setUTCHours(0, 0, 0, 0);
+  let eventOffset = eventDateTimeStart - (Math.floor(eventDateTime.getTime() / 60000) - timezoneOffset);
+  let eventDuration = eventDateTimeEnd - eventDateTimeStart;
+
+  let detectDateTime = new Date(loopDateTimeStart * 60000);
+  detectDateTime.setUTCHours(0, 0, 0, 0);
+  let originalYear = eventDateTime.getUTCFullYear();
+  let originalMonth = eventDateTime.getUTCMonth() + 1;
+  let originalDay = eventDateTime.getUTCDate();
+
+  // compute event
+  let match: RegExpExecArray | null;
+  if ((match = PRECOMPILED_LOOP_RULES.year.exec(loopRules)) !== null) {
+    let isStrict = match[1]! == 'S';
+    let loopSpan = parseInt(match[2]!);
+
+    let yearCount = detectDateTime.getFullYear() - originalYear;
+    let isSpecial = (originalMonth == 2 && originalDay == 29);
+    let realLoopSpan = (isSpecial && isStrict) ? lcm(4, loopSpan) : loopSpan;
+
+    //let fullSpanCount = Math.floor(yearCount / realLoopSpan);
+    let remainYear = yearCount % realLoopSpan;
+    //detectDateTime.setUTCFullYear(fullSpanCount + detectDateTime.getUTCFullYear(), 1, 1);
+    if (remainYear != 0)
+      detectDateTime.setUTCFullYear(realLoopSpan - remainYear + detectDateTime.getUTCFullYear(), 1 - 1, 1);
+
+    let skipFlag = false;
+    while (Math.floor(detectDateTime.getTime() / 60000) + eventOffset - timezoneOffset <= loopDateTimeEnd) {
+      skipFlag = false;
+      if (isSpecial) {
+        // is special day, 29 Feb
+        // try set it in 29 Feb
+        if (isStrict) {
+          if (isLeapYear(detectDateTime.getUTCFullYear())) detectDateTime.setUTCMonth(2 - 1, 29);
+          else skipFlag = true;  // order skip
+        } else {
+          if (isLeapYear(detectDateTime.getUTCFullYear())) detectDateTime.setUTCMonth(2 - 1, 29);
+          else detectDateTime.setUTCMonth(2 - 1, 28);
+        }
+      } else detectDateTime.setUTCMonth(originalMonth - 1, originalDay);
+
+      if (!skipFlag) {
+        result.push(
+          [Math.floor(detectDateTime.getTime() / 60000) + eventOffset - timezoneOffset,
+          Math.floor(detectDateTime.getTime() / 60000) + eventOffset + eventDuration - timezoneOffset]
+        );
+      }
+
+      detectDateTime.setUTCFullYear(realLoopSpan + detectDateTime.getUTCFullYear());
+    }
+
+  } else if ((match = PRECOMPILED_LOOP_RULES.month.exec(loopRules)) !== null) {
+    let isStrict = match[1]! == 'S';
+    let loopMethod = match[2]!;
+    let loopSpan = parseInt(match[3]!);
+
+    let monthsCountValue = monthsCount(detectDateTime.getUTCFullYear(), detectDateTime.getUTCMonth() + 1) -
+      monthsCount(originalYear, originalMonth);
+
+    //let fullSpanCount = Math.floor(monthsCountValue / loopSpan);
+    let remainMonth = monthsCountValue % loopSpan;
+    //detectDateTime.setUTCMonth(fullSpanCount * loopSpan + detectDateTime.getUTCMonth(), 1);
+    detectDateTime.setUTCDate(1);
+    if (remainMonth != 0)
+      detectDateTime.setUTCMonth(loopSpan - remainMonth + detectDateTime.getUTCMonth(), 1);
+
+    while (Math.floor(detectDateTime.getTime() / 60000) + eventOffset - timezoneOffset <= loopDateTimeEnd) {
+      let data = getRemanagedDayInMonth(originalYear, originalMonth, originalDay, detectDateTime.getUTCFullYear(), detectDateTime.getUTCMonth() + 1, isStrict);
+      let predictedDay: number | undefined = undefined;
+      switch (loopMethod) {
+        case 'A':
+          if (typeof (data[0]) !== 'undefined') predictedDay = data[0];
+          break;
+        case 'B':
+          if (typeof (data[1]) !== 'undefined') predictedDay = data[1];
+          break;
+        case 'C':
+          if (typeof (data[2]) !== 'undefined') predictedDay = data[2];
+          break;
+        case 'D':
+          if (typeof (data[3]) !== 'undefined') predictedDay = data[3];
+          break;
+      }
+      if (typeof (predictedDay) !== 'undefined') {
+        detectDateTime.setUTCDate(predictedDay);
+        result.push(
+          [Math.floor(detectDateTime.getTime() / 60000) + eventOffset - timezoneOffset,
+          Math.floor(detectDateTime.getTime() / 60000) + eventOffset + eventDuration - timezoneOffset]
+        );
+      }
+
+      detectDateTime.setUTCMonth(loopSpan + detectDateTime.getUTCMonth(), 1);
+    }
+
+
+  } else if ((match = PRECOMPILED_LOOP_RULES.week.exec(loopRules)) !== null) {
+    let loopSpan = parseInt(match[2]!);
+    let weekOption: boolean[] = [];
+    let weekEventCount = 0
+    for (let i = 0; i < 7; i++) {
+      weekOption.push(match[1]![i] == 'T');
+      if (match[1]![i] == 'T') weekEventCount++;
+    }
+
+    let originalWeek = dayOfWeek(originalYear, originalMonth, originalDay);
+
+    // try insert original event
+    if (!weekOption[originalWeek]) {
+      result.push(
+        [eventDateTimeStart, eventDateTimeEnd]
+      );
+    }
+
+    let daysCountValue = daysCount(detectDateTime.getUTCFullYear(), detectDateTime.getUTCMonth() + 1, detectDateTime.getDate()) -
+      daysCount(originalYear, originalMonth, originalDay);
+    //let fullSpanCount = Math.floor(daysCountValue / (7 * loopSpan));
+    let remainFullSpanCount = Math.floor((daysCountValue % (7 * loopSpan)) / 7);
+    let remainDays = (daysCountValue % (7 * loopSpan)) % 7;
+
+    //detectDateTime.setUTCDate((7 * loopSpan * fullSpanCount) + detectDateTime.getUTCDate());
+    if (remainFullSpanCount != 0) {
+      detectDateTime.setUTCDate((loopSpan - remainFullSpanCount) * 7 + detectDateTime.getUTCDate());
+    }
+    let weekCounter = remainDays;
+
+    while (Math.floor(detectDateTime.getTime() / 60000) + eventOffset - timezoneOffset <= loopDateTimeEnd) {
+      if (weekOption[(weekCounter + originalWeek) % 7])
+        result.push(
+          [Math.floor(detectDateTime.getTime() / 60000) + eventOffset - timezoneOffset,
+          Math.floor(detectDateTime.getTime() / 60000) + eventOffset + eventDuration - timezoneOffset]
+        );
+
+      weekCounter = (weekCounter + 1) % 7;
+      detectDateTime.setUTCDate(detectDateTime.getUTCDate() + 1);
+      if (weekCounter == 0)
+        detectDateTime.setUTCDate(detectDateTime.getUTCDate() + (loopSpan - 1) * 7);
+    }
+
+  } else if ((match = PRECOMPILED_LOOP_RULES.day.exec(loopRules)) !== null) {
+    let loopSpan = parseInt(match[1]!);
+
+    let daysCountValue = daysCount(detectDateTime.getUTCFullYear(), detectDateTime.getUTCMonth() + 1, detectDateTime.getUTCDate()) -
+      daysCount(originalYear, originalMonth, originalDay);
+    //let fullSpanCount = Math.floor(daysCountValue / loopSpan);
+    let remainDays = daysCountValue % loopSpan;
+    //detectDateTime.setUTCDate(fullSpanCount * loopSpan + detectDateTime.getUTCDate());
+    if (remainDays != 0)
+      detectDateTime.setUTCDate(loopSpan - remainDays + detectDateTime.getUTCDate());
+
+    while (Math.floor(detectDateTime.getTime() / 60000) + eventOffset - timezoneOffset <= loopDateTimeEnd) {
+      result.push(
+        [Math.floor(detectDateTime.getTime() / 60000) + eventOffset - timezoneOffset,
+        Math.floor(detectDateTime.getTime() / 60000) + eventOffset + eventDuration - timezoneOffset]
+      );
+      detectDateTime.setUTCDate(detectDateTime.getUTCDate() + loopSpan);
+    }
+  } else return undefined;
+
+  // clamp item
+  let realResult: TimeRange[] = new Array();
+  for (let i of result) {
+    let start = i[0];
+    let end = i[1];
+    if (end > clampStartDateTime && start <= loopDateTimeEnd)
+      realResult.push([Math.max(start, clampStartDateTime), Math.min(end, loopDateTimeEnd)]);
+  }
+  return realResult;
+}
+
+/**
+ * Resolves a loop rule string into a human-readable i18n-localised text
+ * description suitable for display in the UI.
+ * @param strl - The loop rule string in format "loopRule-stopRule".
+ * @param startDateTime - Reference start datetime (minutes) for computing
+ *                        contextual fields (e.g. day-in-month info).
+ * @param timezoneOffset - Timezone offset in minutes.
+ * @returns A concatenated human-readable string, or an empty string when
+ *          the input is empty or cannot be parsed.
+ */
+export function resolveLoopRules4Text(strl: string, startDateTime: number, timezoneOffset: number): string {
+  if (strl == '') return "";
+
+  let sp = strl.split('-');
+  if (sp.length != 2) return "";
+  let loopRules: string;
+  let loopStopRules: string;
+  let datetimeInstance = new Date((startDateTime + timezoneOffset) * 60000)
+
+  let match: RegExpExecArray | null;
+  if ((match = PRECOMPILED_LOOP_RULES.year.exec(sp[0]!)) !== null) {
+    if (match[1]! == 'S')
+      loopRules = "严格模式。";
+    else
+      loopRules = "宽松模式。";
+    loopRules += format("每{0}年于{1}循环一次。",
+      parseInt(match[2]!), datetimeInstance.toLocaleDateString(undefined, { timeZone: "UTC" })
+    );
+  } else if ((match = PRECOMPILED_LOOP_RULES.month.exec(sp[0]!)) !== null) {
+    if (match[1]! == 'S')
+      loopRules = "严格模式。";
+    else
+      loopRules = "宽松模式。";
+
+    let dayInMonth = getDayInMonth(
+      datetimeInstance.getUTCFullYear(),
+      datetimeInstance.getUTCMonth() + 1,
+      datetimeInstance.getUTCDate());
+    switch (match[2]!) {
+      case 'A':
+        loopRules = format("每{0}月的第{1}日循环一次。",
+          parseInt(match[3]!), dayInMonth[0]
+        );
+        break;
+      case 'B':
+        loopRules = format("每{0}月的倒数第{1}日循环一次。",
+          parseInt(match[3]!), dayInMonth[1]
+        );
+        break;
+      case 'C':
+        loopRules = format("每{0}月的第{1}个星期{2}循环一次。",
+          parseInt(match[3]!), dayInMonth[2], dayInMonth[3]
+        );
+        break;
+      case 'D':
+        loopRules = format("每{0}月的倒数第{1}个星期{2}循环一次。",
+          parseInt(match[3]!), dayInMonth[4], dayInMonth[5]
+        );
+        break;
+    }
+  } else if ((match = PRECOMPILED_LOOP_RULES.week.exec(sp[0]!)) !== null) {
+    let weekOfDayCache = [];
+    for (let i = 0; i < 7; i++) {
+      if (match[1]![i] == 'T')
+        weekOfDayCache.push(universalGetDayOfWeek(i));
+    }
+
+    loopRules = format("每{0}周的{1}循环一次。",
+      parseInt(match[2]!), weekOfDayCache.join(', ')
+    );
+  } else if ((match = PRECOMPILED_LOOP_RULES.day.exec(sp[0]!)) !== null) {
+    loopRules = format("每{0}天循环一次。", parseInt(match[1]!));
+  } else return "";
+
+
+  if ((match = PRECOMPILED_LOOP_STOP_RULES.infinity.exec(sp[1]!)) !== null) {
+    loopStopRules = "永远循环。";
+  } else if ((match = PRECOMPILED_LOOP_STOP_RULES.datetime.exec(sp[1]!)) !== null) {
+    loopStopRules = format("到{0}停止循环。",
+      new Date(parseInt(match[1]!)).toLocaleDateString()
+    );
+  } else if ((match = PRECOMPILED_LOOP_STOP_RULES.times.exec(sp[1]!)) !== null) {
+    loopStopRules = format("循环{0}次。", parseInt(match[1]!));
+  } else return "";
+
+  return (loopRules + loopStopRules);
+}
+
+// endregion
+
+// region: Utility Functions
+
+function leapYearCountEx(endYear: number, includeThis: boolean, baseYear: number, includeBase: boolean): number {
+  if (!includeThis) endYear--;
+  if (includeBase) baseYear--;
+
+  let endly = Math.floor(endYear / 4);
+  endly -= Math.floor(endYear / 100);
+  endly += Math.floor(endYear / 400);
+
+  let basely = Math.floor(baseYear / 4);
+  basely -= Math.floor(baseYear / 100);
+  basely += Math.floor(baseYear / 400);
+
+  return (endly - basely);
+}
+
+function daysCount(year: number, month: number, day: number): number {
+  let ly = leapYearCountEx(year, false, 1, true);
+  let days = 365 * (year - 1);
+  days += ly;
+
+  for (let index = 1; index < month; index++)
+    days += MONTH_DAY_COUNT[index - 1]!;
+
+  if (month > 2 && isLeapYear(year))
+    days += 1;
+
+  days += day - 1;
+  return days;
+}
+
+function monthsCount(year: number, month: number): number {
+  return (year - 1) * 12 + (month - 1);
+}
+
+function dayOfWeek(year: number, month: number, day: number): number {
+  return daysCount(year, month, day) % 7;
+}
+
+type DayInMonthInfo = [
+  /** The day count to this day, counting from month head to tail. */
+  daysForward: number,
+  /** The day count to this day, counting from month tail to head. */
+  daysBackward: number,
+  /** The count of the week this day located, counting from month head to tail. */
+  weeksForward: number,
+  /** The day count in this week. (for `weeksForward` using) */
+  weeksForwardDayOfWeek: number,
+  /** The count of the week this day located, counting from month tail to head. */
+  weeksBackward: number,
+  /** The day count in this week. (for `weeksBackward` using) */
+  weeksBackwardDayOfWeek: number,
+];
+
+function getDayInMonth(year: number, month: number, day: number): DayInMonthInfo {
+  let days = MONTH_DAY_COUNT[month - 1]! + ((month == 2 && isLeapYear(year)) ? 1 : 0);
+  let firstDayOfWeek = dayOfWeek(year, month, 1);
+  let bilateralDayOfWeek = (firstDayOfWeek + day - 1) % 7;
+
+  let dayForwards = day;
+  let dayBackwards = days - day + 1;
+
+  let weeksForward = Math.floor((dayForwards - 1) / 7) + 1;
+  let weeksBackwards = Math.floor((dayBackwards - 1) / 7) + 1;
+
+  return [dayForwards, dayBackwards, weeksForward, bilateralDayOfWeek, weeksBackwards, bilateralDayOfWeek];
+}
+
+// YYC MARK:
+// I use Japanese word youbi (ようび) to present
+// the concept of "the day of week" exactly.
+
+type RemanagedDayInMonth = [
+  /** Count forward by days (Day N)  */
+  forwardByDayCount: number | undefined,
+  /** Count backward by days (Nth day from the end) */
+  backwardByDayCount: number | undefined,
+  /** Count forward by weeks (Week N, Youbi X) */
+  forwardByWeekCount: number | undefined,
+  /** Count backward by weeks (Nth week from the end, Youbi X) */
+  backwardByWeekCount: number | undefined,
+];
+
+/**
+ * Pass in an old date and a new month, and it will calculate 
+ * the new date corresponding to that old date in the new month 
+ * using four different calendar rules:
+ * @param oldYear 
+ * @param oldMonth 
+ * @param oldDay 
+ * @param newYear 
+ * @param newMonth 
+ * @param isStrict 
+ * @returns 
+ */
+function getRemanagedDayInMonth(oldYear: number, oldMonth: number, oldDay: number, newYear: number, newMonth: number, isStrict: boolean): RemanagedDayInMonth {
+  let ddata = getDayInMonth(oldYear, oldMonth, oldDay);
+  let mdata = getMonthWeekStatistics(newYear, newMonth);
+  let days = MONTH_DAY_COUNT[newMonth - 1]! + ((newMonth == 2 && isLeapYear(newYear)) ? 1 : 0);
+  let firstDayOfWeek = dayOfWeek(newYear, newMonth, 1);
+  //let lastDayOfWeek = (firstDayOfWeek + days - 1) % 7;
+
+  let methodA = undefined;
+  let methodB = undefined;
+  if (isStrict) {
+    methodA = ddata[0] > days ? undefined : ddata[0];
+    methodB = ddata[1] > days ? undefined : (days - ddata[1] + 1);
+  } else {
+    methodA = Math.min(ddata[0], days);
+    methodB = days - Math.min(ddata[1], days) + 1;
+  }
+
+  let methodC = undefined;
+  if (ddata[2] <= mdata[ddata[3]]! || !isStrict) {
+    let targetWeek = Math.min(ddata[2], mdata[ddata[3]]!);
+    methodC = 1 + (targetWeek - 1) * 7 + ((ddata[3] + 7 - firstDayOfWeek) % 7);
+  }
+
+  let methodD = undefined;
+  if (ddata[4] <= mdata[ddata[5]]! || !isStrict) {
+    // convert to type c and calc
+    let targetWeek = mdata[ddata[5]]! - Math.min(ddata[4], mdata[ddata[5]]!) + 1;
+    methodD = 1 + (targetWeek - 1) * 7 + ((ddata[5] + 7 - firstDayOfWeek) % 7);
+  }
+
+  return [methodA, methodB, methodC, methodD];
+}
+
+type MonthWeekStatistics = [
+  /** The count of Youbi1 presented in this month. */
+  youbi1: number,
+  /** The count of Youbi2 presented in this month. */
+  youbi2: number,
+  /** The count of Youbi3 presented in this month. */
+  youbi3: number,
+  /** The count of Youbi4 presented in this month. */
+  youbi4: number,
+  /** The count of Youbi5 presented in this month. */
+  youbi5: number,
+  /** The count of Youbi6 presented in this month. */
+  youbi6: number,
+  /** The count of Youbi7 presented in this month. */
+  youbi7: number,
+];
+
+function getMonthWeekStatistics(year: number, month: number): MonthWeekStatistics {
+  let days = MONTH_DAY_COUNT[month - 1]! + ((month == 2 && isLeapYear(year)) ? 1 : 0);
+  let firstDayOfWeek = dayOfWeek(year, month, 1);
+
+  let result: MonthWeekStatistics = [4, 4, 4, 4, 4, 4, 4];
+  let remain = days % 7;
+  let week = firstDayOfWeek;
+  while (remain > 0) {
+    result[week % 7]! += 1;
+    week++;
+    remain--;
+  }
+
+  return result;
+}
+
+function isLeapYear(year: number): boolean {
+  let isLeap = false;
+  if (year % 4 == 0) isLeap = true;
+  if (year % 100 == 0) isLeap = false;
+  if (year % 400 == 0) isLeap = true;
+  return isLeap;
+}
+
+// endregion
+

frontend/src/utils/i18n.ts

@@ -0,0 +1,66 @@
+export enum Language {
+    English,
+    SimplifiedChinese,
+}
+
+/**
+ * 
+ * @param month Zero-based month.
+ * @returns 
+ */
+export function universalGetMonth(month: number): string {
+    switch (month) {
+        case 0:
+            return "January";
+        case 1:
+            return "February";
+        case 2:
+            return "March";
+        case 3:
+            return "April";
+        case 4:
+            return "May";
+        case 5:
+            return "June";
+        case 6:
+            return "July";
+        case 7:
+            return "August";
+        case 8:
+            return "September";
+        case 9:
+            return "October";
+        case 10:
+            return "November";
+        case 11:
+            return "December";
+        default:
+            return ""
+    }
+}
+
+/**
+ * 
+ * @param dayOfWeek Zero-based day of week
+ * @returns 
+ */
+export function universalGetDayOfWeek(dayOfWeek: number): string {
+    switch (dayOfWeek) {
+        case 0:
+            return "Monday";
+        case 1:
+            return "Tuesday";
+        case 2:
+            return "Wednesday";
+        case 3:
+            return "Thursday";
+        case 4:
+            return "Friday";
+        case 5:
+            return "Saturday";
+        case 6:
+            return "Sunday";
+        default:
+            return "";
+    }
+}

frontend/src/utils/utils.ts

@@ -0,0 +1,40 @@
+
+export const DEFAULT_COLOR: string = '#536dfe';
+
+export function gcd(a: number, b: number): number {
+  if (b == 0) return a;
+  return gcd(b, a % b);
+}
+
+export function lcm(a: number, b: number): number {
+  return a / gcd(a, b) * b;
+}
+
+/**
+ * 将字符串中的 `{n}` 占位符替换为对应的参数值
+ * @param str 目标字符串，若为 `null`/`undefined`/空字符串则返回原值或空串（根据需求）
+ * @param args 用于替换的值列表
+ * @returns 格式化后的字符串
+ */
+export function format(str: string, ...args: any[]): string {
+  // 若 str 为假值（null/undefined/''），直接返回空字符串
+  if (!str) return '';
+
+  return str.replace(/\{(\d+)\}/g, (match, index) => {
+    const idx = parseInt(index, 10);
+    const value = args[idx];
+    // 若参数存在且不为 null/undefined，则转为字符串，否则保留占位符
+    return value != null ? String(value) : match;
+  });
+}
+
+/**
+ * Get Monday-first the day of week from given date instead of Sunday-first.
+ * @param date The date for getting weekday.
+ * @returns The zero-based weekday. 0 stands for Monday.
+ */
+export function getWeekday(date: Date): number {
+  let day = date.getDay();
+  if (day == 0) return 6;
+  else return day - 1;
+}

frontend/src/views/Admin.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h1>Congratulations</h1>
+  <p>This is admin.</p>
+</template>
+
+<style scoped></style>

frontend/src/views/Calendar.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h1>Congratulations</h1>
+  <p>This is calendar.</p>
+</template>
+
+<style scoped></style>

frontend/src/views/CalendarEvent.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h1>Congratulations</h1>
+  <p>This is calendar event.</p>
+</template>
+
+<style scoped></style>

frontend/src/views/Collection.vue

@@ -0,0 +1,254 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useTokenStore } from '@/stores/token';
+import MessageBox from '@/components/MessageBox.vue';
+import {
+  addOwn as apiCollectionAddOwn,
+  getFullOwn as apiCollectionGetFullOwn,
+  getSharing as apiCollectionGetSharing,
+  getDetailOwn as apiCollectionGetDetailOwn,
+  deleteOwn as apiCollectionDeleteOwn,
+  updateOwn as apiCollectionUpdateOwn,
+  addSharing as apiCollectionAddSharing,
+  deleteSharing as apiCollectionDeleteSharing,
+  type CollectionRow,
+} from '@/api/collection';
+import OwnedItem from '@/components/collection/OwnedItem.vue';
+import SharingItem from '@/components/collection/SharingItem.vue';
+
+const ownedItems = ref<Map<string, CollectionRow>>(new Map());
+const sharingItems = ref<string[]>([]);
+const sharingItemUuid = ref<string | null>(null);
+const isSharingItem = computed(() => {
+  return typeof sharingItemUuid.value === 'string';
+})
+const pendingOwnedItemName = ref<string>("");
+const pendingSharingItemUsername = ref<string>("");
+
+const token = useTokenStore();
+const messagebox = ref<InstanceType<typeof MessageBox>>();
+
+onMounted(async () => {
+  await refreshOwnedItem();
+})
+
+const refreshOwnedItem = async () => {
+  // clean owned items
+  ownedItems.value.clear();
+
+  // Fetch data
+  let rv = await apiCollectionGetFullOwn(token.currentToken);
+  if (typeof rv === 'undefined') {
+    console.error("fail to fetch owned collection");
+    return;
+  }
+  // Add into dict for rendering
+  for (let item of rv) {
+    ownedItems.value.set(item[0], item);
+  }
+
+  // clean sharing status
+  sharingItemUuid.value = null;
+  await refreshSharingItem();
+}
+
+const addOwnedItem = async () => {
+  let new_name = pendingOwnedItemName.value;
+  if (new_name === '') {
+    return
+  }
+
+  // first add it
+  let rv = await apiCollectionAddOwn(token.currentToken, new_name);
+  if (typeof rv === 'undefined') {
+    messagebox.value?.show("An add operation failed. It may caused by wrong arguments. Refreshing page may fix system problem. Before refreshing page, please backup all your unsaved data.");
+    return;
+  }
+
+  // second get its detail
+  let rv2 = await apiCollectionGetDetailOwn(token.currentToken, rv);
+  if (typeof rv2 === 'undefined') {
+    messagebox.value?.show("A get operation failed. It may caused by server internal error or your limited permission. Refreshing page may fix system problem. Before refreshing page, please backup all your unsaved data.");
+    return;
+  }
+
+  // render to list
+  ownedItems.value.set(rv2[0], rv2);
+}
+
+const deleteOwnedItem = async (uuid: string) => {
+  let rv = await apiCollectionDeleteOwn(token.currentToken, uuid, ownedItems.value.get(uuid)![2]);
+  if (rv) {
+    messagebox.value?.show("A delete operation failed. It may caused by no matched item. Refreshing page may fix system problem. Before refreshing page, please backup all your unsaved data.");
+    return;
+  }
+
+  // remove from rendered list
+  ownedItems.value.delete(uuid);
+
+  // if we are editing sharing target of this item,
+  // we should escape this status
+  if (sharingItemUuid.value === uuid) {
+    sharingItemUuid.value = null;
+    await refreshSharingItem();
+  }
+}
+
+const shareOwnedItem = async (uuid: string) => {
+  // if there is no editing sharing target, set it.
+  // otherwise override it or toggle it according to its old value.
+  let old_value = sharingItemUuid.value;
+  if (typeof old_value === 'string') {
+    if (old_value === uuid) {
+      sharingItemUuid.value = null;
+    } else {
+      sharingItemUuid.value = uuid;
+    }
+  } else {
+    sharingItemUuid.value = uuid;
+  }
+  // refresh sharing list
+  await refreshSharingItem();
+}
+
+const updateOwnedItem = async (uuid: string, name: string) => {
+  let lastChange = ownedItems.value.get(uuid)![2];
+  let rv = await apiCollectionUpdateOwn(token.currentToken, uuid, name, lastChange);
+  if (typeof rv === 'undefined') {
+    messagebox.value?.show("An update operation failed. It may caused by wrong arguments or lost target. Refreshing page may fix system problem. Before refreshing page, please backup all your unsaved data.");
+    return;
+  }
+
+  // return value is new lastChange, so we update it.
+  let row = ownedItems.value.get(uuid)!;
+  row[1] = name;
+  row[2] = rv;
+
+  // if current item is sharing, update it at the same time
+  if (sharingItemUuid.value === uuid) {
+    await refreshSharingItem();
+  }
+}
+
+const refreshSharingItem = async () => {
+  // clear sharing item
+  sharingItems.value = [];
+
+  // if we are not in sharing mode, return directly
+  if (!isSharingItem.value) {
+    return;
+  }
+
+  // fetch data
+  let uuid = sharingItemUuid.value!;
+  let rv = await apiCollectionGetSharing(token.currentToken, uuid);
+  if (typeof rv === 'undefined') {
+    console.error(`fail to fetch sharing target for collection ${uuid}`);
+    return;
+  }
+
+  // render then
+  sharingItems.value = rv;
+}
+
+const addSharingItem = async () => {
+  let uuid = sharingItemUuid.value!;
+  let lastChange = ownedItems.value.get(uuid)![2];
+  let new_username = pendingSharingItemUsername.value;
+  if (new_username === '') {
+    return;
+  }
+
+  // order adding
+  let rv = await apiCollectionAddSharing(token.currentToken, uuid, new_username, lastChange);
+  if (typeof rv === 'undefined') {
+    messagebox.value?.show("An add operation failed. It may caused by wrong arguments. Refreshing page may fix system problem. Before refreshing page, please backup all your unsaved data.");
+    return;
+  }
+
+  // push new item in list
+  sharingItems.value.push(new_username);
+  // the return value is the new last change
+  ownedItems.value.get(uuid)![2] = rv;
+}
+
+const deleteSharingItem = async (username: string) => {
+  let uuid = sharingItemUuid.value!;
+  let lastChange = ownedItems.value.get(uuid)![2];
+
+  // order deleting
+  let rv = await apiCollectionDeleteSharing(token.currentToken, uuid, username, lastChange);
+  if (typeof rv === 'undefined') {
+    messagebox.value?.show("A delete operation failed. It may caused by no matched item. Refreshing page may fix system problem. Before refreshing page, please backup all your unsaved data.");
+    return;
+  }
+
+  // remove this item
+  sharingItems.value.splice(sharingItems.value.indexOf(username), 1);
+  // the return value is the new last change
+  ownedItems.value.get(uuid)![2] = rv;
+}
+
+</script>
+
+<template>
+  <div class="container" style="display: flex; flex-flow: column; margin-top: 1.25rem;">
+    <h1 class="title">Owned</h1>
+    <div class="button-list">
+      <div class="field has-addons">
+        <div class="control">
+          <input v-model="pendingOwnedItemName" class="input" type="text">
+        </div>
+        <div class="control" @click="addOwnedItem">
+          <a class="button is-primary">
+            <span class="icon is-small"><font-awesome-icon icon="fas fa-plus"></font-awesome-icon></span>
+          </a>
+        </div>
+      </div>
+      <div class="control" @click="refreshOwnedItem">
+        <a class="button is-primary">
+          <span class="icon is-small"><font-awesome-icon icon="fas fa-sync"></font-awesome-icon></span>
+        </a>
+      </div>
+    </div>
+
+    <div v-for="item in ownedItems.values()" style="display: flex; flex-flow: column; margin-top: 1.25rem;">
+      <OwnedItem :uuid="item[0]" :name="item[1]" @delete="deleteOwnedItem" @share="shareOwnedItem"
+        @update="updateOwnedItem" />
+    </div>
+  </div>
+
+  <div v-show="isSharingItem" class="container" style="display: flex; flex-flow: column; margin-top: 1.25rem;">
+    <h1 class="title">Sharing target</h1>
+    <label class="label">
+      <span>Editing: </span>
+      <span>{{ isSharingItem ? ownedItems.get(sharingItemUuid!)![1] : "" }}</span>
+    </label>
+
+    <div class="button-list">
+      <div class="field has-addons">
+        <div class="control">
+          <input v-model="pendingSharingItemUsername" class="input" type="text">
+        </div>
+        <div class="control" @click="addSharingItem">
+          <a class="button is-primary">
+            <span class="icon is-small"><font-awesome-icon icon="fas fa-plus"></font-awesome-icon></span>
+          </a>
+        </div>
+      </div>
+      <div class="control" @click="refreshSharingItem">
+        <a class="button is-primary">
+          <span class="icon is-small"><font-awesome-icon icon="fas fa-sync"></font-awesome-icon></span>
+        </a>
+      </div>
+    </div>
+
+    <div v-for="item in sharingItems" style="display: flex; flex-flow: column; margin-top: 1.25rem;">
+      <SharingItem :username="item" @delete="deleteSharingItem" />
+    </div>
+  </div>
+
+  <MessageBox ref="messagebox" />
+</template>
+
+<style scoped></style>

frontend/src/views/Home.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="container" style="margin-top: 1.25rem;">
+    <article>
+      <h1 class="title">coconut-leaf</h1>
+      <p>A light, self-host and multi-account calendar system.</p>
+      <p>The original intention of this system is served for yyc12345 personal use.</p>
+      <br />
+      <p>See our <a href="https://github.com/yyc12345/coconut-leaf">GitHub project</a> for the source code in detail.</p>
+      <p>The source code of this project is licensed under <a href="https://www.gnu.org/licenses/agpl-3.0.html">AGPL v3</a>.</p>
+    </article>
+  </div>
+</template>
+
+<style scoped></style>

frontend/src/views/Login.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTokenStore } from '@/stores/token';
+import MessageBox from '@/components/MessageBox.vue';
+import { webLogin as apiCommonWebLogin } from '@/api/common';
+import { goToHome } from '@/router';
+
+const isLoggingIn = ref<boolean>(false);
+const username = ref<string>("");
+const password = ref<string>("");
+
+const messagebox = ref<InstanceType<typeof MessageBox>>();
+
+const login = async () => {
+  // disable UI first
+  isLoggingIn.value = true;
+
+  // // try get salt
+  // if (ccn_api_common_salt(username)) {
+  //     // continue login
+  //     if (ccn_api_common_login(username, password)) {
+  //         // ok, logged
+  //         // jump into home page again
+  //         window.location.href = '/web/home';
+  //     } else ccn_messagebox_Show($.i18n.prop("ccn-i18n-js-fail-login"));
+  // } else ccn_messagebox_Show($.i18n.prop("ccn-i18n-js-fail-login"));
+
+  const token = await apiCommonWebLogin(username.value, password.value);
+  if (typeof token !== 'undefined') {
+    // OK. We have logged in.
+    // Update token storage
+    const tokenStore = useTokenStore();
+    tokenStore.login(token);
+    // Go to home page.
+    goToHome();
+  } else {
+    // Show login error.
+    messagebox.value?.show("Fail to login. Please check your username or password.");
+  }
+
+  // Enable all UI
+  isLoggingIn.value = false;
+}
+
+</script>
+
+<template>
+  <div style="margin-top: 1.25rem; width: 100%; display: flex; justify-content: center; align-items: center;">
+    <div class="card" style="padding: 1.25rem;">
+      <div class="field">
+        <label class="label">User Name</label>
+        <div class="control has-icons-left has-icons-right">
+          <input v-model="username" :disabled="isLoggingIn" class="input" type="text">
+          <span class="icon is-small is-left">
+            <font-awesome-icon icon="fas fa-user"></font-awesome-icon>
+          </span>
+        </div>
+      </div>
+      <div class="field">
+        <label class="label">Password</label>
+        <p class="control has-icons-left">
+          <input v-model="password" :disabled="isLoggingIn" class="input" type="password">
+          <span class="icon is-small is-left">
+            <font-awesome-icon icon="fas fa-lock"></font-awesome-icon>
+          </span>
+        </p>
+      </div>
+
+      <div class="control">
+        <button class="button is-primary" :disabled="isLoggingIn" @click="login">Login</button>
+      </div>
+
+    </div>
+  </div>
+
+  <MessageBox ref="messagebox"/>
+</template>
+
+<style scoped></style>

frontend/src/views/NotFound.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="container">
+    <article>
+      <h1 class="title">Oops!</h1>
+      <p>You are wandering in the desert of coconut-leaf.</p>
+      <p>Please back to previous page and try again.</p>
+    </article>
+  </div>
+</template>
+
+<style scoped>
+div.container {
+  margin-top: 1.25rem;
+}
+</style>

frontend/src/views/Todo.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h1>Congratulations</h1>
+  <p>This is todo.</p>
+</template>
+
+<style scoped></style>

frontend/tsconfig.app.json

@@ -0,0 +1,18 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    // Extra safety for array and object lookups, but may have false positives.
+    "noUncheckedIndexedAccess": true,
+
+    // Path mapping for cleaner imports.
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+
+    // `vue-tsc --build` produces a .tsbuildinfo file for incremental type-checking.
+    // Specified here to keep it out of the root directory.
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo"
+  }
+}