Facebook flow
This commit is contained in:
parent
4a21ba9a18
commit
bae9f3415c
@ -19,7 +19,7 @@
|
||||
}
|
||||
}*/
|
||||
|
||||
@import url('http://fonts.cdnfonts.com/css/noto-sans');
|
||||
@import url('https://fonts.cdnfonts.com/css/noto-sans');
|
||||
|
||||
* {
|
||||
--hover-color: #f18902;
|
||||
|
||||
0
assets/images/favicon.ico
Normal file
0
assets/images/favicon.ico
Normal file
@ -6,6 +6,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="/assets/css/reset.css" rel="stylesheet"/>
|
||||
<link href="/assets/css/app.css" rel="stylesheet"/>
|
||||
<link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico" />
|
||||
<script type="module" src=/assets/js/app.js></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
1167
client/dist/app.js
vendored
Normal file
1167
client/dist/app.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
1
client/dist/app.js.map
vendored
Normal file
1
client/dist/app.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -9,4 +9,24 @@ import "./ow-path.js";
|
||||
import "./price/price-view";
|
||||
import "./price/price-input";
|
||||
import "./register-form.js";
|
||||
import "./shared.js";
|
||||
import { fireFbReady } from "./shared.js";
|
||||
|
||||
window.fbAsyncInit = () => {
|
||||
FB.init({
|
||||
appId : '1293538251053124',
|
||||
cookie : true,
|
||||
xfbml : true,
|
||||
version : 'v14.0'
|
||||
});
|
||||
FB.AppEvents.logPageView();
|
||||
fireFbReady();
|
||||
};
|
||||
|
||||
{
|
||||
if (!document.querySelector('#facebook-jssdk')) {
|
||||
const js = document.createElement('script');
|
||||
js.id = 'facebook-jssdk';
|
||||
js.src = "https://connect.facebook.net/en_US/sdk.js";
|
||||
document.head.appendChild(js);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,12 +1,101 @@
|
||||
import { runFbReady } from "../shared";
|
||||
|
||||
customElements.define('register-oauth2', class extends HTMLElement {
|
||||
static get observedAttributes() {
|
||||
return ['fb-connected']
|
||||
}
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
const shadow = this.attachShadow({ mode: "closed" });
|
||||
shadow.innerHTML = `
|
||||
<a id="google-button" class="btn btn-block btn-social btn-google">
|
||||
<i class="fa fa-google"></i> Sign in with Google
|
||||
</a>
|
||||
<style>
|
||||
.loginBtn {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
/* width: 13em; - apply for fixed size */
|
||||
margin: 0.2em;
|
||||
padding: 0 15px 0 46px;
|
||||
border: none;
|
||||
text-align: left;
|
||||
line-height: 34px;
|
||||
white-space: nowrap;
|
||||
border-radius: 0.2em;
|
||||
font-size: 16px;
|
||||
color: #FFF;
|
||||
}
|
||||
.loginBtn:before {
|
||||
content: "";
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 34px;
|
||||
height: 100%;
|
||||
}
|
||||
.loginBtn:focus {
|
||||
outline: none;
|
||||
}
|
||||
.loginBtn:active {
|
||||
box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
|
||||
/* Facebook */
|
||||
:host([fb-connected]) .loginBtn--facebook {
|
||||
display: none !important;
|
||||
}
|
||||
.loginBtn--facebook {
|
||||
background-color: #4C69BA;
|
||||
background-image: linear-gradient(#4C69BA, #3B55A0);
|
||||
/*font-family: "Helvetica neue", Helvetica Neue, Helvetica, Arial, sans-serif;*/
|
||||
text-shadow: 0 -1px 0 #354C8C;
|
||||
}
|
||||
.loginBtn--facebook:before {
|
||||
border-right: #364e92 1px solid;
|
||||
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_facebook.png') 6px 6px no-repeat;
|
||||
}
|
||||
.loginBtn--facebook:hover,
|
||||
.loginBtn--facebook:focus {
|
||||
background-color: #5B7BD5;
|
||||
background-image: linear-gradient(#5B7BD5, #4864B1);
|
||||
}
|
||||
</style>
|
||||
<button class="loginBtn loginBtn--facebook">
|
||||
Login with Facebook
|
||||
</button>
|
||||
|
||||
<form>
|
||||
<legend>Rejestracja adresem e-mail</legend>
|
||||
<div>
|
||||
<label>E-Mail</label>
|
||||
<input type="email" name="email">
|
||||
</div>
|
||||
<div>
|
||||
<label>Login</label>
|
||||
<input type="text" name="login">
|
||||
</div>
|
||||
<div>
|
||||
<label>Hasło</label>
|
||||
<input type="password" name="password">
|
||||
</div>
|
||||
<div>
|
||||
<input type="submit" value="Zarejestruj" />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<slot></slot>
|
||||
`;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
runFbReady(() => {
|
||||
FB.getLoginStatus(({ status }) => {
|
||||
if (status !== 'connected')
|
||||
FB.login();
|
||||
else
|
||||
this.setAttribute('fb-connected', '1');
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@ -105,3 +105,14 @@ export class PseudoForm extends HTMLElement {
|
||||
return this[S].querySelector('form').elements;
|
||||
}
|
||||
}
|
||||
|
||||
export const fireFbReady = () => {
|
||||
fbReady = true;
|
||||
for (const fn of fbQueue) fn();
|
||||
};
|
||||
export const runFbReady = (fn) => {
|
||||
if (!fbReady) fbQueue.push(fn);
|
||||
else fn();
|
||||
};
|
||||
const fbQueue = [];
|
||||
let fbReady = false;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user