Add visible guest warning to encourage login

If you happen to get logged out, it might not be very clear what has happened
visually. This adds a visible warning to the top of the home page to suggest
logging in.

Fixes element-hq/element-web#7629.

Signed-off-by: J. Ryan Stinnett <jryans@gmail.com>

res/css/structures/_HomePage.scss

@@ -33,3 +33,16 @@ limitations under the License.
 .mx_HomePage_body {
 //  margin-left: 63px;
 }
+
+.mx_HomePage_guest_warning {
+    display: flex;
+    background-color: $secondary-accent-color;
+    border: 1px solid $accent-color;
+    margin: 20px;
+    padding: 20px 40px;
+    border-radius: 5px;
+}
+
+.mx_HomePage_guest_warning img {
+    padding-right: 10px;
+}

src/components/structures/HomePage.js

@@ -23,6 +23,8 @@ import request from 'browser-request';
 import { _t } from '../../languageHandler';
 import sanitizeHtml from 'sanitize-html';
 import sdk from '../../index';
+import { MatrixClient } from 'matrix-js-sdk';
+import dis from '../../dispatcher';
 
 class HomePage extends React.Component {
     static displayName = 'HomePage';
@@ -37,6 +39,10 @@ class HomePage extends React.Component {
         homePageUrl: PropTypes.string,
     };
 
+    static contextTypes = {
+        matrixClient: PropTypes.instanceOf(MatrixClient),
+    };
+
     state = {
             iframeSrc: '',
             page: '',
@@ -85,17 +91,55 @@ class HomePage extends React.Component {
         this._unmounted = true;
     }
 
+    onLoginClick() {
+        dis.dispatch({ action: 'start_login' });
+    }
+
+    onRegisterClick() {
+        dis.dispatch({ action: 'start_registration' });
+    }
+
     render() {
+        let guestWarning = "";
+        if (this.context.matrixClient.isGuest()) {
+            guestWarning = (
+                <div className="mx_HomePage_guest_warning">
+                    <img src="img/warning.svg" width="24" height="23" />
+                    <div>
+                        <div>
+                            { _t("You are currently using Riot anonymously as a guest.") }
+                        </div>
+                        <div>
+                            { _t(
+                                'If you would like to create a Matrix account you can <a>register</a> now.',
+                                {},
+                                { 'a': (sub) => <a href="#" onClick={this.onRegisterClick}>{ sub }</a> },
+                            ) }
+                        </div>
+                        <div>
+                            { _t(
+                                'If you already have a Matrix account you can <a>log in</a> instead.',
+                                {},
+                                { 'a': (sub) => <a href="#" onClick={this.onLoginClick}>{ sub }</a> },
+                            ) }
+                        </div>
+                    </div>
+                </div>
+            );
+        }
+
         if (this.state.iframeSrc) {
             return (
                 <div className="mx_HomePage">
+                    { guestWarning }
                     <iframe src={ this.state.iframeSrc } />
                 </div>
             );
         } else {
             const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
             return (
                 <GeminiScrollbarWrapper autoshow={true} className="mx_HomePage">
+                    { guestWarning }
                     <div className="mx_HomePage_body" dangerouslySetInnerHTML={{ __html: this.state.page }}>
                     </div>
                 </GeminiScrollbarWrapper>

src/i18n/strings/en_EN.json

@@ -927,7 +927,9 @@
     "Username available": "Username available",
     "To get started, please pick a username!": "To get started, please pick a username!",
     "This will be your account name on the <span></span> homeserver, or you can pick a <a>different server</a>.": "This will be your account name on the <span></span> homeserver, or you can pick a <a>different server</a>.",
+    "If you would like to create a Matrix account you can <a>register</a> now.": "If you would like to create a Matrix account you can <a>register</a> now.",
     "If you already have a Matrix account you can <a>log in</a> instead.": "If you already have a Matrix account you can <a>log in</a> instead.",
+    "You are currently using Riot anonymously as a guest.": "You are currently using Riot anonymously as a guest.",
     "You have successfully set a password!": "You have successfully set a password!",
     "You have successfully set a password and an email address!": "You have successfully set a password and an email address!",
     "You can now return to your account after signing out, and sign in on other devices.": "You can now return to your account after signing out, and sign in on other devices.",

src/i18n/strings/en_US.json

@@ -644,7 +644,9 @@
     "Username not available": "Username not available",
     "Something went wrong!": "Something went wrong!",
     "This will be your account name on the <span></span> homeserver, or you can pick a <a>different server</a>.": "This will be your account name on the <span></span> homeserver, or you can pick a <a>different server</a>.",
+    "If you would like to create a Matrix account you can <a>register</a> now.": "If you would like to create a Matrix account you can <a>register</a> now.",
     "If you already have a Matrix account you can <a>log in</a> instead.": "If you already have a Matrix account you can <a>log in</a> instead.",
+    "You are currently using Riot anonymously as a guest.": "You are currently using Riot anonymously as a guest.",
     "Your browser does not support the required cryptography extensions": "Your browser does not support the required cryptography extensions",
     "Not a valid Riot keyfile": "Not a valid Riot keyfile",
     "Authentication check failed: incorrect password?": "Authentication check failed: incorrect password?",