github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Change the UI to gradually show needed fields for affiliations.

Browse source
This commit is contained in:
Paulo Reis 2018-06-20 11:37:55 +01:00
parent f3806faeb2
commit 917776aede
2 changed files with 34 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
services/web/app/views/user/settings.pug
View file

@ -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

28
services/web/public/coffee/main/affiliations/controllers/UserAffiliationsController.coffee
View file

@ -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