This commit is contained in:
parent
65f35dc9f4
commit
c9d993b838
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<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">
|
||||
<span>%i18n:@username%</span>
|
||||
<span slot="prefix">@</span>
|
||||
|
@ -21,6 +21,13 @@ import Vue from 'vue';
|
|||
import { apiUrl, host } from '../../../config';
|
||||
|
||||
export default Vue.extend({
|
||||
props: {
|
||||
withAvatar: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
signing: false,
|
||||
|
|
|
@ -38,10 +38,6 @@
|
|||
<header :class="$style.signupFormHeader">%i18n:@signup%</header>
|
||||
<mk-signup :class="$style.signupForm"/>
|
||||
</modal>
|
||||
<modal name="signin" width="500px" height="auto" scrollable>
|
||||
<header :class="$style.signinFormHeader">%i18n:@signin%</header>
|
||||
<mk-signin :class="$style.signinForm"/>
|
||||
</modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
@ -9,26 +9,15 @@
|
|||
<router-link class="signup" to="/signup">新規登録</router-link>
|
||||
</div>
|
||||
<div class="login">
|
||||
<form @submit.prevent="onSubmit">
|
||||
<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>
|
||||
<mk-signin :with-avatar="false"/>
|
||||
</div>
|
||||
<div class="tl">
|
||||
<mk-welcome-timeline/>
|
||||
</div>
|
||||
<div class="stats" v-if="stats">
|
||||
<span>%fa:user% {{ stats.originalUsersCount | number }}</span>
|
||||
<span>%fa:pencil-alt% {{ stats.originalNotesCount | number }}</span>
|
||||
</div>
|
||||
<footer>
|
||||
<small>{{ copyright }}</small>
|
||||
</footer>
|
||||
|
@ -43,49 +32,18 @@ import { apiUrl, copyright, host, name, description } from '../../../config';
|
|||
export default Vue.extend({
|
||||
data() {
|
||||
return {
|
||||
signing: false,
|
||||
user: null,
|
||||
username: '',
|
||||
password: '',
|
||||
token: '',
|
||||
apiUrl,
|
||||
copyright,
|
||||
users: [],
|
||||
stats: null,
|
||||
host,
|
||||
name,
|
||||
description
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
(this as any).api('users', {
|
||||
sort: '+follower',
|
||||
limit: 20
|
||||
}).then(users => {
|
||||
this.users = users;
|
||||
created() {
|
||||
(this as any).api('stats').then(stats => {
|
||||
this.stats = stats;
|
||||
});
|
||||
},
|
||||
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>
|
||||
|
@ -164,6 +122,17 @@ export default Vue.extend({
|
|||
overflow auto
|
||||
-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
|
||||
text-align center
|
||||
color #444
|
||||
|
|
Loading…
Reference in New Issue