This commit is contained in:
syuilo 2018-06-16 07:40:07 +09:00
parent 65f35dc9f4
commit c9d993b838
3 changed files with 28 additions and 56 deletions

View file

@ -1,6 +1,6 @@
<template> <template>
<form class="mk-signin" :class="{ signing }" @submit.prevent="onSubmit"> <form class="mk-signin" :class="{ signing }" @submit.prevent="onSubmit">
<div class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }"></div> <div class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }" v-show="withAvatar"></div>
<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @input="onUsernameChange"> <ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @input="onUsernameChange">
<span>%i18n:@username%</span> <span>%i18n:@username%</span>
<span slot="prefix">@</span> <span slot="prefix">@</span>
@ -21,6 +21,13 @@ import Vue from 'vue';
import { apiUrl, host } from '../../../config'; import { apiUrl, host } from '../../../config';
export default Vue.extend({ export default Vue.extend({
props: {
withAvatar: {
type: Boolean,
required: false,
default: true
}
},
data() { data() {
return { return {
signing: false, signing: false,

View file

@ -38,10 +38,6 @@
<header :class="$style.signupFormHeader">%i18n:@signup%</header> <header :class="$style.signupFormHeader">%i18n:@signup%</header>
<mk-signup :class="$style.signupForm"/> <mk-signup :class="$style.signupForm"/>
</modal> </modal>
<modal name="signin" width="500px" height="auto" scrollable>
<header :class="$style.signinFormHeader">%i18n:@signin%</header>
<mk-signin :class="$style.signinForm"/>
</modal>
</div> </div>
</template> </template>

View file

@ -9,26 +9,15 @@
<router-link class="signup" to="/signup">新規登録</router-link> <router-link class="signup" to="/signup">新規登録</router-link>
</div> </div>
<div class="login"> <div class="login">
<form @submit.prevent="onSubmit"> <mk-signin :with-avatar="false"/>
<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" autofocus required @change="onUsernameChange">
<span>ユーザー名</span>
<span slot="prefix">@</span>
<span slot="suffix">@{{ host }}</span>
</ui-input>
<ui-input v-model="password" type="password" required>
<span>パスワード</span>
<span slot="prefix">%fa:lock%</span>
</ui-input>
<ui-input v-if="user && user.twoFactorEnabled" v-model="token" type="number" required/>
<ui-button type="submit" :disabled="signing">{{ signing ? 'ログインしています' : 'ログイン' }}</ui-button>
</form>
<div style="margin: 8px 0;">
<a :href="`${apiUrl}/signin/twitter`">Twitterでログイン</a>
</div>
</div> </div>
<div class="tl"> <div class="tl">
<mk-welcome-timeline/> <mk-welcome-timeline/>
</div> </div>
<div class="stats" v-if="stats">
<span>%fa:user% {{ stats.originalUsersCount | number }}</span>
<span>%fa:pencil-alt% {{ stats.originalNotesCount | number }}</span>
</div>
<footer> <footer>
<small>{{ copyright }}</small> <small>{{ copyright }}</small>
</footer> </footer>
@ -43,49 +32,18 @@ import { apiUrl, copyright, host, name, description } from '../../../config';
export default Vue.extend({ export default Vue.extend({
data() { data() {
return { return {
signing: false,
user: null,
username: '',
password: '',
token: '',
apiUrl, apiUrl,
copyright, copyright,
users: [], stats: null,
host, host,
name, name,
description description
}; };
}, },
mounted() { created() {
(this as any).api('users', { (this as any).api('stats').then(stats => {
sort: '+follower', this.stats = stats;
limit: 20
}).then(users => {
this.users = users;
}); });
},
methods: {
onUsernameChange() {
(this as any).api('users/show', {
username: this.username
}).then(user => {
this.user = user;
});
},
onSubmit() {
this.signing = true;
(this as any).api('signin', {
username: this.username,
password: this.password,
token: this.user && this.user.twoFactorEnabled ? this.token : undefined
}).then(() => {
location.reload();
}).catch(() => {
alert('something happened');
this.signing = false;
});
}
} }
}); });
</script> </script>
@ -164,6 +122,17 @@ export default Vue.extend({
overflow auto overflow auto
-webkit-overflow-scrolling touch -webkit-overflow-scrolling touch
> .stats
margin 16px 0
padding 8px
font-size 14px
color #444
background rgba(#000, 0.1)
border-radius 6px
> *
margin 0 8px
> footer > footer
text-align center text-align center
color #444 color #444