Skip to content

Instantly share code, notes, and snippets.

@HaQadosch

HaQadosch/ax.css

Created October 10, 2017 16:27
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save HaQadosch/f9d53bd7b4da0d764b8060342f39256e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save HaQadosch/f9d53bd7b4da0d764b8060342f39256e to your computer and use it in GitHub Desktop.
Download ZIP
gigya test
Raw
readme.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Gigya Coding Test</title>
</head>
<body>
<p>Download the source and run it with your favorite web server to make sure it works. Tip: call up the page using localhost as the domain (this will allow the Gigya API key to work properly):</p>
<p style="margin-left:20px; font-family:Courier, monospace;">http://localhost/.../a.html</p>
<p>Logging in through a.html will transition to b.html, which can transition back to a.html. You can see the behavior here:</p>
<p style="margin-left:20px;"><iframe src="a.html" style="width:600px;"></iframe></p>
<p style="margin-left:20px;"><iframe src="ax.html" style="width:800px; height: 600px;"></iframe></p>
<p>Use the source code in this distribution as a starting point for your code sample.</p>
<p>In the source code for each page you will find "YOUR MISSION." When you've completed everything, zip it up and send it back to your contact at Gigya.</p>
<p>Your best technical resource is found at <a href="http://developers.gigya.com/" target="_blank">http://developers.gigya.com</a>.</p>
</body>
</html>
Raw
ax.css
body {
background: url(imagedoc-darknoise.png);
color: white;
margin: 0;
}
/** text background */
body:before {
content: 'GIGYA';
font-family: 'Archivo Black', sans-serif;
font-size: 15em;
display: flex;
justify-content: center;
align-content: center;
color: #9d9d9d33;
transform: rotate(90deg) translatex(530px) scale(2);
}
/** Login Counter as header */
#g_header {
position: absolute;
top: 0px;
font-family: 'Titillium Web', sans-serif;
font-size: 25px;
color: #ff2a07;
width: 20%;
}
#g_header #g_loggedInCounter {
display: flex;
justify-content: space-around;
height: 30px;
}
#g_header #g_loggedInCounter span:not(:first-of-type) {
width: 2px;
height: 2px;
background-color: white;
align-self: end;
}
#g_header #g_loggedInCounter span:not(:first-of-type).thismanytime {
width: 2px;
height: 22px;
background-color: #ff2a07;
align-self: end;
}
.thismanytime {
animation-duration: 2s;
animation-name: thismanytime;
}
@keyframes thismanytime {
from {
height: 2px;
}
to {
height: 22px;
}
}
#g_main #g_loggedInCounter:first-letter {
color: #ff2a07
}
Raw
ax.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="https://fonts.googleapis.com/css?family=Archivo+Black|Titillium+Web:900" rel="stylesheet">
<link type="text/css" href="ax.css" rel="stylesheet">
<title>Gigya Test</title>
<!-- The following script directive is included for your convenience -->
<!-- socialize.js script should only be included once -->
<script type="text/javascript" src="http://cdn.gigya.com/js/socialize.js?apiKey=2_Y82PzwJ_chSFImHXaIDJClnLyJzmk-VFOavSsaNTzl6m901s_NNxRAS0xJ3bd3_N"></script>
</head>
<body>
<script src="ax.js"></script>
</body>
</html>
Raw
ax.js
/*
https://developers.gigya.com/display/GD/socialize.showLoginUI+JS
https://developers.gigya.com/display/GD/Social+Login+Demo
<!-- YOUR MISSION:
Run these pages with your favorite web server.
Tip: call up the page using localhost as the domain (this will allow the Gigya API key to work properly):
http://localhost/.../a.html
1) Add the Gigya login component showLoginUI within a container
2) After authentication, redirect to b.html
3) Bonus points: from the authentication response, if email is not
present in the User object, prompt the user to enter an email, then
redirect to b.html (no need to persist email, just ask for it)
(hint: you will need to use addEventHandlers for the onLogin event)
4) Bonus-bonus points: show some kind of counter or flag indicating how
many times the user has logged in (e.g., use a cookie or database).
(You can use whatever server-side or client-side implementation you want)
-->
*/
const spinnerHTML = `<div class="sk-circle">
<div class="sk-circle1 sk-child"></div>
<div class="sk-circle2 sk-child"></div>
<div class="sk-circle3 sk-child"></div>
<div class="sk-circle4 sk-child"></div>
<div class="sk-circle5 sk-child"></div>
<div class="sk-circle6 sk-child"></div>
<div class="sk-circle7 sk-child"></div>
<div class="sk-circle8 sk-child"></div>
<div class="sk-circle9 sk-child"></div>
<div class="sk-circle10 sk-child"></div>
<div class="sk-circle11 sk-child"></div>
<div class="sk-circle12 sk-child"></div>
</div>
`
const spinnerCSS = `.sk-circle {
margin: 100px auto;
width: 40px;
height: 40px;
position: relative;
}
.sk-circle .sk-child {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.sk-circle .sk-child:before {
content: '';
display: block;
margin: 0 auto;
width: 15%;
height: 15%;
background-color: #8A8A8A;
border-radius: 100%;
-webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}
.sk-circle .sk-circle2 {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg); }
.sk-circle .sk-circle3 {
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg); }
.sk-circle .sk-circle4 {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); }
.sk-circle .sk-circle5 {
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg); }
.sk-circle .sk-circle6 {
-webkit-transform: rotate(150deg);
-ms-transform: rotate(150deg);
transform: rotate(150deg); }
.sk-circle .sk-circle7 {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg); }
.sk-circle .sk-circle8 {
-webkit-transform: rotate(210deg);
-ms-transform: rotate(210deg);
transform: rotate(210deg); }
.sk-circle .sk-circle9 {
-webkit-transform: rotate(240deg);
-ms-transform: rotate(240deg);
transform: rotate(240deg); }
.sk-circle .sk-circle10 {
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg); }
.sk-circle .sk-circle11 {
-webkit-transform: rotate(300deg);
-ms-transform: rotate(300deg);
transform: rotate(300deg); }
.sk-circle .sk-circle12 {
-webkit-transform: rotate(330deg);
-ms-transform: rotate(330deg);
transform: rotate(330deg); }
.sk-circle .sk-circle2:before {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s; }
.sk-circle .sk-circle3:before {
-webkit-animation-delay: -1s;
animation-delay: -1s; }
.sk-circle .sk-circle4:before {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s; }
.sk-circle .sk-circle5:before {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s; }
.sk-circle .sk-circle6:before {
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s; }
.sk-circle .sk-circle7:before {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s; }
.sk-circle .sk-circle8:before {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s; }
.sk-circle .sk-circle9:before {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s; }
.sk-circle .sk-circle10:before {
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s; }
.sk-circle .sk-circle11:before {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s; }
.sk-circle .sk-circle12:before {
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s; }
@-webkit-keyframes sk-circleBounceDelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
} 40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes sk-circleBounceDelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
} 40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
`
/**
<div id="g_header">
<div id="counter"></div>
</div>
<div id="g_main">
<div id="g_loggedInCounter"></div>
<div id="g_caption">Please login using your favorite provider.</div>
<div id="g_askForEmail">
<input value="type in your email" type="text"><input value="connect me" type="button">
</div>
<div id="g_loginUI">spinnerHTML</div>
</div>
*/
const showLoginUI = window.gigya && window.gigya.socialize && window.gigya.socialize.showLoginUI
console.info('showLoginUI returns ', {showLoginUI})
const addEventHandlers = window.gigya && window.gigya.socialize && window.gigya.socialize.addEventHandlers
console.info('addEventHandlers returns ', {addEventHandlers})
if (showLoginUI && addEventHandlers) {
const loginFragment = document.createDocumentFragment()
console.info('loginFragment returns ', {loginFragment})
if (loginFragment) {
const g_mainCSS = `#g_main {
display: flex;
flex-flow: column;
align-items: center;
font-family: 'Titillium Web', sans-serif;
font-size: 24px;
}
`
const style = document.createElement('style')
style.setAttribute('type', 'text/css')
style.setAttribute('id', 'g_mainCSS')
style.textContent = g_mainCSS
window.document.head.appendChild(style)
const slideCSS = `#g_askForEmail.hide {
display: none;
}
.slide {
animation-duration: 3s;
animation-name: slide;
}
@keyframes slide {
from {
margin-bottom: -80px;
}
to {
margin-bottom: 0px;
}
}
`
const styleSlide = document.createElement('style')
styleSlide.setAttribute('type', 'text/css')
styleSlide.setAttribute('id', 'g_slideCSS')
styleSlide.textContent = slideCSS
window.document.head.appendChild(styleSlide)
const styleSpinner = document.createElement('style')
styleSpinner.setAttribute('type', 'text/css')
styleSpinner.setAttribute('id', 'g_spinnerCSS')
styleSpinner.textContent = spinnerCSS
window.document.head.appendChild(styleSpinner)
/**
<div id="g_header">
<div id="counter"></div>
</div>
*/
const g_header = document.createElement('div')
g_header.setAttribute('id', 'g_header')
const divHeaderCounter = document.createElement('div')
divHeaderCounter.setAttribute('id', 'g_loggedInCounter')
const counter = window.localStorage.getItem('g_counterBef') || 0
divHeaderCounter.setAttribute('title', `You loggedin ${counter === 0 ? 'not even once' : counter === 1 ? 'once' : counter === 2 ? 'twice' : (counter + ' times')}.`)
divHeaderCounter.innerHTML = '<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>'
g_header.appendChild(divHeaderCounter)
const spanCounter = g_header.querySelector(`#g_loggedInCounter span:nth-of-type(${counter})`)
if (spanCounter) {
spanCounter.classList.add('thismanytime')
}
loginFragment.appendChild(g_header)
/** <div id="g_main"></div> */
const main = document.createElement('div')
main.setAttribute('id', 'g_main')
/** <div id="g_loggedInCounter"></div> */
const divCounter = document.createElement('div')
divCounter.setAttribute('id', 'g_loggedInCounter')
divCounter.textContent = counter
? `Wow, you logged in already ${counter === 1 ? 'once' : counter === 2 ? 'twice' : (counter + ' times')}.`
: ''
main.appendChild(divCounter)
/** <div id="g_caption">Please login using your favorite provider.</div> */
const divCaption = document.createElement('div')
divCaption.setAttribute('id', 'g_caption')
divCaption.textContent = 'Please login using your favorite provider.'
main.appendChild(divCaption)
/**
<div id="g_askForEmail">
<p>Oh no, you're email is missing.</p>
<input type="email" placeholder="john@doe.com"><input value="connect me" type="button">
</div>
*/
const divAskForEmail = document.createElement('div')
divAskForEmail.setAttribute('id', 'g_askForEmail')
divAskForEmail.classList.add('hide')
divAskForEmail.innerHTML = `
<p>Oh no, you\'re email is missing.</p>
<input placeholder="john@doe.com" type="email"><input value="connect me" type="button">`
main.appendChild(divAskForEmail)
/** <div id="g_loginUI">spinnerHTML</div> */
const divLoginUI = document.createElement('div')
divLoginUI.setAttribute('id', 'g_loginUI')
divLoginUI.innerHTML = spinnerHTML
main.appendChild(divLoginUI)
loginFragment.appendChild(main)
window.document.body.appendChild(loginFragment)
const onLogin = p => {
console.info('onLogin.', p)
}
const onButtonClicked = (...p) => {
console.info('onButtonClicked.', p)
}
const onClose = (...p) => {
console.info('onClose.', p)
}
const onError = (...p) => {
console.info('onError.', p)
}
const onLoad = (...p) => {
console.info('onLoad.', p)
}
const loginUIParams = {
'version': 2
, 'width': '550px'
, 'height': 150
, 'containerID': 'g_loginUI'
, 'buttonsStyle': 'fullLogo' /* fullLogoColored */
, 'buttonSize': 60
, onLogin
, onButtonClicked
, onClose
, onError
, onLoad
// , 'redirectURL': 'http://localhost:10001/bx.html'
}
const askForEmail = userObj => {
const doLogin = () => window.gigya.socialize.login({
'provider': userObj.provider
, 'redirectURL': 'http://localhost:10001/bx.html'
, 'callback': resp => {
console.info('gigya.socialize.login called with: ', {resp})
}
})
console.info('askForEmail, ', {userObj})
const emailDiv = document.querySelector('#g_askForEmail')
if (emailDiv) {
emailDiv.classList.remove('hide')
emailDiv.classList.add('slide')
const btn = emailDiv.querySelector('input[type="button"]')
if (btn) {
btn.addEventListener('click', doLogin)
}
} else {
doLogin()
}
}
const incCounter = () => {
let counter = window.localStorage.getItem('g_counterBef') || 0
window.localStorage.setItem('g_counterBef', ++counter)
console.info('counter: ', counter)
}
const evtLogin = (userObj) => {
try {
console.info('evtLoggedIn, ', {userObj})
incCounter('g_askForEmail')
const {isSiteUID, user: {email}} = userObj
console.info('isSiteUID: ', isSiteUID)
console.info('email: ', email)
if (/* true */ !isSiteUID && !email) {
askForEmail(userObj)
} else {
console.info('No need to ask for more details.')
gigya.socialize.login({
'provider': userObj.provider
, 'redirectURL': 'http://localhost:10001/bx.html'
, 'callback': resp => {
console.info('gigya.socialize.login called with: ', {resp})
}
})
}
} catch (err) {
console.error('oups, ', {err})
}
}
const evtLogout = (...p) => {
console.info('evtLoggedOut, ', p)
}
const eventHandlers = {
'context': { str: 'eventHandlers context' }
, 'onLogin': evtLogin
, 'onLogout': evtLogout
}
addEventHandlers(eventHandlers)
showLoginUI(loginUIParams)
}
}
Raw
bx.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Logged in page</title>
<script type="text/javascript" src="http://cdn.gigya.com/js/socialize.js?apiKey=2_Y82PzwJ_chSFImHXaIDJClnLyJzmk-VFOavSsaNTzl6m901s_NNxRAS0xJ3bd3_N"></script>
</head>
<body>
<script src="bx.js"></script>
</body>
</html>
Raw
bx.js
/**
<!-- YOUR MISSION:
1) Add the Gigya connect component, showAddConnectionsUI, in a containing div
2) From the events generated by the connection component, indicate the connected
social network providers on the page (hint: you will need to use addEventHandlers)
3) Modify the logout (below) to use the Gigya logout API call
4) Bonus points: add a sharing experience, either via publishUserAction or showShareUI
-->
<div style="float:left; margin:0px 10px; padding:10px; border:2px solid blue;">
<p>Welcome, <span id="nickname"></span>!
<p>You authenticated with <span id="loginProvider"></span></p>
</p>
</div>
<div style="float:left; margin:0px 10px; padding:10px;">
<input type="button" onclick="window.location='ax.html'; return false;" value="Logout and return to the login page">
</div>
*/
// '?provider=facebook&loginMode=standard&newUser=false&signature=QTCM4hSoHTDUaZ3klgKC5tV6EKk%3D&UIDSig=QTCM4hSoHTDUaZ3klgKC5tV6EKk%3D&timestamp=2017-10-07%2009%3A06%3A15&UIDSignature=v3Qy5gWnjS5V0Nq4hXI7csBOnIU%3D&signatureTimestamp=1507367175&UID=_gid_w%2BIceZxSSaAx5JAy9pJlk7ESbgJCm5MEf5PHy%2F6UXu4%3D&isSiteUID=false&nickname=Xavier%20Brinon&photoURL=https%3A%2F%2Fgraph.facebook.com%2Fv2.5%2F363870224048141%2Fpicture%3Ftype%3Dlarge&thumbnailURL=https%3A%2F%2Fgraph.facebook.com%2Fv2.5%2F363870224048141%2Fpicture%3Ftype%3Dsquare&birthDay=15&birthMonth=12&birthYear=1979&gender=m&email=xbrinon%40opentext.com&proxiedEmail=&country=&state=&city=&zip=&firstName=Xavier&lastName=Brinon&profileURL=https%3A%2F%2Fwww.facebook.com%2Fapp_scoped_user_id%2F363870224048141%2F&age=37&isLoggedIn=true&isConnected=true&isSiteUser=true&loginProvider=facebook&loginProviderUID=363870224048141&isTempUser=false&statusCode=200&statusReason=OK&time=2017-10-07T09%3A06%3A15.936Z&oldestDataUpdatedTimestamp=1507367175696&oldestDataAge=0'
const fragmentUI = document.createDocumentFragment()
console.info('fragmentUI returns ', {fragmentUI})
if (fragmentUI) {
const g_mainCSS = `#g_main {
display: flex;
flex-flow: column;
align-items: center;
}
`
const style = document.createElement('style')
style.setAttribute('type', 'text/css')
style.setAttribute('id', 'g_mainCSS')
style.textContent = g_mainCSS
window.document.head.appendChild(style)
const main = document.createElement('div')
main.setAttribute('id', 'g_main')
const divParamDetails = document.createElement('div')
divParamDetails.setAttribute('id', 'g_paramDetails')
const ulParamDetails = document.createElement('ul')
divParamDetails.appendChild(ulParamDetails)
const searchData = {}
if ('URLSearchParams' in window) {
const searchParams = new window.URLSearchParams(document.location.search)
searchParams.forEach((pval, pvar) => {
/* <li><span>var :</span><span>val</span></li> */
const liParam = document.createElement('li')
const spanVar = document.createElement('span')
spanVar.textContent = `${pvar}: `
liParam.appendChild(spanVar)
const spanVal = document.createElement('span')
spanVal.textContent = `${pval}`
liParam.appendChild(spanVal)
ulParamDetails.appendChild(liParam)
searchData[pvar] = pval
})
} else {
const searches = document.location.search.substr(1).split('&') || []
/**
* Reduce params to an object.
*/
const inObjectSearches = (collect, param = '') => {
const [pvar, pval] = param.split('=')
console.info('inObjectSearches working on ', {pvar, pval})
if (pvar) {
collect[pvar] = decodeURIComponent(pval)
}
return collect
}
console.info('searches returns ', {searches})
if (searches.length) {
Object.assign(searchData, searches.reduce(inObjectSearches, {}))
}
console.info('Data from URL: ', searchData)
}
console.info('Data from URLSearchParams: ', searchData)
// <div id="g_addConnectionsUI">
const divAddConnectionsUI = document.createElement('div')
divAddConnectionsUI.setAttribute('id', 'g_addConnectionsUI')
main.appendChild(divAddConnectionsUI)
/**
<div id="g_main">
<div id="g_addConnectionsUI">
</div>
<div id="g_paramDetails">
<ul>
<li><span>var :</span><span>val</span></li>
<li><span>var :</span><span>val</span></li>
</ul>
</div>
</div>
*/
main.appendChild(divParamDetails)
fragmentUI.appendChild(main)
window.document.body.appendChild(fragmentUI)
// gigya.socialize.showAddConnectionsUI(params)
const {gigya: {socialize: {showAddConnectionsUI = {}} = {}} = {}} = window
console.info('showAddConnectionsUI returns ', {showAddConnectionsUI})
if (showAddConnectionsUI) {
const connectionAdded = (...p) => {
console.info('connectionAdded.', p)
}
const clicked = (...p) => {
console.info('Clicked.', p)
}
const closed = (...p) => {
console.info('Closed.', p)
}
const erred = (...p) => {
console.info('Erred.', p)
}
const loaded = (...p) => {
console.info('Loaded.', p)
}
const params = {
'version': 2
, 'width': '550px'
, 'height': 150
, 'containerID': 'g_addConnectionsUI'
, 'captionText': 'this is caption text'
, 'onConnectionAdded': connectionAdded
, 'onButtonClicked': clicked
, 'onClose': closed
, 'onError': erred
, 'onLoad': loaded
}
showAddConnectionsUI(params)
}
}
Raw
server.js
const express = require('express')
const server = express()
server.use(express.static(`${__dirname}/public`))
const port = 10001
server.listen(port, () => {
console.log('server listening on port ' + port)
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment