From 3a4833818f67aec56bc3570088a1ef34466f3905 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 14 Jun 2018 09:51:55 +0900
Subject: [PATCH] wip

---
 .../views/components/material/button.vue      |  3 +-
 .../views/components/material/input.vue       | 43 ++++++++--
 .../app/common/views/components/signup.vue    | 54 ++++++-------
 src/client/app/mobile/views/pages/signup.vue  | 41 ++--------
 src/client/app/mobile/views/pages/welcome.vue | 80 +++++++++----------
 5 files changed, 109 insertions(+), 112 deletions(-)

diff --git a/src/client/app/common/views/components/material/button.vue b/src/client/app/common/views/components/material/button.vue
index 0c768cf4cc..8dacedbac6 100644
--- a/src/client/app/common/views/components/material/button.vue
+++ b/src/client/app/common/views/components/material/button.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="ui-button">
-	<button>
+	<button :type="type">
 		<slot></slot>
 	</button>
 </div>
@@ -25,6 +25,7 @@ export default Vue.extend({
 	> button
 		display block
 		width 100%
+		margin 32px 0 16px 0
 		padding 0
 		color $theme-color-foreground
 		font-weight bold
diff --git a/src/client/app/common/views/components/material/input.vue b/src/client/app/common/views/components/material/input.vue
index fe64354908..6564b3aa6c 100644
--- a/src/client/app/common/views/components/material/input.vue
+++ b/src/client/app/common/views/components/material/input.vue
@@ -3,16 +3,40 @@
 	<div class="input">
 		<span class="label" ref="label"><slot></slot></span>
 		<div class="prefix" ref="prefix" @click="focus"><slot name="prefix"></slot></div>
-		<input ref="input" :value="value" @input="$emit('input', $event.target.value)" @focus="focused = true" @blur="focused = false">
+		<input ref="input"
+				:type="type"
+				:value="value"
+				:required="required"
+				:readonly="readonly"
+				@input="$emit('input', $event.target.value)"
+				@focus="focused = true"
+				@blur="focused = false">
 		<div class="suffix" @click="focus"><slot name="suffix"></slot></div>
 	</div>
+	<div class="text"><slot name="text"></slot></div>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
 export default Vue.extend({
-	props: ['value'],
+	props: {
+		value: {
+			required: false
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false
+		},
+		readonly: {
+			type: Boolean,
+			required: false
+		}
+	},
 	data() {
 		return {
 			focused: false
@@ -38,13 +62,13 @@ export default Vue.extend({
 @import '~const.styl'
 
 .ui-input
-	margin-bottom 32px
+	margin-bottom 16px
+	padding-top 16px
 
 	> .input
 		display flex
-		margin-top 16px
 		padding 6px 12px
-		background #f5f5f5
+		background rgba(#000, 0.035)
 		border-radius 6px
 
 		> .label
@@ -89,9 +113,16 @@ export default Vue.extend({
 		> .suffix
 			padding-left 4px
 
+	> .text
+		margin 8px 0
+		font-size 14px
+
+		> p
+			margin 0
+
 	&.focused
 		> .input
-			background #eee
+			background rgba(#000, 0.05)
 
 			> .label
 				color $theme-color
diff --git a/src/client/app/common/views/components/signup.vue b/src/client/app/common/views/components/signup.vue
index f8bf7dd798..3adb10f2c3 100644
--- a/src/client/app/common/views/components/signup.vue
+++ b/src/client/app/common/views/components/signup.vue
@@ -1,20 +1,27 @@
 <template>
 <form class="mk-signup" @submit.prevent="onSubmit" autocomplete="off">
 	<label class="username">
-		<p class="caption">%fa:at%%i18n:@username%</p>
-		<input v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" placeholder="a~z、A~Z、0~9、-" autocomplete="off" required @input="onChangeUsername"/>
-		<p class="profile-page-url-preview" v-if="shouldShowProfileUrl">{{ `${url}/@${username}` }}</p>
-		<p class="info" v-if="usernameState == 'wait'" style="color:#999">%fa:spinner .pulse .fw%%i18n:@checking%</p>
-		<p class="info" v-if="usernameState == 'ok'" style="color:#3CB7B5">%fa:check .fw%%i18n:@available%</p>
-		<p class="info" v-if="usernameState == 'unavailable'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@unavailable%</p>
-		<p class="info" v-if="usernameState == 'error'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@error%</p>
-		<p class="info" v-if="usernameState == 'invalid-format'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@invalid-format%</p>
-		<p class="info" v-if="usernameState == 'min-range'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@too-short%</p>
-		<p class="info" v-if="usernameState == 'max-range'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@too-long%</p>
+		<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" autocomplete="off" required @input="onChangeUsername">
+			<span>%i18n:@username%</span>
+			<span slot="prefix">@</span>
+			<span slot="suffix">@{{ host }}</span>
+			<p slot="text" v-if="usernameState == 'wait'" style="color:#999">%fa:spinner .pulse .fw%%i18n:@checking%</p>
+			<p slot="text" v-if="usernameState == 'ok'" style="color:#3CB7B5">%fa:check .fw%%i18n:@available%</p>
+			<p slot="text" v-if="usernameState == 'unavailable'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@unavailable%</p>
+			<p slot="text" v-if="usernameState == 'error'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@error%</p>
+			<p slot="text" v-if="usernameState == 'invalid-format'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@invalid-format%</p>
+			<p slot="text" v-if="usernameState == 'min-range'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@too-short%</p>
+			<p slot="text" v-if="usernameState == 'max-range'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@too-long%</p>
+		</ui-input>
 	</label>
 	<label class="password">
-		<p class="caption">%fa:lock%%i18n:@password%</p>
-		<input v-model="password" type="password" placeholder="%i18n:@password-placeholder%" autocomplete="off" required @input="onChangePassword"/>
+		<ui-input v-model="password" type="password" autocomplete="off" required @input="onChangePassword">
+			<span>%i18n:@password%</span>
+			<span slot="prefix">%fa:lock%</span>
+			<div slot="text">
+
+			</div>
+		</ui-input>
 		<div class="meter" v-show="passwordStrength != ''" :data-strength="passwordStrength">
 			<div class="value" ref="passwordMetar"></div>
 		</div>
@@ -23,14 +30,15 @@
 		<p class="info" v-if="passwordStrength == 'high'" style="color:#3CB7B5">%fa:check .fw%%i18n:@strong-password%</p>
 	</label>
 	<label class="retype-password">
-		<p class="caption">%fa:lock%%i18n:@password%(%i18n:@retype%)</p>
-		<input v-model="retypedPassword" type="password" placeholder="%i18n:@retype-placeholder%" autocomplete="off" required @input="onChangePasswordRetype"/>
+		<ui-input v-model="retypedPassword" type="password" autocomplete="off" required @input="onChangePasswordRetype">
+			<span>%i18n:@password% (%i18n:@retype%)</span>
+			<span slot="prefix">%fa:lock%</span>
+		</ui-input>
 		<p class="info" v-if="passwordRetypeState == 'match'" style="color:#3CB7B5">%fa:check .fw%%i18n:@password-matched%</p>
 		<p class="info" v-if="passwordRetypeState == 'not-match'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@password-not-matched%</p>
 	</label>
 	<label class="recaptcha">
-		<p class="caption"><template v-if="recaptchaed">%fa:toggle-on%</template><template v-if="!recaptchaed">%fa:toggle-off%</template>%i18n:@recaptcha%</p>
-		<div class="g-recaptcha" data-callback="onRecaptchaed" data-expired-callback="onRecaptchaExpired" :data-sitekey="recaptchaSitekey"></div>
+		<div class="g-recaptcha" :data-sitekey="recaptchaSitekey"></div>
 	</label>
 	<label class="agree-tou">
 		<input name="agree-tou" type="checkbox" autocomplete="off" required/>
@@ -43,18 +51,18 @@
 <script lang="ts">
 import Vue from 'vue';
 const getPasswordStrength = require('syuilo-password-strength');
-import { url, docsUrl, lang, recaptchaSitekey } from '../../../config';
+import { host, url, docsUrl, lang, recaptchaSitekey } from '../../../config';
 
 export default Vue.extend({
 	data() {
 		return {
+			host,
 			username: '',
 			password: '',
 			retypedPassword: '',
 			url,
 			touUrl: `${docsUrl}/${lang}/tou`,
 			recaptchaSitekey,
-			recaptchaed: false,
 			usernameState: null,
 			passwordStrength: '',
 			passwordRetypeState: null
@@ -130,19 +138,9 @@ export default Vue.extend({
 				alert('%i18n:@some-error%');
 
 				(window as any).grecaptcha.reset();
-				this.recaptchaed = false;
 			});
 		}
 	},
-	created() {
-		(window as any).onRecaptchaed = () => {
-			this.recaptchaed = true;
-		};
-
-		(window as any).onRecaptchaExpired = () => {
-			this.recaptchaed = false;
-		};
-	},
 	mounted() {
 		const head = document.getElementsByTagName('head')[0];
 		const script = document.createElement('script');
diff --git a/src/client/app/mobile/views/pages/signup.vue b/src/client/app/mobile/views/pages/signup.vue
index b8245beb00..f2b29bca60 100644
--- a/src/client/app/mobile/views/pages/signup.vue
+++ b/src/client/app/mobile/views/pages/signup.vue
@@ -1,28 +1,18 @@
 <template>
 <div class="signup">
 	<h1>Misskeyをはじめる</h1>
-	<p>いつでも、どこからでもMisskeyを利用できます。もちろん、無料です。</p>
-	<div class="form">
-		<p>新規登録</p>
-		<div>
-			<mk-signup/>
-		</div>
-	</div>
+	<mk-signup/>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-export default Vue.extend({
-	mounted() {
-		document.documentElement.style.background = '#293946';
-	}
-});
+export default Vue.extend({});
 </script>
 
 <style lang="stylus" scoped>
 .signup
-	padding 16px
+	padding 32px
 	margin 0 auto
 	max-width 500px
 
@@ -30,28 +20,7 @@ export default Vue.extend({
 		margin 0
 		padding 8px
 		font-size 1.5em
-		font-weight normal
-		color #c3c6ca
-
-		& + p
-			margin 0 0 16px 0
-			padding 0 8px 0 8px
-			color #949fa9
-
-	.form
-		background #fff
-		border solid 1px rgba(#000, 0.2)
-		border-radius 8px
-		overflow hidden
-
-		> p
-			margin 0
-			padding 12px 20px
-			color #555
-			background #f5f5f5
-			border-bottom solid 1px #ddd
-
-		> div
-			padding 16px
+		font-weight bold
+		color #444
 
 </style>
diff --git a/src/client/app/mobile/views/pages/welcome.vue b/src/client/app/mobile/views/pages/welcome.vue
index 07891fd56b..01b20aa472 100644
--- a/src/client/app/mobile/views/pages/welcome.vue
+++ b/src/client/app/mobile/views/pages/welcome.vue
@@ -2,7 +2,13 @@
 <div class="welcome">
 	<div>
 		<img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" alt="Misskey">
-		<div class="form">
+		<p class="host">{{ host }}</p>
+		<div class="about">
+			<h2>{{ name || 'unidentified' }}</h2>
+			<p v-html="description || '%i18n:common.about%'"></p>
+			<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_]+$" placeholder="ユーザー名" autofocus required @change="onUsernameChange">
 					<span>ユーザー名</span>
@@ -20,13 +26,6 @@
 				<a :href="`${apiUrl}/signin/twitter`">Twitterでログイン</a>
 			</div>
 		</div>
-		<div class="tl">
-			<p>%fa:comments R% タイムラインを見てみる</p>
-			<mk-welcome-timeline/>
-		</div>
-		<div class="users">
-			<mk-avatar class="avatar" v-for="user in users" :key="user.id" :user="user"/>
-		</div>
 		<footer>
 			<small>{{ copyright }}</small>
 		</footer>
@@ -88,10 +87,11 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .welcome
-	background #fff
+	text-align center
+	//background #fff
 
 	> div
-		padding 16px
+		padding 32px
 		margin 0 auto
 		max-width 500px
 
@@ -100,11 +100,36 @@ export default Vue.extend({
 			max-width 200px
 			margin 0 auto
 
-		.form
-			margin-bottom 16px
+		> .host
+			display block
+			text-align center
+			padding 6px 12px
+			line-height 32px
+			font-weight bold
+			color #333
+			background rgba(#000, 0.035)
+			border-radius 6px
+
+		> .about
+			margin-top 16px
+			padding 16px
+			color #444
+			background #fff
+			border-radius 6px
+
+			> h2
+				margin 0
+
+			> p
+				margin 8px
+
+			> .signup
+				font-weight bold
+
+		> .login
+			margin 16px 0
 
 			> form
-				padding 16px
 
 				button
 					display block
@@ -127,36 +152,9 @@ export default Vue.extend({
 						border-color #444
 						box-shadow 0 1px 3px rgba(#000, 0.075), inset 0 0 5px rgba(#000, 0.2)
 
-		> .tl
-			background #fff
-			border solid 1px rgba(#000, 0.2)
-			border-radius 8px
-			overflow hidden
-
-			> p
-				margin 0
-				padding 12px 20px
-				color #555
-				background #f5f5f5
-				border-bottom solid 1px #ddd
-
-			> .mk-welcome-timeline
-				max-height 300px
-				overflow auto
-
-		> .users
-			margin 12px 0 0 0
-
-			> *
-				display inline-block
-				margin 4px
-				width 38px
-				height 38px
-				border-radius 6px
-
 		> footer
 			text-align center
-			color #fff
+			color #444
 
 			> small
 				display block