Only trigger G+ login on button click

[scpubgit/stemmaweb.git] / root / src / auth / login.tt

[% WRAPPER header.tt
	pagetitle = "Stemmaweb - Sign in"
	applicationstyle = c.uri_for('/css/auth.css')
%]

<meta name="google-signin-clientid" content="[% google_client_id %]" />
<meta name="google-signin-scope" content="https://www.googleapis.com/auth/plus.profile.emails.read" />
<meta name="google-signin-requestvisibleactions" content="http://schema.org/AddAction" />
<meta name="google-signin-cookiepolicy" content="single_host_origin" />
<meta name="google-signin-openidrealm" content="[% c.uri_for('/') %]" />
<script src="https://apis.google.com/js/client:platform.js?onload=render" async defer>
</script>
<script>
 /* Executed when the APIs finish loading */
 function render() {

    document.getElementById('signinButton').disabled = false;
   var additionalParams = {
     'callback': googleSignIn
   };

   // Attach a click listener to a button to trigger the flow.
   var signinButton = document.getElementById('signinButton');
   signinButton.addEventListener('click', function() {
     gapi.auth.signIn(additionalParams); // Will use page level configuration
   });

    $('#login_actions').accordion();
    $('.login_button').button();
    $('#submit').button();
    
    var status = '[% status_msg %]';
    if( status == 'Logged in!' ) {
    	setInterval( function ( e ) {
    		window.opener.location.reload(true);
    		window.close();
    		e.preventDefault();
    	}, 2000 );
    }
 }
</script>
    <script type="text/javascript">

	function googleSignIn(authResult) {
		if (authResult['status']['signed_in']) {
			document.getElementById('signinButton').disabled = true;
			gapi.client.load('plus', 'v1', function apiClientLoaded() {
				gapi.client.plus.people.get({ userId: 'me'}).execute(function infoRetrieved(resp) {
					var primaryEmail;
					for (var i = 0; i < resp.emails.length; i++) {
						if (resp.emails[i].type === 'account') {
							primaryEmail = resp.emails[i].value;
						}
					}

					dataRetrieved(authResult, primaryEmail);
				});
			});
		} else {
			console.log("Error", authResult);
		}
	}

	function dataRetrieved(login, email) {
		console.log(email);
		console.log(login.id_token);

		document.getElementById('email').value = email;
		document.getElementById('id_token').value = login.id_token;
		document.getElementById('google_form').submit();
	}

    </script>
[% END %]
	<div id="topbanner">
		<h1>Stemmaweb - Sign in</h1>
	</div>

<div id="login_status">
[% IF status_msg %]
			<p>[% status_msg | html %]</p>
[% END %]
[% IF error_msg %]
			<p class="error">[% error_msg | html %]</p>
[% END %]

[% IF form.has_errors %]
			<p class="error">Some fields had errors:</p>
					
			<ul class="errors">
	[% FOREACH msg IN form.errors %]
				<li>[% msg | html %]</li>
	[% END %]
			</ul>
[% END %]
</div>
[% UNLESS status_msg == 'Logged in!' %]
<div id="login_actions">
	<h3><a href="#">Sign in with Google</a></h3>
	<div>
		<p>If you have a Google account, you may use it to sign into Stemmaweb.</p>

        <button disabled id="signinButton">Sign in with Google</button>
		<form id="google_form" action="[% c.uri_for_action('/users/login') | html %]" method="post">
			<input id='email' name='email' value='' type='hidden' />
			<input id='id_token' name='id_token' value='' type='hidden' />
		</form>
	</div>

	<h3><a href="#">Sign in with OpenID</a></h3>
	<div>
		<p>If you have an account with an <a href="http://openid.net/get-an-openid/" target="_blank">OpenID provider</a> (e.g. WordPress, Blogger, Flickr, Yahoo), you may use it to sign into Stemmaweb.
		<form class="openid_form" method="post" action="[% c.uri_for_action('/users/login') | html %]" autocomplete="off">
			<input type="hidden" name="realm" value="openid"/>
			<input type="text" name="openid_identifier" id="openid_input"/>
			<input type="submit" class="login_button" id="login_openid" value="Sign in with OpenID"/>
		</form>
	</div>

[% UNLESS c.req.param('realm') == 'openid' %]
	<h3><a href="#">Sign in with Stemmaweb</a></h3>
	<div>
		<p>If you do not have Google or another OpenID account, you may <a href="[% c.uri_for_action('/users/register') | html %]">register</a> for a user account here with its own password.  Once you are registered, you can use this form to sign in.</p>
		<form id="login_local_form" method="post" action="[% c.uri_for_action('/users/login') | html %]" autocomplete="off">
			<input type="hidden" name="realm" value="default"/>
			[% userlabel = form.field('username').label('Email address') %]
			[% form.field('username').render %]
			[% form.field('password').render %]
			
			[% rememberlabel = form.field('remember').label('Remember me') %]
			[% form.field('remember').render %]
			
			[% submitbutton = form.field('submit').value('Sign in with Stemmaweb') %]
			[% form.field('submit').render %]
		</form>
	</div>
[% END %]
</div>
[% END %]
[% PROCESS footer.tt %]