fix(frontend): ログインしていない状態でノート詳細ページのノート作成フォームを操作できる

CHANGELOG_CHERRYPICK.md

@@ -22,6 +22,16 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2023xx](CHANGE
 # 릴리즈 노트
 이 문서는 CherryPick의 변경 사항만 포함합니다.
 
+## 4.x.x
+출시일: unreleased<br>
+기반 Misskey 버전: 2023.x.x<br>
+Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2023xx](CHANGELOG.md#2023xx) 문서를 참고하십시오.
+
+### Client
+- Fix: 로그인하지 않은 상태에서 노트 상세 페이지의 노트 작성 폼을 조작할 수 있음
+
+---
+
 ## 4.3.1
 출시일: 2023/09/29<br>
 기반 Misskey 버전: 2023.9.2<br>

locales/en-US.yml

@@ -2136,6 +2136,7 @@ _visibility:
   disableFederation: "Defederate"
   disableFederationDescription: "Don't transmit to other instances"
 _postForm:
+  signinRequiredPlaceholder: "You must be logged in to create a notes."
   replyPlaceholder: "Reply to this note..."
   quotePlaceholder: "Quote this note..."
   channelPlaceholder: "Post to a channel..."

locales/index.d.ts

@@ -2278,6 +2278,7 @@ export interface Locale {
         "disableFederationDescription": string;
     };
     "_postForm": {
+        "signinRequiredPlaceholder": string;
         "replyPlaceholder": string;
         "quotePlaceholder": string;
         "channelPlaceholder": string;

locales/ja-JP.yml

@@ -2191,6 +2191,7 @@ _visibility:
   disableFederationDescription: "他サーバーへの配信を行いません"
 
 _postForm:
+  signinRequiredPlaceholder: "ノートを作成するにはログインが必要です。"
   replyPlaceholder: "このノートに返信..."
   quotePlaceholder: "このノートを引用..."
   channelPlaceholder: "チャンネルに投稿..."

locales/ko-KR.yml

@@ -2110,6 +2110,7 @@ _visibility:
   disableFederation: "연합에 보내지 않기"
   disableFederationDescription: "다른 서버로 보내지 않을래요"
 _postForm:
+  signinRequiredPlaceholder: "노트를 작성하려면 로그인이 필요해요."
   replyPlaceholder: "이 노트에 답글..."
   quotePlaceholder: "이 노트를 인용..."
   channelPlaceholder: "채널에 게시하기..."

packages/frontend/src/components/MkPostFormSimple.vue

@@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		:enterFromClass="defaultStore.state.animation ? $style.transition_header_enterFrom : ''"
 		:leaveToClass="defaultStore.state.animation ? $style.transition_header_leaveTo : ''"
 	>
-		<header v-if="formClick" :class="$style.header">
+		<header v-if="showForm" :class="$style.header">
 			<div :class="$style.headerLeft">
 				<button v-if="!fixed" :class="$style.cancel" class="_button" @click="cancel"><i class="ti ti-x"></i></button>
 				<button v-click-anime v-tooltip="i18n.ts.switchAccount" :class="[$style.account, { [$style.fixed]: fixed }]" class="_button" @click="openAccountMenu">
@@ -73,15 +73,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 	<MkInfo v-if="hasNotSpecifiedMentions" warn :class="$style.hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo>
 	<input v-show="useCw" ref="cwInputEl" v-model="cw" :class="$style.cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown">
-	<div :class="[$style.textOuter, { [$style.withCw]: useCw, [$style.formClick]: !formClick }]">
+	<div :class="[$style.textOuter, { [$style.withCw]: useCw, [$style.showForm]: !showForm }]">
-		<textarea ref="textareaEl" v-model="text" :class="[$style.text]" :disabled="posting || posted" :placeholder="placeholder" data-cy-post-form-text @click="formClick = true" @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
+		<textarea ref="textareaEl" v-model="text" :class="[$style.text]" :disabled="posting || posted || !$i" :placeholder="placeholder" data-cy-post-form-text @click="formClick" @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
 		<div v-if="maxTextLength - textLength < 100" :class="['_acrylic', $style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</div>
-		<button v-if="!formClick" v-click-anime class="_button" :class="$style.submit" style="position: absolute; bottom: 0; right: 12px;" :disabled="!canPost" data-cy-open-post-form-submit @click="post">
+		<button v-if="!showForm" v-click-anime class="_button" :class="$style.submit" style="position: absolute; bottom: 0; right: 12px;" :disabled="!canPost && $i" data-cy-open-post-form-submit @click="$i ? post : signin()">
 			<div :class="$style.submitInner">
 				<template v-if="posted"></template>
 				<template v-else-if="posting"><MkEllipsis/></template>
 				<template v-else>{{ submitText }}</template>
-				<i style="margin-left: 6px;" :class="posted ? 'ti ti-check' : reply ? 'ti ti-arrow-back-up' : renote ? 'ti ti-quote' : defaultStore.state.renameTheButtonInPostFormToNya ? 'ti ti-paw-filled' : 'ti ti-send'"></i>
+				<i v-if="$i" style="margin-left: 6px;" :class="posted ? 'ti ti-check' : reply ? 'ti ti-arrow-back-up' : renote ? 'ti ti-quote' : defaultStore.state.renameTheButtonInPostFormToNya ? 'ti ti-paw-filled' : 'ti ti-send'"></i>
 			</div>
 		</button>
 	</div>
@@ -97,7 +97,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		:enterFromClass="defaultStore.state.animation ? $style.transition_footer_enterFrom : ''"
 		:leaveToClass="defaultStore.state.animation ? $style.transition_footer_leaveTo : ''"
 	>
-		<footer v-if="formClick" :class="$style.footer">
+		<footer v-if="showForm" :class="$style.footer">
 			<div :class="$style.footerLeft">
 				<button v-tooltip="i18n.ts.attachFile" class="_button" :class="$style.footerButton" @click="chooseFileFrom"><i class="ti ti-photo-plus"></i></button>
 				<button v-tooltip="i18n.ts.poll" class="_button" :class="[$style.footerButton, { [$style.footerButtonActive]: poll }]" @click="togglePoll"><i class="ti ti-chart-arrows"></i></button>
@@ -150,6 +150,7 @@ import MkRippleEffect from '@/components/MkRippleEffect.vue';
 import { miLocalStorage } from '@/local-storage.js';
 import { claimAchievement } from '@/scripts/achievements.js';
 import { vibrate } from '@/scripts/vibrate.js';
+import XSigninDialog from "@/components/MkSigninDialog.vue";
 
 const modal = inject('modal');
 
@@ -186,7 +187,7 @@ const cwInputEl = $shallowRef<HTMLInputElement | null>(null);
 const hashtagsInputEl = $shallowRef<HTMLInputElement | null>(null);
 const visibilityButton = $shallowRef<HTMLElement | null>(null);
 
-let formClick = $ref(false);
+let showForm = $ref(false);
 
 let posting = $ref(false);
 let posted = $ref(false);
@@ -239,7 +240,9 @@ const draftKey = $computed((): string => {
 });
 
 const placeholder = $computed((): string => {
-	if (props.renote) {
+	if (!$i) {
+		return i18n.ts._postForm.signinRequiredPlaceholder;
+	} else if (props.renote) {
 		return i18n.ts._postForm.quotePlaceholder;
 	} else if (props.reply) {
 		return i18n.ts._postForm.replyPlaceholder;
@@ -259,13 +262,15 @@ const placeholder = $computed((): string => {
 });
 
 const submitText = $computed((): string => {
-	return props.renote
+	return !$i
-		? i18n.ts.quote
+		? i18n.ts.login
-		: props.reply
+		: props.renote
-			? i18n.ts.reply
+			? i18n.ts.quote
-			: defaultStore.state.renameTheButtonInPostFormToNya
+			: props.reply
-				? i18n.ts.nya
+				? i18n.ts.reply
-				: i18n.ts.note;
+				: defaultStore.state.renameTheButtonInPostFormToNya
+					? i18n.ts.nya
+					: i18n.ts.note;
 });
 
 const textLength = $computed((): number => {
@@ -922,6 +927,16 @@ function openAccountMenu(ev: MouseEvent) {
 	}, ev);
 }
 
+function formClick() {
+	if ($i) showForm = true;
+}
+
+function signin() {
+  os.popup(XSigninDialog, {
+    autoSet: true,
+  }, {}, 'closed');
+}
+
 onMounted(() => {
 	if (props.autofocus) {
 		focus();
@@ -1229,7 +1244,7 @@ defineExpose({
 		padding-top: 8px;
 	}
 
-  &.formClick {
+  &.showForm {
     margin-top: 20px;
   }
 }