fab-manager/app/frontend/templates/dashboard/settings.html

<div>

  <ng-include src="'/dashboard/nav.html'"></ng-include>



  <div class="row no-gutter wrapper dashboard">
    <div class="col-sm-12 col-md-12 col-lg-3">
      <div class="widget panel b-a m m-t-lg">
        <div class="panel-heading b-b small text-center">
          <span class="avatar ">
            <fab-user-avatar ng-model="user.profile_attributes.user_avatar_attributes" avatar-class="thumb-50">test</fab-user-avatar>
          </span>
          <div class="font-sbold m-t-sm">{{user.name}}</div>
          <div>{{user.email}}</div>
          <div class="text-xs" ng-show="user.last_sign_in_at"><i>{{ 'app.logged.dashboard.settings.last_activity_on_' | translate:{DATE:(user.last_sign_in_at | amDateFormat: 'LL')} }}</i></div>
        </div>
        <div class="widget-content no-bg b-b auto wrapper">
          <change-group user="user"
                        on-success="onGroupUpdateSuccess"
                        on-error="onError"
                        class-name="'dashboard-change-group'"
                        allow-change="isAllowedChangingGroup()">
          </change-group>
          <div ng-show="$root.modules.plans">
            <h3 class="text-u-c" translate>{{ 'app.logged.dashboard.settings.subscription' }}</h3>
            <div ng-show="user.subscribed_plan">
              <uib-alert type="warning">
                <span class="text-black font-sbold">{{ user.subscribed_plan | humanReadablePlanName }}</span>
                <div class="font-sbold" ng-if="user.subscription">{{ 'app.logged.dashboard.settings.your_subscription_expires_on_' | translate }} {{user.subscription.expired_at | amDateFormat: 'LL'}}</div>
              </uib-alert>

            </div>
            <div ng-show="!user.subscribed_plan.name">{{ 'app.logged.dashboard.settings.no_subscriptions' | translate }} <br><a class="btn text-black btn-warning-full btn-sm m-t-xs" ui-sref="app.public.plans" translate>{{ 'app.logged.dashboard.settings.i_want_to_subscribe' }}</a></div>
          </div>

          <div class="m-t">
            <h3 class="text-u-c" translate>{{ 'app.logged.dashboard.settings.trainings' }}</h3>
            <ul class="list-unstyled" ng-if="user.training_reservations.length > 0 || user.trainings.length > 0">
              <li ng-repeat="r in user.training_reservations | trainingReservationsFilter:'future'">
                {{r.reservable.name}} - {{ 'app.logged.dashboard.settings.to_come' | translate }}
              </li>
              <li ng-repeat="t in user.trainings">
                {{t.name}} - {{ 'app.logged.dashboard.settings.approved' | translate }}
              </li>
            </ul>
            <div ng-if="user.training_reservations.length == 0 && user.trainings.length == 0" translate>{{ 'app.logged.dashboard.settings.no_trainings' }}</div>
          </div>

          <div class="m-t">
            <h3 class="text-u-c" translate>{{ 'app.logged.dashboard.settings.projects' }}</h3>
            <ul class="list-unstyled" ng-if="user.all_projects.length > 0">
              <li ng-repeat="p in user.all_projects">
                {{p.name}}
              </li>
            </ul>
            <div ng-if="user.all_projects.length == 0" translate>{{ 'app.logged.dashboard.settings.no_projects' }}</div>
          </div>

          <div class="m-t">
            <h3 class="text-u-c" translate>{{ 'app.logged.dashboard.settings.labels' }}</h3>
            <span ng-if="user.tags.length > 0" ng-repeat="t in user.tags">
                <span class='label label-success text-white'>{{t.name}}</span>
            </span>
            <div ng-if="user.tags.length == 0" translate>{{ 'app.logged.dashboard.settings.no_labels' }}</div>
          </div>
        </div>
        <div class="widget-content no-bg b-b auto wrapper">
          <h3 class="text-u-c" translate>{{ 'app.logged.dashboard.settings.cookies' }}</h3>
          <div ng-show="cookiesStatus === 'accept'" translate>{{ 'app.logged.dashboard.settings.cookies_accepted' }}</div>
          <div ng-show="cookiesStatus === 'decline'" translate>{{ 'app.logged.dashboard.settings.cookies_declined' }}</div>
          <div ng-hide="cookiesStatus" translate>{{ 'app.logged.dashboard.settings.cookies_unset' }}</div>
          <button ng-click="resetCookies()" ng-show="cookiesStatus" class="btn text-black btn-warning-full btn-sm m-t-xs" translate>{{ 'app.logged.dashboard.settings.reset_cookies' }}</button>
        </div>
        <div class="widget-content no-bg text-center auto wrapper" ng-hide="isAdminSys">
          <button class="btn text-white btn-danger btn-sm" ng-click="deleteUser(user)"><i class="fa fa-warning m-r-xs"></i> {{ 'app.logged.dashboard.settings.delete_my_account' | translate }}</button>
        </div>
      </div>

    </div>

    <div class="col-sm-12 col-md-12 col-lg-9">
      <div class="widget panel b-a m m-t-lg">
        <div class="panel-heading b-b">
          <h1 class="red text-u-c" translate>{{ 'app.logged.dashboard.settings.edit_my_profile' }}</h1>
        </div>
        <form role="form" name="userForm" class="form-horizontal" novalidate  action="{{ actionUrl }}" ng-upload="submited(content)" upload-options-enable-rails-csrf="true">
          <div class="widget-content no-bg auto">
              <section class="panel panel-default bg-light m p-lg row" ng-if="hasSsoFields()">
                  <div class="panel-heading">
                      <h2>
                          <span class="v-middle">{{activeProvider.name}}</span>
                      </h2>
                  </div>
                  <div class="panel-body row">
                      <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                          <a class="btn btn-default" ng-href="{{activeProvider.link_to_sso_profile}}" target="_blank">
                              <i class="fa fa-edit"></i> {{ 'app.logged.dashboard.settings.change_my_data' | translate }}
                          </a>
                          <p>{{ 'app.logged.dashboard.settings.once_your_data_are_up_to_date_' | translate }} <strong translate>{{ 'app.logged.dashboard.settings._click_on_the_synchronization_button_opposite_' }}</strong>  {{ 'app.logged.dashboard.settings.or' | translate}} <strong translate>{{ 'app.logged.dashboard.settings._disconnect_then_reconnect_' }}</strong> {{ 'app.logged.dashboard.settings._for_your_changes_to_take_effect' | translate }}</p>
                      </div>
                      <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                          <a class="btn btn-default" ng-click="syncProfile()">
                              <i class="fa fa-refresh"></i> {{ 'app.logged.dashboard.settings.sync_my_profile' | translate }}
                          </a>
                      </div>
                  </div>
              </section>
              <section class="panel panel-default bg-light m">
                <div class="panel-body m-r">
                  <user-profile-form user="user" operator="user" action="'update'" on-error="onError" on-success="onSuccess" />
                </div>   <!-- ./panel-body  -->
              </section>
          </div>
        </form>
      </div>

    </div>

  </div>
</div>