From d508e34ae30b6fc37a4fe89e2bea08a43dfcd7d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodrigo=20L=C3=B3pez=20Dato?=
 <rodrigo.lopezdato@flagsmith.com>
Date: Thu, 6 Feb 2025 11:38:22 +0100
Subject: [PATCH] feat: Make it more visible that user invites can be accepted
 by logging in, in addition to signing up (#5077)

---
 frontend/web/components/pages/HomePage.js | 51 ++++++++++++-----------
 1 file changed, 27 insertions(+), 24 deletions(-)

diff --git a/frontend/web/components/pages/HomePage.js b/frontend/web/components/pages/HomePage.js
index dcaaa42e8eda..bcd5346e5d9c 100644
--- a/frontend/web/components/pages/HomePage.js
+++ b/frontend/web/components/pages/HomePage.js
@@ -38,12 +38,12 @@ const HomePage = class extends React.Component {
     // can handle always setting the marketing consent.
     API.setCookie('marketing_consent_given', 'true')
     this.state = {
+      allRequirementsMet: false,
       email: '',
       first_name: '',
       last_name: '',
-      password: '',
       marketing_consent_given: true,
-      allRequirementsMet: false,
+      password: '',
     }
 
     this.handlePasswordChange = this.handlePasswordChange.bind(this)
@@ -368,7 +368,7 @@ const HomePage = class extends React.Component {
                                               />
                                             </span>
                                             <p className='notification__text pl-3'>
-                                              Login to accept your invite
+                                              Log in to accept your invite
                                             </p>
                                           </div>
                                         )}
@@ -544,15 +544,30 @@ const HomePage = class extends React.Component {
                                     </FormGroup>
                                   )}
                                   {isInvite && (
-                                    <div className='notification flex-row'>
-                                      <span className='notification__icon mb-2'>
-                                        <IonIcon
-                                          icon={informationCircleOutline}
-                                        />
-                                      </span>
-                                      <p className='notification__text pl-3'>
-                                        Create an account to accept your invite
-                                      </p>
+                                    <div>
+                                      <div className='notification flex-row'>
+                                        <span className='notification__icon mb-2'>
+                                          <IonIcon
+                                            icon={informationCircleOutline}
+                                          />
+                                        </span>
+                                        <p className='notification__text pl-3'>
+                                          Create an account to accept your
+                                          invite
+                                        </p>
+                                      </div>
+                                      <Row className='justify-content-center'>
+                                        Have an account?{' '}
+                                        <Button
+                                          theme='text'
+                                          className='ml-1 fw-bold'
+                                          onClick={() => {
+                                            window.location.href = `/login${redirect}`
+                                          }}
+                                        >
+                                          Log in
+                                        </Button>
+                                      </Row>
                                     </div>
                                   )}
                                   <fieldset id='details' className=''>
@@ -664,18 +679,6 @@ const HomePage = class extends React.Component {
                                 </form>
                               )}
                             </Card>
-                            <Row className='justify-content-center'>
-                              Have an account?{' '}
-                              <Button
-                                theme='text'
-                                className='ml-1 fw-bold'
-                                onClick={() => {
-                                  window.location.href = `/login${redirect}`
-                                }}
-                              >
-                                Log in
-                              </Button>
-                            </Row>
                           </React.Fragment>
                         )}
                       </div>