+ {!(suspended || hidden || account.get('moved')) && account.getIn(['relationship', 'requested_by']) &&
{info}
diff --git a/app/javascript/flavours/glitch/features/account/containers/follow_request_note_container.js b/app/javascript/flavours/glitch/features/account/containers/follow_request_note_container.js
new file mode 100644
index 0000000000..c6a3afb7e2
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/account/containers/follow_request_note_container.js
@@ -0,0 +1,15 @@
+import { connect } from 'react-redux';
+import FollowRequestNote from '../components/follow_request_note';
+import { authorizeFollowRequest, rejectFollowRequest } from 'flavours/glitch/actions/accounts';
+
+const mapDispatchToProps = (dispatch, { account }) => ({
+ onAuthorize () {
+ dispatch(authorizeFollowRequest(account.get('id')));
+ },
+
+ onReject () {
+ dispatch(rejectFollowRequest(account.get('id')));
+ },
+});
+
+export default connect(null, mapDispatchToProps)(FollowRequestNote);
diff --git a/app/javascript/flavours/glitch/reducers/relationships.js b/app/javascript/flavours/glitch/reducers/relationships.js
index 49dd77ef59..e4b9acea27 100644
--- a/app/javascript/flavours/glitch/reducers/relationships.js
+++ b/app/javascript/flavours/glitch/reducers/relationships.js
@@ -1,3 +1,6 @@
+import {
+ NOTIFICATIONS_UPDATE,
+} from '../actions/notifications';
import {
ACCOUNT_FOLLOW_SUCCESS,
ACCOUNT_FOLLOW_REQUEST,
@@ -12,6 +15,8 @@ import {
ACCOUNT_PIN_SUCCESS,
ACCOUNT_UNPIN_SUCCESS,
RELATIONSHIPS_FETCH_SUCCESS,
+ FOLLOW_REQUEST_AUTHORIZE_SUCCESS,
+ FOLLOW_REQUEST_REJECT_SUCCESS,
} from 'flavours/glitch/actions/accounts';
import {
DOMAIN_BLOCK_SUCCESS,
@@ -44,6 +49,12 @@ const initialState = ImmutableMap();
export default function relationships(state = initialState, action) {
switch(action.type) {
+ case FOLLOW_REQUEST_AUTHORIZE_SUCCESS:
+ return state.setIn([action.id, 'followed_by'], true).setIn([action.id, 'requested_by'], false);
+ case FOLLOW_REQUEST_REJECT_SUCCESS:
+ return state.setIn([action.id, 'followed_by'], false).setIn([action.id, 'requested_by'], false);
+ case NOTIFICATIONS_UPDATE:
+ return action.notification.type === 'follow_request' ? state.setIn([action.notification.account.id, 'requested_by'], true) : state;
case ACCOUNT_FOLLOW_REQUEST:
return state.getIn([action.id, 'following']) ? state : state.setIn([action.id, action.locked ? 'requested' : 'following'], true);
case ACCOUNT_FOLLOW_FAIL:
diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss
index 2a955f426d..5b3e1db1bc 100644
--- a/app/javascript/flavours/glitch/styles/components/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/components/accounts.scss
@@ -756,3 +756,37 @@
}
}
}
+
+.moved-account-banner,
+.follow-request-banner {
+ padding: 20px;
+ background: lighten($ui-base-color, 4%);
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ &__message {
+ color: $darker-text-color;
+ padding: 8px 0;
+ padding-top: 0;
+ padding-bottom: 4px;
+ font-size: 14px;
+ font-weight: 500;
+ text-align: center;
+ margin-bottom: 16px;
+ }
+ &__action {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 15px;
+ width: 100%;
+ }
+
+ .detailed-status__display-name {
+ margin-bottom: 0;
+ }
+}
+
+.follow-request-banner .button {
+ width: 100%;
+}
diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss
index 84aca2ebc0..b7a54cd2b4 100644
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/components/index.scss
@@ -141,6 +141,30 @@
&:disabled {
opacity: 0.5;
}
+
+ &.button--confirmation {
+ color: $valid-value-color;
+ border-color: $valid-value-color;
+
+ &:active,
+ &:focus,
+ &:hover {
+ background: $valid-value-color;
+ color: $primary-text-color;
+ }
+ }
+
+ &.button--destructive {
+ color: $error-value-color;
+ border-color: $error-value-color;
+
+ &:active,
+ &:focus,
+ &:hover {
+ background: $error-value-color;
+ color: $primary-text-color;
+ }
+ }
}
&.button--block {