Still in my fresh beginning with meteor, I'm having troubles setting up useraccounts:bootstrap with flowrouter.
So far, I was using accounts-ui for prototyping and all worked perfectly.
I've then modify the following packages:
remove accounts-ui
add useraccounts:bootstrap
add useraccounts:flow-routing
I also (still) have :
accounts-password
kadira:flow-router
arillo:flow-router-helpers
There seem to be no error in the console, regarding any eventual missing package.
let me know if you need to know more about the packages I'm using.
My problem is :
When I try to go to the route localhost:3000/signin or join, it loads for few seconds and then redirects me to localhost:3000 without displaying any auth related content.
I presume it might be my routes which are wrong.
here they are :
FlowRouter.route('/', {
name: 'App.home',
action(params, queryParams) {
BlazeLayout.render('App_body', {main: 'signin'});
},
});
AccountsTemplates.configure({
showForgotPasswordLink: true,
defaultTemplate: 'Auth_page',
defaultLayout: 'App_body',
defaultContentRegion: 'main',
defaultLayoutRegions: {}
});
// Define these routes in a file loaded on both client and server
AccountsTemplates.configureRoute('signIn', {
name: 'signin',
path: '/signin'
});
AccountsTemplates.configureRoute('signUp', {
name: 'join',
path: '/join'
});
AccountsTemplates.configureRoute('forgotPwd');
AccountsTemplates.configureRoute('resetPwd', {
name: 'resetPwd',
path: '/reset-password'
});
note: the "/" route above is my last trial, with direct link to the signin route. No success.
Also, when I try to insert the {{> atForm}} nothing displays, but I see that an empty div is created with a class="at-form".
Would really appreciate some help on this one, really stucked right now.
hmm, well. Found the answer and might be useful for beginners like me.
I was still logged in (while I was using accounts-ui), that's the reason why it wouldn't display any of the template to log in or sign up.
After clearing my browser cache (which logged me out) it solved the issue.
I can now see the login and signup forms as it should be.
Related
I installed Firebase in my react.js app, installed FirebaseUI, and got Google sign-in to work properly. However, there is absolutely no css stylesheet being applied to the Google signin button. I looked at the docs here https://firebase.google.com/docs/auth/web/firebaseui and visited the cdn link for the firebaseui.css file here https://cdn.firebase.com/libs/firebaseui/4.6.1/firebaseui.css but it just returns page not found. Where would I be able to find the firebase UI css stylesheet to apply to my firebaseui installation?
Also, I had to slightly edit the docs' (same doc page link as above) instruction code and instead of writing
ui.start('#firebaseui-auth-container', {
signInOptions: [
{
provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
requireDisplayName: false
}
]
});
I had to change it to
ui.start('#firebaseui-auth-container', {
signInOptions: [
{
provider: firebase.firebase_.auth.EmailAuthProvider.PROVIDER_ID,
requireDisplayName: false
}
]
});
to get to the correct firebase .PROVDER_ID variable. Is this because the firebase documentation is out of date? Has anyone else experienced a similar issue while using firebase and firebaseUI?
The link in the documentation is stale. When you come across things like this, you can use the "send feedback" button at the top of any page in the Firebase docs to let the team know.
You will want to use the links in the documentation on the Firebase UI GitHub repo instead. They start with "https://www.gstatic.com".
I'm using {{> atForm}} for login and register, and also these packages for users accounts-password accounts-base useraccounts:unstyled
I want to remove register possibilities for users.
It should be something in this list, but i'm not sure what i'm supposed to override.
Can anyone help?
Edit:
I also added this on the server,
AccountsTemplates.configure({
forbidClientAccountCreation : true
})
and it disabled the creation of users, but i need to remove it from the UI too, like u see in the picture.
For now, I just did this from the css :-)
.at-signup-link {
display none
}
I'm trying to localize my app with angular translate.
here are my modules :
angular.module('myapp', [
'angular-meteor',
'ui.router',
'ngMaterial',
'ngMessages',
'ngAnimate',
'ngCookies',
'pascalprecht.translate'
]);
Then my config :
angular.module('myapp').config(['$translateProvider', function ($translateProvider) {
$translateProvider.useStaticFilesLoader({
prefix: 'client/lib/translation/',
suffix: '.json'
});
$translateProvider.preferredLanguage('en-US');
}]);
my en-US.json file content :
{
"TITLE" : "hello"
}
And I'm testing it with this html :
<h1> {{"TITLE" | translate}}</h1>
I tested it with a table in a variable and it works well, the issue seems to be that my .json is not found or ignore, because it display
TITLE
instead of
hello
I'm currently working on the same issue. What it seems to be is that the digest cycle is running too early due to the external file/s being loading asynchronously.
A workaround: In your HTML use the attribute directive instead.
Example:
<p data-translate="TITLE"></p>
Disclaimer: This may not be the best solution, I am still learning AngularJS myself!
Actually I found the issue, I had to put my locales files in the public folder. So this is fixed.
This is a fully working example:
http://plnkr.co/edit/Ibq4EaFcvyUPGpqb81Jo?p=preview
To use a translation one can also use something like
{{"TITLE" | translate}}
or:
<h2 translate="TITLE"></h2>
I also had issues with loading the files, I eventually found the starting path seems to be the www folder.
Then in the config start without a forward slash, so this is what works for me in my app config:
.config(function ($translateProvider) {
//$translateProvider.fallbackLanguage("en");
$translateProvider.determinePreferredLanguage();
$translateProvider.useStaticFilesLoader({
prefix: 'js/translations/locale-',
suffix: '.json'
});
$translateProvider.use('en_US');
$translateProvider.preferredLanguage('en_US');
})
I found it by using the chrome debugger (chrome://inspect), it shows errors in the console that are not showing up in the usual terminal when running ionic with -lc.
I hope that helps anyone :)!
Currently, the only solutions I have found for animating between routes is just fade out the current page onBeforeAction and fade in the new page onAfterAction. But this is just lame.
I want to try to execute some really sleek transitions like these.
I believe this requires having multiple pages rendered on the page at the same time, but that seems very resources intensive and doesn't even seem to use iron router at all.
Any ideas how I can implement this?
I use a solution like this http://meteorpad.com/pad/5kii9SRbbnjiTHeQe
The MeteorPad doesn't allow to use IronRouter, so my example doesn't use it. In IronRouter you can use action() method to set "currentPage" session variable and always render "transitioner" template. Something like this:
Router.map(function() {
this.route('home', {
path: '/',
action: function() {
Session.set('currentPage', 'home');
this.render('transitioner');
}
});
this.route('about', {
action: function() {
Session.set('currentPage', 'about');
this.render('transitioner');
}
});
});
I use a wrapper for this. It also helps me to define transition styles and directions.
And be careful with subscriptions/unsubscriptions, becouse previous page will react to subscriptions changes before the transition is compelete!
This question seems to get asked a fair amount and there is no definitive solution, and a lot of answers out there are getting stale, or at least not applicable to the latest iron-router and Meteor 1.0.
I just did a bunch of searching around for the best answer and at least today it seems the packages for this are:
https://github.com/percolatestudio/momentum-iron-router/
and
https://github.com/ccorcos/meteor-transitioner/
The former hasn't been updated in a little while but has lots of commits. The latter has few commits but may be being actively worked on.
I'm in progress on trying them out so if I remember I'll check back in.
I'm trying to create an app that loads a website and then adds some custom CSS to adjust it to a mobile device.
I'm using window.open to load the page successfully, and I have a callback on loadstop where I'm calling browser.insertCSS, this is where the problem is.
If I do something like this:
browser.insertCSS({code:"body{background-color:red;}");
The style is applied correctly. However if I do this:
browser.insertCSS({file:"mobile-style.css");
And add the same CSS to the file, it doesn't get loaded
I have tried different paths (putting the file in the www folder, in the css folder, in the same folder as the JS file, and referencing it with "./mobile-style.css", "mobile-style.css", "/www/mobile-style.css", "/mobile-style.css" but none of them seem to load the file correctly.
I saw another post What should file paths fed to insertCSS() be relative to? where this same question was asked, but there is no accepted answer (I have tried the suggestion there and it doesn't work).
Any help would be greatly appreciated.
Thanks
Will
you have to wait until your inAppBrowser page loading finishes.
You must add an event listener:
var inApp = window.open('mypage.html', '_blank', 'location=no');
inApp.addEventListener('loadstop', function(){
inApp.insertCSS({
file: 'inAppStyle.css'
},onSuccess);
});
EDITED
Use this path for your android projects file:///android_asset/{your folder}
INFO: https://github.com/apache/cordova-plugin-file/blob/master/doc/index.md#android-file-system-layout
I couldn't find the right local path. Instead, I just uploaded the css file to the web and provided a regular URL
file: 'http://mywebsite.com/path-if-needed/my.css'
Not ideal to have an external dependency, but not a big deal since InAppBrowser itself requires internet access.
I probably know why it won't work, it is because your path isn't right, this css file should not put in www folder, neither the cordova project folder, u should put it into the server, for example, if ur browser is to visit http://192.168.1.1/admin, then the cordova only fetch this file when the browser is under the 192.168.1.1/admin, it fetch the file under the server directory.I don't know if u use any debug tool , if u use one, it's easy to find out what went wrong, ur console will log the error which path it fetch the css file and didn't get it.
If you want to add an external CSS file stored locally in the APP's sandbox and not around in the Internet, this is the only way, that is, you get the external file, you store it into a string variable, and then you insert such code into the Browser.
var inAppBrowserRef = cordova.InAppBrowser.open(url, "_blank", "location=no");
//when load stops call loadedCallbackFunction
inAppBrowserRef.addEventListener('loadstop', loadedCallbackFunction);
function loadedCallbackFunction() {
console.log("InAppBrowser Window loaded");
$.ajax({
type: "GET",
url: cordova.file.applicationDirectory + "www/css/myExternalCSS.css",
dataType: "text",
success: function (CSScode) {
inAppBrowserRef.insertCSS(
{ code: JScode},
function(){
console.log("CSS code Inserted Succesfully into inApp Browser Window");
});
},
error: function () {
console.error("Ajax Error");
}
});
}
You need the cordova-plugin-inappbrowser