Merge pull request #4681 from withspectrum/accessible-login

Accessible login

Author: mxstbr

src/components/fullscreenView/index.js

@@ -1,3 +1,4 @@
+// @flow
 import React, { Component } from 'react';
 import {
   ClusterOne,
@@ -6,9 +7,15 @@ import {
   ClusterFour,
 } from '../../components/illustrations';
 import Icon from '../../components/icons';
-import { FullscreenViewContainer, Illustrations, Close } from './style';
+import { FullscreenViewContainer, Illustrations, CloseLink } from './style';
 import { ESC } from 'src/helpers/keycodes';
-class FullscreenView extends Component {
+
+type Props = {
+  closePath: string,
+  children: any,
+};
+
+class FullscreenView extends Component<Props> {
   componentDidMount() {
     document.addEventListener('keydown', this.handleKeyPress, false);
   }
@@ -17,44 +24,29 @@ class FullscreenView extends Component {
     document.removeEventListener('keydown', this.handleKeyPress, false);
   }
 
-  handleKeyPress = e => {
-    const { close, noCloseButton } = this.props;
-
-    // if we don't want the user to close the onboarding flow - when they
-    // are setting a username - ignore esc key presses
-    if (noCloseButton) return;
-
+  handleKeyPress = (e: any) => {
+    const { closePath } = this.props;
     // if person taps esc, close the dialog
-    if (e.keyCode === ESC) {
-      return close();
+    if (closePath && e.keyCode === ESC) {
+      return (window.location = closePath);
     }
   };
 
   render() {
-    const {
-      close,
-      hasBackground,
-      children,
-      noCloseButton,
-      showBackgroundOnMobile = true,
-    } = this.props;
+    const { closePath, children } = this.props;
 
     return (
       <FullscreenViewContainer>
-        {!noCloseButton && (
-          <Close onClick={close}>
-            <Icon glyph={'view-close'} size={32} />
-          </Close>
-        )}
-
-        {hasBackground && (
-          <Illustrations showBackgroundOnMobile={showBackgroundOnMobile}>
-            <ClusterOne src="/img/cluster-2.svg" role="presentation" />
-            <ClusterTwo src="/img/cluster-1.svg" role="presentation" />
-            <ClusterThree src="/img/cluster-5.svg" role="presentation" />
-            <ClusterFour src="/img/cluster-4.svg" role="presentation" />
-          </Illustrations>
-        )}
+        <CloseLink href={closePath}>
+          <Icon glyph={'view-close'} size={32} />
+        </CloseLink>
+
+        <Illustrations>
+          <ClusterOne src="/img/cluster-2.svg" role="presentation" />
+          <ClusterTwo src="/img/cluster-1.svg" role="presentation" />
+          <ClusterThree src="/img/cluster-5.svg" role="presentation" />
+          <ClusterFour src="/img/cluster-4.svg" role="presentation" />
+        </Illustrations>
 
         {children}
       </FullscreenViewContainer>

src/components/fullscreenView/style.js

@@ -24,16 +24,12 @@ export const FullscreenViewContainer = styled.div`
 export const Illustrations = styled.span`
   z-index: ${zIndex.background};
 
-  ${p =>
-    !p.showBackgroundOnMobile &&
-    css`
-      @media screen and (max-width: 768px) {
-        display: none;
-      }
-    `};
+  @media screen and (max-width: 768px) {
+    display: none;
+  }
 `;
 
-export const Close = styled.div`
+export const CloseLink = styled.a`
   color: ${theme.text.default};
   position: absolute;
   top: 8px;

src/components/upsell/index.js

@@ -92,7 +92,7 @@ export const UpsellMiniCreateCommunity = () => {
 // to create a community rather than joining communities - if they choose
 // to go down the path of creating a community, clicking on the 'get started'
 // button will close the new user onboarding
-export const UpsellCreateCommunity = ({ close }: { close: Function }) => {
+export const UpsellCreateCommunity = () => {
   const title = 'Create a community';
   const subtitle = 'Building communities on Spectrum is easy and free forever';
 

src/routes.js

@@ -32,6 +32,7 @@ import { withCurrentUser } from 'src/components/withCurrentUser';
 import Maintenance from 'src/components/maintenance';
 import type { GetUserType } from 'shared/graphql/queries/user/getUser';
 import RedirectOldThreadRoute from './views/thread/redirect-old-route';
+import NewUserOnboarding from './views/newUserOnboarding';
 
 /* prettier-ignore */
 const Explore = Loadable({
@@ -267,6 +268,8 @@ class Routes extends React.Component<Props> {
                       <Redirect
                         to={`/users/${currentUser.username}/settings`}
                       />
+                    ) : currentUser && !currentUser.username ? (
+                      <NewUserOnboarding />
                     ) : isLoadingCurrentUser ? null : (
                       <Login redirectPath={`${CLIENT_URL}/me/settings`} />
                     )

src/views/communityLogin/index.js

@@ -68,7 +68,7 @@ export class Login extends React.Component<Props> {
       const { brandedLogin } = community;
 
       return (
-        <FullscreenView hasBackground noCloseButton={true} close={null}>
+        <FullscreenView closePath={`${CLIENT_URL}`}>
           <FullscreenContent
             data-cy="community-login-page"
             style={{ justifyContent: 'center' }}
@@ -117,14 +117,14 @@ export class Login extends React.Component<Props> {
 
     if (isLoading) {
       return (
-        <FullscreenView>
+        <FullscreenView closePath={CLIENT_URL}>
           <Loading />
         </FullscreenView>
       );
     }
 
     return (
-      <FullscreenView close={this.escape}>
+      <FullscreenView closePath={CLIENT_URL}>
         <ViewError
           refresh
           heading={'We had trouble finding this community'}

src/views/dashboard/index.js

@@ -112,13 +112,7 @@ class Dashboard extends React.Component<Props, State> {
     if (user) {
       // if the user hasn't joined any communities yet, we have nothing to show them on the dashboard. So instead just render the onboarding step to upsell popular communities to join
       if (user.communityConnection.edges.length === 0) {
-        return (
-          <NewUserOnboarding
-            noCloseButton
-            close={() => {}}
-            currentUser={user}
-          />
-        );
+        return <NewUserOnboarding currentUser={user} />;
       }
 
       // at this point we have succesfully validated a user, and the user has both a username and joined communities - we can show their thread feed!

src/views/login/index.js

@@ -15,6 +15,7 @@ import {
 } from './style';
 import queryString from 'query-string';
 import { track, events } from 'src/helpers/analytics';
+import { CLIENT_URL } from 'src/api/constants';
 
 type Props = {
   redirectPath: ?string,
@@ -46,12 +47,7 @@ export class Login extends React.Component<Props> {
         : 'Spectrum is a place where communities can share, discuss, and grow together. Sign in below to get in on the conversation.';
 
     return (
-      <FullscreenView
-        hasBackground
-        // $FlowFixMe
-        noCloseButton={!this.props.close}
-        close={this.props.close && this.props.close}
-      >
+      <FullscreenView closePath={CLIENT_URL}>
         <FullscreenContent
           data-cy="login-page"
           style={{ justifyContent: 'center' }}

src/views/newUserOnboarding/index.js

@@ -25,15 +25,14 @@ import { track, events } from 'src/helpers/analytics';
 import type { UserInfoType } from 'shared/graphql/fragments/user/userInfo';
 import type { CommunityInfoType } from 'shared/graphql/fragments/community/communityInfo';
 import { isDesktopApp } from 'src/helpers/desktop-app-utils';
+import { SERVER_URL } from 'src/api/constants';
 
 type StateProps = {|
   community: CommunityInfoType,
 |};
 
 type Props = StateProps & {|
   currentUser: UserInfoType,
-  close: Function,
-  noCloseButton: boolean,
 |};
 
 type ActiveStep =
@@ -89,18 +88,9 @@ class NewUserOnboarding extends Component<Props, State> {
 
   saveUsername = () => {
     const { community } = this.props;
-
     track(events.USER_ONBOARDING_SET_USERNAME);
-
     if (!isDesktopApp()) return this.toStep('appsUpsell');
 
-    // if the user signed up via a community, channel, or thread view, the first
-    // thing they will be asked to do is set a username. After they save their
-    // username, they should proceed to the 'joinFirstCommunity' step; otherwise
-    // we can just close the onboarding
-    if (community) {
-      return this.props.close();
-    }
     return this.toStep('joinFirstCommunity');
   };
 
@@ -123,29 +113,11 @@ class NewUserOnboarding extends Component<Props, State> {
     // or decrement the joinedCommunities count in state
     let newCount = joinedCommunities + number;
     this.setState({ joinedCommunities: newCount });
-
-    // if the user signed up from a community, channel, or thread view,
-    // they will see an onboarding step to join that community they were
-    // viewing in order to complete their onboarding. when they do join
-    // that community, we pass a finish argument which will push them forward
-    // in the onboarding flow
-    if (done) {
-      return this.props.close();
-    }
   };
 
   appUpsellComplete = () => {
     const { community } = this.props;
 
-    // if the user signed up via a community, channel, or thread view, the first
-    // thing they will be asked to do is set a username. After they save their
-    // username, they should proceed to the 'joinFirstCommunity' step; otherwise
-    // we can just close the onboarding
-    if (!community) return this.props.close();
-    // if the user signed in via a comunity, channel, or thread view, but they
-    // are already members of that community, we can escape the onboarding
-    if (community.communityPermissions.isMember) return this.props.close();
-
     // if the user signed up via a community, channel, or thread view and
     // has not yet joined that community, move them to that step in the onboarding
     return this.toStep('joinFirstCommunity');
@@ -192,12 +164,7 @@ class NewUserOnboarding extends Component<Props, State> {
     };
 
     return (
-      <FullscreenView
-        hasBackground
-        showBackgroundOnMobile={false}
-        close={this.props.close}
-        noCloseButton={this.props.noCloseButton}
-      >
+      <FullscreenView closePath={`${SERVER_URL}/auth/logout`}>
         <OnboardingContainer>
           <OnboardingContent>
             <IconContainer>
@@ -228,7 +195,7 @@ class NewUserOnboarding extends Component<Props, State> {
                   curatedContentType={'top-communities-by-members'}
                 />
                 <CreateUpsellContainer extra={joinedCommunities > 0}>
-                  <UpsellCreateCommunity close={this.props.close} />
+                  <UpsellCreateCommunity />
                 </CreateUpsellContainer>
 
                 <StickyRow hasJoined={joinedCommunities > 0}>