Merge pull request #1671 from syuilo/locked-account

Locked account

7 files changed, 177 insertions, 60 deletions

diff --git a/src/client/app/mobile/script.ts b/src/client/app/mobile/script.ts
index 607ff63711..300615ec58 100644
--- a/src/client/app/mobile/script.ts
+++ b/src/client/app/mobile/script.ts
@@ -32,6 +32,7 @@ import MkNotifications from './views/pages/notifications.vue';
 import MkWidgets from './views/pages/widgets.vue';
 import MkMessaging from './views/pages/messaging.vue';
 import MkMessagingRoom from './views/pages/messaging-room.vue';
+import MkReceivedFollowRequests from './views/pages/received-follow-requests.vue';
 import MkNote from './views/pages/note.vue';
 import MkSearch from './views/pages/search.vue';
 import MkFollowers from './views/pages/followers.vue';
@@ -78,6 +79,7 @@ init((launch) => {
 			{ path: '/i/favorites', name: 'favorites', component: MkFavorites },
 			{ path: '/i/lists', name: 'user-lists', component: MkUserLists },
 			{ path: '/i/lists/:list', name: 'user-list', component: MkUserList },
+			{ path: '/i/received-follow-requests', name: 'received-follow-requests', component: MkReceivedFollowRequests },
 			{ path: '/i/widgets', name: 'widgets', component: MkWidgets },
 			{ path: '/i/messaging', name: 'messaging', component: MkMessaging },
 			{ path: '/i/messaging/:user', component: MkMessagingRoom },
diff --git a/src/client/app/mobile/views/components/follow-button.vue b/src/client/app/mobile/views/components/follow-button.vue
index a6b5cf0556..d8441a20b9 100644
--- a/src/client/app/mobile/views/components/follow-button.vue
+++ b/src/client/app/mobile/views/components/follow-button.vue
@@ -1,13 +1,16 @@
 <template>
 <button class="mk-follow-button"
-	:class="{ wait: wait, follow: !user.isFollowing, unfollow: user.isFollowing }"
+	:class="{ wait: wait, active: u.isFollowing || u.hasPendingFollowRequestFromYou }"
 	@click="onClick"
 	:disabled="wait"
 >
-	<template v-if="!wait && user.isFollowing">%fa:minus%</template>
-	<template v-if="!wait && !user.isFollowing">%fa:plus%</template>
-	<template v-if="wait">%fa:spinner .pulse .fw%</template>
-	{{ user.isFollowing ? '%i18n:@unfollow%' : '%i18n:@follow%' }}
+	<template v-if="!wait">
+		<template v-if="u.hasPendingFollowRequestFromYou">%fa:hourglass-half% %i18n:@request-pending%</template>
+		<template v-else-if="u.isFollowing">%fa:minus% %i18n:@unfollow%</template>
+		<template v-else-if="!u.isFollowing && u.isLocked">%fa:plus% %i18n:@follow-request%</template>
+		<template v-else-if="!u.isFollowing && !u.isLocked">%fa:plus% %i18n:@follow%</template>
+	</template>
+	<template v-else>%fa:spinner .pulse .fw%</template>
 </button>
 </template>
 
@@ -22,6 +25,7 @@ export default Vue.extend({
 	},
 	data() {
 		return {
+			u: this.user,
 			wait: false,
 			connection: null,
 			connectionId: null
@@ -42,39 +46,44 @@ export default Vue.extend({
 	methods: {
 
 		onFollow(user) {
-			if (user.id == this.user.id) {
-				this.user.isFollowing = user.isFollowing;
+			if (user.id == this.u.id) {
+				this.u.isFollowing = user.isFollowing;
 			}
 		},
 
 		onUnfollow(user) {
-			if (user.id == this.user.id) {
-				this.user.isFollowing = user.isFollowing;
+			if (user.id == this.u.id) {
+				this.u.isFollowing = user.isFollowing;
 			}
 		},
 
-		onClick() {
+		async onClick() {
 			this.wait = true;
-			if (this.user.isFollowing) {
-				(this as any).api('following/delete', {
-					userId: this.user.id
-				}).then(() => {
-					this.user.isFollowing = false;
-				}).catch(err => {
-					console.error(err);
-				}).then(() => {
-					this.wait = false;
-				});
-			} else {
-				(this as any).api('following/create', {
-					userId: this.user.id
-				}).then(() => {
-					this.user.isFollowing = true;
-				}).catch(err => {
-					console.error(err);
-				}).then(() => {
-					this.wait = false;
-				});
+
+			try {
+				if (this.u.isFollowing) {
+					this.u = await (this as any).api('following/delete', {
+						userId: this.u.id
+					});
+				} else {
+					if (this.u.isLocked && this.u.hasPendingFollowRequestFromYou) {
+						this.u = await (this as any).api('following/requests/cancel', {
+							userId: this.u.id
+						});
+					} else if (this.u.isLocked) {
+						this.u = await (this as any).api('following/create', {
+							userId: this.u.id
+						});
+					} else {
+						this.u = await (this as any).api('following/create', {
+							userId: this.user.id
+						});
+					}
+				}
+			} catch (e) {
+				console.error(e);
+			} finally {
+				this.wait = false;
 			}
 		}
 	}
@@ -90,34 +99,38 @@ export default Vue.extend({
 	cursor pointer
 	padding 0 16px
 	margin 0
-	height inherit
-	font-size 16px
+	min-width 150px
+	line-height 36px
+	font-size 14px
+	color $theme-color
+	background transparent
 	outline none
 	border solid 1px $theme-color
-	border-radius 4px
+	border-radius 36px
 
-	*
-		pointer-events none
+	&:hover
+		background rgba($theme-color, 0.1)
 
-	&.follow
-		color $theme-color
-		background transparent
+	&:active
+		background rgba($theme-color, 0.2)
+
+	&.active
+		color $theme-color-foreground
+		background $theme-color
 
 		&:hover
-			background rgba($theme-color, 0.1)
+			background lighten($theme-color, 10%)
+			border-color lighten($theme-color, 10%)
 
 		&:active
-			background rgba($theme-color, 0.2)
-
-	&.unfollow
-		color $theme-color-foreground
-		background $theme-color
+			background darken($theme-color, 10%)
+			border-color darken($theme-color, 10%)
 
 	&.wait
 		cursor wait !important
 		opacity 0.7
 
-	> [data-fa]
-		margin-right 4px
+	*
+		pointer-events none
 
 </style>
diff --git a/src/client/app/mobile/views/components/notification-preview.vue b/src/client/app/mobile/views/components/notification-preview.vue
index d39b2fbf9f..5e2306932b 100644
--- a/src/client/app/mobile/views/components/notification-preview.vue
+++ b/src/client/app/mobile/views/components/notification-preview.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="mk-notification-preview" :class="notification.type">
 	<template v-if="notification.type == 'reaction'">
-		<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+		<mk-avatar class="avatar" :user="notification.user"/>
 		<div class="text">
 			<p><mk-reaction-icon :reaction="notification.reaction"/>{{ notification.user | userName }}</p>
 			<p class="note-ref">%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%</p>
@@ -9,7 +9,7 @@
 	</template>
 
 	<template v-if="notification.type == 'renote'">
-		<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+		<mk-avatar class="avatar" :user="notification.note.user"/>
 		<div class="text">
 			<p>%fa:retweet%{{ notification.note.user | userName }}</p>
 			<p class="note-ref">%fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right%</p>
@@ -17,7 +17,7 @@
 	</template>
 
 	<template v-if="notification.type == 'quote'">
-		<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+		<mk-avatar class="avatar" :user="notification.note.user"/>
 		<div class="text">
 			<p>%fa:quote-left%{{ notification.note.user | userName }}</p>
 			<p class="note-preview">{{ getNoteSummary(notification.note) }}</p>
@@ -25,14 +25,21 @@
 	</template>
 
 	<template v-if="notification.type == 'follow'">
-		<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+		<mk-avatar class="avatar" :user="notification.user"/>
 		<div class="text">
 			<p>%fa:user-plus%{{ notification.user | userName }}</p>
 		</div>
 	</template>
 
+	<template v-if="notification.type == 'receiveFollowRequest'">
+		<mk-avatar class="avatar" :user="notification.user"/>
+		<div class="text">
+			<p>%fa:user-clock%{{ notification.user | userName }}</p>
+		</div>
+	</template>
+
 	<template v-if="notification.type == 'reply'">
-		<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+		<mk-avatar class="avatar" :user="notification.note.user"/>
 		<div class="text">
 			<p>%fa:reply%{{ notification.note.user | userName }}</p>
 			<p class="note-preview">{{ getNoteSummary(notification.note) }}</p>
@@ -40,7 +47,7 @@
 	</template>
 
 	<template v-if="notification.type == 'mention'">
-		<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+		<mk-avatar class="avatar" :user="notification.note.user"/>
 		<div class="text">
 			<p>%fa:at%{{ notification.note.user | userName }}</p>
 			<p class="note-preview">{{ getNoteSummary(notification.note) }}</p>
@@ -48,7 +55,7 @@
 	</template>
 
 	<template v-if="notification.type == 'poll_vote'">
-		<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+		<mk-avatar class="avatar" :user="notification.user"/>
 		<div class="text">
 			<p>%fa:chart-pie%{{ notification.user | userName }}</p>
 			<p class="note-ref">%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%</p>
@@ -83,16 +90,14 @@ export default Vue.extend({
 		display block
 		clear both
 
-	img
+	> .avatar
 		display block
 		float left
-		min-width 36px
-		min-height 36px
-		max-width 36px
-		max-height 36px
+		width 36px
+		height 36px
 		border-radius 6px
 
-	.text
+	> .text
 		float right
 		width calc(100% - 36px)
 		padding-left 8px
@@ -120,6 +125,10 @@ export default Vue.extend({
 		.text p i
 			color #53c7ce
 
+	&.receiveFollowRequest
+		.text p i
+			color #888
+
 	&.reply, &.mention
 		.text p i
 			color #fff
diff --git a/src/client/app/mobile/views/components/notification.vue b/src/client/app/mobile/views/components/notification.vue
index c1b37563ce..9228950209 100644
--- a/src/client/app/mobile/views/components/notification.vue
+++ b/src/client/app/mobile/views/components/notification.vue
@@ -40,6 +40,17 @@
 		</div>
 	</div>
 
+	<div class="notification followRequest" v-if="notification.type == 'receiveFollowRequest'">
+		<mk-avatar class="avatar" :user="notification.user"/>
+		<div>
+			<header>
+				%fa:user-clock%
+				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
+				<mk-time :time="notification.createdAt"/>
+			</header>
+		</div>
+	</div>
+
 	<div class="notification poll_vote" v-if="notification.type == 'poll_vote'">
 		<mk-avatar class="avatar" :user="notification.user"/>
 		<div>
@@ -156,6 +167,10 @@ root(isDark)
 			> div > header i
 				color #53c7ce
 
+		&.receiveFollowRequest
+			> div > header i
+				color #888
+
 .mk-notification[data-darkmode]
 	root(true)
 
diff --git a/src/client/app/mobile/views/components/ui.nav.vue b/src/client/app/mobile/views/components/ui.nav.vue
index 11a8f7ab97..80f60e4232 100644
--- a/src/client/app/mobile/views/components/ui.nav.vue
+++ b/src/client/app/mobile/views/components/ui.nav.vue
@@ -18,6 +18,7 @@
 					<li><router-link to="/" :data-active="$route.name == 'index'">%fa:home%%i18n:@timeline%%fa:angle-right%</router-link></li>
 					<li><router-link to="/i/notifications" :data-active="$route.name == 'notifications'">%fa:R bell%%i18n:@notifications%<template v-if="hasUnreadNotification">%fa:circle%</template>%fa:angle-right%</router-link></li>
 					<li><router-link to="/i/messaging" :data-active="$route.name == 'messaging'">%fa:R comments%%i18n:@messaging%<template v-if="hasUnreadMessagingMessage">%fa:circle%</template>%fa:angle-right%</router-link></li>
+					<li v-if="$store.getters.isSignedIn && $store.state.i.isLocked"><router-link to="/i/received-follow-requests" :data-active="$route.name == 'received-follow-requests'">%fa:R envelope%%i18n:@follow-requests%<template v-if="$store.getters.isSignedIn && $store.state.i.pendingReceivedFollowRequestsCount">%fa:circle%</template>%fa:angle-right%</router-link></li>
 					<li><router-link to="/othello" :data-active="$route.name == 'othello'">%fa:gamepad%%i18n:@game%<template v-if="hasGameInvitation">%fa:circle%</template>%fa:angle-right%</router-link></li>
 				</ul>
 				<ul>
diff --git a/src/client/app/mobile/views/pages/received-follow-requests.vue b/src/client/app/mobile/views/pages/received-follow-requests.vue
new file mode 100644
index 0000000000..bf26a84ff9
--- /dev/null
+++ b/src/client/app/mobile/views/pages/received-follow-requests.vue
@@ -0,0 +1,78 @@
+<template>
+<mk-ui>
+	<span slot="header">%fa:envelope R%%i18n:@title%</span>
+
+	<main>
+		<div v-for="req in requests">
+			<router-link :key="req.id" :to="req.follower | userPage">{{ req.follower | userName }}</router-link>
+			<span>
+				<a @click="accept(req.follower)">%i18n:@accept%</a>|<a @click="reject(req.follower)">%i18n:@reject%</a>
+			</span>
+		</div>
+	</main>
+</mk-ui>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Progress from '../../../common/scripts/loading';
+
+export default Vue.extend({
+	data() {
+		return {
+			fetching: true,
+			requests: []
+		};
+	},
+	mounted() {
+		document.title = 'Misskey | %i18n:@title%';
+
+		Progress.start();
+
+		(this as any).api('following/requests/list').then(requests => {
+			this.fetching = false;
+			this.requests = requests;
+
+			Progress.done();
+		});
+	},
+	methods: {
+		accept(user) {
+			(this as any).api('following/requests/accept', { userId: user.id }).then(() => {
+				this.requests = this.requests.filter(r => r.follower.id != user.id);
+			});
+		},
+		reject(user) {
+			(this as any).api('following/requests/reject', { userId: user.id }).then(() => {
+				this.requests = this.requests.filter(r => r.follower.id != user.id);
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+main
+	width 100%
+	max-width 680px
+	margin 0 auto
+	padding 8px
+
+	@media (min-width 500px)
+		padding 16px
+
+	@media (min-width 600px)
+		padding 32px
+
+	> div
+		display flex
+		padding 16px
+		border solid 1px isDark ? #1c2023 : #eee
+		border-radius 4px
+
+		> span
+			margin 0 0 0 auto
+
+</style>
diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue
index b3b820650c..3d37015906 100644
--- a/src/client/app/mobile/views/pages/user.vue
+++ b/src/client/app/mobile/views/pages/user.vue
@@ -184,7 +184,6 @@ root(isDark)
 
 				> .mk-follow-button
 					float right
-					height 40px
 
 			> .title
 				margin 8px 0