@@ -18,7 +18,9 @@ var selectedciv = null;
1818var buildorder = null ;
1919var buildordercolumns = 2 ;
2020var usp = new URLSearchParams ( window . location . search ) ;
21- import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js" ; import firebaseConfig from '../json/fs.js' ; const app = initializeApp ( firebaseConfig ) ; import { getFirestore , doc , getDoc , setDoc , collection , updateDoc , addDoc } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-firestore.js" ; const db = getFirestore ( ) ;
21+ import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js" ; import firebaseConfig from '../json/fs.js' ; const app = initializeApp ( firebaseConfig ) ;
22+ import { getFirestore , doc , getDoc , setDoc , collection , updateDoc , addDoc } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-firestore.js" ; const db = getFirestore ( ) ;
23+ import { getAuth , createUserWithEmailAndPassword , signInWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-auth.js" ; const auth = getAuth ( ) ;
2224if ( isNaN ( usp . get ( "c" ) ) ) {
2325 for ( let i = 0 ; i < civilizations . length ; i ++ ) {
2426 if ( usp . get ( "c" ) == civilizations [ i ] . abbr ) {
@@ -62,6 +64,8 @@ for (let i = 0; i < civilizations.length; i++) {
6264 str += "><a href=\"build.html?c=" + civilizations [ i ] . abbr + "\">✎ " + civilizations [ i ] . civilization + "</a></li>" ;
6365}
6466str += "<li class=\"mobile-only\"><a class =\"gold\" href=\"index.html\">👁 Browse all Builds</a></li>" ;
67+ str += "<li class=\"mobile-only\"><a href=\"#\" class=\"logged-in modal-trigger\" data-target=\"modal-account\">👤 Your Account</a></li>" ;
68+ str += "<li class=\"mobile-only\"><a href=\"#\" class=\"logged-out modal-trigger\" data-target=\"modal-signup\">👤 Login / Signup</a></li>" ;
6569str += "<li class=\"mobile-only\"><a href=\"https://github.com/LENpolygon/Build-Order-Tool-AoE4-\">💻 View Github Page</a></li>" ;
6670str += "<li class=\"mobile-only\"><a href=\"https://ko-fi.com/lenpolygon\">💰 Support Website</a></li>" ;
6771str += "<li class=\"mobile-only\"><a style=\"color: aqua;\" id=\"copyForOverlayBtnMobile\">🗗 Build to Clipboard (text)</a></li>" ;
@@ -523,4 +527,80 @@ document.getElementById('tooltipBox').style.display = "none";
523527// RANDOMIZE background
524528//////////////////////////////////////////////////
525529//const backgroundOptions = ["02celebration", "03focuslongbowmen", "04lordrobertsb", "07raisedstakestwoknights", "10mongoltrebuchet", "11chinesetradecaravans", "12mongolscharging", "15paytributeb", "alarm"];
526- //document.getElementById("background").style.backgroundImage = "url(img/" + backgroundOptions[Math.floor(Math.random() * backgroundOptions.length)] + ".png)";
530+ //document.getElementById("background").style.backgroundImage = "url(img/" + backgroundOptions[Math.floor(Math.random() * backgroundOptions.length)] + ".png)";
531+
532+ // signup
533+ const signupForm = document . querySelector ( '#signup-form' ) ;
534+ signupForm . addEventListener ( 'submit' , ( e ) => {
535+ e . preventDefault ( ) ;
536+ // get user info
537+ const email = signupForm [ 'signup-email' ] . value ;
538+ const password = signupForm [ 'signup-password' ] . value ;
539+ // sign up the user
540+ createUserWithEmailAndPassword ( auth , email , password ) . then ( cred => {
541+ return setDoc ( doc ( db , "users" , cred . user . uid ) , { user : signupForm [ 'username' ] . value } ) ;
542+ } ) . then ( ( ) => {
543+ // console.log(cred.user);
544+ // close the signup modal & reset form
545+ const modal = document . querySelector ( '#modal-signup' ) ;
546+ M . Modal . getInstance ( modal ) . close ( ) ;
547+ signupForm . reset ( ) ;
548+ } ) ;
549+ } ) ;
550+
551+ // logout
552+ const logout = document . querySelector ( '#logout' ) ;
553+ logout . addEventListener ( 'click' , ( e ) => {
554+ e . preventDefault ( ) ;
555+ const modal = document . querySelector ( '#modal-account' ) ;
556+ M . Modal . getInstance ( modal ) . close ( ) ;
557+ auth . signOut ( ) ;
558+ } )
559+
560+ // login
561+ const loginForm = document . querySelector ( '#login-form' ) ;
562+ loginForm . addEventListener ( 'submit' , ( e ) => {
563+ e . preventDefault ( ) ;
564+ // get user info
565+ const email = loginForm [ 'login-email' ] . value ;
566+ const password = loginForm [ 'login-password' ] . value ;
567+ signInWithEmailAndPassword ( auth , email , password ) . then ( cred => {
568+ // console.log(cred.user);
569+ // close the login modal & reset form
570+ const modal = document . querySelector ( '#modal-signup' ) ;
571+ M . Modal . getInstance ( modal ) . close ( ) ;
572+ loginForm . reset ( ) ;
573+ } )
574+ } )
575+
576+ // listen for auth status changes
577+ auth . onAuthStateChanged ( user => {
578+ console . log ( user ) ;
579+ if ( user ) {
580+ setupUI ( user ) ;
581+ } else {
582+ setupUI ( ) ;
583+ }
584+ } )
585+
586+ const loggedOutLinks = document . querySelectorAll ( '.logged-out' ) ;
587+ const loggedInLinks = document . querySelectorAll ( '.logged-in' ) ;
588+ const accountDetails = document . querySelector ( '.account-details' ) ;
589+ const setupUI = ( user ) => {
590+ if ( user ) {
591+ accountDetails . innerHTML = `<div>Logged in as ${ user . email } ;
592+ // toggle UI elements
593+ loggedInLinks . forEach ( item => item . style . display = 'block' ) ;
594+ loggedOutLinks . forEach ( item => item . style . display = 'none' ) ;
595+ } else {
596+ // hide account info
597+ accountDetails . innerHTML = '' ;
598+ loggedInLinks . forEach ( item => item . style . display = 'none' ) ;
599+ loggedOutLinks . forEach ( item => item . style . display = 'block' ) ;
600+ }
601+ }
602+ // setup materialize components
603+ document . addEventListener ( 'DOMContentLoaded' , function ( ) {
604+ var modals = document . querySelectorAll ( '.modal' ) ;
605+ M . Modal . init ( modals ) ;
606+ } ) ;
0 commit comments