:v:

2 files changed, 33 insertions, 14 deletions

diff --git a/src/client/app/common/views/components/signin.vue b/src/client/app/common/views/components/signin.vue
index 66e0c68e30..d876fc7a0c 100644
--- a/src/client/app/common/views/components/signin.vue
+++ b/src/client/app/common/views/components/signin.vue
@@ -1,6 +1,6 @@
 <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">
+	<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @change="onUsernameChange">
 		<span>%i18n:@username%</span>
 		<span slot="prefix">@</span>
 		<span slot="suffix">@{{ host }}</span>
diff --git a/src/client/app/common/views/components/ui/input.vue b/src/client/app/common/views/components/ui/input.vue
index 525ff71c08..0d11c14131 100644
--- a/src/client/app/common/views/components/ui/input.vue
+++ b/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