[Glitch] Fix various issues with logged-out web UI

Port part of e2b561e3a5 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/components/not_signed_in_indicator.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+const NotSignedInIndicator = () => (
+  <div className='scrollable scrollable--flex'>
+    <div className='empty-column-indicator'>
+      <FormattedMessage id='not_signed_in_indicator.not_signed_in' defaultMessage='You need to sign in to access this resource.' />
+    </div>
+  </div>
+);
+
+export default NotSignedInIndicator;

app/javascript/flavours/glitch/features/explore/index.js

@@ -31,13 +31,13 @@ class Explore extends React.PureComponent {
 
   static contextTypes = {
     router: PropTypes.object,
+    identity: PropTypes.object,
   };
 
   static propTypes = {
     intl: PropTypes.object.isRequired,
     multiColumn: PropTypes.bool,
     isSearching: PropTypes.bool,
-    layout: PropTypes.string,
   };
 
   handleHeaderClick = () => {
@@ -49,22 +49,21 @@ class Explore extends React.PureComponent {
   }
 
   render () {
-    const { intl, multiColumn, isSearching, layout } = this.props;
+    const { intl, multiColumn, isSearching } = this.props;
+    const { signedIn } = this.context.identity;
 
     return (
       <Column bindToDocument={!multiColumn} ref={this.setRef} label={intl.formatMessage(messages.title)}>
-        {layout === 'mobile' ? (
-          <div className='explore__search-header'>
-            <Search />
-          </div>
-        ) : (
         <ColumnHeader
           icon={isSearching ? 'search' : 'hashtag'}
           title={intl.formatMessage(isSearching ? messages.searchResults : messages.title)}
           onClick={this.handleHeaderClick}
           multiColumn={multiColumn}
         />
-        )}
+
+        <div className='explore__search-header'>
+          <Search />
+        </div>
 
         <div className='scrollable scrollable--flex'>
           {isSearching ? (
@@ -75,7 +74,7 @@ class Explore extends React.PureComponent {
                 <NavLink exact to='/explore'><FormattedMessage id='explore.trending_statuses' defaultMessage='Posts' /></NavLink>
                 <NavLink exact to='/explore/tags'><FormattedMessage id='explore.trending_tags' defaultMessage='Hashtags' /></NavLink>
                 <NavLink exact to='/explore/links'><FormattedMessage id='explore.trending_links' defaultMessage='News' /></NavLink>
-                <NavLink exact to='/explore/suggestions'><FormattedMessage id='explore.suggested_follows' defaultMessage='For you' /></NavLink>
+                {signedIn && <NavLink exact to='/explore/suggestions'><FormattedMessage id='explore.suggested_follows' defaultMessage='For you' /></NavLink>}
               </div>
 
               <Switch>

app/javascript/flavours/glitch/features/home_timeline/index.js

@@ -13,6 +13,9 @@ import { fetchAnnouncements, toggleShowAnnouncements } from 'flavours/glitch/act
 import AnnouncementsContainer from 'flavours/glitch/features/getting_started/containers/announcements_container';
 import classNames from 'classnames';
 import IconWithBadge from 'flavours/glitch/components/icon_with_badge';
+import NotSignedInIndicator from 'flavours/glitch/components/not_signed_in_indicator';
+import { Helmet } from 'react-helmet';
+import { title } from 'flavours/glitch/util/initial_state';
 
 const messages = defineMessages({
   title: { id: 'column.home', defaultMessage: 'Home' },
@@ -33,6 +36,10 @@ export default @connect(mapStateToProps)
 @injectIntl
 class HomeTimeline extends React.PureComponent {
 
+  static contextTypes = {
+    identity: PropTypes.object,
+  };
+
   static propTypes = {
     dispatch: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
@@ -115,6 +122,7 @@ class HomeTimeline extends React.PureComponent {
   render () {
     const { intl, hasUnread, columnId, multiColumn, hasAnnouncements, unreadAnnouncements, showAnnouncements } = this.props;
     const pinned = !!columnId;
+    const { signedIn } = this.context.identity;
 
     let announcementsButton = null;
 
@@ -149,6 +157,7 @@ class HomeTimeline extends React.PureComponent {
           <ColumnSettingsContainer />
         </ColumnHeader>
 
+        {signedIn ? (
           <StatusListContainer
             trackScroll={!pinned}
             scrollKey={`home_timeline-${columnId}`}
@@ -158,6 +167,11 @@ class HomeTimeline extends React.PureComponent {
             bindToDocument={!multiColumn}
             regex={this.props.regex}
           />
+        ) : <NotSignedInIndicator />}
+
+        <Helmet>
+          <title>{intl.formatMessage(messages.title)} - {title}</title>
+        </Helmet>
       </Column>
     );
   }

app/javascript/flavours/glitch/features/notifications/index.js

@@ -28,6 +28,9 @@ import LoadGap from 'flavours/glitch/components/load_gap';
 import Icon from 'flavours/glitch/components/icon';
 import compareId from 'flavours/glitch/util/compare_id';
 import NotificationsPermissionBanner from './components/notifications_permission_banner';
+import NotSignedInIndicator from 'flavours/glitch/components/not_signed_in_indicator';
+import { Helmet } from 'react-helmet';
+import { title } from 'flavours/glitch/util/initial_state';
 
 import NotificationPurgeButtonsContainer from 'flavours/glitch/containers/notification_purge_buttons_container';
 
@@ -94,6 +97,10 @@ export default @connect(mapStateToProps, mapDispatchToProps)
 @injectIntl
 class Notifications extends React.PureComponent {
 
+  static contextTypes = {
+    identity: PropTypes.object,
+  };
+
   static propTypes = {
     columnId: PropTypes.string,
     notifications: ImmutablePropTypes.list.isRequired,
@@ -224,10 +231,11 @@ class Notifications extends React.PureComponent {
     const { animatingNCD } = this.state;
     const pinned = !!columnId;
     const emptyMessage = <FormattedMessage id='empty_column.notifications' defaultMessage="You don't have any notifications yet. When other people interact with you, you will see it here." />;
+    const { signedIn } = this.context.identity;
 
     let scrollableContent = null;
 
-    const filterBarContainer = showFilterBar
+    const filterBarContainer = (signedIn && showFilterBar)
       ? (<FilterBarContainer />)
       : null;
 
@@ -257,7 +265,10 @@ class Notifications extends React.PureComponent {
 
     this.scrollableContent = scrollableContent;
 
-    const scrollContainer = (
+    let scrollContainer;
+
+    if (signedIn) {
+      scrollContainer = (
         <ScrollableList
           scrollKey={`notifications-${columnId}`}
           trackScroll={!pinned}
@@ -277,6 +288,9 @@ class Notifications extends React.PureComponent {
           {scrollableContent}
         </ScrollableList>
       );
+    } else {
+      scrollContainer = <NotSignedInIndicator />;
+    }
 
     const extraButtons = [];
 
@@ -354,8 +368,13 @@ class Notifications extends React.PureComponent {
         >
           <ColumnSettingsContainer />
         </ColumnHeader>
+
         {filterBarContainer}
         {scrollContainer}
+
+        <Helmet>
+          <title>{intl.formatMessage(messages.title)} - {title}</title>
+        </Helmet>
       </Column>
     );
   }