[Fix] #404 - Misc fixes for FCP

- firstname, lastname, other firstnames and birth dates are read only when an account is linked to FCP
- UX improvement for "desynchronize when not yet a pwd" use case

src/main/java/org/oasis_eu/portal/front/generic/i18nMessages.java

@@ -81,7 +81,7 @@ private i18nMessages() {
         "personal.streetaddress", "personal.country", "personal.locality", "personal.middlename", "account.update");
 
     private static final List<String> franceconnectKeys = Arrays.asList("name", "form.your-profile", "form.synchronise", "form.desynchronize",
-            "form.desynchronize-without-pwd");
+            "form.desynchronize-without-pwd", "form.desynchronize-without-pwd-help");
 
 
     private static final List<String> organizationSearchKeys = Arrays.asList("title", "new", "no-apps-installed");

src/main/java/org/oasis_eu/portal/front/my/rest/ProfileController.java

@@ -37,7 +37,7 @@ public class ProfileController extends BaseController {
     @Value("${kernel.france_connect.unlink_endpoint:''}")
     private String unlinkFranceConnectEndpoint;
 
-    @RequestMapping(method = RequestMethod.GET, value = "")
+    @GetMapping
     public UIUserProfile userInfos() {
         UserProfile userProfile = userProfileService.findUserProfile(userInfoService.currentUser().getUserId());
         List<String> languages = OasisLocales.locales().stream().map(Locale::getLanguage).collect(Collectors.toList());

src/main/resources/messages.properties

@@ -414,7 +414,8 @@ contact.form.captcha=Verification
 franceconnect.name=FranceConnect
 franceconnect.form.synchronise=Synchronise your account with FranceConnect
 franceconnect.form.desynchronize=Desynchronize your account with FranceConnect
-franceconnect.form.desynchronize-without-pwd=To desynchronize your account with FranceConnect you must create a password
+franceconnect.form.desynchronize-without-pwd=Desynchronize your account from FranceConnect
+franceconnect.form.desynchronize-without-pwd-help=To be able to desynchronize your account from FranceConnect, you must first create a password on the site in order to later access your account
 franceconnect.form.your-profile=Your profile
 
 

src/main/resources/messages_fr.properties

@@ -414,7 +414,8 @@ contact.form.captcha=Vérification
 franceconnect.name=FranceConnect
 franceconnect.form.synchronise=Synchroniser votre compte avec FranceConnect
 franceconnect.form.desynchronize=Désynchroniser votre compte avec FranceConnect
-franceconnect.form.desynchronize-without-pwd=Pour désynchroniser votre compte avec FranceConnect vous devez créer un mot de passe.
+franceconnect.form.desynchronize-without-pwd=Désynchroniser votre compte de FranceConnect
+franceconnect.form.desynchronize-without-pwd-help=Pour pouvoir désynchroniser votre compte de FranceConnect, vous devez préalablement créer un mot de passe sur le site pour pouvoir continuer à accéder à votre compte.
 franceconnect.form.your-profile=Votre profile
 
 

src/main/resources/public/js/components/forms/form.js

@@ -60,7 +60,7 @@ SubmitButton.propTypes = {
 };
 
 
-const InputDatePicker = ({label, name, value, onChange, dropdownMode}) =>
+const InputDatePicker = ({label, name, value, onChange, dropdownMode, disabled}) =>
     <div className='flex-row'>
         <label htmlFor={name} className='label'>
             {label}
@@ -71,24 +71,23 @@ const InputDatePicker = ({label, name, value, onChange, dropdownMode}) =>
                     peekNextMonth
                     showMonthDropdown
                     showYearDropdown
-                    className="form-control field" name={name}/>
+                    className="form-control field"
+                    name={name}
+                    disabled={disabled}/>
     </div>;
 
 InputDatePicker.propTypes = {
     name: PropTypes.string.isRequired,
     value: PropTypes.object,
     dropdownMode: PropTypes.string,
     label: PropTypes.string.isRequired,
-    startDate: PropTypes.object,
-    labelClassName: PropTypes.string,
-    divClassName: PropTypes.string,
-    onChange: PropTypes.func
+    onChange: PropTypes.func,
+    disabled: PropTypes.bool
 };
 
 InputDatePicker.defaultProps = {
-    divClassName: 'col-sm-7',
-    labelClassName: 'control-label col-sm-3',
-    dropdownMode: 'select'
+    dropdownMode: 'select',
+    disabled: false
 };
 
 class CountrySelector extends React.Component {

src/main/resources/public/js/components/forms/france-connect-form.js

@@ -38,9 +38,10 @@ class FranceConnectForm extends React.Component {
             {
                 userProfile.franceconnect_sub && !userProfile.email_verified &&
                 <div className="text-center">
-                    <a href={this.props.passwordChangeEndpoint} className="btn btn-submit">
+                    <a className="btn btn-submit disabled">
                         {this.context.t("franceconnect.form.desynchronize-without-pwd")}
                     </a>
+                    <span className="help-block">{this.context.t("franceconnect.form.desynchronize-without-pwd-help")}</span>
                 </div>
             }
 

src/main/resources/public/js/pages/profile.js

@@ -51,7 +51,6 @@ class Profile extends React.Component {
             .fail((xhr, status, err) => {
                 this.setState({error: "Unable to retrieve profile info"})
             })
-
     }
 
     onValueChange(field, value) {
@@ -82,10 +81,10 @@ class Profile extends React.Component {
             contentType: 'application/json',
             data: JSON.stringify(this.state.userProfile)
         })
-            .done(function (data) {
+            .done(() => {
                 this.setState({updateSucceeded: true});
                 this.componentDidMount();
-            }.bind(this))
+            })
     }
 
     render() {
@@ -219,16 +218,20 @@ class IdentityAccount extends React.Component {
                 <legend className="oz-legend">{this.context.t('my.profile.personal.identity')}</legend>
                 <InputText name="given_name" value={this.props.userProfile.given_name}
                            onChange={e => this.props.onValueChange('given_name', e.target.value)}
-                           label={this.context.t('my.profile.personal.firstname')}/>
+                           label={this.context.t('my.profile.personal.firstname')}
+                           disabled={this.props.userProfile.franceconnect_sub} />
                 <InputText name="middle_name" value={this.props.userProfile.middle_name}
                            label={this.context.t('my.profile.personal.middlename')}
-                           onChange={e => this.props.onValueChange('middle_name', e.target.value)}/>
+                           onChange={e => this.props.onValueChange('middle_name', e.target.value)}
+                           disabled={this.props.userProfile.franceconnect_sub} />
                 <InputText name="family_name" value={this.props.userProfile.family_name}
                            label={this.context.t('my.profile.personal.lastname')}
-                           onChange={e => this.props.onValueChange('family_name', e.target.value)}/>
+                           onChange={e => this.props.onValueChange('family_name', e.target.value)}
+                           disabled={this.props.userProfile.franceconnect_sub} />
                 <InputDatePicker name="birthdate" label={this.context.t('my.profile.personal.birthdate')}
                                  onChange={this.handleChange.bind(this)} onSubmit={this.handleChange.bind(this)}
-                                 value={birthdate} dropdownMode="select"/>
+                                 value={birthdate} dropdownMode="select"
+                                 disabled={this.props.userProfile.franceconnect_sub} />
                 <InputText name="phone_number" value={this.props.userProfile.phone_number}
                            label={this.context.t('my.profile.personal.phonenumber')}
                            onChange={e => this.props.onValueChange('phone_number', e.target.value)}/>