rooty/fab-manager
1
0
Fork 0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2025-01-17 06:52:27 +01:00
Code Issues Releases Activity

refactor interface for SSO profile completion

Browse Source
This commit is contained in:
Sylvain 2016-04-25 12:35:43 +02:00
parent 1099adb208
commit 0ee36ca022
7 changed files with 134 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/assets/javascripts/controllers/profile.coffee
View File

@ -124,6 +124,14 @@ Application.Controllers.controller "CompleteProfileController", ["$scope", "$roo
return duplicate[1] return duplicate[1]
email email
##
# Test if the user's mail is marked as duplicate
# @return {boolean}
##
$scope.hasDuplicate = ->
email = memberPromise.email
if email
return (email.match(/^<([^>]+)>.{20}-duplicate$/) == null)
### PRIVATE SCOPE ### ### PRIVATE SCOPE ###

14
app/assets/stylesheets/app.components.scss
View File

@ -464,3 +464,17 @@ padding: 10px;
display: none; display: none;
} }
} }
.disabling-overlay {
&:before {
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(230, 230, 230, 0.7);
position: absolute;
z-index:10;
border-radius: 3px;
}
}

18
app/assets/stylesheets/app.utilities.scss
View File

@ -10,19 +10,35 @@
.font-felt { font-family: $font-felt; } .font-felt { font-family: $font-felt; }
p.font-felt { p.font-felt {
} }
p, .widget p { p, .widget p {
&.font-felt, .font-felt { font-size: rem-calc(18) !important; } &.font-felt, .font-felt { font-size: rem-calc(18) !important; }
&.fleche-left { &.fleche-left {
position: relative; position: relative;
padding-left: 5px; padding-left: 5px;
span.or {
border: 2px solid $yellow;
border-radius: 50%;
padding: 10px 17px 10px 17px;
}
} }
img.fleche-left { img.fleche-left {
position: absolute; position: absolute;
left: -35px; left: -35px;
top: 15px; top: 15px;
} }
img.fleche-right {
position: absolute;
right: -35px;
top: 15px;
}
img.fleche-left-from-top {
transform: rotate(90deg) scaleX(-1);
}
img.fleche-right-from-top {
transform: rotate(270deg)
}
} }
.pos-rlt{position: relative;} .pos-rlt{position: relative;}

2
app/assets/templates/profile/_token.html.erb
View File

@ -1,7 +1,7 @@
<section class="panel panel-default bg-token m-lg"> <section class="panel panel-default bg-token m-lg">
<div class="panel-body m-r"> <div class="panel-body m-r">
<h3 translate>{{ 'do_you_already_have_an_account' }}</h3> <h3 translate>{{ 'do_you_already_have_an_account' }}</h3>
<p translate>{{ 'do_not_fill_the_form_below_but_specify_here_the_code_you_ve_received_by_email_to_recover_your_access' }}</p> <p translate>{{ 'do_not_fill_the_form_beside_but_specify_here_the_code_you_ve_received_by_email_to_recover_your_access' }}</p>
<div class="row"> <div class="row">
<div class="col-sm-3 col-sm-offset-1"></div> <div class="col-sm-3 col-sm-offset-1"></div>
<div class="col-sm-offset-1 col-sm-6"> <div class="col-sm-offset-1 col-sm-6">

164
app/assets/templates/profile/complete.html.erb
View File

@ -21,85 +21,101 @@
<div class="row no-gutter "> <div class="row no-gutter ">
<div class="col-sm-12 col-md-12 b-r"> <div class="col-sm-12 col-md-12 b-r">
<div class="col-md-8 m-t-md"> <div class="row">
<section class="panel panel-default bg-light m-lg"> <div class="col-md-offset-2 col-md-8 m-t-md">
<div class="panel-body m-r"> <section class="panel panel-default bg-light m-lg">
{{ 'you_ve_just_created_a_new_account_on_the_fablab_by_logging_from' | translate:{ GENDER: nameGenre, NAME: fablabName }:"messageformat" }}<br/> <div class="panel-body m-r">
<img class="m-l v-middle" height="16" width="16" src='https://www.google.com/s2/favicons?domain={{activeProvider.domain}}' /> {{ 'you_ve_just_created_a_new_account_on_the_fablab_by_logging_from' | translate:{ GENDER: nameGenre, NAME: fablabName }:"messageformat" }}<br/>
<strong class="v-middle">{{activeProvider.name}} <span ng-if="ssoEmail()">({{ssoEmail()}})</span></strong><br/> <img class="m-l v-middle" height="16" width="16" src='https://www.google.com/s2/favicons?domain={{activeProvider.domain}}' />
<p class="m-t-md">{{ 'before_letting_you_use_the_application_we_need_some_more_details' | translate }}.<br/> <strong class="v-middle">{{activeProvider.name}} <span ng-if="ssoEmail()">({{ssoEmail()}})</span></strong><br/>
{{ 'please_fill_the_following_form' | translate }}. <p class="m-t-md">{{ 'before_letting_you_use_the_application_we_need_some_more_details' | translate }}.</p>
{{ 'some_data_may_have_already_been_provided_by_provider_and_cannot_be_modified' | translate:{NAME:activeProvider.name} }}.
{{ 'then_click_on_' | translate }} <strong translate>{{ 'confirm_changes' }}</strong> {{ '_to_start_using_the_application' | translate }}.</p>
</div>
</section>
</div>
<div class="col-md-8" ng-hide="user.merged_at">
<ng-include src="'<%= asset_path 'profile/_token.html' %>'"></ng-include>
</div>
<form role="form"
name="userForm"
class="form-horizontal col-md-8 m-t"
action="{{ actionUrl }}"
ng-upload="submited(content)"
upload-options-enable-rails-csrf="true"
ng-if="!user.auth_token"
novalidate>
<section class="panel panel-default bg-light m-lg m-t-xs">
<div class="panel-body m-r">
<!-- common fields -->
<ng-include src="'<%= asset_path 'shared/_member_form.html' %>'"></ng-include>
<div class="row">
<div class="col-sm-3 col-sm-offset-1"></div>
<div class="col-sm-offset-1 col-sm-6">
<!-- group -->
<div class="form-group" ng-class="{'has-error': userForm['user[group_id]'].$dirty && userForm['user[group_id]'].$invalid}">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-users"></i></span>
<select ng-model="user.group_id" class="form-control" name="user[group_id]" required>
<option value=null translate>{{ 'your_user_s_profile' }}</option>
<option ng-repeat="group in groups" value="{{group.id}}" ng-selected="group.id == user.group_id">{{group.name}}</option>
</select>
</div>
<span class="help-block" ng-show="userForm['user[group_id]'].$dirty && userForm['user[group_id]'].$error.required" translate>{{ 'user_s_profile_is_required' }}</span>
</div>
<!-- allow contact-->
<div class="form-group" ng-class="{'has-error': userForm['user[is_allow_contact]'].$dirty && userForm['user[is_allow_contact]'].$invalid}">
<input type="checkbox"
name="user[is_allow_contact]"
ng-model="user.is_allow_contact"
value="true"/> {{ 'i_authorize_Fablab_users_registered_on_the_site_to_contact_me' | translate }}
</div>
<!-- accept cgu -->
<div class="form-group" ng-class="{'has-error': userForm.cgu.$dirty && userForm.cgu.$invalid}" ng-show="cgu">
<input type="checkbox"
name="cgu"
ng-model="user.cgu"
value="true"
ng-required="cgu != null"/> {{ 'i_ve_read_and_i_accept_' | translate }} <a href="{{cgu.custom_asset_file_attributes.attachment_url}}" target="_blank" translate>{{ '_the_fablab_policy' }}</a>
</div>
</div>
</div> </div>
</section>
</div>
</div>
<div class="row col-md-2 col-md-offset-5">
<p class="font-felt fleche-left text-lg upper text-center">
<%= image_tag("fleche-left.png", class: 'fleche-left visible-lg fleche-left-from-top') %>
<span class="or" translate>{{ 'or' }}</span>
<%= image_tag("fleche-left.png", class: 'fleche-right visible-lg fleche-right-from-top') %>
</p>
</div>
<div class="row">
<div class="col-md-6">
<div class="m-lg panel panel-default bg-light pos-rlt">
<div ng-class="{'disabling-overlay' : !!user.auth_token}">
<div class="panel-body">
<h3 translate>{{ 'new_on_this_platform' }}</h3>
<p translate>{{ 'please_fill_the_following_form'}}.</p>
<p>{{ 'some_data_may_have_already_been_provided_by_provider_and_cannot_be_modified' | translate:{NAME:activeProvider.name} }}.<br/>
{{ 'then_click_on_' | translate }} <strong translate>{{ 'confirm_changes' }}</strong> {{ '_to_start_using_the_application' | translate }}.</p>
</div>
<form role="form"
name="userForm"
class="form-horizontal"
action="{{ actionUrl }}"
ng-upload="submited(content)"
upload-options-enable-rails-csrf="true"
novalidate>
</div> <!-- ./panel-body --> <section>
<div class="panel-body m-r">
<!-- common fields -->
<ng-include src="'<%= asset_path 'shared/_member_form.html' %>'"></ng-include>
<div class="row">
<div class="col-sm-3 col-sm-offset-1"></div>
<div class="col-sm-offset-1 col-sm-6">
<!-- group -->
<div class="form-group" ng-class="{'has-error': userForm['user[group_id]'].$dirty && userForm['user[group_id]'].$invalid}">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-users"></i></span>
<select ng-model="user.group_id" class="form-control" name="user[group_id]" required>
<option value=null translate>{{ 'your_user_s_profile' }}</option>
<option ng-repeat="group in groups" value="{{group.id}}" ng-selected="group.id == user.group_id">{{group.name}}</option>
</select>
</div>
<span class="help-block" ng-show="userForm['user[group_id]'].$dirty && userForm['user[group_id]'].$error.required" translate>{{ 'user_s_profile_is_required' }}</span>
</div>
<!-- allow contact-->
<div class="form-group" ng-class="{'has-error': userForm['user[is_allow_contact]'].$dirty && userForm['user[is_allow_contact]'].$invalid}">
<input type="checkbox"
name="user[is_allow_contact]"
ng-model="user.is_allow_contact"
value="true"/> {{ 'i_authorize_Fablab_users_registered_on_the_site_to_contact_me' | translate }}
</div>
<!-- accept cgu -->
<div class="form-group" ng-class="{'has-error': userForm.cgu.$dirty && userForm.cgu.$invalid}" ng-show="cgu">
<input type="checkbox"
name="cgu"
ng-model="user.cgu"
value="true"
ng-required="cgu != null"/> {{ 'i_ve_read_and_i_accept_' | translate }} <a href="{{cgu.custom_asset_file_attributes.attachment_url}}" target="_blank" translate>{{ '_the_fablab_policy' }}</a>
</div>
</div>
</div>
</div> <!-- ./panel-body -->
<div class="panel-footer no-padder"> <div class="panel-footer no-padder">
<input type="submit" <input type="submit"
value="{{ 'confirm_changes' | translate }}" value="{{ 'confirm_changes' | translate }}"
class="r-b btn-valid btn btn-warning btn-block p-lg btn-lg text-u-c" class="r-b btn-valid btn btn-warning btn-block p-lg btn-lg text-u-c"
ng-disabled="userForm.$invalid"/> ng-disabled="userForm.$invalid"/>
</div>
</section>
</form>
</div>
</div> </div>
</section> </div>
</form> <div class="col-md-6" ng-hide="user.merged_at">
<ng-include src="'<%= asset_path 'profile/_token.html' %>'"></ng-include>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

3
config/locales/app.logged.en.yml
View File

@ -10,8 +10,9 @@ en:
some_data_may_have_already_been_provided_by_provider_and_cannot_be_modified: "Some data may have already been provided by {{NAME}} and cannot be modified" # angular interpolation some_data_may_have_already_been_provided_by_provider_and_cannot_be_modified: "Some data may have already been provided by {{NAME}} and cannot be modified" # angular interpolation
then_click_on_: "Then click on" then_click_on_: "Then click on"
_to_start_using_the_application: "to start using the application" _to_start_using_the_application: "to start using the application"
new_on_this_platform: "New on this platform?"
do_you_already_have_an_account: "Do you already have an account?" do_you_already_have_an_account: "Do you already have an account?"
do_not_fill_the_form_below_but_specify_here_the_code_you_ve_received_by_email_to_recover_your_access: "Do not fill the form below but specify here the code you've received by email, to recover your access" do_not_fill_the_form_beside_but_specify_here_the_code_you_ve_received_by_email_to_recover_your_access: "Do not fill the form beside but specify here the code you've received by email, to recover your access"
authentification_code: "Authentification code" authentification_code: "Authentification code"
confirm_my_code: "Confirm my code" confirm_my_code: "Confirm my code"
an_unexpected_error_occurred_check_your_authentication_code: "An unexpected error occurred, please check your authentication code." an_unexpected_error_occurred_check_your_authentication_code: "An unexpected error occurred, please check your authentication code."

3
config/locales/app.logged.fr.yml
View File

@ -10,8 +10,9 @@ fr:
some_data_may_have_already_been_provided_by_provider_and_cannot_be_modified: "Certaines informations peuvent nous avoir été déjà fournies par {{NAME}} et ne sont pas modifiables" # angular interpolation some_data_may_have_already_been_provided_by_provider_and_cannot_be_modified: "Certaines informations peuvent nous avoir été déjà fournies par {{NAME}} et ne sont pas modifiables" # angular interpolation
then_click_on_: "Cliquez ensuite sur" then_click_on_: "Cliquez ensuite sur"
_to_start_using_the_application: "pour commencer à utiliser l'application" _to_start_using_the_application: "pour commencer à utiliser l'application"
new_on_this_platform: "Nouveau sur cette plate-forme ?"
do_you_already_have_an_account: "Vous possédez déjà un compte ?" do_you_already_have_an_account: "Vous possédez déjà un compte ?"
do_not_fill_the_form_below_but_specify_here_the_code_you_ve_received_by_email_to_recover_your_access: "Ne remplissez pas le formulaire ci-dessous mais indiquez ici le code qui vous a été fourni par e-mail, cela vous permettra de récupérer l'accès à votre compte." do_not_fill_the_form_beside_but_specify_here_the_code_you_ve_received_by_email_to_recover_your_access: "Ne remplissez pas le formulaire à gauche mais indiquez ici le code qui vous a été fourni par e-mail, cela vous permettra de récupérer l'accès à votre compte."
authentification_code: "Code d'authentification" authentification_code: "Code d'authentification"
confirm_my_code: "Valider mon code" confirm_my_code: "Valider mon code"
an_unexpected_error_occurred_check_your_authentication_code: "Une erreur inattendue est survenue, vérifiez votre code d'authentification." an_unexpected_error_occurred_check_your_authentication_code: "Une erreur inattendue est survenue, vérifiez votre code d'authentification."