Skip to content

Instantly share code, notes, and snippets.

@r03ert0 r03ert0/firebase-test.html
Last active Apr 15, 2018

Embed
What would you like to do?
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.