From 7f5af1966e5242393b38883431052c1d99a78348 Mon Sep 17 00:00:00 2001 From: Shaun Date: Sun, 2 Dec 2018 12:48:01 +0000 Subject: [PATCH 01/21] lesson-3 --- README.md | 2 - img/logo.svg | 53 +++++++++++++++++++ index.html | 129 +++++++++++++++++++++++++++++++++++++++++++++++ scripts/auth.js | 0 scripts/index.js | 10 ++++ 5 files changed, 192 insertions(+), 2 deletions(-) delete mode 100644 README.md create mode 100644 img/logo.svg create mode 100644 index.html create mode 100644 scripts/auth.js create mode 100644 scripts/index.js diff --git a/README.md b/README.md deleted file mode 100644 index ea23925..0000000 --- a/README.md +++ /dev/null @@ -1,2 +0,0 @@ -# firebase-auth -All course files for the Firebase authentication tutorial series on The Net Ninja YouTube channel. diff --git a/img/logo.svg b/img/logo.svg new file mode 100644 index 0000000..2dce1aa --- /dev/null +++ b/img/logo.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..42dc581 --- /dev/null +++ b/index.html @@ -0,0 +1,129 @@ + + + + + + + + GameGuidez + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + + + \ No newline at end of file diff --git a/scripts/auth.js b/scripts/auth.js new file mode 100644 index 0000000..e69de29 diff --git a/scripts/index.js b/scripts/index.js new file mode 100644 index 0000000..73f710f --- /dev/null +++ b/scripts/index.js @@ -0,0 +1,10 @@ +// setup materialize components +document.addEventListener('DOMContentLoaded', function() { + + var modals = document.querySelectorAll('.modal'); + M.Modal.init(modals); + + var items = document.querySelectorAll('.collapsible'); + M.Collapsible.init(items); + +}); \ No newline at end of file From 502c3205c1b6b944f812a79d72efa3fd03af0296 Mon Sep 17 00:00:00 2001 From: Shaun Date: Sun, 2 Dec 2018 13:37:32 +0000 Subject: [PATCH 02/21] lesson-4 --- index.html | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/index.html b/index.html index 42dc581..229905a 100644 --- a/index.html +++ b/index.html @@ -121,6 +121,26 @@

Create Guide


+ + + + From 2e62b8f5c32c5c732714accaafdfbe02e9afb78e Mon Sep 17 00:00:00 2001 From: Shaun Date: Sun, 2 Dec 2018 13:40:28 +0000 Subject: [PATCH 03/21] lesson-5 --- scripts/auth.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/scripts/auth.js b/scripts/auth.js index e69de29..cdd028c 100644 --- a/scripts/auth.js +++ b/scripts/auth.js @@ -0,0 +1,19 @@ +// signup +const signupForm = document.querySelector('#signup-form'); +signupForm.addEventListener('submit', (e) => { + e.preventDefault(); + + // get user info + const email = signupForm['signup-email'].value; + const password = signupForm['signup-password'].value; + + // sign up the user + auth.createUserWithEmailAndPassword(email, password).then(cred => { + // console.log(cred.user); + }).then(() => { + // close the signup modal & reset form + const modal = document.querySelector('#modal-signup'); + M.Modal.getInstance(modal).close(); + signupForm.reset(); + }); +}); From 4bb4f9d5b0cc77b5fac44ace8e78dc51c8fa4da2 Mon Sep 17 00:00:00 2001 From: Shaun Date: Sun, 2 Dec 2018 17:29:33 +0000 Subject: [PATCH 04/21] lesson-5 --- scripts/auth.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/scripts/auth.js b/scripts/auth.js index cdd028c..6cceded 100644 --- a/scripts/auth.js +++ b/scripts/auth.js @@ -9,8 +9,7 @@ signupForm.addEventListener('submit', (e) => { // sign up the user auth.createUserWithEmailAndPassword(email, password).then(cred => { - // console.log(cred.user); - }).then(() => { + console.log(cred.user); // close the signup modal & reset form const modal = document.querySelector('#modal-signup'); M.Modal.getInstance(modal).close(); From 60852158c4ed0b222ac567015e1556ffa334fc9e Mon Sep 17 00:00:00 2001 From: Shaun Date: Sun, 2 Dec 2018 18:21:12 +0000 Subject: [PATCH 05/21] lesson-6 --- scripts/auth.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/scripts/auth.js b/scripts/auth.js index 6cceded..63d6e64 100644 --- a/scripts/auth.js +++ b/scripts/auth.js @@ -9,10 +9,18 @@ signupForm.addEventListener('submit', (e) => { // sign up the user auth.createUserWithEmailAndPassword(email, password).then(cred => { - console.log(cred.user); // close the signup modal & reset form const modal = document.querySelector('#modal-signup'); M.Modal.getInstance(modal).close(); signupForm.reset(); }); }); + +// logout +const logout = document.querySelector('#logout'); +logout.addEventListener('click', (e) => { + e.preventDefault(); + auth.signOut().then(() => { + console.log('user signed out'); + }) +}); \ No newline at end of file From 3ac74b4597736f23c6f2588a14d2c576342d9179 Mon Sep 17 00:00:00 2001 From: Shaun Date: Sun, 2 Dec 2018 18:23:21 +0000 Subject: [PATCH 06/21] lesson-7 --- scripts/auth.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/scripts/auth.js b/scripts/auth.js index 63d6e64..d9f8b07 100644 --- a/scripts/auth.js +++ b/scripts/auth.js @@ -23,4 +23,24 @@ logout.addEventListener('click', (e) => { auth.signOut().then(() => { console.log('user signed out'); }) +}); + +// login +const loginForm = document.querySelector('#login-form'); +loginForm.addEventListener('submit', (e) => { + e.preventDefault(); + + // get user info + const email = loginForm['login-email'].value; + const password = loginForm['login-password'].value; + + // log the user in + auth.signInWithEmailAndPassword(email, password).then((cred) => { + console.log(cred.user); + // close the signup modal & reset form + const modal = document.querySelector('#modal-login'); + M.Modal.getInstance(modal).close(); + loginForm.reset(); + }); + }); \ No newline at end of file From 10000ef20bc67ffc2fc535b300afd4a1525ff74f Mon Sep 17 00:00:00 2001 From: Shaun Date: Sun, 2 Dec 2018 18:33:31 +0000 Subject: [PATCH 07/21] lesson-8 --- scripts/auth.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/scripts/auth.js b/scripts/auth.js index d9f8b07..9615801 100644 --- a/scripts/auth.js +++ b/scripts/auth.js @@ -1,3 +1,12 @@ +// listen for auth status changes +auth.onAuthStateChanged(user => { + if (user) { + console.log('user logged in: ', user); + } else { + console.log('user logged out'); + } +}) + // signup const signupForm = document.querySelector('#signup-form'); signupForm.addEventListener('submit', (e) => { @@ -20,9 +29,7 @@ signupForm.addEventListener('submit', (e) => { const logout = document.querySelector('#logout'); logout.addEventListener('click', (e) => { e.preventDefault(); - auth.signOut().then(() => { - console.log('user signed out'); - }) + auth.signOut(); }); // login @@ -36,7 +43,6 @@ loginForm.addEventListener('submit', (e) => { // log the user in auth.signInWithEmailAndPassword(email, password).then((cred) => { - console.log(cred.user); // close the signup modal & reset form const modal = document.querySelector('#modal-login'); M.Modal.getInstance(modal).close(); From 0a124ac06e80eabf88426efdf163b593ddb8b203 Mon Sep 17 00:00:00 2001 From: Shaun Date: Sun, 2 Dec 2018 18:37:54 +0000 Subject: [PATCH 08/21] lesson-9 --- index.html | 17 +---------------- scripts/auth.js | 4 ++++ scripts/index.js | 21 +++++++++++++++++++++ 3 files changed, 26 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index 229905a..f8c9c08 100644 --- a/index.html +++ b/index.html @@ -102,22 +102,7 @@

Create Guide


    -
  • -
    Guide title
    -
    Lorem ipsum dolor sit amet.
    -
    • -
  • -
    Guide title
    -
    Lorem ipsum dolor sit amet.
    -
    • -
  • -
    Guide title
    -
    Lorem ipsum dolor sit amet.
    -
    • -
  • -
    Guide title
    -
    Lorem ipsum dolor sit amet.
    -
    • +
diff --git a/scripts/auth.js b/scripts/auth.js index 9615801..d3b8cdf 100644 --- a/scripts/auth.js +++ b/scripts/auth.js @@ -1,3 +1,7 @@ +db.collection('guides').get().then(snapshot => { + setupGuides(snapshot.docs); +}); + // listen for auth status changes auth.onAuthStateChanged(user => { if (user) { diff --git a/scripts/index.js b/scripts/index.js index 73f710f..eb51431 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,3 +1,24 @@ +// DOM elements +const guideList = document.querySelector('.guides'); + +// setup guides +const setupGuides = (data) => { + + let html = ''; + data.forEach(doc => { + const guide = doc.data(); + const li = ` +
  • +
    ${guide.title}
    +
    ${guide.content}
    +
    • + `; + html += li; + }); + guideList.innerHTML = html + +}; + // setup materialize components document.addEventListener('DOMContentLoaded', function() { From 1b161ef63728c3e16ae1beae5060df0220f541da Mon Sep 17 00:00:00 2001 From: Shaun Date: Sun, 2 Dec 2018 18:44:38 +0000 Subject: [PATCH 09/21] lesson-10 --- scripts/auth.js | 8 ++++---- scripts/index.js | 29 +++++++++++++++++------------ 2 files changed, 21 insertions(+), 16 deletions(-) diff --git a/scripts/auth.js b/scripts/auth.js index d3b8cdf..a56177b 100644 --- a/scripts/auth.js +++ b/scripts/auth.js @@ -1,13 +1,13 @@ -db.collection('guides').get().then(snapshot => { - setupGuides(snapshot.docs); -}); - // listen for auth status changes auth.onAuthStateChanged(user => { if (user) { console.log('user logged in: ', user); + db.collection('guides').get().then(snapshot => { + setupGuides(snapshot.docs); + }, err => console.log(err.message)); } else { console.log('user logged out'); + setupGuides([]); } }) diff --git a/scripts/index.js b/scripts/index.js index eb51431..6ab38d2 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -4,18 +4,23 @@ const guideList = document.querySelector('.guides'); // setup guides const setupGuides = (data) => { - let html = ''; - data.forEach(doc => { - const guide = doc.data(); - const li = ` -
  • -
    ${guide.title}
    -
    ${guide.content}
    -
    • - `; - html += li; - }); - guideList.innerHTML = html + if (data.length) { + let html = ''; + data.forEach(doc => { + const guide = doc.data(); + const li = ` +
  • +
    ${guide.title}
    +
    ${guide.content}
    +
    • + `; + html += li; + }); + guideList.innerHTML = html + } else { + guideList.innerHTML = '
    Login to view guides
    '; + } + }; From 34e563be0fb3430686012a41546f44667cef0afc Mon Sep 17 00:00:00 2001 From: Shaun Date: Sun, 2 Dec 2018 19:09:50 +0000 Subject: [PATCH 10/21] lesson-11 --- scripts/auth.js | 6 +++--- scripts/index.js | 14 ++++++++++++++ 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/scripts/auth.js b/scripts/auth.js index a56177b..84654ef 100644 --- a/scripts/auth.js +++ b/scripts/auth.js @@ -1,12 +1,12 @@ // listen for auth status changes auth.onAuthStateChanged(user => { if (user) { - console.log('user logged in: ', user); db.collection('guides').get().then(snapshot => { setupGuides(snapshot.docs); - }, err => console.log(err.message)); + setupUI(user); + }); } else { - console.log('user logged out'); + setupUI(); setupGuides([]); } }) diff --git a/scripts/index.js b/scripts/index.js index 6ab38d2..8186088 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,5 +1,19 @@ // DOM elements const guideList = document.querySelector('.guides'); +const loggedOutLinks = document.querySelectorAll('.logged-out'); +const loggedInLinks = document.querySelectorAll('.logged-in'); + +const setupUI = (user) => { + if (user) { + // toggle user UI elements + loggedInLinks.forEach(item => item.style.display = 'block'); + loggedOutLinks.forEach(item => item.style.display = 'none'); + } else { + // toggle user elements + loggedInLinks.forEach(item => item.style.display = 'none'); + loggedOutLinks.forEach(item => item.style.display = 'block'); + } +}; // setup guides const setupGuides = (data) => { From ee4c3ba40738d99cc3a25f41d705d2efdc4d383f Mon Sep 17 00:00:00 2001 From: Shaun Date: Sun, 2 Dec 2018 22:09:57 +0000 Subject: [PATCH 11/21] lesson-11 --- index.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index f8c9c08..e248503 100644 --- a/index.html +++ b/index.html @@ -16,19 +16,19 @@