From 917776aede8b88a69e489674c8f5446be8f6278d Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Wed, 20 Jun 2018 11:37:55 +0100 Subject: [PATCH] Change the UI to gradually show needed fields for affiliations. --- services/web/app/views/user/settings.pug | 35 +++++++++++-------- .../UserAffiliationsController.coffee | 28 +++++++-------- 2 files changed, 34 insertions(+), 29 deletions(-) diff --git a/services/web/app/views/user/settings.pug b/services/web/app/views/user/settings.pug index 0c4b8ce81d..02545b3a6c 100644 --- a/services/web/app/views/user/settings.pug +++ b/services/web/app/views/user/settings.pug @@ -129,7 +129,6 @@ block content li Others users will be able to find you under different email addresses when sharing projects li If your e-mail is affiliated with an institution with a group license, your account will be associated with that institution (and you'll gain acess to any benefits the institution may have). - pre(style="font-size: 0.8em; position: fixed; left: 80px; top: 80px; color: black;") {{ newAffiliation | json }} .affiliations-row .affiliation-col-4 label(for="affiliations-email") #{translate("email")} @@ -144,11 +143,9 @@ block content input-type="email" input-required="true" ) - .affiliation-col-8( - ng-show="newAffiliation.autoDetectMode" - ) + .affiliation-col-8 p.affiliation-input-feedback( - ng-if="newAffiliation.university" + ng-if="newAffiliation.university && !showManualUniversitySelectionUI" ) | {{ newAffiliation.university.name }} ( a( @@ -157,12 +154,20 @@ block content ) change | ) p.affiliation-input-feedback( - ng-if="!newAffiliation.university" + ng-if="!newAffiliation.university && !isValidEmail && !showManualUniversitySelectionUI" ) Start by adding your email address. - .affiliations-row - .affiliation-col-4( - ng-if="!newAffiliation.autoDetectMode" - ) + p.affiliation-input-feedback( + ng-if="!newAffiliation.university && isValidEmail && !isBlacklistedEmail && !showManualUniversitySelectionUI" + ) + | Is your email affiliated with an institution? + a( + href + ng-click="selectUniversityManually();" + ) Let us know + .affiliations-row( + ng-if="isValidEmail && showManualUniversitySelectionUI" + ) + .affiliation-col-4 label Institution ui-select( ng-model="newAffiliation.country" @@ -176,7 +181,7 @@ block content span( ng-bind="country.name" ) - .affiliation-col-4(ng-if="!newAffiliation.autoDetectMode") + .affiliation-col-4 ui-select( ng-model="newAffiliation.university" ng-disabled="!newAffiliation.country" @@ -193,7 +198,7 @@ block content ng-bind="university.name" ) .affiliations-row( - ng-if="newAffiliation.university" + ng-if="isValidEmail && newAffiliation.university" ) .affiliation-col-4 label(for="affiliations-role") Role @@ -225,17 +230,17 @@ block content table.table thead tr + th Email th Institution and role - th Affiliated e-mail th tbody tr - td Universidade de Aveiro td paulojreis@ua.pt + td Universidade de Aveiro td Remove tr - td Universidade do Porto td paulojreis@fe.up.pt + td Universidade do Porto td Remove diff --git a/services/web/public/coffee/main/affiliations/controllers/UserAffiliationsController.coffee b/services/web/public/coffee/main/affiliations/controllers/UserAffiliationsController.coffee index b26122f523..4c550bb103 100644 --- a/services/web/public/coffee/main/affiliations/controllers/UserAffiliationsController.coffee +++ b/services/web/public/coffee/main/affiliations/controllers/UserAffiliationsController.coffee @@ -10,7 +10,9 @@ define [ university: null role: null department: null - autoDetectMode: true + $scope.showManualUniversitySelectionUI = false + $scope.isValidEmail = false + $scope.isBlacklistedEmail = false LOCAL_AND_DOMAIN_REGEX = /([^@]+)@(.+)/ EMAIL_REGEX = /^([A-Za-z0-9_\-\.]+)@([^\.]+)\.([A-Za-z]+)$/ @@ -29,10 +31,14 @@ define [ $scope.getEmailSuggestion = (userInput) -> userInputLocalAndDomain = _matchLocalAndDomain(userInput) + $scope.isValidEmail = EMAIL_REGEX.test userInput   + $scope.isBlacklistedEmail = false if userInputLocalAndDomain.domain? + $scope.isBlacklistedEmail = UserAffiliationsDataService.isDomainBlacklisted userInputLocalAndDomain.domain + UserAffiliationsDataService.getUniversityDomainFromPartialDomainInput(userInputLocalAndDomain.domain) .then (universityDomain) -> - $scope.newAffiliation.autoDetectMode = true + $scope.showManualUniversitySelectionUI = false if userInputLocalAndDomain.domain == universityDomain.hostname $scope.newAffiliation.university = universityDomain.university $scope.newAffiliation.department = universityDomain.department @@ -43,10 +49,6 @@ define [ .catch () -> $scope.newAffiliation.university = null $scope.newAffiliation.department = null - # If the input is already a full e-mail and we have no suggestions, then the user - # will need to manually select his institution. - if userInput.match EMAIL_REGEX - $scope.newAffiliation.autoDetectMode = false $q.reject null else $scope.newAffiliation.university = null @@ -54,21 +56,17 @@ define [ $q.resolve null $scope.handleEmailInputBlur = () -> - if $scope.newAffiliation.autoDetectMode and !$scope.newAffiliation.university and $scope.newAffiliation.email?.match EMAIL_REGEX - $scope.newAffiliation.autoDetectMode = false + # if $scope.newAffiliation.autoDetectMode and !$scope.newAffiliation.university and $scope.newAffiliation.email?.match EMAIL_REGEX + # $scope.newAffiliation.autoDetectMode = false $scope.selectUniversityManually = () -> $scope.newAffiliation.university = null $scope.newAffiliation.department = null - $scope.newAffiliation.autoDetectMode = false + $scope.showManualUniversitySelectionUI = true $scope.handleAffiliationFormSubmit = () -> if !$scope.newAffiliation.university? - UserAffiliationsDataService.addUserEmail( - $scope.newAffiliation.email, - $scope.newAffiliation.role, - $scope.newAffiliation.department - ) + UserAffiliationsDataService.addUserEmail $scope.newAffiliation.email else if $scope.newAffiliation.university.isUserSuggested UserAffiliationsDataService.addUserAffiliationWithUnknownUniversity( @@ -86,10 +84,12 @@ define [ $scope.newAffiliation.department ) + # Populates the countries dropdown UserAffiliationsDataService .getCountries() .then (countries) -> $scope.countries = countries + # Populates the universities dropdown (after selecting a country) $scope.$watch "newAffiliation.country", (newSelectedCountry, prevSelectedCountry) -> if newSelectedCountry? and newSelectedCountry != prevSelectedCountry $scope.newAffiliation.university = null