diff --git a/resources/assets/src/components/auth/Forgot.vue b/resources/assets/src/components/auth/Forgot.vue
new file mode 100644
index 00000000..c311d514
--- /dev/null
+++ b/resources/assets/src/components/auth/Forgot.vue
@@ -0,0 +1,117 @@
+<template>
+    <form>
+        <div class="form-group has-feedback">
+            <input
+                v-model="email"
+                type="email"
+                class="form-control"
+                :placeholder="$t('auth.email')"
+                ref="email"
+            >
+            <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
+        </div>
+
+        <div class="row">
+            <div class="col-xs-8">
+                <div class="form-group has-feedback">
+                    <input
+                        v-model="captcha"
+                        type="text"
+                        class="form-control"
+                        :placeholder="$t('auth.captcha')"
+                        ref="captcha"
+                    >
+                </div>
+            </div>
+            <div class="col-xs-4">
+                <img
+                    class="pull-right captcha"
+                    :src="`${baseUrl}/auth/captcha?v=${time}`"
+                    @click="refreshCaptcha"
+                    alt="CAPTCHA"
+                    :title="$t('auth.change-captcha')"
+                    data-placement="top"
+                    data-toggle="tooltip"
+                >
+            </div>
+        </div>
+
+        <div class="callout callout-success" :class="{ hide: !successMsg }">{{ successMsg }}</div>
+        <div class="callout callout-info" :class="{ hide: !infoMsg }">{{ infoMsg }}</div>
+        <div class="callout callout-warning" :class="{ hide: !warningMsg }">{{ warningMsg }}</div>
+
+        <div class="row">
+            <div class="col-xs-8">
+                <a :href="`${baseUrl}/auth/login`" class="text-center" v-t="'auth.forgot.login-link'"></a>
+            </div>
+            <div class="col-xs-4">
+                <button v-if="pending" disabled class="btn btn-primary btn-block btn-flat">
+                    <i class="fa fa-spinner fa-spin"></i> {{ $t('auth.sending') }}
+                </button>
+                <button v-else @click.prevent="submit" class="btn btn-primary btn-block btn-flat">{{ $t('auth.forgot.button') }}</button>
+            </div>
+        </div>
+    </form>
+</template>
+
+<script>
+export default {
+    name: 'Forgot',
+    props: {
+        baseUrl: {
+            default: blessing.base_url
+        }
+    },
+    data: () => ({
+        email: '',
+        captcha: '',
+        time: Date.now(),
+        successMsg: '',
+        infoMsg: '',
+        warningMsg: '',
+        pending: false
+    }),
+    methods: {
+        async submit() {
+            const { email, captcha } = this;
+
+            if (!email) {
+                this.infoMsg = this.$t('auth.emptyEmail');
+                this.$refs.email.focus();
+                return;
+            }
+
+            if (!/\S+@\S+\.\S+/.test(email)) {
+                this.infoMsg = this.$t('auth.invalidEmail');
+                this.$refs.email.focus();
+                return;
+            }
+
+            if (!captcha) {
+                this.infoMsg = this.$t('auth.emptyCaptcha');
+                this.$refs.captcha.focus();
+                return;
+            }
+
+            this.pending = true;
+            const { errno, msg } = await this.$http.post(
+                '/auth/forgot',
+                { email, captcha }
+            );
+            if (errno === 0) {
+                this.infoMsg = this.warningMsg = '';
+                this.successMsg = msg;
+                this.pending = false;
+            } else {
+                this.infoMsg = '';
+                this.warningMsg = msg;
+                this.refreshCaptcha();
+                this.pending = false;
+            }
+        },
+        refreshCaptcha() {
+            this.time = Date.now();
+        }
+    }
+};
+</script>
diff --git a/resources/assets/src/components/route.js b/resources/assets/src/components/route.js
index 905d9de0..ad8ad7d4 100644
--- a/resources/assets/src/components/route.js
+++ b/resources/assets/src/components/route.js
@@ -44,4 +44,9 @@ export default [
         component: () => import('./auth/Register'),
         el: 'form'
     },
+    {
+        path: 'auth/forgot',
+        component: () => import('./auth/Forgot'),
+        el: 'form'
+    },
 ];
diff --git a/resources/assets/tests/components/auth/Forgot.test.js b/resources/assets/tests/components/auth/Forgot.test.js
new file mode 100644
index 00000000..18fea09a
--- /dev/null
+++ b/resources/assets/tests/components/auth/Forgot.test.js
@@ -0,0 +1,50 @@
+import Vue from 'vue';
+import { mount } from '@vue/test-utils';
+import Forgot from '@/components/auth/Forgot';
+
+test('click to refresh captcha', () => {
+    jest.spyOn(Date, 'now');
+    const wrapper = mount(Forgot);
+    wrapper.find('img').trigger('click');
+    expect(Date.now).toHaveBeenCalledTimes(2);
+});
+
+test('submit forgot form', async () => {
+    jest.spyOn(Date, 'now');
+    Vue.prototype.$http.post
+        .mockResolvedValueOnce({ errno: 1, msg: 'fail' })
+        .mockResolvedValueOnce({ errno: 0, msg: 'ok' });
+    const wrapper = mount(Forgot);
+    const button = wrapper.find('button');
+    const info = wrapper.find('.callout-info');
+    const warning = wrapper.find('.callout-warning');
+    const success = wrapper.find('.callout-success');
+
+    button.trigger('click');
+    expect(Vue.prototype.$http.post).not.toBeCalled();
+    expect(info.text()).toBe('auth.emptyEmail');
+
+    wrapper.find('[type="email"]').setValue('a');
+    button.trigger('click');
+    expect(Vue.prototype.$http.post).not.toBeCalled();
+    expect(info.text()).toBe('auth.invalidEmail');
+
+    wrapper.find('[type="email"]').setValue('a@b.c');
+    button.trigger('click');
+    expect(Vue.prototype.$http.post).not.toBeCalled();
+    expect(info.text()).toBe('auth.emptyCaptcha');
+
+    wrapper.find('[type="text"]').setValue('captcha');
+    button.trigger('click');
+    await wrapper.vm.$nextTick();
+    expect(Vue.prototype.$http.post).toBeCalledWith(
+        '/auth/forgot',
+        { email: 'a@b.c', captcha: 'captcha' }
+    );
+    expect(warning.text()).toBe('fail');
+    expect(Date.now).toHaveBeenCalledTimes(2);
+
+    button.trigger('click');
+    await wrapper.vm.$nextTick();
+    expect(success.text()).toBe('ok');
+});
diff --git a/resources/lang/en/front-end.yml b/resources/lang/en/front-end.yml
index f56e656b..674434f7 100644
--- a/resources/lang/en/front-end.yml
+++ b/resources/lang/en/front-end.yml
@@ -29,6 +29,9 @@ auth:
   repeat-pwd: Repeat your password
   nickname-intro: Whatever you like expect special characters
   register-button: Register
+  forgot:
+    login-link: I do remember it
+    button: Send
 
 skinlib:
   addToCloset: Add to closet
diff --git a/resources/lang/zh_CN/front-end.yml b/resources/lang/zh_CN/front-end.yml
index efe987f0..963cadf2 100644
--- a/resources/lang/zh_CN/front-end.yml
+++ b/resources/lang/zh_CN/front-end.yml
@@ -29,6 +29,9 @@ auth:
   repeat-pwd: 重复密码
   nickname-intro: 昵称可使用汉字，不可包含特殊字符
   register-button: 注册
+  forgot:
+    login-link: 我又想起来了
+    button: 发送
 
 skinlib:
   addToCloset: 添加至衣柜
diff --git a/resources/views/auth/forgot.tpl b/resources/views/auth/forgot.tpl
index 2bb26777..56d7f35b 100644
--- a/resources/views/auth/forgot.tpl
+++ b/resources/views/auth/forgot.tpl
@@ -16,38 +16,7 @@
         <div class="callout callout-warning">{{ Session::pull('msg') }}</div>
         @endif
 
-        <form id="login-form">
-            <div class="form-group has-feedback">
-                <input id="email" type="email" class="form-control" placeholder="@lang('auth.email')">
-                <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
-            </div>
-
-            <div class="row" id="captcha-form">
-                <div class="col-xs-8">
-                    <div class="form-group has-feedback">
-                        <input id="captcha" type="text" class="form-control" placeholder="@lang('auth.captcha')">
-                    </div>
-                </div>
-                <!-- /.col -->
-                <div class="col-xs-4">
-                    <img class="pull-right captcha" src="{{ url('auth/captcha') }}" alt="CAPTCHA" title="@lang('auth.change-captcha')" data-placement="top" data-toggle="tooltip">
-                </div>
-                <!-- /.col -->
-            </div>
-
-            <div id="msg" class="callout hide"></div>
-
-            <div class="row">
-                <div class="col-xs-8">
-                    <a href="{{ url('auth/login') }}" class="text-center">@lang('auth.forgot.login-link')</a>
-                </div>
-                <!-- /.col -->
-                <div class="col-xs-4">
-                    <button id="forgot-button" class="btn btn-primary btn-block btn-flat">@lang('auth.forgot.button')</button>
-                </div>
-                <!-- /.col -->
-            </div>
-        </form>
+        <form></form>
 
     </div>
     <!-- /.login-box-body -->