overleaf/services/web/app/views/user/settings/user-oauth.pug

block scripts
	script(type='text/javascript').
		window.oauthProviders = !{StringHelper.stringifyJsonForScript(oauthProviders)}
		window.thirdPartyIds = !{StringHelper.stringifyJsonForScript(thirdPartyIds)}

mixin providerList()
	ul.list-like-table
		li(ng-repeat="(key, provider) in providers" ng-if="!provider.hideWhenNotLinked || (provider.hideWhenNotLinked && thirdPartyIds[key])")
			.row
				.col-xs-12.col-sm-8.col-md-10
					h4 {{provider.name}}
					p.small(ng-bind-html="provider.description")
				.col-xs-2.col-sm-4.col-md-2.text-right
					//- Unlink
					button.btn.btn-default(
						ng-click="unlink(key)"
						ng-disabled="providers[key].ui.isProcessing"
						ng-if="thirdPartyIds[key]"
					)
						span(ng-if="!providers[key].ui.isProcessing") #{translate("unlink")}
						span(ng-if="providers[key].ui.isProcessing") #{translate("processing")}
					//- Link
					a.btn.btn-primary.text-capitalize(
						href="{{provider.linkPath}}?intent=link"
						ng-if="!thirdPartyIds[key] && !provider.hideWhenNotLinked"
					) #{translate("link")}
			//- unlink error
			.row(
				ng-if="providers[key].ui.hasError"
			)
				.col-sm-12
					//- to do: fix CSS so that we don't need inline styling
					.alert.alert-danger(
						ng-if="providers[key].ui.hasError"
						style="display: block; margin-bottom: 10px;"
					)
						i.fa.fa-fw.fa-exclamation-triangle(aria-hidden="true")  
						| {{providers[key].ui.errorMessage}}
.row(
	ng-controller="UserOauthController"
	ng-cloak
)
	.col-xs-12
		h3.text-capitalize#linked-accounts #{translate("linked_accounts")}
		p.small #{translate("linked_accounts_explained", {appName:'{{settings.appName}}'})}

		if !settings.oauthUseV2
			div.text-center(ng-if="ui.isLoadingV1Ids") 
				i.fa.fa-fw.fa-spin.fa-refresh(aria-hidden="true")
				|  #{translate("loading")}...

			div(ng-if="ui.isLoadingV1Ids == false && ui.hasError == false")
				+providerList()

			.alert.alert-danger(
				ng-if="ui.hasError"
			)
				i.fa.fa-fw.fa-exclamation-triangle(aria-hidden="true")
				span(ng-if="!ui.errorMessage")  #{translate("error_performing_request")}
				span(ng-if="ui.errorMessage")  {{ui.errorMessage}}
		else
			+providerList()