support user sign up

src/lib/services.js

@@ -58,6 +58,14 @@ export default {
             }
         });
     },
+    register: ({ username, email, nickname, password }) => {
+        return axios.post('register.json', {
+            username,
+            email,
+            nickname,
+            password
+        });
+    },
     logout: () => {
         return axios.get('logout.json');
     },

src/locales/en.js

@@ -66,12 +66,18 @@ export default {
     'Your username or Email': 'Your username or Email',
     'Password': 'Password',
     'Your password': 'Your password',
+    'E-mail': 'E-mail',
+    'Your email': 'Your email',
+    'Nickname': 'Nickname',
+    'Your nickname': 'Your nickname',
     'Log In': 'Log In',
     'Don\'t have an account?': 'Don\'t have an account?',
     'Create an account': 'Create an account',
     'Forget Password?': 'Forget Password?',
     'Please input username': 'Please input username',
     'Please input password': 'Please input password',
+    'Please input email': 'Please input email',
+    'Please input nickname': 'Please input nickname',
     'Unable to login': 'Unable to login',
     'Two-Factor Authentication': 'Two-Factor Authentication',
     'Passcode': 'Passcode',
@@ -82,7 +88,10 @@ export default {
     'Unable to verify': 'Unable to verify',
     'Use a backup code': 'Use a backup code',
     'Use a passcode': 'Use a passcode',
+    'Sign Up': 'Sign Up',
     'Language': 'Language',
+    'You have been successfully registered': 'You have been successfully registered',
+    'Unable to sign up': 'Unable to sign up',
     'Log Out': 'Log Out',
     'Are you sure you want to log out?': 'Are you sure you want to log out?',
     'Unable to logout': 'Unable to logout',

src/locales/zh_Hans.js

@@ -66,12 +66,18 @@ export default {
     'Your username or Email': '你的用户名或注册邮箱',
     'Password': '密码',
     'Your password': '你的密码',
+    'E-mail': '电子邮箱',
+    'Your email': '你的电子邮箱',
+    'Nickname': '昵称',
+    'Your nickname': '你的昵称',
     'Log In': '登录',
     'Don\'t have an account?': '还没有账号？',
     'Create an account': '创建新账号',
     'Forget Password?': '找回密码?',
     'Please input username': '请输入用户名',
     'Please input password': '请输入密码',
+    'Please input email': '请输入电子邮箱',
+    'Please input nickname': '请输入昵称',
     'Unable to login': '无法登录',
     'Two-Factor Authentication': '两步验证',
     'Passcode': '验证码',
@@ -82,7 +88,10 @@ export default {
     'Unable to verify': '无法验证',
     'Use a backup code': '使用备用码',
     'Use a passcode': '使用验证码',
+    'Sign Up': '注册',
     'Language': '语言',
+    'You have been successfully registered': '注册成功',
+    'Unable to sign up': '无法注册',
     'Log Out': '退出登录',
     'Are you sure you want to log out?': '您确定是否要退出登录？',
     'Unable to logout': '无法退出登录',

src/mobile-main.js

@@ -78,6 +78,12 @@ Vue.prototype.$confirm = function (message, confirmCallback, cancelCallback) {
         ]
     }).open();
 };
+Vue.prototype.$toast = function (message, timeout) {
+    this.$f7.toast.create({
+        text: i18n.t(message),
+        closeTimeout: timeout || 1500
+    }).open();
+};
 Vue.prototype.$services = services;
 Vue.prototype.$user = userstate;
 

src/router/mobile.js

@@ -4,6 +4,7 @@ import MainPage from '../views/mobile/Main.vue';
 import MainPageHomeTab from '../views/mobile/main/Home.vue';
 
 import LoginPage from '../views/mobile/Login.vue';
+import SignUpPage from '../views/mobile/Signup.vue';
 import SettingsPage from '../views/mobile/Settings.vue';
 
 function checkLogin(to, from, resolve, reject) {
@@ -49,6 +50,11 @@ const routes = [
         component: LoginPage,
         beforeEnter: checkNotLogin
     },
+    {
+        path: '/signup',
+        component: SignUpPage,
+        beforeEnter: checkNotLogin
+    },
     {
         path: '/settings',
         component: SettingsPage,

src/views/mobile/Signup.vue

@@ -0,0 +1,129 @@
+<template>
+    <f7-page>
+        <f7-navbar :title="$t('Sign Up')" :back-link="$t('Back')"></f7-navbar>
+        <f7-list no-hairlines-md>
+            <f7-list-input
+                type="text"
+                clear-button
+                :label="$t('Username')"
+                :placeholder="$t('Your username')"
+                :value="username"
+                @input="username = $event.target.value"
+            ></f7-list-input>
+
+            <f7-list-input
+                type="password"
+                clear-button
+                :label="$t('Password')"
+                :placeholder="$t('Your password')"
+                :value="password"
+                @input="password = $event.target.value"
+            ></f7-list-input>
+
+            <f7-list-input
+                type="email"
+                clear-button
+                :label="$t('E-mail')"
+                :placeholder="$t('Your email')"
+                :value="email"
+                @input="email = $event.target.value"
+            ></f7-list-input>
+
+            <f7-list-input
+                type="text"
+                clear-button
+                :label="$t('Nickname')"
+                :placeholder="$t('Your nickname')"
+                :value="nickname"
+                @input="nickname = $event.target.value"
+            ></f7-list-input>
+        </f7-list>
+
+        <f7-button large fill :class="{ 'disabled': inputIsEmpty }" :text="$t('Sign Up')" @click="signup"></f7-button>
+    </f7-page>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            username: '',
+            password: '',
+            email: '',
+            nickname: ''
+        };
+    },
+    computed: {
+        inputIsEmpty() {
+            return !this.username || !this.password || !this.email || !this.nickname;
+        }
+    },
+    methods: {
+        signup() {
+            const self = this;
+            const app = self.$f7;
+            const router = self.$f7router;
+
+            if (!this.username) {
+                self.$alert('Please input username');
+                return;
+            }
+
+            if (!this.password) {
+                self.$alert('Please input password');
+                return;
+            }
+
+            if (!this.email) {
+                self.$alert('Please input email');
+                return;
+            }
+
+            if (!this.nickname) {
+                self.$alert('Please input nickname');
+                return;
+            }
+
+            let hasResponse = false;
+
+            setTimeout(() => {
+                if (!hasResponse) {
+                    app.preloader.show();
+                }
+            }, 200);
+
+            self.$services.register({
+                username: self.username,
+                password: self.password,
+                email: self.email,
+                nickname: self.nickname
+            }).then(response => {
+                hasResponse = true;
+                app.preloader.hide();
+                const data = response.data;
+
+                if (!data || !data.success || !data.result) {
+                    self.$alert('Unable to sign up');
+                    return;
+                }
+
+                if (typeof(data.result) === 'string') {
+                    self.$user.updateToken(data.result);
+                }
+
+                self.$toast('You have been successfully registered');
+                router.navigate('/');
+            }).catch(error => {
+                hasResponse = true;
+                app.preloader.hide();
+
+                if (error.response && error.response.data && error.response.data.errorMessage) {
+                    self.$alert({ error: error.response.data });
+                } else {
+                    self.$alert('Unable to sign up');
+                }
+            });
+        }
+    }
+};
+</script>