feat: support login

- 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)

frontend/src/views/Login.vue

@@ -1,11 +1,45 @@
 <script setup lang="ts">
-import MessageBox from '@/components/MessageBox.vue';
 import { ref } from 'vue';
+import MessageBox from '@/components/MessageBox.vue';
+import { useTokenStore } from '@/stores/token';
+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> | null>(null);
 
-const login = () => {
-  messagebox.value?.show("Fail to login. Please check your username or password.")
+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>
@@ -16,7 +50,7 @@ const login = () => {
       <div class="field">
         <label class="label">User Name</label>
         <div class="control has-icons-left has-icons-right">
-          <input id="ccn-login-form-username" class="input" type="text">
+          <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>
@@ -25,7 +59,7 @@ const login = () => {
       <div class="field">
         <label class="label">Password</label>
         <p class="control has-icons-left">
-          <input id="ccn-login-form-password" class="input" type="password">
+          <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>
@@ -33,7 +67,7 @@ const login = () => {
       </div>
 
       <div class="control">
-        <button class="button is-primary" @click="login">Login</button>
+        <button class="button is-primary" :disabled="isLoggingIn" @click="login">Login</button>
       </div>
 
     </div>