feat: Server rules (#10660)

* enhance(frontend): サーバールールのデザイン調整

* enhance(frontend): i18n

* enhance(frontend): 利用規約URLの設定を「モデレーション」ページへ移動

* enhance(frontend): サーバールールのデザイン調整

* Update CHANGELOG.md

* 不要な差分を削除

* fix(frontend): lint

* ui tweak

* test: add stories

* tweak

* test: bind args

* test: add interaction tests

* fix bug

* Update packages/frontend/src/pages/admin/server-rules.vue

Co-authored-by: Ebise Lutica <7106976+EbiseLutica@users.noreply.github.com>

* Update misskey-js.api.md

* chore: windowを明示

* 🎨

* refactor

* 🎨

* 🎨

* fix e2e test

* 🎨

* 🎨

* fix icon

* fix e2e

---------

Co-authored-by: Ebise Lutica <7106976+EbiseLutica@users.noreply.github.com>
Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>

CHANGELOG.md

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

cypress/e2e/basic.cy.js

@@ -52,6 +52,12 @@ describe('After setup instance', () => {
 		cy.intercept('POST', '/api/signup').as('signup');
 
 		cy.get('[data-cy-signup]').click();
+		cy.get('[data-cy-signup-rules-continue]').should('be.disabled');
+		cy.get('[data-cy-signup-rules-notes] [data-cy-folder-header]').click();
+		cy.get('[data-cy-signup-rules-notes-agree] [data-cy-switch-toggle]').click();
+		cy.get('[data-cy-signup-rules-continue]').should('not.be.disabled');
+		cy.get('[data-cy-signup-rules-continue]').click();
+
 		cy.get('[data-cy-signup-submit]').should('be.disabled');
 		cy.get('[data-cy-signup-username] input').type('alice');
 		cy.get('[data-cy-signup-submit]').should('be.disabled');
@@ -71,6 +77,12 @@ describe('After setup instance', () => {
 
 		// ユーザー名が重複している場合の挙動確認
 		cy.get('[data-cy-signup]').click();
+		cy.get('[data-cy-signup-rules-continue]').should('be.disabled');
+		cy.get('[data-cy-signup-rules-notes] [data-cy-folder-header]').click();
+		cy.get('[data-cy-signup-rules-notes-agree] [data-cy-switch-toggle]').click();
+		cy.get('[data-cy-signup-rules-continue]').should('not.be.disabled');
+		cy.get('[data-cy-signup-rules-continue]').click();
+
 		cy.get('[data-cy-signup-username] input').type('alice');
 		cy.get('[data-cy-signup-password] input').type('alice1234');
 		cy.get('[data-cy-signup-password-retype] input').type('alice1234');

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/.storybook/generate.tsx

@@ -398,6 +398,7 @@ Promise.all([
 	glob('src/components/global/*.vue'),
 	glob('src/components/Mk{A,B}*.vue'),
 	glob('src/components/MkGalleryPostPreview.vue'),
+	glob('src/components/MkSignupServerRules.vue'),
 	glob('src/pages/user/home.vue'),
 ])
 	.then((globs) => globs.flat())

packages/frontend/src/components/MkFolder.vue

@@ -1,8 +1,8 @@
 <template>
-<div ref="rootEl" :class="$style.root">
+<div ref="rootEl" :class="$style.root" role="group" :aria-expanded="opened">
 	<MkStickyContainer>
 		<template #header>
-			<div :class="[$style.header, { [$style.opened]: opened }]" class="_button" @click="toggle">
+			<div :class="[$style.header, { [$style.opened]: opened }]" class="_button" role="button" data-cy-folder-header @click="toggle">
 				<div :class="$style.headerIcon"><slot name="icon"></slot></div>
 				<div :class="$style.headerText">
 					<div :class="$style.headerTextMain">
@@ -20,7 +20,7 @@
 			</div>
 		</template>
 
-		<div v-if="openedAtLeastOnce" :class="[$style.body, { [$style.bgSame]: bgSame }]" :style="{ maxHeight: maxHeight ? `${maxHeight}px` : null, overflow: maxHeight ? `auto` : null }">
+		<div v-if="openedAtLeastOnce" :class="[$style.body, { [$style.bgSame]: bgSame }]" :style="{ maxHeight: maxHeight ? `${maxHeight}px` : null, overflow: maxHeight ? `auto` : null }" :aria-hidden="!opened">
 			<Transition
 				:enter-active-class="defaultStore.state.animation ? $style.transition_toggle_enterActive : ''"
 				:leave-active-class="defaultStore.state.animation ? $style.transition_toggle_leaveActive : ''"
@@ -196,7 +196,7 @@ onMounted(() => {
 
 .headerRight {
 	margin-left: auto;
-	opacity: 0.7;
+	color: var(--fgTransparentWeak);
 	white-space: nowrap;
 }
 

packages/frontend/src/components/MkModal.vue

@@ -404,16 +404,10 @@ defineExpose({
 			right: 0;
 			margin: auto;
 			padding: 32px;
-			// TODO: mask-imageはiOSだとやたら重い。なんとかしたい
-			-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 32px, rgba(0,0,0,1) calc(100% - 32px), rgba(0,0,0,0) 100%);
-			mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 32px, rgba(0,0,0,1) calc(100% - 32px), rgba(0,0,0,0) 100%);
-			overflow: auto;
 			display: flex;
 
 			@media (max-width: 500px) {
 				padding: 16px;
-				-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 16px, rgba(0,0,0,1) calc(100% - 16px), rgba(0,0,0,0) 100%);
-				mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 16px, rgba(0,0,0,1) calc(100% - 16px), rgba(0,0,0,0) 100%);
 			}
 		}
 	}

packages/frontend/src/components/MkModalWindow.vue

@@ -1,6 +1,6 @@
 <template>
 <MkModal ref="modal" :prefer-type="'dialog'" @click="onBgClick" @closed="$emit('closed')">
-	<div ref="rootEl" class="ebkgoccj" :style="{ width: `${width}px`, height: scroll ? (height ? `${height}px` : null) : (height ? `min(${height}px, 100%)` : '100%') }" @keydown="onKeydown">
+	<div ref="rootEl" class="ebkgoccj" :style="{ width: `${width}px`, height: height ? `${height}px` : null }" @keydown="onKeydown">
 		<div ref="headerEl" class="header">
 			<button v-if="withOkButton" class="_button" @click="$emit('close')"><i class="ti ti-x"></i></button>
 			<span class="title">
@@ -25,13 +25,11 @@ const props = withDefaults(defineProps<{
 	okButtonDisabled: boolean;
 	width: number;
 	height: number | null;
-	scroll: boolean;
 }>(), {
 	withOkButton: false,
 	okButtonDisabled: false,
 	width: 400,
 	height: null,
-	scroll: true,
 });
 
 const emit = defineEmits<{
@@ -86,6 +84,7 @@ defineExpose({
 <style lang="scss" scoped>
 .ebkgoccj {
 	margin: auto;
+	max-height: 100%;
 	overflow: hidden;
 	display: flex;
 	flex-direction: column;