@quarks/quarks-iam
Version:
A modern authorization server built to authenticate your users and protect your APIs
141 lines (135 loc) • 6.93 kB
text/jade
doctype html
html(lang="en")
head
title Sign in | Anvil Connect
link(rel='stylesheet', href='/stylesheets/app.css')
link(rel='stylesheet', href='/stylesheets/providers.css')
link(rel='stylesheet', href='//fonts.googleapis.com/css?family=Roboto:400,100,100italic,400italic,700,700italic|Raleway:400,100,600,300')
body
.anvilform.blur-transition
img.logo(src='/images/anvil.svg', alt='Anvil Connect')
form.panel(method='POST')
// adding a class of error to this paragraph will add error styling
if error == 'email must be unique'
p.error
| A user with the same email address has
| already registered using a different provider.
| Try one of these:
else if error
p.error= error
if request.response_mode
input(type='hidden', name='response_mode', value=request.response_mode)
input(type='hidden', name='response_type', value=request.response_type)
input(type='hidden', name='client_id', value=request.client_id)
input(type='hidden', name='redirect_uri', value=request.redirect_uri)
input(type='hidden', name='max_age', value=request.max_age)
input(type='hidden', name='scope', value=request.scope)
input(type='hidden', name='state', value=request.state)
input(type='hidden', name='nonce', value=request.nonce)
hr.textsep.signinwith
- var formBasedProviders = [];
- var formFieldData = {};
- var providerNames = {};
- var externalProviders = [];
- var providerIDs = Object.keys(providers);
if providerIDs.length
ul.providers
each provider in providerIDs
- providerNames[provider] = providerInfo[provider].name;
if !providerInfo[provider].fields
- externalProviders.push(provider);
li
a(href='/connect/' + provider + '?' + params, title=providerInfo[provider].name, class='provider protocol-' + providerInfo[provider].protocol + ' '+ provider)
else
- formBasedProviders.push(provider);
- formFieldData[provider] = providerInfo[provider].fields;
if formBasedProviders.length > 0
- var selectedProvider = (request && request.provider) || formBasedProviders[0];
if externalProviders.length
hr.textsep.or
.form-provider-name= providerInfo[selectedProvider].name
if formBasedProviders.length > 1
ul.providers.form-providers
each provider in formBasedProviders
li
a(href='javascript:void(0)', title=providerInfo[provider].name, data-provider=provider, class='provider protocol-' + providerInfo[provider].protocol + ' ' + provider + (provider === selectedProvider ? ' selected-provider' : ''))
input(type='hidden', name='provider', value=selectedProvider)
if formError
p.error= formError
.form-fields
each field in providerInfo[selectedProvider].fields
input(type=field.type, name=field.name, placeholder=field.placeholder || (field.name.charAt(0).toUpperCase() + field.name.substring(1)))
//-input(type='text', name='email', placeholder='Email')
//-input(type='password', name='password', placeholder='Password')
input.callout.full(type='submit', value='Sign in')
if ~providerIDs.indexOf('password')
p.register-message
| Don't have an account?
a(href='/signup?' + params)
| Register in Seconds
if mailSupport
p.forgot-password
a(href='/recovery') Forgot your password?
.screen(hidden)
.loader
svg.circular
circle.path(cx=28, cy=28, r=20, fill='none', stroke-width=5, stroke-miterlimit=10)
if formBasedProviders.length > 1
script.
(function() {
var formFieldData = !{JSON.stringify(formFieldData)};
var providerIDs = !{JSON.stringify(providerNames)};
var providerTag = document.querySelector('input[name="provider"]');
var formProviderNametag = document.querySelector('.form-provider-name');
var formFieldContainer = document.querySelector('.form-fields');
var formProviderLinks = document.querySelectorAll('.form-providers a');
var registerMessage = document.querySelector('.register-message');
var forgotPassword = document.querySelector('.forgot-password');
var screenElem = document.querySelector('.screen');
var form = document.querySelector('form');
var formWrapper = document.querySelector('.anvilform');
form.addEventListener('submit', function() {
formWrapper.classList.add('blur');
screenElem.removeAttribute('hidden');
});
function changeProvider() {
formFieldContainer.innerHTML = '';
formFieldContainer.appendChild(this.providerFields.cloneNode(true));
for (var i = 0; i < formProviderLinks.length; i++) {
if (formProviderLinks[i].provider !== this.provider) {
formProviderLinks[i].classList.remove('selected-provider');
}
}
formProviderNametag.textContent = providerIDs[this.provider];
providerTag.value = this.provider;
if (registerMessage) {
registerMessage.style.display = this.provider === 'password' ? '' : 'none';
}
if (forgotPassword) {
forgotPassword.style.display = this.provider === 'password' ? '' : 'none';
}
this.classList.add('selected-provider');
}
var fragment, fields, input;
for (var i = 0; i < formProviderLinks.length; i++) {
// We could use dataset, but unfortunately there is the dreaded IE10
formProviderLinks[i].provider = formProviderLinks[i].getAttribute('data-provider');
fragment = document.createDocumentFragment();
fields = formFieldData[formProviderLinks[i].provider];
for (var j = 0; j < fields.length; j++) {
input = document.createElement('input');
input.name = fields[j].name
if (fields[j].type) {
input.type = fields[j].type;
}
if (fields[j].placeholder) {
input.placeholder = fields[j].placeholder;
} else {
input.placeholder = fields[j].name.charAt(0).toUpperCase() + fields[j].name.substring(1);
}
fragment.appendChild(input);
}
formProviderLinks[i].providerFields = fragment;
formProviderLinks[i].addEventListener('click', changeProvider);
}
})();