(ui) user profile form: confirmation message + save button

app/frontend/src/javascript/components/user/user-profile-form.tsx

@@ -16,6 +16,7 @@ import MemberAPI from '../../api/member';
 import { AvatarInput } from './avatar-input';
 import moment from 'moment';
 import { TDateISODate } from '../../typings/date-iso';
+import { FabButton } from '../base/fab-button';
 
 declare const Application: IApplication;
 
@@ -193,8 +194,8 @@ export const UserProfileForm: React.FC<UserProfileFormProps> = ({ action, size,
                       label={t('app.shared.user_profile_form.allow_newsletter')}
                       tooltip={t('app.shared.user_profile_form.allow_newsletter_help')} />
         </div>
-        <div>
-          <button type="submit">GO</button>
+        <div className="main-actions">
+          <FabButton type="submit" className="submit-button">{t('app.shared.user_profile_form.save')}</FabButton>
         </div>
       </div>
     </form>

app/frontend/src/javascript/controllers/members.js

@@ -291,6 +291,7 @@ Application.Controllers.controller('EditProfileController', ['$scope', '$rootSco
       $scope.currentUser = _.cloneDeep(user);
       Auth._currentUser = _.cloneDeep(user);
       $rootScope.currentUser = _.cloneDeep(user);
+      growl.success(_t('app.logged.dashboard.settings.your_profile_has_been_successfully_updated'));
     };
 
     /* PRIVATE SCOPE */

app/frontend/src/stylesheets/modules/user/user-profile-form.scss

@@ -29,6 +29,24 @@
     }
   }
 
+  .main-actions {
+    display: flex;
+    flex-direction: row-reverse;
+
+    .submit-button {
+      margin-top: 2em;
+      border-color: var(--information-light);
+      background-color: var(--information);
+      color: white;
+
+      &:hover {
+        border-color: var(--information);
+        background-color: var(--information-dark);
+        color: white;
+      }
+    }
+  }
+
   &--small {
     flex-direction: column;
 

app/frontend/templates/dashboard/settings.html

@@ -122,13 +122,9 @@
               <section class="panel panel-default bg-light m">
                 <div class="panel-body m-r">
                   <user-profile-form user="user" action="'update'" on-error="onError" on-success="onSuccess" />
-                  <ng-include src="'/shared/_member_form.html'"></ng-include>
                 </div>   <!-- ./panel-body  -->
               </section>
           </div>
-          <div class="panel-footer no-padder">
-            <input type="submit" value="{{ 'app.logged.dashboard.settings.confirm_changes' | translate }}" class="r-b btn-valid btn btn-warning btn-block p-lg btn-lg text-u-c" ng-disabled="userForm.$invalid"/>
-          </div>
         </form>
       </div>
 

config/locales/app.logged.en.yml

@@ -91,6 +91,7 @@ en:
           _click_on_the_synchronization_button_opposite_: "click on the synchronization button opposite"
           _disconnect_then_reconnect_: "disconnect then reconnect"
           _for_your_changes_to_take_effect: "for your changes to take effect."
+          your_profile_has_been_successfully_updated: "Your profile has been successfully updated."
         #dashboard: my projects
         projects:
           you_dont_have_any_projects: "You don't have any projects."

config/locales/app.shared.en.yml

@@ -67,6 +67,7 @@ en:
         used_for_invoicing: "This data will be used for billing purposes"
         used_for_reservation: "This data will be used in case of change on one of your bookings"
         used_for_profile: "This data will only be displayed on your profile"
+        save: "Save"
       gender_input:
         man: "Man"
         woman: "Woman"