✌️

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_]+$" spellcheck="false" autofocus required @change="onUsernameChange">
+	<div class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }"></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>
@@ -37,6 +38,8 @@ export default Vue.extend({
 				username: this.username
 			}).then(user => {
 				this.user = user;
+			}, () => {
+				this.user = null;
 			});
 		},
 		onSubmit() {
@@ -61,84 +64,19 @@ export default Vue.extend({
 @import '~const.styl'
 
 .mk-signin
+	color #555
+
 	&.signing
 		&, *
 			cursor wait !important
 
-	label
+	> .avatar
-		display block
+		margin 16px auto 0 auto
-		margin 12px 0
+		width 64px
-
+		height 64px
-		[data-fa]
+		background #ddd
-			display block
+		background-position center
-			pointer-events none
+		background-size cover
-			position absolute
+		border-radius 100%
-			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
 
 </style>

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"/>
@@ -165,23 +165,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
@@ -222,6 +205,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