diff --git a/src/auth.js b/src/auth.js index a8bdafb..b39e023 100644 --- a/src/auth.js +++ b/src/auth.js @@ -3,7 +3,7 @@ window.logout = function logout() { }; function login(providerName) { var provider; - if (providerName === 'fb') { + if (providerName === 'facebook') { provider = new firebase.auth.FacebookAuthProvider(); } else if (providerName === 'twitter') { provider = new firebase.auth.TwitterAuthProvider(); @@ -17,49 +17,11 @@ function login(providerName) { return firebase .auth() .signInWithPopup(provider) - .then(function(result) { - return; - // Save this user in the store - firebase - .database() - .ref('users/' + result.user.uid) - .update({ - displayName: result.user.displayName, - email: result.user.email, - photoURL: result.user.providerData[0].photoURL, - signedUpOn: Date.now() - }) - .then(function() { - // Port items in localstorage to user account - if (window.localStorage.prototyp) { - var items = JSON.parse(window.localStorage.prototyp); - var newItemKey; - items.forEach(function(localItem) { - itemService.fetchItem(localItem.id).then(function(item) { - newItemKey = firebase.database().ref('pens').push().key; - item.createdBy = result.user.uid; - delete item.uid; - firebase.database().ref('pens/' + newItemKey).set(item); - firebase - .database() - .ref('users/' + result.user.uid) - .child('items') - .child(newItemKey) - .set(true); - }); - }); - delete localStorage.prototyp; - } - }); - }) + .then(function() {}) .catch(function(error) { - // Handle Errors here. - var errorCode = error.code; - var errorMessage = error.message; - // The email of the user's account used. - var email = error.email; - // The firebase.auth.AuthCredential type that was used. - var credential = error.credential; + alert( + 'You have already signed up with the same email using different social login' + ); utils.log(error); }); } diff --git a/src/index.html b/src/index.html index f4a3ca2..6435103 100644 --- a/src/index.html +++ b/src/index.html @@ -13,8 +13,8 @@ width: 450px; transform: translateX(100%); } - .modal__content { - opacity: 0; + .modal { + visibility: hidden; } @@ -382,12 +382,12 @@ Default Preprocessors
- - @@ -395,7 +395,7 @@ - @@ -526,6 +526,12 @@ + + + + + + diff --git a/src/partials/login-modal.html b/src/partials/login-modal.html index d642cfa..43b7809 100644 --- a/src/partials/login-modal.html +++ b/src/partials/login-modal.html @@ -4,13 +4,25 @@ -

Login

+

Login / Signup

-
+

- +

- + +

+

+ +

+

+ Join a community of 50,000+ Developers

\ No newline at end of file diff --git a/src/script.js b/src/script.js index a4e9072..e9f73bf 100644 --- a/src/script.js +++ b/src/script.js @@ -2019,16 +2019,12 @@ loginModal }; scope.login = e => { - firebase.auth().signInAnonymously().then().catch(function(error) { - // Handle Errors here. - utils.log(error); - }); - + const provider = e.target.dataset.authProvider; + window.login(provider); if (e) { e.preventDefault(); } }; - scope.login = window.login; scope.logout = window.logout; function init() { diff --git a/src/style.css b/src/style.css index 29b8bdb..725a8f6 100644 --- a/src/style.css +++ b/src/style.css @@ -34,6 +34,8 @@ a { text-decoration: none; color: crimson; cursor: pointer; } .pointer-none { pointer-events: none; } .ml-1 { margin-left: 1rem; } .ml-2 { margin-left: 2rem; } +.mb-1 { margin-bottom: 1rem; } +.mb-2 { margin-bottom: 2rem; } hr { background: 0; border: 0; @@ -87,6 +89,10 @@ select, input[type="text"], input[type="number"], textarea { cursor: pointer; transition: box-shadow 0.2s ease; } +.btn--big { + padding: 15px 30px; + border-radius: 3px; +} .btn-icon { display: inline-flex; align-items: center; @@ -95,13 +101,24 @@ select, input[type="text"], input[type="number"], textarea { text-decoration: none; box-shadow: 0 3px 5px 0 rgba(0,0,0,0.15); } +.btn:focus { + outline-width: 4px; + outline-color: #b76b29; + outline-style: solid; + outline-offset: 1px; +} .btn-icon > svg { width: 20px; height: 20px; - fill: white; + fill: currentColor; vertical-align: middle; margin-right: 8px; } +.btn--big > svg { + width: 25px; + height: 25px; + margin-right: 12px; +} .star:after { content: '★'; color: #eee333; @@ -431,19 +448,23 @@ body > #demo-frame { } .modal { position: fixed; - top: 5vh; - left: 50%; - width: 68vw; - margin-left: -34vw; - max-width: 90vw; - height: auto; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; z-index: 2000; visibility: hidden; + + /* So that modal overlay gets pointer events */ + pointer-events: none; } @media screen and (max-width: 900px) { .modal { - width: 90vw; - margin-left: -45vw; + /* width: 90vw; */ + /* margin-left: -45vw; */ } } .modal__close-btn { @@ -451,7 +472,7 @@ body > #demo-frame { right: 10px; top: 10px; opacity: 0.3; -transition: 0.25s ease; + transition: 0.25s ease; } .modal__close-btn > svg { fill: black; @@ -464,8 +485,8 @@ transition: 0.25s ease; background: #fdfdfd; color: #444; position: relative; - border-radius: 3px; - margin: 0 auto; + border-radius: 8px; + /* margin: 0 auto; */ opacity: 0; padding: 2em; font-size: 1.1em; @@ -473,6 +494,7 @@ transition: 0.25s ease; max-height: 90vh; box-sizing: border-box; overflow-y: auto; + pointer-events: auto; transition-property: transform, opacity; transition-duration: 0.19s; transform: translateY(-50px) scale(0.7); @@ -976,6 +998,17 @@ transition: 0.25s ease; padding: 2px; font-size: 10px; } +.social-login-btn--github { + background: #656B6F; +} +.social-login-btn--facebook { + background: #4E62C0; +} +.social-login-btn--google { + background: white; + border: 2px solid currentColor; + color: inherit; +} body.is-logged-in .hide-on-login, body:not(.is-logged-in) .hide-on-logout {