login-buttons.html

<template name="loginButtons">
	{{#if currentUser}}
		{{#if loggingIn}}
			{{! We aren't actually logged in yet; we're just setting Meteor.userId optimistically during an at-startup login-with-token. We expose this state so other UIs can treat it specially, but we'll just treat it as logged out. }}
			{{#if dropdown}}
				{{> _loginButtonsLoggingIn }}
			{{else}}
				{{> _loginButtonsLoggingInSingleLoginButton }}
			{{/if}}
		{{else}}
			{{> _loginButtonsLoggedIn}}
		{{/if}}
	{{else}}
		{{> _loginButtonsLoggedOut}}
	{{/if}}
</template>

<template name="_loginButtonsLoggedIn">
	{{#if dropdown}}
		{{> _loginButtonsLoggedInDropdown}}
	{{else}}
		{{> _loginButtonsLoggedInSingleLogoutButton}}
	{{/if}}
</template>

<template name="_loginButtonsLoggedOut">
	{{#if services}} {{! if at least one service is configured }}
		{{#if configurationLoaded}}
			{{#if dropdown}} {{! if more than one service configured, or password is configured}}
				{{> _loginButtonsLoggedOutDropdown}}
			{{else}}
				{{#with singleService}} {{! at this point there must be only one configured services }}
					{{#if loggingIn}}
						{{> _loginButtonsLoggingInSingleLoginButton}}
					{{else}}
						{{> _loginButtonsLoggedOutSingleLoginButton}}
					{{/if}}
				{{/with}}
			{{/if}}
		{{/if}}
	{{else}}
		<div class="ui red text item">No login services configured</div>
	{{/if}}
</template>

<!-- used in various places to display messages to user -->
<template name="_loginButtonsMessagesMenuItem">
	{{#if hasMessages}}
		{{> _loginButtonsMessages}}
	{{/if}}
</template>

<template name="_loginButtonsMessages">
	{{#if errorMessage}}
		<div class="ui visible error message">
			{{errorMessage}}
		</div>
	{{/if}}
	{{#if infoMessage}}
		<div class="ui item">
			<div class="ui visible info message">
				{{infoMessage}}
			</div>
		</div>

	{{/if}}
	<div class="login-buttons-padding"></div>
</template>

<template name="_loginButtonsLoggingIn">
	<div class="ui active loader">&nbsp;</div>
</template>

<template name="_loginButtonsLoggingInPadding">
	{{#unless dropdown}}
		{{! invisible div used for correct height of surrounding div. this ensures
		that the _loginButtons template is always the same height
		and the rest of the page doesn't move up and down }}
			<div class="login-buttons-padding">
				<div class="login-button single-login-button" style="visibility: hidden;" id="login-buttons-logout">&nbsp;</div>
			</div>
		{{else}}
			{{! just add some padding }}
			<div class="login-buttons-padding"></div>
	{{/unless}}
</template>