enhance(client): ユーザー名についてのヒントを追加

locales/ja-JP.yml

@@ -778,6 +778,7 @@ whatIsNew: "更新情報を見る"
 translate: "翻訳"
 translatedFrom: "{x}から翻訳"
 accountDeletionInProgress: "アカウントの削除が進行中です"
+usernameInfo: "サーバー上であなたのアカウントを一意に識別するための名前。アルファベット(a~z, A~Z)、数字(0~9)、およびアンダーバー(_)が使用できます。ユーザー名は後から変更することは出来ません。"
 
 _accountDelete:
   accountDelete: "アカウントの削除"

src/client/components/dialog.vue

@@ -10,6 +10,7 @@
 			<i v-else-if="type === 'warning'" class="fas fa-exclamation-triangle"></i>
 			<i v-else-if="type === 'info'" class="fas fa-info-circle"></i>
 			<i v-else-if="type === 'question'" class="fas fa-question-circle"></i>
+			<i v-else-if="type === 'help'" class="fas fa-question-circle"></i>
 			<i v-else-if="type === 'waiting'" class="fas fa-spinner fa-pulse"></i>
 		</div>
 		<header v-if="title"><Mfm :text="title"/></header>

src/client/components/signup.vue

@@ -6,7 +6,7 @@
 			<template #prefix><i class="fas fa-key"></i></template>
 		</MkInput>
 		<MkInput v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @update:modelValue="onChangeUsername" data-cy-signup-username>
-			<template #label>{{ $ts.username }}</template>
+			<template #label>{{ $ts.username }} <div class="_button _help" v-tooltip:dialog="$ts.usernameInfo"><i class="far fa-question-circle"></i></div></template>
 			<template #prefix>@</template>
 			<template #suffix>@{{ host }}</template>
 			<template #caption>

src/client/directives/tooltip.ts

@@ -1,6 +1,6 @@
 import { Directive, ref } from 'vue';
 import { isDeviceTouch } from '@client/scripts/is-device-touch';
-import { popup } from '@client/os';
+import { popup, dialog } from '@client/os';
 
 const start = isDeviceTouch ? 'touchstart' : 'mouseover';
 const end = isDeviceTouch ? 'touchend' : 'mouseleave';
@@ -24,6 +24,20 @@ export default {
 			}
 		};
 
+		console.log(binding.arg);
+
+		if (binding.arg === 'dialog') {
+			el.addEventListener('click', (ev) => {
+				ev.preventDefault();
+				ev.stopPropagation();
+				dialog({
+					type: 'help',
+					text: binding.value,
+				});
+				return false;
+			});
+		}
+
 		const show = e => {
 			if (!document.body.contains(el)) return;
 			if (self._close) return;

src/client/style.scss

@@ -156,8 +156,10 @@ hr {
 
 ._button {
 	appearance: none;
+	display: inline-block;
 	padding: 0;
 	margin: 0; // for Safari
+	width: max-content;
 	background: none;
 	border: none;
 	cursor: pointer;
@@ -201,6 +203,11 @@ hr {
 	}
 }
 
+._help {
+	color: var(--accent);
+	cursor: help
+}
+
 ._textButton {
 	@extend ._button;
 	color: var(--accent);