feat: Server rules

CHANGELOG.md

@@ -17,6 +17,7 @@
 - Node.js 18.6.0以上が必要になりました
 
 ### General
+- 新規登録前に簡潔なルールをユーザーに表示できる、サーバールール機能を追加
 - ユーザーへの自分用メモ機能
   * ユーザーに対して、自分だけが見られるメモを追加できるようになりました。  
     （自分自身に対してもメモを追加できます。）

locales/ja-JP.yml

@@ -263,9 +263,10 @@ noMoreHistory: "これより過去の履歴はありません"
 startMessaging: "チャットを開始"
 nUsersRead: "{n}人が読みました"
 agreeTo: "{0}に同意"
+agree: "同意する"
 agreeBelow: "下記に同意する"
 basicNotesBeforeCreateAccount: "基本的な注意事項"
-tos: "利用規約"
+termsOfService: "利用規約"
 start: "始める"
 home: "ホーム"
 remoteUserCaution: "リモートユーザーのため、情報が不完全です。"
@@ -1010,6 +1011,12 @@ stackAxis: "スタック方向"
 vertical: "縦"
 horizontal: "横"
 position: "位置"
+serverRules: "サーバールール"
+pleaseConfirmBelowBeforeSignup: "このサーバーに登録する前に、以下を確認してください。"
+continue: "続ける"
+
+_serverRules:
+  description: "新規登録前に表示する、サーバーの簡潔なルールを設定します。内容は利用規約の要約とすることを推奨します。"
 
 _accountMigration:
   moveTo: "このアカウントを新しいアカウントに引っ越す"

packages/backend/migration/1681400427971-serverRules.js

@@ -0,0 +1,11 @@
+export class ServerRules1681400427971 {
+    name = 'ServerRules1681400427971'
+
+    async up(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "meta" ADD "serverRules" character varying(280) array NOT NULL DEFAULT '{}'`);
+    }
+
+    async down(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "meta" DROP COLUMN "serverRules"`);
+    }
+}

packages/backend/src/models/entities/Meta.ts

@@ -405,4 +405,11 @@ export class Meta {
 		default: { },
 	})
 	public policies: Record<string, any>;
+
+	@Column('varchar', {
+		length: 280,
+		array: true,
+		default: '{}',
+	})
+	public serverRules: string[];
 }

packages/backend/src/server/api/endpoints/admin/update-meta.ts

@@ -94,6 +94,7 @@ export const paramDef = {
 		enableActiveEmailValidation: { type: 'boolean' },
 		enableChartsForRemoteUser: { type: 'boolean' },
 		enableChartsForFederatedInstances: { type: 'boolean' },
+		serverRules: { type: 'array', items: { type: 'string' } },
 	},
 	required: [],
 } as const;
@@ -387,6 +388,10 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 				set.enableChartsForFederatedInstances = ps.enableChartsForFederatedInstances;
 			}
 
+			if (ps.serverRules !== undefined) {
+				set.serverRules = ps.serverRules;
+			}
+
 			await this.metaService.update(set);
 			this.moderationLogService.insertModerationLog(me, 'updateMeta');
 		});

packages/backend/src/server/api/endpoints/meta.ts

@@ -310,6 +310,8 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 
 				translatorAvailable: instance.deeplAuthKey != null,
 
+				serverRules: instance.serverRules,
+
 				policies: { ...DEFAULT_POLICIES, ...instance.policies },
 
 				mediaProxy: this.config.mediaProxy,

packages/frontend/src/components/MkSignup.vue

@@ -51,13 +51,6 @@
 			<span v-if="passwordRetypeState == 'not-match'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.passwordNotMatched }}</span>
 		</template>
 	</MkInput>
-	<MkSwitch v-model="ToSAgreement" class="tou">
-		<template #label>{{ i18n.ts.agreeBelow }}</template>
-	</MkSwitch>
-	<ul style="margin: 0; padding-left: 2em;">
-		<li v-if="instance.tosUrl"><a :href="instance.tosUrl" class="_link" target="_blank">{{ i18n.ts.tos }}</a></li>
-		<li><a href="https://misskey-hub.net/docs/notes.html" class="_link" target="_blank">{{ i18n.ts.basicNotesBeforeCreateAccount }}</a></li>
-	</ul>
 	<MkCaptcha v-if="instance.enableHcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" class="captcha" provider="hcaptcha" :sitekey="instance.hcaptchaSiteKey"/>
 	<MkCaptcha v-if="instance.enableRecaptcha" ref="recaptcha" v-model="reCaptchaResponse" class="captcha" provider="recaptcha" :sitekey="instance.recaptchaSiteKey"/>
 	<MkCaptcha v-if="instance.enableTurnstile" ref="turnstile" v-model="turnstileResponse" class="captcha" provider="turnstile" :sitekey="instance.turnstileSiteKey"/>
@@ -106,7 +99,6 @@ let emailState: null | 'wait' | 'ok' | 'unavailable:used' | 'unavailable:format'
 let passwordStrength: '' | 'low' | 'medium' | 'high' = $ref('');
 let passwordRetypeState: null | 'match' | 'not-match' = $ref(null);
 let submitting: boolean = $ref(false);
-let ToSAgreement: boolean = $ref(false);
 let hCaptchaResponse = $ref(null);
 let reCaptchaResponse = $ref(null);
 let turnstileResponse = $ref(null);
@@ -115,7 +107,6 @@ let emailAbortController: null | AbortController = $ref(null);
 
 const shouldDisableSubmitting = $computed((): boolean => {
 	return submitting ||
-		instance.tosUrl && !ToSAgreement ||
 		instance.enableHcaptcha && !hCaptchaResponse ||
 		instance.enableRecaptcha && !reCaptchaResponse ||
 		instance.enableTurnstile && !turnstileResponse ||

packages/frontend/src/components/MkSignupDialog.vue

@@ -1,24 +1,28 @@
 <template>
 <MkModalWindow
 	ref="dialog"
-	:width="366"
-	:height="500"
+	:width="500"
+	:height="600"
 	@close="dialog.close()"
 	@closed="$emit('closed')"
 >
 	<template #header>{{ i18n.ts.signup }}</template>
 
 	<MkSpacer :margin-min="20" :margin-max="28">
-		<XSignup :auto-set="autoSet" @signup="onSignup" @signup-email-pending="onSignupEmailPending"/>
+		<XServerRules v-if="!isAcceptedServerRule" @accept="isAcceptedServerRule = true"/>
+		<XSignup v-else :auto-set="autoSet" @signup="onSignup" @signup-email-pending="onSignupEmailPending"/>
 	</MkSpacer>
 </MkModalWindow>
 </template>
 
 <script lang="ts" setup>
 import { } from 'vue';
+import { $ref } from 'vue/macros';
 import XSignup from '@/components/MkSignup.vue';
+import XServerRules from '@/components/MkSignupServerRules.vue';
 import MkModalWindow from '@/components/MkModalWindow.vue';
 import { i18n } from '@/i18n';
+import { instance } from '@/instance';
 
 const props = withDefaults(defineProps<{
 	autoSet?: boolean;
@@ -33,6 +37,8 @@ const emit = defineEmits<{
 
 const dialog = $shallowRef<InstanceType<typeof MkModalWindow>>();
 
+const isAcceptedServerRule = $ref(false);
+
 function onSignup(res) {
 	emit('done', res);
 	dialog.close();

packages/frontend/src/components/MkSignupServerRules.vue

@@ -0,0 +1,85 @@
+<template>
+<div class="_gaps_m">
+	<div style="text-align: center;">{{ i18n.ts.pleaseConfirmBelowBeforeSignup }}</div>
+
+	<MkFolder :default-open="true">
+		<template #label>{{ i18n.ts.serverRules }}</template>
+
+		<ol class="_gaps_s" :class="$style.rules">
+			<li v-for="(item, index) in instance.serverRules" :key="index" :class="$style.rule" v-html="item"></li>
+		</ol>
+
+		<MkSwitch v-model="agreeServerRules" style="margin-top: 16px;">{{ i18n.ts.agree }}</MkSwitch>
+	</MkFolder>
+
+	<MkFolder v-if="instance.tosUrl">
+		<template #label>{{ i18n.ts.termsOfService }}</template>
+
+		<a :href="instance.tosUrl" class="_link" target="_blank">{{ i18n.ts.termsOfService }}</a>
+
+		<MkSwitch v-model="agreeTos" style="margin-top: 16px;">{{ i18n.ts.agree }}</MkSwitch>
+	</MkFolder>
+
+	<MkFolder>
+		<template #label>{{ i18n.ts.basicNotesBeforeCreateAccount }}</template>
+
+		<a href="https://misskey-hub.net/docs/notes.html" class="_link" target="_blank">{{ i18n.ts.basicNotesBeforeCreateAccount }}</a>
+
+		<MkSwitch v-model="agreeNote" style="margin-top: 16px;">{{ i18n.ts.agree }}</MkSwitch>
+	</MkFolder>
+
+	<MkButton primary rounded style="margin: 0 auto;" :disabled="!agreed" @click="emit('accept')">{{ i18n.ts.continue }}</MkButton>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { instance } from '@/instance';
+import { i18n } from '@/i18n';
+import MkButton from '@/components/MkButton.vue';
+import MkFolder from '@/components/MkFolder.vue';
+import MkSwitch from '@/components/MkSwitch.vue';
+
+const agreeServerRules = ref(false);
+const agreeTos = ref(false);
+const agreeNote = ref(false);
+
+const agreed = computed(() => {
+	return agreeServerRules.value && agreeTos.value && agreeNote.value;
+});
+
+const emit = defineEmits<{
+	(ev: 'accept'): void;
+}>();
+</script>
+
+<style lang="scss" module>
+.rules {
+	counter-reset: item;
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+
+.rule {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+
+	&::before {
+		display: flex;
+		counter-increment: item;
+		content: counter(item);
+		width: 32px;
+		height: 32px;
+		line-height: 32px;
+		background-color: var(--accentedBg);
+		color: var(--accent);
+		font-size: 13px;
+		font-weight: bold;
+		align-items: center;
+		justify-content: center;
+		border-radius: 999px;
+	}
+}
+</style>

packages/frontend/src/pages/about.vue

@@ -41,7 +41,7 @@
 							<template #value>{{ instance.maintainerEmail }}</template>
 						</MkKeyValue>
 					</FormSplit>
-					<FormLink v-if="instance.tosUrl" :to="instance.tosUrl" external>{{ i18n.ts.tos }}</FormLink>
+					<FormLink v-if="instance.tosUrl" :to="instance.tosUrl" external>{{ i18n.ts.termsOfService }}</FormLink>
 				</div>
 			</FormSection>
 

packages/frontend/src/pages/admin/moderation.vue

@@ -3,10 +3,15 @@
 	<MkStickyContainer>
 		<template #header><XHeader :tabs="headerTabs"/></template>
 		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
+			<FormLink to="/admin/server-rules">{{ i18n.ts.serverRules }}</FormLink>
 			<FormSuspense :p="init">
 				<div class="_gaps_m">
 					<FormSection first>
 						<div class="_gaps_m">
+							<MkInput v-model="tosUrl">
+								<template #prefix><i class="ti ti-link"></i></template>
+								<template #label>{{ i18n.ts.tosUrl }}</template>
+							</MkInput>
 							<MkTextarea v-model="sensitiveWords">
 								<template #label>{{ i18n.ts.sensitiveWords }}</template>
 								<template #caption>{{ i18n.ts.sensitiveWordsDescription }}</template>
@@ -41,16 +46,20 @@ import { fetchInstance } from '@/instance';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import MkButton from '@/components/MkButton.vue';
+import FormLink from "@/components/form/link.vue";
 
 let sensitiveWords: string = $ref('');
+let tosUrl: string | null = $ref(null);
 
 async function init() {
 	const meta = await os.api('admin/meta');
 	sensitiveWords = meta.sensitiveWords.join('\n');
+	tosUrl = meta.tosUrl;
 }
 
 function save() {
 	os.apiWithDialog('admin/update-meta', {
+		tosUrl,
 		sensitiveWords: sensitiveWords.split('\n'),
 	}).then(() => {
 		fetchInstance();