r03ert0/firebase-test.html

## firebase-test.html
<html>
<head>
    <meta charset="UTF-8">
    <style>
    #picture {
        width:1rem;
        height:1rem;
        vertical-align:middle;
        margin-right:0.5rem;
    }
    .signInOut {
        cursor: pointer;
        text-decoration: underline;
    }
    </style>
    <title>Moments</title>
    <script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
    <script>
      // Initialize Firebase
      var config = {
        apiKey: "AIzaSyD1q8d3i0jikA5jRQKcDydFbIw8v2bFRc0",
        authDomain: "cartographer-a6f04.firebaseapp.com",
        databaseURL: "https://cartographer-a6f04.firebaseio.com",
        projectId: "cartographer-a6f04",
        storageBucket: "",
        messagingSenderId: "489953549172"
      };
      firebase.initializeApp(config);
    </script>
    <script src="https://cdn.firebase.com/libs/firebaseui/2.7.0/firebaseui.js"></script>
    <link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.7.0/firebaseui.css" />
</head>
<body>
    <!-- The surrounding HTML is left untouched by FirebaseUI.
         Your app may use that space for branding, controls and other customizations.-->
    <div style='float:right'><img id='picture'/><b><span id="sign-in-status"></span></b><span id="sign-in"></span></div>
    <h1>Moments</h1>

    <div id="firebaseui-auth-container"></div>
    <div id="account-details"></div>

    <div id='old'></div>
    <input onchange='push(this.value)'></input>
</body>

<script>
// FirebaseUI config.
var uiConfig = {
    signInSuccessUrl: '/', // <url-to-redirect-to-on-success>
    signInOptions: [
        // Leave the lines as is for the providers you want to offer your users.
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID,
        /*
        firebase.auth.GithubAuthProvider.PROVIDER_ID
        firebase.auth.FacebookAuthProvider.PROVIDER_ID,
        firebase.auth.TwitterAuthProvider.PROVIDER_ID,
        firebase.auth.PhoneAuthProvider.PROVIDER_ID
        */
    ],
    signInFlow: 'popup',
    // Terms of service url.
    tosUrl: 'tos.html'
};
// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());

/*
// The start method will wait until the DOM is loaded.
if (ui.isPendingRedirect()) {
ui.start('#firebaseui-auth-container', uiConfig);
}
*/

function initApp() {
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        console.log("there is a user signed in");
        // User is signed in.
        var displayName = user.displayName;
        var email = user.email;
        var emailVerified = user.emailVerified;
        var photoURL = user.photoURL;
        var uid = user.uid;
        var phoneNumber = user.phoneNumber;
        var providerData = user.providerData;
        user.getIdToken().then(function(accessToken) {
          document.getElementById('sign-in-status').textContent = 'Signed in';
          document.getElementById('sign-in').innerHTML = ' (<a class="signInOut" onclick="signOut()">Sign out</a>)';

/*
          document.getElementById('account-details').textContent = JSON.stringify({
            displayName: displayName,
            email: email,
            emailVerified: emailVerified,
            phoneNumber: phoneNumber,
            photoURL: photoURL,
            uid: uid,
            accessToken: accessToken,
            providerData: providerData
          }, null, '  ');
*/
          document.getElementById('sign-in-status').textContent = displayName;
          document.getElementById('picture').src = photoURL;
        });
      } else {
        console.log("No user signed in");
        // User is signed out.
        document.getElementById('sign-in-status').textContent = '';
        document.getElementById('sign-in').innerHTML = '<a class="signInOut" onclick="signIn()">Sign in</a>';;
        document.getElementById('account-details').textContent = 'null';
        document.getElementById('picture').style.display = 'none';
      }
    }, function(error) {
      console.log(error);
    });
    console.log('that was initApp');
}

function signIn() {
    ui.start('#firebaseui-auth-container', uiConfig);
}

function signOut() {
    firebase.auth().signOut();
}

function push(str) {
    firebase.database().ref('moments').push().set({moment: str})
    .then(function(snapshot) {
        console.log('success!!'); // some success method
    }, function(error) {
        console.log('error' + error);
    });
}

function pull() {
    firebase.database().ref('moments').once('value').then((s) => {
        const a=s.val();
        let m;
        document.getElementById('old').innerHTML = '';
        for(m of Object.keys(a)) {
            document.getElementById('old').innerHTML += `
<i>${a[m].moment}</i><br />
`
        }
    });
}

function listen() {
    var moments = firebase.database().ref('moments');
    moments.on('value', (s) => {
        const a=s.val();
        let m;
        document.getElementById('old').innerHTML = '';
        for(m of Object.keys(a)) {
            document.getElementById('old').innerHTML += `
<i>${a[m].moment}</i><br />
`
        }
    });
}
window.addEventListener('load', function() {
    initApp();
    pull();
    listen();
});
</script>

</html>
	<html>
	<head>
	<meta charset="UTF-8">
	<style>
	#picture {
	width:1rem;
	height:1rem;
	vertical-align:middle;
	margin-right:0.5rem;
	}
	.signInOut {
	cursor: pointer;
	text-decoration: underline;
	}
	</style>
	<title>Moments</title>
	<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
	<script>
	// Initialize Firebase
	var config = {
	apiKey: "AIzaSyD1q8d3i0jikA5jRQKcDydFbIw8v2bFRc0",
	authDomain: "cartographer-a6f04.firebaseapp.com",
	databaseURL: "https://cartographer-a6f04.firebaseio.com",
	projectId: "cartographer-a6f04",
	storageBucket: "",
	messagingSenderId: "489953549172"
	};
	firebase.initializeApp(config);
	</script>
	<script src="https://cdn.firebase.com/libs/firebaseui/2.7.0/firebaseui.js"></script>
	<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.7.0/firebaseui.css" />
	</head>
	<body>
	<!-- The surrounding HTML is left untouched by FirebaseUI.
	Your app may use that space for branding, controls and other customizations.-->
	<div style='float:right'><img id='picture'/><b><span id="sign-in-status"></span></b><span id="sign-in"></span></div>
	<h1>Moments</h1>

	<div id="firebaseui-auth-container"></div>
	<div id="account-details"></div>

	<div id='old'></div>
	<input onchange='push(this.value)'></input>
	</body>

	<script>
	// FirebaseUI config.
	var uiConfig = {
	signInSuccessUrl: '/', // <url-to-redirect-to-on-success>
	signInOptions: [
	// Leave the lines as is for the providers you want to offer your users.
	firebase.auth.GoogleAuthProvider.PROVIDER_ID,
	firebase.auth.EmailAuthProvider.PROVIDER_ID,
	/*
	firebase.auth.GithubAuthProvider.PROVIDER_ID
	firebase.auth.FacebookAuthProvider.PROVIDER_ID,
	firebase.auth.TwitterAuthProvider.PROVIDER_ID,
	firebase.auth.PhoneAuthProvider.PROVIDER_ID
	*/
	],
	signInFlow: 'popup',
	// Terms of service url.
	tosUrl: 'tos.html'
	};
	// Initialize the FirebaseUI Widget using Firebase.
	var ui = new firebaseui.auth.AuthUI(firebase.auth());

	/*
	// The start method will wait until the DOM is loaded.
	if (ui.isPendingRedirect()) {
	ui.start('#firebaseui-auth-container', uiConfig);
	}
	*/

	function initApp() {
	firebase.auth().onAuthStateChanged(function(user) {
	if (user) {
	console.log("there is a user signed in");
	// User is signed in.
	var displayName = user.displayName;
	var email = user.email;
	var emailVerified = user.emailVerified;
	var photoURL = user.photoURL;
	var uid = user.uid;
	var phoneNumber = user.phoneNumber;
	var providerData = user.providerData;
	user.getIdToken().then(function(accessToken) {
	document.getElementById('sign-in-status').textContent = 'Signed in';
	document.getElementById('sign-in').innerHTML = ' (<a class="signInOut" onclick="signOut()">Sign out</a>)';

	/*
	document.getElementById('account-details').textContent = JSON.stringify({
	displayName: displayName,
	email: email,
	emailVerified: emailVerified,
	phoneNumber: phoneNumber,
	photoURL: photoURL,
	uid: uid,
	accessToken: accessToken,
	providerData: providerData
	}, null, ' ');
	*/
	document.getElementById('sign-in-status').textContent = displayName;
	document.getElementById('picture').src = photoURL;
	});
	} else {
	console.log("No user signed in");
	// User is signed out.
	document.getElementById('sign-in-status').textContent = '';
	document.getElementById('sign-in').innerHTML = '<a class="signInOut" onclick="signIn()">Sign in</a>';;
	document.getElementById('account-details').textContent = 'null';
	document.getElementById('picture').style.display = 'none';
	}
	}, function(error) {
	console.log(error);
	});
	console.log('that was initApp');
	}

	function signIn() {
	ui.start('#firebaseui-auth-container', uiConfig);
	}

	function signOut() {
	firebase.auth().signOut();
	}

	function push(str) {
	firebase.database().ref('moments').push().set({moment: str})
	.then(function(snapshot) {
	console.log('success!!'); // some success method
	}, function(error) {
	console.log('error' + error);
	});
	}

	function pull() {
	firebase.database().ref('moments').once('value').then((s) => {
	const a=s.val();
	let m;
	document.getElementById('old').innerHTML = '';
	for(m of Object.keys(a)) {
	document.getElementById('old').innerHTML += `
	<i>${a[m].moment}</i><br />
	`
	}
	});
	}

	function listen() {
	var moments = firebase.database().ref('moments');
	moments.on('value', (s) => {
	const a=s.val();
	let m;
	document.getElementById('old').innerHTML = '';
	for(m of Object.keys(a)) {
	document.getElementById('old').innerHTML += `
	<i>${a[m].moment}</i><br />
	`
	}
	});
	}
	window.addEventListener('load', function() {
	initApp();
	pull();
	listen();
	});
	</script>

	</html>