From a81d5786f3ffb5e6108765c26e724b0bed1c6e87 Mon Sep 17 00:00:00 2001
From: Satsuki Yanagi <17376330+u1-liquid@users.noreply.github.com>
Date: Fri, 4 Oct 2019 14:18:49 +0900
Subject: [PATCH] Indicate if input value is invalid (#5422)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Indicate if input value is invalid

* titleのとなり

* となりにメッセージ

* CSS as Suggested

* 同じ色に
---
 .../app/common/views/components/ui/input.vue  | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/client/app/common/views/components/ui/input.vue b/src/client/app/common/views/components/ui/input.vue
index e266e141e..1b339a9ae 100644
--- a/src/client/app/common/views/components/ui/input.vue
+++ b/src/client/app/common/views/components/ui/input.vue
@@ -6,7 +6,10 @@
 			<div class="value" ref="passwordMetar"></div>
 		</div>
 		<span class="label" ref="label"><slot></slot></span>
-		<span class="title" ref="title"><slot name="title"></slot></span>
+		<span class="title" ref="title">
+			<slot name="title"></slot>
+			<span class="warning" v-if="invalid"><fa :icon="['fa', 'exclamation-circle']"/>{{ $refs.input.validationMessage }}</span>
+		</span>
 		<div class="prefix" ref="prefix"><slot name="prefix"></slot></div>
 		<template v-if="type != 'file'">
 			<input v-if="debounce" ref="input"
@@ -158,6 +161,7 @@ export default Vue.extend({
 		return {
 			v: this.value,
 			focused: false,
+			invalid: false,
 			passwordStrength: '',
 			id: Math.random().toString()
 		};
@@ -200,6 +204,8 @@ export default Vue.extend({
 				this.passwordStrength = strength > 0.7 ? 'high' : strength > 0.3 ? 'medium' : 'low';
 				(this.$refs.passwordMetar as any).style.width = `${strength * 100}%`;
 			}
+
+			this.invalid = this.$refs.input.validity.badInput;
 		}
 	},
 	mounted() {
@@ -365,6 +371,17 @@ root(fill)
 			//will-change transform
 			transform-origin top left
 			transform scale(.75)
+			white-space nowrap
+			width 133%
+			overflow hidden
+			text-overflow ellipsis
+
+			> .warning
+				margin-left 0.5em
+				color var(--infoWarnFg)
+
+				> svg
+					margin-right 0.1em
 
 		> input
 			display block