feat: improve UI and warning on mobile

app/src/components/AuthForm.vue

@@ -89,6 +89,13 @@ const handleChange = () => {
     class="bg-bg border-8 border-bg-primary flex flex-1 flex-col items-center justify-center rounded-3xl p-10"
   >
     <h1 class="text-text-primary text-3xl font-black mb-2">{{ title }}</h1>
+    <div class="text-error inline-flex justify-center items-center xl:hidden">
+      <font-awesome-icon
+        :icon="['fas', 'circle-exclamation']"
+        class="px-1 text-sm"
+      />
+      <span>建議使用電腦全螢幕執行</span>
+    </div>
     <form @submit.prevent="handleSubmit()" class="w-full">
       <div v-if="socialLogin && hasSocialLogins">
         <a
@@ -113,13 +120,13 @@ const handleChange = () => {
           />
           <span class="font-medium">Continue with GitHub</span>
         </a>
+        <p
+          class="text-text-secondary flex justify-center mt-3"
+          v-if="type === 'login' || type === 'register'"
+        >
+          or
+        </p>
       </div>
-      <p
-        class="text-text-secondary flex justify-center mt-3"
-        v-if="type === 'login' || type === 'register'"
-      >
-        or
-      </p>
       <div class="mb-6">
         <input
           type="text"
@@ -136,9 +143,8 @@ const handleChange = () => {
           class="text-sm font-normal text-text-secondary"
           v-if="type === 'username' || type === 'register'"
         >
-          <p>Username can be up to 32 characters</p>
+          <p>可用小寫字母、數字、"_"和"-"</p>
-          <p>Username must begin with lowercase letter</p>
+          <p>小寫字母開頭，至多32字元</p>
-          <p>Username can consist of lowercase, numbers, "_", and "-"</p>
         </label>
       </div>
       <div class="mb-6" v-if="type === 'register'">

app/src/library.js

@@ -13,6 +13,8 @@ import {
   faArrowRotateLeft,
   faArrowRightFromBracket,
   faArrowRight,
+  faBug,
+  faCircleExclamation,
 } from '@fortawesome/free-solid-svg-icons'
 import {
   faLightbulb,
@@ -25,17 +27,19 @@ import { faGithub, faGoogle } from '@fortawesome/free-brands-svg-icons'
 library.add(
   faBars,
   faArrowLeft,
-  faTriangleExclamation,
-  faGear,
-  faExpand,
   faList,
-  faLightbulb,
+  faGear,
-  faCircleQuestion,
+  faTriangleExclamation,
-  faArrowRotateLeft,
+  faExpand,
-  faCircleRight,
   faTerminal,
+  faArrowRotateLeft,
   faArrowRightFromBracket,
   faArrowRight,
+  faBug,
+  faCircleExclamation,
+  faLightbulb,
+  faCircleQuestion,
+  faCircleRight,
   faGithub,
   faGoogle
 )

app/src/views/ChooseUsernamePage.vue

@@ -45,12 +45,12 @@ async function handleSubmit({ username, success, error }) {
 }
 </script>
 <template>
-  <div class="relative w-screen h-screen">
+  <div class="w-screen h-screen">
     <Background class="w-full h-full" />
     <div
       class="h-screen w-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
     >
-      <div class="w-1/3">
+      <div class="w-fit">
         <AuthForm
           @onSubmit="handleSubmit"
           @onChange="check"

app/src/views/LoginPage.vue

@@ -32,12 +32,12 @@ const handleLogin = async ({ username, password, success, error }) => {
 }
 </script>
 <template>
-  <div class="relative w-screen h-screen">
+  <div class="w-screen h-screen">
     <Background class="w-full h-full" />
     <div
-      class="h-screen w-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
+      class="w-screen h-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
     >
-      <div class="w-1/3">
+      <div class="w-fit">
         <AuthForm @onSubmit="handleLogin" type="login" />
       </div>
     </div>

app/src/views/RegisterPage.vue

@@ -65,12 +65,12 @@ async function check({ username, email, password, error }) {
 }
 </script>
 <template>
-  <div class="relative w-screen h-screen">
+  <div class="w-screen h-screen">
     <Background class="w-full h-full" />
     <div
       class="h-screen w-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
     >
-      <div class="w-1/3">
+      <div class="w-fit">
         <AuthForm
           @onSubmit="handleRegister"
           @onChange="check"