Merge pull request #4366 from vector-im/luke/feature-user-settings-password-warning

Give _t to PasswordNagBar, add CSS for UserSettings password warning

src/components/views/globals/PasswordNagBar.js

@@ -20,6 +20,7 @@ import React from 'react';
 import sdk from 'matrix-react-sdk';
 import Modal from 'matrix-react-sdk/lib/Modal';
 import dis from 'matrix-react-sdk/lib/dispatcher';
+import { _t } from 'matrix-react-sdk/lib/languageHandler';
 
 export default React.createClass({
     onUpdateClicked: function() {
@@ -33,12 +34,11 @@ export default React.createClass({
                 dis.dispatch({
                     action: 'password_changed',
                 });
-            }
+            },
         });
     },
 
     render: function() {
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         const toolbarClasses = "mx_MatrixToolbar mx_MatrixToolbar_clickable";
         return (
             <div className={toolbarClasses} onClick={this.onUpdateClicked}>
@@ -49,12 +49,12 @@ export default React.createClass({
                     alt="Warning"
                 />
                 <div className="mx_MatrixToolbar_content">
-                    To return to your account in future you need to <u>set a password</u>
+                    { _t("To return to your account in future you need to <u>set a password</u>") }
                 </div>
                 <button className="mx_MatrixToolbar_action">
-                    Set Password
+                    { _t("Set Password") }
                 </button>
             </div>
         );
-    }
+    },
 });

src/i18n/strings/en_EN.json

@@ -198,5 +198,7 @@
   "Please set a password!": "Please set a password!",
   "This will allow you to return to your account after signing out, and sign in on other devices.": "This will allow you to return to your account after signing out, and sign in on other devices.",
   "You have successfully set a password and an email address!": "You have successfully set a password and an email address!",
-  "Remember, you can always set an email address in user settings if you change your mind.": "Remember, you can always set an email address in user settings if you change your mind."
+  "Remember, you can always set an email address in user settings if you change your mind.": "Remember, you can always set an email address in user settings if you change your mind.",
+  "To return to your account in future you need to <u>set a password</u>": "To return to your account in future you need to <u>set a password</u>",
+  "Set Password"
 }

src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss

@@ -102,6 +102,19 @@ limitations under the License.
     padding-right: 1em;
 }
 
+.mx_UserSettings_passwordWarning {
+    padding: 6px;
+    background-color: #76cfa6;
+    border-radius: 3px;
+    color: #fff;
+    margin-bottom: 5px;
+}
+
+.mx_UserSettings_passwordWarning_icon {
+    vertical-align: -6px;
+    margin-right: 3px;
+}
+
 .mx_UserSettings_importExportButtons {
     padding-top: 10px;
     padding-left: 40px;