Merge pull request #2489 from jryans/auth-text-and-links

Update text and links in authentication flows

res/css/structures/auth/_Login.scss

@@ -69,43 +69,12 @@ limitations under the License.
     margin-right: 10px;
 }
 
-.mx_Login_create {
-    display: block;
-    text-align: center;
-    width: 100%;
-    font-size: 13px;
-    opacity: 0.8;
-}
-
-.mx_Login_create:link {
-    color: $primary-fg-color;
-}
-
-.mx_Login_prompt {
-    padding-top: 15px;
-    padding-bottom: 15px;
-    font-size: 13px;
-}
-
-.mx_Login_forgot {
-    font-size: 15px;
-}
-
-.mx_Login_forgot:link {
-    color: $primary-fg-color;
-}
-
 .mx_Login_sso_link {
     display: block;
     text-align: center;
-    font-size: 15px;
     margin-bottom: 20px;
 }
 
-.mx_Login_sso_link:link {
-    color: $primary-fg-color;
-}
-
 .mx_Login_loader {
     display: inline;
     position: relative;

res/css/views/auth/_AuthBody.scss

@@ -20,4 +20,19 @@ limitations under the License.
     border-radius: 0 4px 4px 0;
     padding: 25px 60px;
     box-sizing: border-box;
+    font-size: 12px;
+    color: $authpage-body-color;
+}
+
+.mx_AuthBody a:link,
+.mx_AuthBody a:hover,
+.mx_AuthBody a:visited {
+    color: $accent-color;
+    text-decoration: none;
+}
+
+.mx_Auth_changeFlow {
+    display: block;
+    text-align: center;
+    width: 100%;
 }

res/css/views/auth/_AuthPage.scss

@@ -24,9 +24,9 @@ limitations under the License.
 }
 
 .mx_AuthPage h2 {
-    font-weight: 300;
+    font-size: 24px;
-    margin-top: 32px;
+    font-weight: 600;
-    margin-bottom: 20px;
+    margin-top: 8px;
 }
 
 .mx_AuthPage_modal {

res/themes/dharma/css/_dharma.scss

@@ -217,6 +217,7 @@ $authpage-bg-color: #2e3649;
 $authpage-modal-bg-color: rgba(255, 255, 255, 0.59);
 $authpage-body-bg-color: #ffffff;
 $authpage-lang-color: #4e5054;
+$authpage-body-color: #61708b;
 
 /*** form elements ***/
 

res/themes/light/css/_base.scss

@@ -213,6 +213,7 @@ $authpage-bg-color: #2e3649;
 $authpage-modal-bg-color: rgba(255, 255, 255, 0.59);
 $authpage-body-bg-color: #ffffff;
 $authpage-lang-color: #4e5054;
+$authpage-body-color: #61708b;
 
 // ***** Mixins! *****
 

src/components/structures/MatrixChat.js

@@ -1955,7 +1955,6 @@ export default React.createClass({
                     customHsUrl={this.getCurrentHsUrl()}
                     customIsUrl={this.getCurrentIsUrl()}
                     onComplete={this.onLoginClick}
-                    onRegisterClick={this.onRegisterClick}
                     onLoginClick={this.onLoginClick} />
             );
         }

src/components/structures/auth/ForgotPassword.js

@@ -34,7 +34,6 @@ module.exports = React.createClass({
         customHsUrl: PropTypes.string,
         customIsUrl: PropTypes.string,
         onLoginClick: PropTypes.func,
-        onRegisterClick: PropTypes.func,
         onComplete: PropTypes.func.isRequired,
 
         // The default server name to use when the user hasn't specified
@@ -168,12 +167,6 @@ module.exports = React.createClass({
         this.props.onLoginClick();
     },
 
-    onRegisterClick: function(ev) {
-        ev.preventDefault();
-        ev.stopPropagation();
-        this.props.onRegisterClick();
-    },
-
     showErrorDialog: function(body, title) {
         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
         Modal.createTrackedDialog('Forgot Password Error', '', ErrorDialog, {
@@ -195,7 +188,7 @@ module.exports = React.createClass({
             resetPasswordJsx = <Spinner />;
         } else if (this.state.progress === "sent_email") {
             resetPasswordJsx = (
-                <div className="mx_Login_prompt">
+                <div>
                     { _t("An email has been sent to %(emailAddress)s. Once you've followed the link it contains, " +
                         "click below.", { emailAddress: this.state.email }) }
                     <br />
@@ -205,7 +198,7 @@ module.exports = React.createClass({
             );
         } else if (this.state.progress === "complete") {
             resetPasswordJsx = (
-                <div className="mx_Login_prompt">
+                <div>
                     <p>{ _t('Your password has been reset') }.</p>
                     <p>{ _t('You have been logged out of all devices and will no longer receive push notifications. ' +
                         'To re-enable notifications, sign in again on each device') }.</p>
@@ -236,9 +229,9 @@ module.exports = React.createClass({
 
             resetPasswordJsx = (
             <div>
-                <div className="mx_Login_prompt">
+                <p>
                     { _t('To reset your password, enter the email address linked to your account') }:
-                </div>
+                </p>
                 <div>
                     <form onSubmit={this.onSubmitForm}>
                         <input className="mx_Login_field" ref="user" type="text"
@@ -263,11 +256,8 @@ module.exports = React.createClass({
                     </form>
                     { serverConfigSection }
                     { errorText }
-                    <a className="mx_Login_create" onClick={this.onLoginClick} href="#">
+                    <a className="mx_Auth_changeFlow" onClick={this.onLoginClick} href="#">
-                        { _t('Return to login screen') }
+                        { _t('Sign in instead') }
-                    </a>
-                    <a className="mx_Login_create" onClick={this.onRegisterClick} href="#">
-                        { _t('Create an account') }
                     </a>
                 </div>
             </div>
@@ -279,6 +269,7 @@ module.exports = React.createClass({
             <AuthPage>
                 <AuthHeader />
                 <AuthBody>
+                    <h2> { _t('Set a new password') } </h2>
                     {resetPasswordJsx}
                 </AuthBody>
             </AuthPage>

src/components/structures/auth/Login.js

@@ -526,7 +526,7 @@ module.exports = React.createClass({
         let loginAsGuestJsx;
         if (this.props.enableGuest) {
             loginAsGuestJsx =
-                <a className="mx_Login_create" onClick={this._onLoginAsGuestClick} href="#">
+                <a className="mx_Auth_changeFlow" onClick={this._onLoginAsGuestClick} href="#">
                     { _t('Try the app first') }
                 </a>;
         }
@@ -544,8 +544,6 @@ module.exports = React.createClass({
                 delayTimeMs={1000} />;
         }
 
-        const header = <h2>{ _t('Sign in') } { loader }</h2>;
-
         let errorTextSection;
         if (errorText) {
             errorTextSection = (
@@ -559,12 +557,15 @@ module.exports = React.createClass({
             <AuthPage>
                 <AuthHeader />
                 <AuthBody>
-                    { header }
+                    <h2>
+                        {_t('Sign in to your account')}
+                        {loader}
+                    </h2>
                     { errorTextSection }
                     { this.componentForStep(this.state.currentFlow) }
                     { serverConfig }
-                    <a className="mx_Login_create" onClick={this.onRegisterClick} href="#">
+                    <a className="mx_Auth_changeFlow" onClick={this.onRegisterClick} href="#">
-                        { _t('Create an account') }
+                        { _t('Create account') }
                     </a>
                     { loginAsGuestJsx }
                 </AuthBody>

src/components/structures/auth/Registration.js

@@ -457,7 +457,6 @@ module.exports = React.createClass({
 
         let errorText;
         const err = this.state.errorText || this.props.defaultServerDiscoveryError;
-        const header = <h2>{ _t('Create an account') }</h2>;
         if (err) {
             errorText = <div className="mx_Login_error">{ err }</div>;
         }
@@ -465,8 +464,8 @@ module.exports = React.createClass({
         let signIn;
         if (!this.state.doingUIAuth) {
             signIn = (
-                <a className="mx_Login_create" onClick={this.onLoginClick} href="#">
+                <a className="mx_Auth_changeFlow" onClick={this.onLoginClick} href="#">
-                    { _t('I already have an account') }
+                    { _t('Sign in instead') }
                 </a>
             );
         }
@@ -480,7 +479,7 @@ module.exports = React.createClass({
                         null}
                 />
                 <AuthBody>
-                    { header }
+                    <h2>{ _t('Create your account') }</h2>
                     { registerBody }
                     { signIn }
                     { errorText }

src/components/views/auth/PasswordLogin.js

@@ -245,11 +245,16 @@ class PasswordLogin extends React.Component {
         let forgotPasswordJsx;
 
         if (this.props.onForgotPasswordClick) {
-            forgotPasswordJsx = (
+            forgotPasswordJsx = <span>
-                <a className="mx_Login_forgot" onClick={this.props.onForgotPasswordClick} href="#">
+                {_t('Not sure of your password? <a>Set a new one</a>', {}, {
-                    { _t('Forgot your password?') }
+                    a: sub => <a className="mx_Login_forgot"
-                </a>
+                        onClick={this.props.onForgotPasswordClick}
-            );
+                        href="#"
+                    >
+                        {sub}
+                    </a>,
+                })}
+            </span>;
         }
 
         let matrixIdText = _t('Matrix ID');

src/i18n/strings/en_EN.json

@@ -431,6 +431,7 @@
     "Encrypted by an unverified device": "Encrypted by an unverified device",
     "Unencrypted message": "Unencrypted message",
     "Please select the destination room for this message": "Please select the destination room for this message",
+    "Scroll to bottom of page": "Scroll to bottom of page",
     "Blacklisted": "Blacklisted",
     "Verified": "Verified",
     "Unverified": "Unverified",
@@ -1065,6 +1066,8 @@
     "Set status": "Set status",
     "Set a new status...": "Set a new status...",
     "View Community": "View Community",
+    "Login": "Login",
+    "powered by Matrix": "powered by Matrix",
     "Robot check is currently unavailable on desktop - please use a <a>web browser</a>": "Robot check is currently unavailable on desktop - please use a <a>web browser</a>",
     "This Home Server would like to make sure you are not a robot": "This Home Server would like to make sure you are not a robot",
     "Custom Server Options": "Custom Server Options",
@@ -1082,7 +1085,6 @@
     "Please enter the code it contains:": "Please enter the code it contains:",
     "Code": "Code",
     "Start authentication": "Start authentication",
-    "powered by Matrix": "powered by Matrix",
     "The email field must not be blank.": "The email field must not be blank.",
     "The user name field must not be blank.": "The user name field must not be blank.",
     "The phone number field must not be blank.": "The phone number field must not be blank.",
@@ -1090,7 +1092,7 @@
     "Username on %(hs)s": "Username on %(hs)s",
     "User name": "User name",
     "Mobile phone number": "Mobile phone number",
-    "Forgot your password?": "Forgot your password?",
+    "Not sure of your password? <a>Set a new one</a>": "Not sure of your password? <a>Set a new one</a>",
     "%(serverName)s Matrix ID": "%(serverName)s Matrix ID",
     "Sign in with": "Sign in with",
     "Sign in": "Sign in",
@@ -1155,7 +1157,6 @@
     "Couldn't load home page": "Couldn't load home page",
     "You are currently using Riot anonymously as a guest.": "You are currently using Riot anonymously as a guest.",
     "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.",
-    "Login": "Login",
     "Invalid configuration: Cannot supply a default homeserver URL and a default server name": "Invalid configuration: Cannot supply a default homeserver URL and a default server name",
     "Failed to reject invitation": "Failed to reject invitation",
     "This room is not public. You will not be able to rejoin without an invite.": "This room is not public. You will not be able to rejoin without an invite.",
@@ -1197,7 +1198,6 @@
     "Directory": "Directory",
     "Search for a room": "Search for a room",
     "#example": "#example",
-    "Scroll to bottom of page": "Scroll to bottom of page",
     "Message not sent due to unknown devices being present": "Message not sent due to unknown devices being present",
     "<showDevicesText>Show devices</showDevicesText>, <sendAnywayText>send anyway</sendAnywayText> or <cancelText>cancel</cancelText>.": "<showDevicesText>Show devices</showDevicesText>, <sendAnywayText>send anyway</sendAnywayText> or <cancelText>cancel</cancelText>.",
     "You can't send any messages until you review and agree to <consentLink>our terms and conditions</consentLink>.": "You can't send any messages until you review and agree to <consentLink>our terms and conditions</consentLink>.",
@@ -1209,8 +1209,6 @@
     "%(count)s <resendText>Resend all</resendText> or <cancelText>cancel all</cancelText> now. You can also select individual messages to resend or cancel.|one": "<resendText>Resend message</resendText> or <cancelText>cancel message</cancelText> now.",
     "Connectivity to the server has been lost.": "Connectivity to the server has been lost.",
     "Sent messages will be stored until your connection has returned.": "Sent messages will be stored until your connection has returned.",
-    "%(count)s new messages|other": "%(count)s new messages",
-    "%(count)s new messages|one": "%(count)s new message",
     "Active call": "Active call",
     "There's no one else here! Would you like to <inviteText>invite others</inviteText> or <nowarnText>stop warning about the empty room</nowarnText>?": "There's no one else here! Would you like to <inviteText>invite others</inviteText> or <nowarnText>stop warning about the empty room</nowarnText>?",
     "You seem to be uploading files, are you sure you want to quit?": "You seem to be uploading files, are you sure you want to quit?",
@@ -1318,7 +1316,8 @@
     "New password": "New password",
     "Confirm your new password": "Confirm your new password",
     "Send Reset Email": "Send Reset Email",
-    "Create an account": "Create an account",
+    "Sign in instead": "Sign in instead",
+    "Set a new password": "Set a new password",
     "Invalid homeserver discovery response": "Invalid homeserver discovery response",
     "Invalid identity server discovery response": "Invalid identity server discovery response",
     "General failure": "General failure",
@@ -1336,6 +1335,8 @@
     "Can't connect to homeserver - please check your connectivity, ensure your <a>homeserver's SSL certificate</a> is trusted, and that a browser extension is not blocking requests.": "Can't connect to homeserver - please check your connectivity, ensure your <a>homeserver's SSL certificate</a> is trusted, and that a browser extension is not blocking requests.",
     "Sign in with single sign-on": "Sign in with single sign-on",
     "Try the app first": "Try the app first",
+    "Sign in to your account": "Sign in to your account",
+    "Create account": "Create account",
     "Failed to fetch avatar URL": "Failed to fetch avatar URL",
     "Set a display name:": "Set a display name:",
     "Upload an avatar:": "Upload an avatar:",
@@ -1350,7 +1351,7 @@
     "A phone number is required to register on this homeserver.": "A phone number is required to register on this homeserver.",
     "You need to enter a user name.": "You need to enter a user name.",
     "An unknown error occurred.": "An unknown error occurred.",
-    "I already have an account": "I already have an account",
+    "Create your account": "Create your account",
     "Commands": "Commands",
     "Results from DuckDuckGo": "Results from DuckDuckGo",
     "Emoji": "Emoji",