I'm a bit lost on how to implement the firebase-auth element. Any examples would be appreciated, I haven't managed to find any yet.
Thanks
On this question, Glenn Vandeuren posts the following:
Element
<!--
#license
Copyright (c) 2015 Glenn Vandeuren. All rights reserved.
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-button/paper-button.html">
<dom-module id="login-button">
<style>
:host {
display: block;
box-sizing: border-box;
}
</style>
<template>
<paper-button raised>Login using <span>[[service]]</span></paper-button>
</template>
</dom-module>
<script>
Polymer({
is: 'login-button',
properties: {
service: String
},
listeners: {
'tap': '_handleTap'
},
_handleTap: function () {
this.fire('login', this.service);
}
});
</script>
Index
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>login-button Demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../login-button.html">
</head>
<body>
<login-button service="google"></login-button>
<login-button service="twitter"></login-button>
<script>
document.addEventListener('login', function(service) {
// handleLogin();
alert(service.detail);
});
</script>
</body>
</html>
I ended up getting auth to work by adapting this example element by HackITtoday for my firebase urls. It's as simple as adding the element like:
<hi9-login></hi9-login>
Related
I am trying to use ace editor without webpack(without build step) in vue 3 CDN based build. but was unable to find a suitable library which works well with vue3.
Here is the code without ace editor:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue 3 Quickstart</title>
<link rel="icon" href="./favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue#3/dist/vue.global.prod.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div id="app">
ABC
</div>
<div id="counter"> Counter: {{ counter }} </div>
<script type="module">
const Counter = {
data() {
return {
counter: 0
}
},
mounted() {
setInterval(() => {
this.counter++
}, 1000)
}
}
Vue.createApp(Counter).mount('#counter');
</script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin="anonymous"></script>
</body>
</html>
Ref of library that can be used : https://www.npmjs.com/package/vue3-ace-editor
I have done everything according to the documentation provided on https://fullcalendar.io/docs/google-calendar
I created a new calendar for this specific purpose.
I have purposely left the API key and calendarID blank
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../fullcalendar.min.css' rel='stylesheet' />
<link href='../fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../fullcalendar.min.js'></script>
<script src='fullcalendar/gcal.js'></script>
<script>
$(function () {
$('#calendar').fullCalendar({
googleCalendarApiKey: '',
events: {
googleCalendarId: ''
}
});
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
Solved Check comments for answer
I am trying to implement Firebase Authentication for my application authentication, but I get a Cannot read property 'signInWithEmailAndPassword' of undefined error.
Below follows the code.
index.html
<!--
#license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>ProcWeb</title>
<meta name="description" content="My App description">
<link rel="icon" href="/images/favicon.ico">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#3f51b5">
<!-- Add to homescreen for Chrome on Android. Fallback for manifest.json -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="My App">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="My App">
<!-- Homescreen icons -->
<link rel="apple-touch-icon" href="/images/manifest/icon-48x48.png">
<link rel="apple-touch-icon" sizes="72x72" href="/images/manifest/icon-72x72.png">
<link rel="apple-touch-icon" sizes="96x96" href="/images/manifest/icon-96x96.png">
<link rel="apple-touch-icon" sizes="144x144" href="/images/manifest/icon-144x144.png">
<link rel="apple-touch-icon" sizes="192x192" href="/images/manifest/icon-192x192.png">
<!-- Tile icon for Windows 8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="/images/manifest/icon-144x144.png">
<meta name="msapplication-TileColor" content="#3f51b5">
<meta name="msapplication-tap-highlight" content="no">
<script>
// Setup Polymer options
window.Polymer = {
dom: 'shadow',
lazyRegister: true
};
// Load webcomponentsjs polyfill if browser does not support native Web Components
(function() {
'use strict';
var onload = function() {
// For native Imports, manually fire WebComponentsReady so user code
// can use the same code path for native and polyfill'd imports.
if (!window.HTMLImports) {
document.dispatchEvent(
new CustomEvent('WebComponentsReady', {bubbles: true})
);
}
};
var webComponentsSupported = (
'registerElement' in document
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template')
);
if (!webComponentsSupported) {
var script = document.createElement('script');
script.async = true;
script.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
script.onload = onload;
document.head.appendChild(script);
} else {
onload();
}
})();
// Load pre-caching Service Worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js');
});
}
</script>
<link rel="import" href="/bower_components/platinum-sw/platinum-sw-elements.html">
<link rel="import" href="/bower_components/polymerfire/firebase-app.html">
<link rel="import" href="/bower_components/polymerfire/polymerfire.html">
<link rel="import" href="/src/my-app.html">
<style>
body {
margin: 0;
font-family: 'Roboto', 'Noto', sans-serif;
line-height: 1.5;
min-height: 100vh;
background-color: #eeeeee;
}
</style>
</head>
<body unresolved>
<!-- Configure Service Worker caching: -->
<platinum-sw-register
auto-register
skip-waiting
clients-claim
reload-on-install
href="/service-worker.js">
<platinum-sw-cache
default-cache-strategy="networkFirst">
</platinum-sw-cache>
</platinum-sw-register>
<!-- Configure Firebase app: -->
<firebase-app
name="procWeb"
apiKey="AIzaSyDA-JuUnKmucXk3VXMhk4r8CYihSELQyAA"
authDomain="procweb-28a01.firebaseapp.com"
databaseUrl="https://procweb-28a01.firebaseio.com">
</firebase-app>
<my-app></my-app>
<!-- Built with love using Polymer Starter Kit -->
</body>
</html>
my-app.html
<!--
#license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="my-icons.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<!--<link rel="import" href="../bower_components/polymerfire/firebase-app.html">
<link rel="import" href="../bower_components/polymerfire/firebase-auth.html">-->
<link rel="import" href="../bower_components/polymerfire/polymerfire.html">
<link rel="import" href="shared-styles.html">
<dom-module id="my-app">
<template>
<style>
:host {
--app-primary-color: #4285f4;
--app-secondary-color: black;
display: block;
}
app-header {
color: #fff;
background-color: var(--app-primary-color);
}
app-header paper-icon-button {
--paper-icon-button-ink-color: white;
}
.drawer-list {
margin: 0 20px;
}
.drawer-list a {
display: block;
padding: 0 16px;
text-decoration: none;
color: var(--app-secondary-color);
line-height: 40px;
}
.drawer-list a.iron-selected {
color: black;
font-weight: bold;
}
</style>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
</style>
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<app-drawer-layout fullbleed>
<!-- Drawer content -->
<app-drawer>
<app-toolbar>ProcWeb</app-toolbar>
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="view1" href="/view1">Home</a>
<a name="view1" href="/view1">Gestão de Clientes</a>
<a name="view2" href="/view2">Gestão de Processos</a>
<a name="view3" href="/view3">Agenda</a>
</iron-selector>
</app-drawer>
<!-- Main content -->
<app-header-layout has-scrolling-region>
<app-header condenses reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div main-title>ProcWeb</div>
</app-toolbar>
</app-header>
<!-- Configure Firebase app: -->
<!--<firebase-app
name="procWeb"
apiKey="AIzaSyDA-JuUnKmucXk3VXMhk4r8CYihSELQyAA"
authDomain="procweb-28a01.firebaseapp.com"
databaseUrl="https://procweb-28a01.firebaseio.com"
storageBucket="procweb-28a01.appspot.com"
messagingSenderId="621427834965">
</firebase-app>-->
<firebase-auth
id="auth"
app-name="procWeb"
user="{{user}}"
on-error="showError">
</firebase-auth>
<div hidden$="[[user]]" class="card">
<h3>Email/Password</h3>
<form on-submit="signInWithEmailAndPassword">
<paper-input label="Email" type="email" value="{{email}}"></paper-input>
<paper-input label="Password" type="password" value="{{password}}"></paper-input>
<paper-button type="submit" on-tap="signIn" raised class="custom indigo">Sign In</paper-button>
</form>
</div>
<div hidden$="[[!user]]">
<iron-pages
selected="[[page]]"
attr-for-selected="name"
fallback-selection="view404"
role="main">
<my-view1 name="view1"></my-view1>
<my-view2 name="view2"></my-view2>
<my-view3 name="view3"></my-view3>
<my-view404 name="view404"></my-view404>
</iron-pages>
</div>
</app-header-layout>
</app-drawer-layout>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'my-app',
properties: {
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged'
}
},
observers: [
'_routePageChanged(routeData.page)'
],
_routePageChanged: function(page) {
this.page = page || 'view1';
},
_pageChanged: function(page) {
// Load page import on demand. Show 404 page if fails
var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
this.importHref(resolvedPageUrl, null, this._showPage404, true);
},
_showPage404: function() {
this.page = 'view404';
},
signIn: function() {
// firebase.auth().signInWithEmailAndPassword(this.email, this.password).then(function(response){
// this.page = 'view1';
// }).catch(function(error){
// console.log(error);
// });
this.$.auth.signInWithEmailAndPassword(this.email, this.password).then(function(response){
}).catch(function(error){
});
}
});
})();
</script>
</dom-module>
I'm using Polymer 1.0 and Firebase 3.0.
Am I missing something? Thanks.
I have a custom element called "datasource.html" which loads a json using iron-ajax. Now, I want to use the JSON data into "app.html" and eventually into "categories.html"
Then in app.html, I want to use this same value of myattr and transfer the same to categories.html.
Now, datasource.html prints the data on screen but categories.html shows nothing on the page.
What I want is that I load data in datasource.html once and then use the data anywhere in the project.
Trying to figure this out for last 2 days. Still got nothing.
Thanks in advance.
Here is my index.html file
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="lgelements/datasource.html">
<link rel="import" href="lgelements/app.html">
</head>
<body>
<dom-module id="landing-page" attributes="myattr">
<template>
<lg-datasource myattr="{{myattr}}"></lg-datasource>
<lg-app myattr="{{myattr}}"></lg-app>
</template>
</dom-module>
<script>
Polymer({
is: "landing-page",
});
</script>
<landing-page></landing-page>
</body>
</html>
Here is datasource.html
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<dom-module id="lg-datasource" attributes="myattr" hidden>
<template>
<iron-ajax url="../data.json" auto handleAs="json" last-response="{{myattr}}"></iron-ajax>
<template is="dom-repeat" items="[[myattr]]">
<a href="[[item.url]]" target="_blank">
<h1>[[item.name]]</h1>
</a>
</template>
</template>
</dom-module>
<script>
Polymer({
is: "lg-datasource",
});
</script>
Here is my app.html
<link rel="import" href="categories.html">
<dom-module id="lg-app" attributes="myattr" vertical layout>
<template is="auto-binding">
<h1>[[myAttr]]</h1>
<lg-categories myattr="{{myattr}}"></lg-categories>
</template>
</dom-module>
<script>
Polymer({
is: "lg-app",
});
</script>
And here is categories.html
<dom-module id="lg-categories" attributes="myattr">
<template is="auto-binding">
<h2>MY NAME IS MANIK</h2>
<template is="dom-repeat" items="{{myattr}}">
<a href="[[item.url]]" target="_blank">
<h1>[[item.name]]</h1>
</a>
</template>
</template>
</dom-module>
<script>
Polymer({
is: "lg-categories",
});
</script>
Use double curly brackets {{}} when you use the item inside the element with is="dom-repeat". So change it to:
<template is="dom-repeat" items="{{myattr}}">
<a href="{{item.url}}" target="_blank">
<h1>{{item.name}}</h1>
</a>
</template>
Also you should expose the myattr as a property and remove the template in datasource.html file.
Polymer({
is: "lg-datasource",
properties : {
myattr : Array
}
});
I have only skimmed your code, but I had the same kind of problem,... a child element that was the datasource and the parent that was supposed to display it. To get the data binding to work I needed to call _setPropertyName(data) in the child. Can't seem to find where this is documented but that's how its done internally in iron-ajax (look at the "loading" property).
I am trying to style the paper-drawer-panel using the Custom CSS Mixins as mentioned here. The paper-drawer-panel.css file applies
#apply(--paper-drawer-panel-left-drawer-container);
#apply(--paper-drawer-panel-main-container);
respectively for the drawer and the main containers. But, the styles set using the mixins do not seem to be working
The below is the code for paper-drawer-panel demo I have used.
<html>
<head>
<title>paper-drawer-panel demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/paper-styles/paper-styles.html">
<link rel="stylesheet" href="bower_components/paper-styles/demo.css">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">
<style>
#drawerPanel {
--paper-drawer-panel-left-drawer-container: {
background-color: #eee;
};
--paper-drawer-panel-main-container: {
background-color: gray;
};
}
</style>
</head>
<body class="unresolved fullbleed">
<paper-drawer-panel id="drawerPanel">
<div drawer>
<div>Drawer content... </div>
</div>
<div main>
<div>
<paper-button paper-drawer-toggle raised>toggle drawer</paper-button>
</div>
</div>
</paper-drawer-panel>
</body>
</html>
The documentation over at https://elements.polymer-project.org/elements/paper-drawer-panel states that this is valid too.
Styling paper-drawer-panel:
To change the main container: paper-drawer-panel {
--paper-drawer-panel-main-container: { background-color: gray; }; }
To change the drawer container when it's in the left side:
paper-drawer-panel { --paper-drawer-panel-left-drawer-container: {
background-color: white; }; }
So, what am I doing wrong in trying to get this simple thing working?
I am also testing the new styling schema of Polymer 1.0. It seems that you need to add is="custom-style" to the style tag.