mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-12 17:46:26 +02:00
Code Issues Releases Wiki Activity

login flow - first draft

Browse Source
This commit is contained in:
Kushagra Gour
2018-01-10 03:15:43 +05:30
parent 3f59777976
commit 4a37aa7305
7 changed files with 157 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.json
View File

@ -19,7 +19,7 @@
"computed-property-spacing": ["error", "never"],
"consistent-return": "error",
"consistent-this": "off",
"curly": "error",
"curly": "off",
"default-case": "error",
"dot-location": ["error", "property"],
"dot-notation": "error",

66
src/auth.js Normal file
View File

@ -0,0 +1,66 @@
window.logout = function logout() {
firebase.auth().signOut();
};
function login(providerName) {
var provider;
if (providerName === 'fb') {
provider = new firebase.auth.FacebookAuthProvider();
} else if (providerName === 'twitter') {
provider = new firebase.auth.TwitterAuthProvider();
} else if (providerName === 'google') {
provider = new firebase.auth.GoogleAuthProvider();
provider.addScope('https://www.googleapis.com/auth/userinfo.profile');
} else {
provider = new firebase.auth.GithubAuthProvider();
}
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;
}
});
})
.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;
console.log(error);
});
}
window.login = login;

11
src/db.js
View File

@ -86,7 +86,7 @@
// Not critical right now.
}
async function setUserLastSeenVersion(user, version) {
async function setUserLastSeenVersion(version) {
if (window.IS_EXTENSION) {
chrome.storage.sync.set(
{
@ -99,17 +99,22 @@
// Settings the lastSeenVersion in localStorage also because next time we need
// to fetch it irrespective of the user being logged in or out
local.set({ lastSeenVersion: version });
if (user) {
if (window.user) {
const remoteDb = await getDb();
remoteDb.doc(`users/${user.uid}`).update({ lastSeenVersion: version });
remoteDb
.doc(`users/${window.user.uid}`)
.update({ lastSeenVersion: version });
}
}
async function getUser(userId) {
const remoteDb = await getDb();
return remoteDb.doc(`users/${userId}`).get().then(doc => {
if (!doc.exists)
return remoteDb.doc(`users/${userId}`).set({}, { merge: true });
const user = doc.data();
Object.assign(window.user, user);
return user;
});
}

15
src/index.html
View File

@ -73,8 +73,14 @@
<path d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z" />
</svg>Open
</a>
<a>
<img width="20" src="https://www.gravatar.com/avatar/6be4e636e8aacd405bed5cd15124a875" class="main-header__avatar-img"/>
<a class="hide-on-login flex flex-v-center hint--rounded hint--bottom-left" aria-label="Login/Signup" d-open-modal="loginModal">
Login/Signup
</a>
<a class="hide-on-logout flex flex-v-center hint--rounded hint--bottom-left" aria-label="Logout" d-click="logout">
Logout
</a>
<a class="hide-on-logout">
<img id="headerAvatarImg" width="20" src="https://www.gravatar.com/avatar/6be4e636e8aacd405bed5cd15124a875" class="main-header__avatar-img"/>
</a>
</div>
</div>
@ -318,6 +324,10 @@
<div class="modal__content" d-html="partials/onboard-modal.html"></div>
</div>
<div class="modal" id="loginModal">
<div class="modal__content" d-html="partials/login-modal.html"></div>
</div>
<div class="modal modal--settings" id="settingsModal">
<div class="modal__content">
<a d-click="onModalCloseBtnClick" href="" aria-label="Close Settings" title="Close" class="js-modal__close-btn modal__close-btn">
@ -591,6 +601,7 @@
<!-- <script src="service-worker-registration.js"></script> -->
<script src="utils.js"></script>
<script src="db.js"></script>
<script src="auth.js"></script>
<script src="analytics.js"></script>
<script src="deferred.js"></script>
<script src="loader.js"></script>

14
src/itemService.js
View File

@ -7,13 +7,16 @@
});
},
async getUserItemIds() {
if (window.user && window.user.items) {
if (window.user) {
return new Promise(resolve => {
resolve(window.user.items);
resolve(window.user.items || {});
});
}
var remoteDb = await window.db.getDb();
return remoteDb.doc(`users/${window.user.uid}`).get().then(doc => {
if (!doc.exists) {
return {};
}
return doc.data().items;
});
},
@ -51,6 +54,9 @@
},
async setItem(id, item) {
if (!window.user) {
return new Promise(resolve => resolve());
}
var remoteDb = await window.db.getDb();
console.log(`Starting to save item ${id}`);
item.createdBy = window.user.uid;
@ -130,7 +136,7 @@
},
async setItemForUser(itemId) {
if (window.IS_EXTENSION) {
if (window.IS_EXTENSION || !window.user) {
return window.db.local.get(
{
items: {}
@ -152,6 +158,8 @@
})
.then(arg => {
console.log(`Item ${itemId} set for user`, arg);
window.user.items = window.user.items || {};
window.user.items[itemId] = true;
})
.catch(error => console.log(error));
},

78
src/script.js
View File

@ -7,7 +7,8 @@ onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editor
onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl,
runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyleTemplate,
customEditorFontInput, cssSettingsModal, cssSettingsBtn, acssSettingsTextarea,
globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal
globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal, headerAvatarImg,
loginModal
*/
/* eslint-disable no-extra-semi */
(function(alertsService, itemService) {
@ -490,7 +491,7 @@ globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal
var d = deferred();
savedItems = savedItems || {};
var items = [];
if (!window.IS_EXTENSION) {
if (!window.IS_EXTENSION && window.user) {
items = await itemService.getAllItems();
if (shouldSaveGlobally) {
@ -667,6 +668,7 @@ globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal
settingsModal.classList.remove('is-modal-visible');
cssSettingsModal.classList.remove('is-modal-visible');
keyboardShortcutsModal.classList.remove('is-modal-visible');
loginModal.classList.remove('is-modal-visible');
toggleSavedItemsPane(false);
document.dispatchEvent(new Event('overlaysClosed'));
}
@ -1094,7 +1096,8 @@ globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal
}
function createPreviewFile(html, css, js) {
const shouldInlineJs = !window.webkitRequestFileSystem;
const shouldInlineJs =
!window.webkitRequestFileSystem || !window.IS_EXTENSION;
var contents = getCompleteHtml(html, css, shouldInlineJs ? js : null);
var blob = new Blob([contents], { type: 'text/plain;charset=UTF-8' });
var blobjs = new Blob([js], { type: 'text/plain;charset=UTF-8' });
@ -1707,21 +1710,26 @@ globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal
utils.log(settingName, el.type === 'checkbox' ? el.checked : el.value);
prefs[settingName] = el.type === 'checkbox' ? el.checked : el.value;
obj[settingName] = prefs[settingName];
// In case of !extension, we save in localstorage so that it gets fetched
// faster on future loads.
db.sync.set(obj, function() {
alertsService.add('Setting saved');
});
window.db.getDb().then(remoteDb => {
remoteDb
.collection('users')
.doc(window.user.uid)
.update({
[`settings.${settingName}`]: prefs[settingName]
})
.then(arg => {
console.log(`Setting "${settingName}" for user`, arg);
})
.catch(error => console.log(error));
});
if (!window.IS_EXTENSION) {
window.db.getDb().then(remoteDb => {
remoteDb
.collection('users')
.doc(window.user.uid)
.update({
[`settings.${settingName}`]: prefs[settingName]
})
.then(arg => {
console.log(`Setting "${settingName}" for user`, arg);
})
.catch(error => console.log(error));
});
}
trackEvent('ui', 'updatePref-' + settingName, prefs[settingName]);
}
@ -2011,7 +2019,17 @@ globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal
e.preventDefault();
};
scope.login = function(e) {
scope.updateProfileUi = () => {
if (window.user) {
document.body.classList.add('is-logged-in');
headerAvatarImg.src = window.user.photoURL;
} else {
document.body.classList.remove('is-logged-in');
headerAvatarImg.src = '';
}
};
scope.login = e => {
firebase.auth().signInAnonymously().then().catch(function(error) {
// Handle Errors here.
utils.log(error);
@ -2021,6 +2039,8 @@ globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal
e.preventDefault();
}
};
scope.login = window.login;
scope.logout = window.logout;
function init() {
var config = {
@ -2034,17 +2054,23 @@ globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal
firebase.initializeApp(config);
firebase.auth().onAuthStateChanged(function(user) {
scope.closeAllOverlays();
if (user) {
utils.log('You are -> ', user);
alertsService.add('You are now logged in!');
scope.user = window.user = user;
window.db.getUser(user.uid).then(() => {
Object.assign(prefs, user.settings);
updateSettingsInUi();
scope.updateSetting();
window.db.getUser(user.uid).then(customUser => {
if (customUser) {
Object.assign(prefs, user.settings);
updateSettingsInUi();
scope.updateSetting();
}
});
} else {
delete window.user;
// User is signed out.
}
scope.updateProfileUi();
});
var lastCode;
@ -2073,7 +2099,7 @@ globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal
) {
hasSeenNotifications = true;
notificationsBtn.classList.remove('has-new');
window.db.setUserLastSeenVersion(window.user.uid, version);
window.db.setUserLastSeenVersion(version);
}
trackEvent('ui', 'notificationButtonClick', version);
return false;
@ -2382,9 +2408,11 @@ globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal
if (lastCode.id) {
// Ignore for remote db
db.local.get(lastCode.id, function(itemResult) {
utils.log('Load item ', lastCode.id);
currentItem = itemResult[lastCode.id];
refreshEditor();
if (itemResult[lastCode.id]) {
utils.log('Load item ', lastCode.id);
currentItem = itemResult[lastCode.id];
refreshEditor();
}
});
} else {
utils.log('Load last unsaved item', lastCode);
@ -2409,7 +2437,7 @@ globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal
trackEvent('ui', 'onboardModalSeen', version);
document.cookie = 'onboarded=1';
}
window.db.setUserLastSeenVersion(window.user, version);
window.db.setUserLastSeenVersion(version);
// set some initial preferences on closing the onboard modal
// Old onboarding.
// utils.once(document, 'overlaysClosed', function() {});

5
src/style.css
View File

@ -959,6 +959,11 @@ transition: 0.25s ease;
display: inline-block;
}
body.is-logged-in .hide-on-login,
body:not(.is-logged-in) .hide-on-logout {
display: none;
}
/* Codemirror themes basic bg styles. This is here so that there is no big FOUC
while the theme CSS file is loading */
.cm-s-paraiso-dark.CodeMirror { background: #2f1e2e; color: #b9b6b0; }