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