mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-09 16:06:21 +02:00
Code Issues Releases Wiki Activity

fix login modal style n functionality

Browse Source
This commit is contained in:
Kushagra Gour
2018-01-13 12:06:07 +05:30
parent 08e6993ce6
commit 3429ba34ab
5 changed files with 79 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/auth.js
View File

@ -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);
});
}

16
src/index.html
View File

@ -13,8 +13,8 @@
width: 450px;
transform: translateX(100%);
}
.modal__content {
opacity: 0;
.modal {
visibility: hidden;
}
</style>
@ -382,12 +382,12 @@
Default Preprocessors
</label>
<div class="flex line">
<select style="flex:1;margin:0 20px" data-setting="htmlMode" d-change="updateSetting">
<select style="flex:1;margin-left:20px" data-setting="htmlMode" d-change="updateSetting">
<option value="html">HTML</option>
<option value="markdown">Markdown</option>
<option value="jade">Pug</option>
</select>
<select style="flex:1;margin:0 20px" data-setting="cssMode" d-change="updateSetting">
<select style="flex:1;margin-left:20px" data-setting="cssMode" d-change="updateSetting">
<option value="css">CSS</option>
<option value="scss">SCSS</option>
<option value="sass">SASS</option>
@ -395,7 +395,7 @@
<option value="stylus">Stylus</option>
<option value="acss">Atomic CSS</option>
</select>
<select style="flex:1;margin:0 20px" data-setting="jsMode" d-change="updateSetting">
<select style="flex:1;margin-left:20px" data-setting="jsMode" d-change="updateSetting">
<option value="js">JS</option>
<option value="coffee">CoffeeScript</option>
<option value="es6">ES6 (Babel)</option>
@ -526,6 +526,12 @@
<symbol id="bug-icon" viewBox="0 0 24 24">
<path d="M14,12H10V10H14M14,16H10V14H14M20,8H17.19C16.74,7.22 16.12,6.55 15.37,6.04L17,4.41L15.59,3L13.42,5.17C12.96,5.06 12.5,5 12,5C11.5,5 11.04,5.06 10.59,5.17L8.41,3L7,4.41L8.62,6.04C7.88,6.55 7.26,7.22 6.81,8H4V10H6.09C6.04,10.33 6,10.66 6,11V12H4V14H6V15C6,15.34 6.04,15.67 6.09,16H4V18H6.81C7.85,19.79 9.78,21 12,21C14.22,21 16.15,19.79 17.19,18H20V16H17.91C17.96,15.67 18,15.34 18,15V14H20V12H18V11C18,10.66 17.96,10.33 17.91,10H20V8Z" />
</symbol>
<symbol id="google-icon" viewBox="0 0 24 24">
<path d="M21.35,11.1H12.18V13.83H18.69C18.36,17.64 15.19,19.27 12.19,19.27C8.36,19.27 5,16.25 5,12C5,7.9 8.2,4.73 12.2,4.73C15.29,4.73 17.1,6.7 17.1,6.7L19,4.72C19,4.72 16.56,2 12.1,2C6.42,2 2.03,6.8 2.03,12C2.03,17.05 6.16,22 12.25,22C17.6,22 21.5,18.33 21.5,12.91C21.5,11.76 21.35,11.1 21.35,11.1V11.1Z" />
</symbol>
<symbol id="fb-icon" viewBox="0 0 24 24">
<path d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z" />
</symbol>
<symbol id="github-icon" viewBox="0 0 24 24">
<path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" />
</symbol>

20
src/partials/login-modal.html
View File

@ -4,13 +4,25 @@
</svg>
</a>
<h2>Login</h2>
<h2>Login / Signup</h2>
<div class="flex">
<div>
<p>
<button class="btn social-login-btn--google">Login with Google</button>
<button class="btn btn-icon btn--big full-width social-login-btn--github" data-auth-provider="github">
<svg><use xlink:href="#github-icon"></use></svg>Login with Github
</button>
</p>
<p>
<button d-click="login" class="btn social-login-btn--github">Login with Github</button>
<button d-click="login" class="btn btn-icon btn--big full-width social-login-btn--google" data-auth-provider="google">
<svg><use xlink:href="#google-icon"></use></svg>Login with Google
</button>
</p>
<p class="mb-2">
<button d-click="login" class="btn btn-icon btn--big full-width social-login-btn--facebook" data-auth-provider="facebook">
<svg><use xlink:href="#fb-icon"></use></svg>Login with Facebook
</button>
</p>
<p>
Join a community of 50,000+ Developers
</p>
</div>

8
src/script.js
View File

@ -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() {

57
src/style.css
View File

@ -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 {