From bc1b6ca7a2529400a552b69f040bedabb237ce0d Mon Sep 17 00:00:00 2001
From: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Date: Wed, 9 Oct 2019 11:42:47 +0200
Subject: [PATCH] feat: handle completion when logged out

---
 .../src/components/Header/components/Login.js |  4 ++--
 .../Challenges/components/CompletionModal.js  | 21 +++++++++++++++++--
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Header/components/Login.js b/client/src/components/Header/components/Login.js
index 0b6c664321..4996684039 100644
--- a/client/src/components/Header/components/Login.js
+++ b/client/src/components/Header/components/Login.js
@@ -35,11 +35,11 @@ function Login(props) {
   const { children, navigate, isSignedIn, ...restProps } = props;
   return (
     <Button
+      bsStyle='default'
+      className={(restProps.block ? 'btn-cta-big' : '') + ' signup-btn btn-cta'}
       href='/signin'
       onClick={createOnClick(navigate, isSignedIn)}
       {...restProps}
-      bsStyle='default'
-      className={(restProps.block ? 'btn-cta-big' : '') + ' signup-btn btn-cta'}
     >
       {children || 'Sign In'}
     </Button>
diff --git a/client/src/templates/Challenges/components/CompletionModal.js b/client/src/templates/Challenges/components/CompletionModal.js
index eb1aa98f4f..0a46e36104 100644
--- a/client/src/templates/Challenges/components/CompletionModal.js
+++ b/client/src/templates/Challenges/components/CompletionModal.js
@@ -6,6 +6,7 @@ import { createSelector } from 'reselect';
 import { Button, Modal } from '@freecodecamp/react-bootstrap';
 
 import ga from '../../../analytics';
+import Login from '../../../components/Header/components/Login';
 import GreenPass from '../../../assets/icons/GreenPass';
 
 import { dasherize } from '../../../../../utils/slugs';
@@ -21,15 +22,19 @@ import {
   challengeMetaSelector
 } from '../redux';
 
+import { isSignedInSelector } from '../../../redux';
+
 const mapStateToProps = createSelector(
   challengeFilesSelector,
   challengeMetaSelector,
   isCompletionModalOpenSelector,
+  isSignedInSelector,
   successMessageSelector,
-  (files, { title }, isOpen, message) => ({
+  (files, { title }, isOpen, isSignedIn, message) => ({
     files,
     title,
     isOpen,
+    isSignedIn,
     message
   })
 );
@@ -58,6 +63,7 @@ const propTypes = {
   files: PropTypes.object.isRequired,
   handleKeypress: PropTypes.func.isRequired,
   isOpen: PropTypes.bool,
+  isSignedIn: PropTypes.bool.isRequired,
   message: PropTypes.string,
   submitChallenge: PropTypes.func.isRequired,
   title: PropTypes.string
@@ -107,6 +113,7 @@ export class CompletionModal extends Component {
     const {
       close,
       isOpen,
+      isSignedIn,
       submitChallenge,
       handleKeypress,
       message,
@@ -144,9 +151,19 @@ export class CompletionModal extends Component {
             bsStyle='primary'
             onClick={submitChallenge}
           >
-            Submit and go to next challenge{' '}
+            {isSignedIn ? 'Submit and g' : 'G'}o to next challenge{' '}
             <span className='hidden-xs'>(Ctrl + Enter)</span>
           </Button>
+          {isSignedIn ? null : (
+            <Login
+              block={true}
+              bsSize='lg'
+              bsStyle='primary'
+              className='btn-invert'
+            >
+              Sign in to save your progress
+            </Login>
+          )}
           {this.state.downloadURL ? (
             <Button
               block={true}