CINXE.COM
Lessons: Welcome
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="google-site-verification" content="v_wAcZHImx_AHwYnO2dGk2ZX7HpOl7FQ79PnqnCHuzo" /> <meta name="google-signin-scope" content="profile email"> <meta name="google-signin-client_id" content="217034757918-l96s9h0tbcqafmdhr0eq6hpojdhktvaa.apps.googleusercontent.com"> <title> Lessons: Welcome </title> <link href="/favicon.ico" type="image/x-icon" rel="icon"/><link href="/favicon.ico" type="image/x-icon" rel="shortcut icon"/> <link rel="stylesheet" href="/css/bootstrap.min.css"/> <style type="text/css"> body{ width: 100%; height: 100%; background: white url('https://www.eastcree.org/cree/wp-content/themes/eastcree_seventeen/images/banner7.jpg') no-repeat center fixed; background-size: cover; } #grid { } label { color:#eee; } .glass{ background-color: rgba(55,55,55,0.55); filter: blur(1px); position: fixed; box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.15); border-radius: .45rem; top: 0; left:20%; right:20%; bottom:0; overflow: hidden; } .glass:before { display: block; width: 100%; height: 100%; /*background-image: url('https://www.eastcree.org/cree/wp-content/themes/eastcree_seventeen/images/banner7.jpg');*/ background-size: cover; content: ' '; opacity: 0.7; } @media only screen and (max-width: 767px) { .glass { left:0; right:0; } } </style> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <link href="https://fonts.googleapis.com/css?family=Raleway:500i|Roboto:300,400,700|Roboto+Mono" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> </head> <body class="" style=""> <div class="glass"></div> <div id="home"> <div class="container-fluid"> <div class="row justify-content-center"> <div class="col col-md-7 pt-3" style="border-bottom: 1px solid rgba(250,250,250,0.2);"> <header class="text-white-50 font-weight-light fa-2x" >East Cree Lessons</header> </div> </div> <div class="row justify-content-center"> <div class="col col-md-6 d-flex justify-content-between pt-3 pb-3"> <button type="button" aria-expanded="false" data-target="#signUp" data-toggle="collapse" class="btn btn-lg btn-outline-warning "> <i class="fa fa-user mr-2"></i>Sign up</button> <a id="next" href="/dialects" class="btn btn-lg btn-info">Proceed as guest <i class="fa fa-user-secret ml-2"></i> </a> </div> </div> <div class="row justify-content-center"> <div class="col col-md-6 p-3 collapse" id="signUp"> <h3 class="text-white-50" ><i class="fa fa-2x fa-user-circle mr-2"></i>Sign up </h3> <form method="post" action="/users/register" class=" p-4 border-top border-light "> <input type="hidden" name="_csrfToken" value="a2c6b6ac368f486a1ba5296b9937fe3c23aff3a0244a7a067d0d10e2d8a77c283cb4f5d73fdc68f15b34ac122146fc2d7bd4c35a2553e7d4a1caca08d64016e9"> <div class="form-group"> <label for="signUpInputName">Your name</label> <input name="User[name]" type="text" class="form-control" id="signUpInputName" aria-describedby="nameHelp" placeholder="Enter name" required="required"> <small id="nameHelp" class="form-text text-white-50"></small> </div> <div class="form-group"> <label for="signUpInputAlias">Alias</label> <input name="User[alias]" type="text" class="form-control" id="signUpInputAlias" aria-describedby="nameHelp" placeholder="Enter name" > <small id="nameHelp" class="form-text text-white-50">You can use an alias or game handle</small> </div> <div class="form-group"> <label for="signUpInputEmail1">Email address</label> <input name="User[email]" type="email" class="form-control" id="signUpInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" required="required"> <small id="emailHelp" class="form-text text-white-50">We'll never share your email with anyone else.</small> </div> <div class="form-group"> <label for="signUpInputPassword1">Password</label> <input name="User[password]" type="password" class="form-control" id="signUpInputPassword1" aria-describedby="passwordHelp1" placeholder="Password" required="required"> <small id="passwordHelp1" class="form-text text-white-50">Make sure the password has more than four characters</small> </div> <div class="form-group"> <label for="signUpInputPassword2">Re-Type Password</label> <input type="password" class="form-control" id="signUpInputPassword2" aria-describedby="passwordHelp2" placeholder="Re-Type Password" onkeypress="if($('#signUpInputPassword1').val()==$('#signUpInputPassword2').val())$('#signUpSubmit').removeClass('disabled');" required="required"> <small id="passwordHelp2" class="form-text text-white-50">Make sure the password matches the password above</small> </div> <div class="form-group"> <label for="signUpInputDialect">Preferred Dialect</label> <input type="hidden" name="profiles[0][name]" value="dialect"> <select id="signUpInputDialect" name="profiles[0][value]"> </select> </div> <div class="form-group"> <label for="signUpInputLocale">Interface Language</label> <input type="hidden" name="profiles[1][name]" value="locale"> <select id="signUpInputLocale" name="profiles[1][value]" value="eng"> <option value="eng">English</option> <option value="fra">Fran莽ais</option> </select> </div> <button type="submit" id="signUpSubmit" class="btn btn-outline-success disabled">Sign up</button> </form> </div> </div> <div class="row justify-content-center"> <div class="col col-md-6 p-3 "> <!--div class="alert alert-info">Please proceed as guest</div--> <!--h3 class="text-white-50" ><i class="fa fa-2x fa-user-circle mr-2"></i>Sign in </h3--> <form method="post" action="/users/login" class=" p-4 border-top border-light "> <input type="hidden" name="_csrfToken" value="a2c6b6ac368f486a1ba5296b9937fe3c23aff3a0244a7a067d0d10e2d8a77c283cb4f5d73fdc68f15b34ac122146fc2d7bd4c35a2553e7d4a1caca08d64016e9"> <div class="form-group"> <label for="signInInputEmail1">Email address</label> <input type="email" name="email" class="form-control" id="signInInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> <small id="emailHelp" class="form-text text-white-50">We'll never share your email with anyone else.</small> </div> <div class="form-group"> <label for="signInInputPassword1">Password</label> <input type="password" name="password" class="form-control" id="signInInputPassword1" placeholder="Password"> </div> <a href="/users/reset-password" class="btn btn-outline-info float-right">Forgot my password</a> <button type="submit" class="btn btn-outline-success">Sign in</button> </form> <div class="d-flex justify-content-between"> <div class="fb-login-button" scope="public_profile,email" onlogin="checkFBLoginState();" data-max-rows="1" data-size="large" data-button-type="continue_with" data-show-faces="false" data-auto-logout-link="false" data-use-continue-as="true"></div> <div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark" data-longtitle="true"></div> </div> </div> </div> </div> </div> <form method="post" id="gLogin" action="/users/google-login"> <input type="hidden" name="token" id="gToken"> </form> <span class="" style="right:0; top:0; position: fixed; z-index: 10000"><span class="btn-group"> <a class="btn btn-danger" href="/?locale=eng" >EN</a> <a class="btn btn-outline-danger" href="/?locale=fra" >FR</a> </span></span> <script src="/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script type="text/javascript"> $(function () { $.ajaxSetup({ headers:{'X-CSRF-Token':'a2c6b6ac368f486a1ba5296b9937fe3c23aff3a0244a7a067d0d10e2d8a77c283cb4f5d73fdc68f15b34ac122146fc2d7bd4c35a2553e7d4a1caca08d64016e9'}, }); $.getJSON('/dialects.json', function(data){ $.each(data.dialects, function (index,dialect) { //console.log(dialect); $("#signUpInputDialect").append("<option value='"+dialect.id+"'>"+dialect.name_en+"</option>"); }) }) }) </script> <div id="fb-root"></div> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v5.0"></script> <script crossorigin="anonymous" src="https://apis.google.com/js/platform.js?hl=en" async defer></script> <script type="text/javascript"> var storageID = "Atlas-ling.Lesson.EastCree."; var LocalStore = window.localStorage; var facebookResponded = false; var googleResponded = false; var timeout=false; function onSignIn(googleUser) { googleResponded = true; // Useful data for your client-side scripts: var profile = googleUser.getBasicProfile(); if(LocalStore) { LocalStore.setItem(storageID+'profileImage',profile.getImageUrl()); } // The ID token you need to pass to backend: var id_token = googleUser.getAuthResponse().id_token; if(id_token){ googleResponded = { email: profile.getEmail(), name:profile.getName(), alias:profile.getGivenName(), third_party_id: btoa(profile.getId()), is_third_party:1, third_party_token:id_token, image: profile.getImageUrl(), _csrfToken:"a2c6b6ac368f486a1ba5296b9937fe3c23aff3a0244a7a067d0d10e2d8a77c283cb4f5d73fdc68f15b34ac122146fc2d7bd4c35a2553e7d4a1caca08d64016e9" }; } signInThirdParty(); }; function signInThirdParty() { redirect ="/dialects/index/1" console.log("signInThirdParty",googleResponded,facebookResponded); if(LocalStore) { if(LocalStore.getItem(storageID+"lastLogin")){ let elapsed = (Date.now()- Number(LocalStore.getItem(storageID+"lastLogin")))/1000; if(elapsed<3){ FB.logout( function () { }); var auth2 = gapi.auth2.getAuthInstance(); auth2.signOut().then(function () { }); setTimeout(function () { location.href="/users/logout"; }, 3000); } } LocalStore.setItem(storageID+"lastLogin", Date.now()); } //if(googleResponded === false || facebookResponded === false) return; $.ajaxSetup({ headers:{'X-CSRF-Token':'a2c6b6ac368f486a1ba5296b9937fe3c23aff3a0244a7a067d0d10e2d8a77c283cb4f5d73fdc68f15b34ac122146fc2d7bd4c35a2553e7d4a1caca08d64016e9'}, }); //both third party are active log both out and force the user to choose if((typeof googleResponded === "object") && (typeof facebookResponded === "object")){ var auth2 = gapi.auth2.getAuthInstance(); auth2.signOut().then(function (response) { console.log('User signed out.',response); googleResponded = true; signInThirdParty(); }); FB.logout(function(response) { // Person is now logged out facebookResponded = true; console.log('User signed out.', response); signInThirdParty(); }); } else if (googleResponded && (typeof googleResponded === "object")) { $.post('/users/google-login.json', googleResponded, function (data) { console.log(data); //if(location.href.match(redirect)==null) location.href = redirect;//"/dialects/index/1"; }); } else if (facebookResponded && (typeof facebookResponded === "object")) { $.post('/users/facebook-login.json', facebookResponded, function (data) { console.log(data); //if(location.href.match(redirect)==null) location.href = redirect;//"/dialects/index/1"; }); } else { // location.href="/"; } } </script> <script type="text/javascript"> window.fbAsyncInit = function() { FB.init({ appId : '113823521982114', cookie : true, xfbml : true, version : 'v2.8' }); checkFBLoginState(); }; (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); function checkFBLoginState() { console.log("checkFB"); FB.getLoginStatus(function(response) { console.log("FB.getLoginStatus",response);//statusChangeCallback(response); facebookResponded = true; if(response.status=="connected"){ FB.api('/'+response.authResponse.userID+'?fields=email,name,first_name&access_token='+response.authResponse.accessToken, function(me) { console.log("me",me); if(me.name==undefined){ me.name = me.email.substring(0,me.email.indexOf("@")); me.first_name = me.name; } var profile = response.authResponse; var user_data = { email: me.email, name:me.name, alias:me.first_name, third_party_id: btoa(profile.userID), is_third_party:1, third_party_token:profile.accessToken, _csrfToken:"a2c6b6ac368f486a1ba5296b9937fe3c23aff3a0244a7a067d0d10e2d8a77c283cb4f5d73fdc68f15b34ac122146fc2d7bd4c35a2553e7d4a1caca08d64016e9" //image: me.profile_pic }; facebookResponded = user_data; console.log(user_data); signInThirdParty(); }); return; } signInThirdParty(); }); } </script> </body> </html>