I have a problem displaying the standard Meteor user accounts login template {{> atForm }} in my React based Meteor application.
I am using a wrapper component to display Blaze based templates in my React application. I am trying to implement the standard login form of Meteors useraccounts package. But when I am using {{> atForm }} in the Blaze Template the login form is not displayed. But when I lock a specific state like {{> atForm state='signUp'}} then the form is displayed.
Wrapper Component
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
export default class AccountsUI extends Component{
componentDidMount() {
this.view = Blaze.render(Template.LoginTemplate,
ReactDOM.findDOMNode(this.container));
}
componentWillUnmount(){
Blaze.remove(this.view);
}
render () {
return <span ref={(ref) => this.container = ref} />
}
}
Blaze Template
<template name="LoginTemplate">
{{> atForm }} //Not displayed
{{> atForm state='signUp'}} // Displayed
</template>
But also other internal states like {{> atForm state='signIn'}} are not displayed as well.
Packages in .meteor
useraccounts:unstyled
accounts-password
Do you have a suggestion why this is the case and how I can resolve this problem ?
Thanks in advance.
Answer is solved by myself. The problem was, that I was already logged in when i rewrote my code. So the only thing that was missing was to log out. So if anyone has the same problem, always check if you are already logged in, in your application. If so, be sure to log out, before adding the {{> atForm}} into your template.
Uninstalling accounts-ui seemed to fix this for me in my case
Related
In Vue 3, when I register a component to use, I use the following in my .js file:
import blogpost from '../../../blogpost.vue'
app.use(blogpost);
I create a simple component, i.e. BlogPost.vue.
<!-- BlogPost.vue -->
<template>
<h4>{{ title }}</h4>
</template>
<script>
export default {
name: 'BlogPost',
props: ['title']
}
</script>
In my html file, I call the following:
<div id="app">
<blogpost title = 'test'/>
</div>
When I run the app, I get the following:
runtime-core.esm-bundler.js?fea0:38 [Vue warn]: Failed to resolve
component: blogpost.
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
It's like Vue can't render the component. I am using webpack to compile, so if I put the wrong location in, it errors out. So the location is right, I guess?
Is there something I am doing wrong?
I don't know whether you have solved this, anyway, here is the answer. Use app.component() to globally register a component (look here).
I switched to Flow Router and I have a problem. how can I access the parent template data? with Iron Router the data was coming from router and was available inside the template, so if I wanted to access a parent data Template.parentData() was working.
But in Flow Router the data is not coming from router, it comes from helpers and Template.parentData() doesn't have the data in it anymore!
<template name="myTemplate">
{{#if Template.subscriptionsReady}}
{{> showPost parentPost }}
{{> newPost }}
{{/if}}
</template>
Template.myTemplate.helpers({
parentPost: function(){ return Posts.findOne({...})}
});
Template.newPost.events({
'submit .js-new-post':function(event,template){
console.log(Template.parentData(1).parentPost);
}});
You need to pass that data through to the Template.
E.g. {{> newPost parentPost=mydatahere}}
See more here: http://guide.meteor.com/blaze.html#name-data-contexts
I have a page header template, which has a title variable like so:
{{> pageHeader title="questions"}}
<template name="pageHeader">
<h1>{{title}}</h1>
</template>
This works fine. But I use i18n to set my titles, like {{i18n 'title'}}.
How can I use this in the template call? When I use this it doesn't work:
{{> pageHeader title="{{i18n 'title'}}"}}
Not yet on master branch of meteor but on develop: https://github.com/meteor/meteor/issues/5066
If you update to the 1.2 release candidate you can already use this feature.
Update to the rc:
meteor update --release METEOR#1.2-rc.10
Use the nested sub-expressions:
{{> pageHeader title=(i18n 'title')}}
You can resolve the i18n in your .js file.
Your template would be
{{> pageHeader title=i18nTitle}}
and you'd have a helper that would solve for the i18n
Template.xxx.helpers({
i18nTitle: function() {
return i18nMethod('title');
}
});
I'm trying to implement my own login buttons on meteor via:
<template name="login">
<div id="login-buttons">
{{#if currentUser}}
Hello, {{currentUser.profile.name}}
<button id='logout-button' class='small'>Sign Out</button>
{{else}}
<div class="service-login-buttons">
{{#each services}}
{{> _loginButtonsLoggedOutSingleLoginButton}}
{{/each}}
</div>
{{/if}}
</div>
</template>
main.js:
Template.login.helpers({
services: function() {
return getLoginServices();
}
})
Problem is, getLoginServices() doesn't seem to work, I also tried Accounts._loginButtons.getLoginServices() , doesn't exist either.
Any ideas (accounts-ui version 1.15 if it helps) ?
I just worked on the same issue and was able to get the login buttons working.
I performed this with the packages accounts-password 1.1.1 and ian:accounts-ui-bootstrap-3 1.2.71 installed.
My HTML looks similar to yours, but note that difference in the template that I'm calling. I browsed through the Accounts._loginButtons object and looked through the meteor github to find a template I wanted to use Meteor Github re: login buttons
<template name = "intro">
<div class = "container-fluid black">
<div class="service-login-buttons">
{{#each service}}
{{> _loginButtonsLoggedOutAllServices}}
{{/each}}
</div>
</div>
</template>
For my meteor version I found that Accounts._loginButtons.getLoginServices() worked for returning the login services available. If this doesn't work can you take a look at the Accounts._loginButtons object to see what is available?
Template.intro.helpers({
service:function(){
return Accounts._loginButtons.getLoginServices();
}
})
I have a layout with 2 containers 1)productView and 2)calendarView. My Router is configured as follows:
this.route('productDetail', {
layout: 'main',
path: '/products/:_id',
waitnOn: function(){...},
data: function(){...},
yieldTemplates: {
'calendarView: { to: calendar }
}
});
I now want to achieve that whenever the route changes (e.g. from 'products/1' to 'products/2') only the productView is re-rendered and that calendarView does nothing. As for now every time the 'productDetail/:id' route is called the 'calendarView' function 'Template.calendarView.rendered' gets called and re-renders the template. My 'main' template looks like this:
<template name="main">
<div>
{{yield}}
</div>
<div>
{{yield 'calendar'}}
</div>
</template>
Is there a way to tell the router to only render certain templates? Or is there a better solution?
Any help is much appreciated.
Is there a reason why you use the router for the calendar view ?
I think one solution may be not to use the router for the calendar view
<template name="main">
<div>
{{yield}}
</div>
<div>
{{>calendar}}
</div>
</template>