ourrss-firebase.html

<dom-module id="ourrss-firebase">

	<template>
		<link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive" rel="stylesheet">
		<style>
			.dark-primary-color {
				background: #0288D1;
			}

			.default-primary-color {
				background: #03A9F4;
			}

			.light-primary-color {
				background: #B3E5FC;
			}

			:host {

				font-family: 'Roboto', sans-serif;
				user-select: none;
				width: 100%;
				height: 100%;
			}

			:host label {
				font-size: 1rem;
			}

			:host #card {
				-webkit-transition: all 0.5s ease-in-out;
				-moz-transition: all 0.5s ease-in-out;
				-o-transition: all 0.5s ease-in-out;
				transition: all 0.5s ease-in-out;
				background-color: #FFF;
				color: #212121;
				font-size: 150%;
				padding: 1rem;
				display: table;
				margin: 0 auto;
				text-align: center;
				height: 10rem;
				border-radius: 50%;
				box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			}

			:host #card:hover {
				box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6.5px 27px 0 rgba(0, 0, 0, 0.38);
			}

			:host #card.expand {
				border-radius: 0%;
				padding: 1rem 0rem 1rem 0rem;
				width: 100%;
				box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0), 0 6px 20px 0 rgba(255, 255, 255, 0);
			}

			:host #ourIcon {
				transition: all 0.5s ease-in-out;
				-webkit-transition: all 0.5s ease-in-out;
				-moz-transition: all 0.5s ease-in-out;
				-o-transition: all 0.5s ease-in-out;
				display: table;
				margin: 0 auto;
				width: auto;
				max-height: 10rem;
				border-radius: 50%;
				box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			}

			:host .shrinkImage {
				-webkit-transform: scale(.5);
				-ms-transform: scale(.5);
				transform: scale(.5);
				box-shadow: initial;
			}

			:host .form {

				display: table;
				margin: 0 auto;
				display: table;
				margin: 0 auto;
				animation: fadeIn .5s ease-in 1;
				opacity: 1;
				-webkit-transition: all 0.5s ease-in-out;
				-moz-transition: all 0.5s ease-in-out;
				-o-transition: all 0.5s ease-in-out;
				transition: all 0.5s ease-in-out;
			}

			:host .hideForm {
				display: none;
				animation: fadeOut .1s ease-in 0;
				opacity: 0;
			}

			:host h5 {
				-webkit-margin-before: 0em;
				-webkit-margin-after: 0em;
			}

			:host textarea:focus,
			input:focus {
				outline: none;
			}

			:host input {
				padding: 1rem;
				border-color: transparent;
				border-bottom-color: #B3E5FC;

				font-size: 1.1rem;
				text-align: center;
			}

			:host input:focus {

				border-bottom-color: #0288d1;
				box-shadow: 0 0 0 30px white inset;
				-webkit-box-shadow: 0 0 0 30px white inset;
			}

			:host .button {
				color: #B3E5FC;
				background: #0288D1;
				padding: 1rem;
				font-size: 1.5rem;
				width: 100%;
				height: 50%;
				cursor: pointer;
				border: none;
			}

			:host .button:focus {
				border: none;
			}

			:host .button:link {
				width: 7rem;
				padding: 1rem;
				line-height: 2rem;
				text-decoration: none;
				color: #FFF;
			}

			:host .button:visited {
				text-decoration: none;
			}

			:host .button:hover {
				background-color: #03A9F4;
			}

			:host .button:active {
				-webkit-transform: scale(1.5);
				-ms-transform: scale(1.5);
				transform: scale(1.5);
			}


			:host #logout,
			:host #signup {
				color: #026da7;
				font-family: roboto;
				text-decoration: none;
				font-size: 1.5rem;
			}

			:host #logout:hover,
			:host #signup:hover {
				color: #03A9F4;
			}


			:host .grid-box {
				display: grid;
				grid-gap: 1rem;
				padding: 1rem 1rem 6.5rem 1rem;
				grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
			}

			:host .grid-box:after {
				content: "";
				display: table;
				clear: both;
			}

			:host [class*='col-'] {
				float: left;
			}

			:host .col-1-2 {
				width: 33.333%;
			}

			:host .col-2-2 {
				width: 33.333%;
			}

			:host .col-2-3 {
				width: 33.333%;
			}

			:host .container {
				width: 100%;
			}

			:host #login {
				transition: all .25s ease-in-out;
				font-family: 'Roboto', sans-serif;
				color: white;
				background-color: #0288d1;
				text-decoration: none;
				font-size: 1.5rem;
				text-align: center;
				box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
				cursor: pointer;
				display: block;
				padding: 1rem;
				outline: none;
			}

			:host #login:hover {
				box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.38);
			}

			/* :host #login:hover {
				background: #03A9F4;
			} */
		</style>

		<!--<div id="gridBox" class="grid-box center">-->
		<div class="container">
			<div id="card">
				<img id="ourIcon" src="img/icon.png" />

				<div class="container">
					<div class="form hideForm">
						<h5>Login</h5>
						<div class="grid-box">
							<input id="email" type="email" placeholder="Email" />
							<input id="password" type="password" placeholder="Password" />
							<div class="container">
								<a id="login" href="#" class="">Login</a>
								<br />
								<br />
								<a id="logout" href="#">Logout</a> |
								<a id="signup" href="#">Sign Up</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--</div>-->
	</template>

	<script src="https://www.gstatic.com/firebasejs/4.7.0/firebase.js"></script>
	<script>
		firebase.initializeApp({
			apiKey: "AIzaSyDsmTVrTljx1CNXeWdRByWM-8SdbKhUizI",
			authDomain: "studied-biplane-87708.firebaseapp.com",
			databaseURL: "https://studied-biplane-87708.firebaseio.com",
			projectId: "studied-biplane-87708"
		});
	</script>
	<script>

		class OurrssFirebase extends HTMLElement {

			init() {
				this.registerElements()
			}

			setProperties() {
				this.is = 'ourrss-firebase'
				this.log = (msg) => msg ? console.log(msg) : ''
				this.dump = (msg) => msg ? console.dir(msg) : console.dir(this)
				this.error = (msg) => console.error(this.is, ' ', msg)
				this.prom = (fn) => {
					const promise = new Promise((resolve, reject) => {
						fn()
					})
					return promise;
				}
				this.cancelBubble = (e) => {
					if (!e) var e = window.event;
					e.cancelBubble = true;
				}
			}

			// Fires when an instance was removed from the document.
			detachedCallback() {
				this.log('instance was removed.')
			}

			// Fires when an attribute was added, removed, or updated.
			attributeChangedCallback(attr, oldVal, newVal) {

				if (newVal) {
					console.log('-attr: ' + attr + '\n-oldVal: ' + oldVal + ' \n-newVal: ' + newVal)
					'firebase' == attr ? this.firebase = newVal : ''
					//'src' == attr ? this.dom.audio.src = newVal : ''
					this.log('LOGIN HAS ATTR')

					if('fireget' === attr){
						this.fireGet(firebase.auth().currentUser.uid)
					}
					if('fireput' === attr){
						this.firePut(firebase.auth().currentUser.uid)
					}
					//this.dump(this.firebase)
				}
			}

			// Fires when an instance was inserted into the document.
			attachedCallback() {

				var template = this.owner.querySelector('template')
				var clone = document.importNode(template.content, true)
				this.root = this.createShadowRoot()
				this.root.appendChild(clone)
				this.init()

			}


			// Fires when an instance of the element is created.
			createdCallback() {
				this.setProperties()
				this.parseAttributes()

				//console.log('instance was created.')
			}

			parseAttributes() {

				this.getAttribute('firebase') ? this.firebase = this.getAttribute('firebase') : ''
				//this.something = parseInt(this.getAttribute('something'));
			}

			registerElements() {

				this.dom = {}
				this.dom.gridBox = this.root.children.gridBox
				this.dom.card = this.root.getElementById('card')
				this.dom.login = this.root.getElementById('login')
				this.dom.email = this.root.getElementById('email')
				this.dom.icon = this.root.getElementById('ourIcon')
				this.dom.signup = this.root.getElementById('signup')
				this.dom.password = this.root.getElementById('password')
				this.dom.logout = this.root.getElementById('logout')
				this.dom.form = this.root.querySelector('.form')

				this.dom.listen = this.root.ownerDocument.querySelector('ourrss-listen')

				this.addListeners()

			}

			addListeners() {


				this.dom.icon.onclick = () => {
					//this.cancelBubble()
					console.dir(this)

					//todo maybe give img   border: 6pt solid #0288D1;     "accent-color";

					this.dom.card.classList.contains('expand') ? this.dom.card.classList.remove('expand') : this.dom.card.classList.add('expand')
					this.dom.icon.classList.contains('shrinkImage') ? this.dom.icon.classList.remove('shrinkImage') : this.dom.icon.classList.add('shrinkImage')
					this.dom.form.classList.contains('hideForm') ? this.dom.form.classList.remove('hideForm') : this.dom.form.classList.add('hideForm')

				}
				this.dom.signup.onclick = (e) => {
					//this.cancelBubble()
					console.log('SignAnch click')
					console.dir(this)

					firebase.auth().createUserWithEmailAndPassword(this.dom.email.value, this.dom.password.value)
						.catch(function (error) {
							// Handle Errors here.
							var errorCode = error.code;
							var errorMessage = error.message;
							if (errorCode == 'auth/weak-password') {
								alert('The password is too weak.');
							} else {
								alert(errorMessage);
							}
							console.log(error);
						});
				}

				this.dom.login.onclick = (e) => {
					//this.cancelBubble()

					console.log('logAnch click')
					console.dir(this)

					console.log('log check ', this.dom.email.value)
					console.log('log check ', this.dom.password.value)
					firebase.auth().signInWithEmailAndPassword(
						String(this.dom.email.value)
						, String(this.dom.password.value)
					)
						.then(x => console.dir(x))
						.catch(e => console.error(e))

				}

				this.dom.logout.addEventListener('click', (e) => {
					console.log('logging Out')
					firebase.auth().signOut().then(() => {
						console.log('Sign-out successful.')
					}).catch((error) => {
						console.log('An error happened.')
					});
				})

				this.ready()
			}

			ready() {
				//console.log('RAN')
				//this.firebaseSync(firebase.auth().currentUser.uid)

			}

			fireGet(uid) {
				console.log('fireGet ', uid)
				if (uid) {

					firebase.database()
						.ref(`users/${uid}/`)
						.once('value')
						.then(snap => {
							const obj = snap.val()
							console.log('WTF >>')
							console.dir(obj)
							Util.mergeFeeds(obj)
								.then(newFeeds => {
									if(typeof newFeeds === 'object'){
										newFeeds.map(x => this.dom.listen.setAttribute('mk-card', x.title))
										ipc.send('message', ({ head: `Pulled Feeds`, body: `Added ${newFeeds.length} Feeds` }))
									}
									else {
										ipc.send('message', ({ head: newFeeds, body: `` }))
									}
								})
								.catch(e => console.error(e))
						})
						.catch(e => console.error(e))
				}
				else {
					ipc.send('message', ({ head: `Not Signed In`, body: 'You can login via Settings in the drawer.' }))
				}
			}
			firePut(uid) {
				console.log('firePut ', uid)
				if (uid) {
					
					console.log('Logged into firebase')
										
					const store = new Store()
					const audio = store.get('audio')
					audio.feeds.map(x => x.items.length = 0)
					
					const updates = {};
					updates[`users/${uid}`] = audio;
					
					console.dir(updates)
					firebase.database().ref().update(updates)
						.then(x => ipc.send('message', ({ head: `Synced Feeds`, body: x })))
						.catch(e => console.error(e))
				}
			}


		}

		if (document.createElement('ourrss-firebase').constructor !== OurrssFirebase) {
			OurrssFirebase.prototype.owner = (document._currentScript || document.currentScript).ownerDocument;
			document.registerElement('ourrss-firebase', OurrssFirebase);
		}

		
	</script>


</dom-module>