Merge pull request #829 from mlorb/ml-sci-1691

Fixes some text style and default input values [SCI-1691]

app/javascript/src/config/locales/messages.js

@@ -5,7 +5,8 @@ export default {
       cancel: "Cancel",
       update: "Update",
       edit: "Edit",
-      loading: "Loading ..."
+      loading: "Loading ...",
+      upload: "Upload"
     },
     error_messages: {
       text_too_short: "is too short (minimum is {min_length} characters)",
@@ -71,12 +72,14 @@ export default {
       team: "Team",
       avatar: "Avatar",
       edit_avatar: "Edit Avatar",
+      upload_new_avatar: "Upload new avatar file",
       change: "Change",
       change_password: "Password",
       new_password: "New password",
       password_confirmation:
-        "Current password (we need your current password to confirm your changes)",
+        "<strong>Current password</strong> <i>(we need your current password to confirm your changes)</i>",
       new_password_confirmation: "New password confirmation",
+      email: "Email",
       new_email: "New email",
       initials: "Initials",
       full_name: "Full name",

app/javascript/src/scenes/SettingsPage/scenes/profile/components/AvatarInputField.jsx

@@ -72,7 +72,7 @@ class AvatarInputField extends Component {
       <InputEnabled
         forceRerender={this.rerender}
         labelTitle="settings_page.avatar"
-        labelValue="Upload new avatar file"
+        labelValue="settings_page.upload_new_avatar"
         inputType="file"
         inputValue=""
         dataField="avatar"

app/javascript/src/scenes/SettingsPage/scenes/profile/components/InputEnabled.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import { string, func } from "prop-types";
 import styled from "styled-components";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, FormattedHTMLMessage } from "react-intl";
 import {
   FormGroup,
   FormControl,
@@ -35,15 +35,17 @@ const StyledInputEnabled = styled.div`
   }
 `;
 
-const StyledHelpBlock = styled(HelpBlock)`color: ${COLOR_APPLE_BLOSSOM};`;
+const StyledHelpBlock = styled(HelpBlock)`
+  color: ${COLOR_APPLE_BLOSSOM};
+`;
 
 class InputEnabled extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      value: this.props.inputValue,
-      current_password: "**********",
+      value: this.props.inputValue === "********" ? "" : this.props.inputValue,
+      current_password: "",
       password_confirmation: "",
       errorMessage: ""
     };
@@ -293,9 +295,7 @@ class InputEnabled extends Component {
     if (type === "email") {
       return (
         <div>
-          <p>
-            <FormattedMessage id="settings_page.password_confirmation" />
-          </p>
+          <FormattedHTMLMessage id="settings_page.password_confirmation" />
           <FormControl
             type="password"
             value={this.state.current_password}
@@ -312,9 +312,7 @@ class InputEnabled extends Component {
     if (inputType === "password") {
       return (
         <div>
-          <i>
-            <FormattedMessage id="settings_page.password_confirmation" />
-          </i>
+          <FormattedHTMLMessage id="settings_page.password_confirmation" />
           <FormControl
             type={inputType}
             value={this.state.current_password}
@@ -371,13 +369,21 @@ class InputEnabled extends Component {
               <FormattedMessage id="settings_page.change" />&nbsp;
               <FormattedMessage id={this.props.labelTitle} />
             </h4>
-            <ControlLabel>{this.props.labelValue}</ControlLabel>
+            {this.props.labelValue !== "none" && (
+              <ControlLabel>
+                <FormattedMessage id={this.props.labelValue} />
+              </ControlLabel>
+            )}
             {this.inputField()}
             {this.confirmationField()}
             <StyledHelpBlock>{this.state.errorMessage}</StyledHelpBlock>
             <ButtonToolbar>
               <Button bsStyle="primary" type="submit">
-                <FormattedMessage id="general.update" />
+                <FormattedMessage
+                  id={`general.${this.props.dataField === "avatar"
+                    ? "upload"
+                    : "update"}`}
+                />
               </Button>
               <Button bsStyle="default" onClick={this.props.disableEdit}>
                 <FormattedMessage id="general.cancel" />

app/javascript/src/scenes/SettingsPage/scenes/profile/components/MyProfile.jsx

@@ -64,7 +64,7 @@ class MyProfile extends Component {
           value={this.state.fullName}
           inputType="text"
           labelTitle="settings_page.full_name"
-          labelValue="Full name"
+          labelValue="settings_page.full_name"
           reloadInfo={this.loadInfo}
           dataField="full_name"
         />
@@ -73,15 +73,15 @@ class MyProfile extends Component {
           value={this.state.initials}
           inputType="text"
           labelTitle="settings_page.initials"
-          labelValue="Initials"
+          labelValue="settings_page.initials"
           reloadInfo={this.loadInfo}
           dataField="initials"
         />
         <ProfileInputField
           value={this.state.email}
           inputType="email"
-          labelTitle="settings_page.new_email"
-          labelValue="New email"
+          labelTitle="settings_page.email"
+          labelValue="settings_page.new_email"
           reloadInfo={this.loadInfo}
           dataField="email"
         />
@@ -90,7 +90,7 @@ class MyProfile extends Component {
           value="********"
           inputType="password"
           labelTitle="settings_page.change_password"
-          labelValue="Current password"
+          labelValue="none"
           reloadInfo={this.loadInfo}
           dataField="password"
         />