feat: support sign up

Author: LynMoe

src/App.vue

@@ -71,6 +71,12 @@
             <a-menu-item key="login">
                 <a-icon type="login" />
                 <span>Login</span>
+                <router-link :to="{ name: 'login' }" />
+            </a-menu-item>
+            <a-menu-item key="signup">
+                <a-icon type="user-add" />
+                <span>Sign Up</span>
+                <router-link :to="{ name: 'signup' }" />
             </a-menu-item>
         </template>
         </a-menu>

src/components/MetadataList.vue

@@ -15,12 +15,12 @@
             <div v-if="items.length === 0">
                 <a-empty />
             </div>
-            <waterfall :line-gap="370" :align="'center'" :watch="items">
+            <waterfall :line-gap="320" :align="'center'" :watch="items">
                 <waterfall-slot
                     v-for="item in items"
                     :key="item.id"
                     :height="435"
-                    :width="370"
+                    :width="300"
                 >
                     <MetadataListVideoCard 
                     :data="item"

src/components/MetadataListVideoCard.vue

@@ -1,5 +1,5 @@
 <template>
-    <a-card hoverable style="width: 350px">
+    <a-card hoverable style="width: 300px">
         <img
             alt="cover"
             class="cover"

src/components/SignUp.vue

@@ -0,0 +1,51 @@
+<template>
+    <div>
+        <h1>Sign Up</h1>
+
+        <div style="max-width: 350px; display: inline-block;">
+            <a-input v-model="username" placeholder="Username" />
+            <br /><br />
+            <a-input v-model="password" type="password" placeholder="Password" @keyup.enter="handleSubmit" />
+            <br /><br />
+            <a-input v-model="code" placeholder="Invitation Code" />
+            <br /><br />
+            <a-button v-on:click="handleSubmit" type="primary">Sign up</a-button>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data: () => {
+            return {
+                username: '',
+                password: '',
+                code: ''
+            }
+        },
+
+        methods: {
+            handleSubmit: function() {
+                this.axios.post(this.apiHost + '/auth/signup', {
+                    username: this.username,
+                    password: this.password,
+                    code: this.code
+                }).then((res) => {
+                    res = res.data
+
+                    if (res.code === 0) {
+                        this.$message.success('Success')
+                        this.$router.push({ name: 'login' })
+                        return
+                    }
+
+                    this.$message.error(res.msg)
+                })
+            }
+        },
+
+        created: () => {
+            document.title = 'Sign Up | JAVClub'
+        }
+    }
+</script>

src/main.js

@@ -22,6 +22,7 @@ import SeriesList from './components/SeriesList'
 import Profile from './components/Profile'
 import Login from './components/Login'
 import Admin from './components/Admin'
+import SignUp from './components/SignUp'
 
 axios.defaults.withCredentials = true
 
@@ -100,6 +101,12 @@ const routes = [
         path: '/login',
         component: Login
     }
+    ,
+    {
+        name: 'signup',
+        path: '/signup',
+        component: SignUp
+    }
 ]
 
 const router = new VueRouter({