2.42.0

package.json

@@ -1,8 +1,8 @@
 {
 	"name": "misskey",
 	"author": "syuilo <i@syuilo.com>",
-	"version": "2.41.1",
-	"clientVersion": "1.0.6512",
+	"version": "2.42.0",
+	"clientVersion": "1.0.6517",
 	"codename": "nighthike",
 	"main": "./built/index.js",
 	"private": true,

src/client/app/common/views/components/signin.vue

@@ -1,6 +1,7 @@
 <template>
 <form class="mk-signin" :class="{ signing }" @submit.prevent="onSubmit">
-	<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" autofocus required @change="onUsernameChange">
+	<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>
 		<span slot="suffix">@{{ host }}</span>
@@ -20,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,
@@ -37,6 +45,8 @@ export default Vue.extend({
 				username: this.username
 			}).then(user => {
 				this.user = user;
+			}, () => {
+				this.user = null;
 			});
 		},
 		onSubmit() {
@@ -61,84 +71,19 @@ export default Vue.extend({
 @import '~const.styl'
 
 .mk-signin
+	color #555
+
 	&.signing
 		&, *
 			cursor wait !important
 
-	label
-		display block
-		margin 12px 0
-
-		[data-fa]
-			display block
-			pointer-events none
-			position absolute
-			bottom 0
-			top 0
-			left 0
-			z-index 1
-			margin auto
-			padding 0 16px
-			height 1em
-			color #898786
-
-		input[type=text]
-		input[type=password]
-		input[type=number]
-			user-select text
-			display inline-block
-			cursor auto
-			padding 0 0 0 38px
-			margin 0
-			width 100%
-			line-height 44px
-			font-size 1em
-			color rgba(#000, 0.7)
-			background #fff
-			outline none
-			border solid 1px #eee
-			border-radius 4px
-
-			&:hover
-				background rgba(255, 255, 255, 0.7)
-				border-color #ddd
-
-				& + i
-					color #797776
-
-			&:focus
-				background #fff
-				border-color #ccc
-
-				& + i
-					color #797776
-
-	[type=submit]
-		cursor pointer
-		padding 16px
-		margin -6px 0 0 0
-		width 100%
-		font-size 1.2em
-		color rgba(#000, 0.5)
-		outline none
-		border none
-		border-radius 0
-		background transparent
-		transition all .5s ease
-
-		&:hover
-			color $theme-color
-			transition all .2s ease
-
-		&:focus
-			color $theme-color
-			transition all .2s ease
-
-		&:active
-			color darken($theme-color, 30%)
-			transition all .2s ease
-
-		&:disabled
-			opacity 0.7
+	> .avatar
+		margin 16px auto 0 auto
+		width 64px
+		height 64px
+		background #ddd
+		background-position center
+		background-size cover
+		border-radius 100%
 
 </style>

src/client/app/common/views/components/ui/input.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="ui-input" :class="[{ focused, filled }, styl]">
 	<div class="icon" ref="icon"><slot name="icon"></slot></div>
-	<div class="input" @click="focus" @mousedown="focus">
+	<div class="input">
 		<div class="password-meter" v-if="withPasswordMeter" v-show="passwordStrength != ''" :data-strength="passwordStrength">
 			<div class="value" ref="passwordMetar"></div>
 		</div>
@@ -30,7 +30,7 @@
 					:value="value"
 					@change="onChangeFile">
 		</template>
-		<div class="suffix"><slot name="suffix"></slot></div>
+		<div class="suffix" ref="suffix"><slot name="suffix"></slot></div>
 	</div>
 	<div class="text"><slot name="text"></slot></div>
 </div>
@@ -128,6 +128,14 @@ export default Vue.extend({
 	mounted() {
 		if (this.$refs.prefix) {
 			this.$refs.label.style.left = (this.$refs.prefix.offsetLeft + this.$refs.prefix.offsetWidth) + 'px';
+			if (this.$refs.prefix.offsetWidth) {
+				this.$refs.input.style.paddingLeft = this.$refs.prefix.offsetWidth + 'px';
+			}
+		}
+		if (this.$refs.suffix) {
+			if (this.$refs.suffix.offsetWidth) {
+				this.$refs.input.style.paddingRight = this.$refs.suffix.offsetWidth + 'px';
+			}
 		}
 	},
 	methods: {
@@ -165,14 +173,8 @@ root(isDark, fill)
 			margin-left 28px
 
 	> .input
-		display flex
-		cursor text
 
-		if fill
-			padding 6px 12px
-			background rgba(#000, 0.035)
-			border-radius 6px
-		else
+		if !fill
 			&:before
 				content ''
 				display block
@@ -232,6 +234,7 @@ root(isDark, fill)
 
 		> .label
 			position absolute
+			z-index 1
 			top fill ? 6px : 0
 			left 0
 			pointer-events none
@@ -247,7 +250,6 @@ root(isDark, fill)
 
 		> input
 			display block
-			flex 1
 			width 100%
 			margin 0
 			padding 0
@@ -262,29 +264,46 @@ root(isDark, fill)
 			outline none
 			box-shadow none
 
+			if fill
+				padding 6px 12px
+				background rgba(#000, 0.035)
+				border-radius 6px
+
 			&[type='file']
 				display none
 
 		> .prefix
 		> .suffix
 			display block
-			align-self center
-			justify-self center
+			position absolute
+			z-index 1
+			top 0
 			font-size 16px
-			line-height 32px
+			line-height fill ? 44px : 32px
 			color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
 			pointer-events none
 
+			&:empty
+				display none
+
 			> *
 				display block
 				min-width 16px
 
 		> .prefix
+			left 0
 			padding-right 4px
 
+			if fill
+				padding-left 12px
+
 		> .suffix
+			right 0
 			padding-left 4px
 
+			if fill
+				padding-right 12px
+
 	> .text
 		margin 6px 0
 		font-size 13px

src/client/app/desktop/views/pages/welcome.vue

@@ -7,13 +7,6 @@
 	</button>
 	<div class="body" :style="{ backgroundImage: `url('${ welcomeBgUrl }')` }">
 		<div class="container">
-			<div class="info">
-				<span>%i18n:common.misskey% <b>{{ host }}</b></span>
-				<span class="stats" v-if="stats">
-					<span>%fa:user% {{ stats.originalUsersCount | number }}</span>
-					<span>%fa:pencil-alt% {{ stats.originalNotesCount | number }}</span>
-				</span>
-			</div>
 			<main>
 				<div class="about">
 					<h1 v-if="name">{{ name }}</h1>
@@ -26,6 +19,13 @@
 					<mk-signin/>
 				</div>
 			</main>
+			<div class="info">
+				<span>%i18n:common.misskey% <b>{{ host }}</b></span>
+				<span class="stats" v-if="stats">
+					<span>%fa:user% {{ stats.originalUsersCount | number }}</span>
+					<span>%fa:pencil-alt% {{ stats.originalNotesCount | number }}</span>
+				</span>
+			</div>
 			<mk-nav class="nav"/>
 		</div>
 		<mk-forkit class="forkit"/>
@@ -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>
 
@@ -57,7 +53,8 @@ export default Vue.extend({
 			welcomeBgUrl,
 			host,
 			name,
-			description
+			description,
+			pointerInterval: null
 		};
 	},
 	created() {
@@ -66,11 +63,18 @@ export default Vue.extend({
 		});
 	},
 	mounted() {
-		const x = this.$refs.signup.getBoundingClientRect();
-		this.$refs.pointer.style.top = x.top + x.height + 'px';
-		this.$refs.pointer.style.left = x.left + 'px';
+		this.point();
+		this.pointerInterval = setInterval(this.point, 100);
+	},
+	beforeDestroy() {
+		clearInterval(this.pointerInterval);
 	},
 	methods: {
+		point() {
+			const x = this.$refs.signup.getBoundingClientRect();
+			this.$refs.pointer.style.top = x.top + x.height + 'px';
+			this.$refs.pointer.style.left = x.left + 'px';
+		},
 		signup() {
 			this.$modal.show('signup');
 		},
@@ -109,7 +113,7 @@ root(isDark)
 		right 0
 		width 180px
 		margin 0 0 0 -180px
-		transform rotateY(180deg) translateX(-10px) translateY(-25px)
+		transform rotateY(180deg) translateX(-10px) translateY(-48px)
 		pointer-events none
 
 	> button
@@ -157,23 +161,6 @@ root(isDark)
 			$loginWidth = 340px
 			$width = $aboutWidth + $loginWidth
 
-			> .info
-				margin 0 auto 16px auto
-				padding 12px
-				width $width
-				font-size 14px
-				color #fff
-				background rgba(#000, 0.2)
-				border-radius 8px
-
-				> .stats
-					margin-left 16px
-					padding-left 16px
-					border-left solid 1px #fff
-
-					> *
-						margin-right 16px
-
 			> main
 				display flex
 				margin auto
@@ -214,6 +201,23 @@ root(isDark)
 					padding 16px 32px 32px 32px
 					background #f5f5f5
 
+			> .info
+				margin 16px auto
+				padding 12px
+				width $width
+				font-size 14px
+				color #fff
+				background rgba(#000, 0.2)
+				border-radius 8px
+
+				> .stats
+					margin-left 16px
+					padding-left 16px
+					border-left solid 1px #fff
+
+					> *
+						margin-right 16px
+
 			> .nav
 				display block
 				margin 16px 0

src/client/app/mobile/views/pages/welcome.vue

@@ -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