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".
Related
I've tried different approaches but all are problematic.
So first of all I was using webview, but as per electron documentation, this tag is undergoing major architectural changes and it's recommended to use iframe or other alternatives. Furthermore, the webview tag gives me a warning while used alongside VueJS that the component is not registered. I understand this component doesn't exist within HTML standards and is something specific to electron, so I am not sure how to tell Vue to ignore or recognize it in the use case of an electron app.
Coming to the iframe problem, approach one of loading the file directly via src, gives me the obvious error Not allowed to load local resource:. Turning off webSecurity though allows the file to load but I read it's not recommended to turn it off. I am not sure if there are specific use case where it's safe to turn it off or shouldn't be at all.
I decided to try via file protocol as I already have it in place. The protocol code:
protocol.registerFileProtocol('downloads', (request, callback) => {
const url = request.url.substring('downloads:///'.length)
const location = path.normalize(paths.downloads(url))
callback({ path: location })
})
Though when I load the file this way, the renderer process crash without errors. Is there something in addition to the above which would help loading local files via iframe?
Edit 1
My use case is the following: I have a typical entry point to an index.html which contains code for a VueJS app.
if (app.isPackaged) {
window.loadFile(join(__dirname, '../renderer/index.html'))
} else {
// 🚧 Use ['ENV_NAME'] avoid vite:define plugin
const url = `http://${process.env['VITE_DEV_SERVER_HOST']}:${process.env['VITE_DEV_SERVER_PORT']}`
window.loadURL(url)
window.webContents.openDevTools()
}
Inside that VueJS app, I require to list html files from a directory. I am able to achieve so via webview but I have tried to move away from it for the reason mentioned above. I tried using iframe but encountered issues as well. If there's a setting that doesn't turn off all security and allows me to load the file via iframe, that would be ideal.
This is kind of the reverse of this question where they're using an iframe, running into the "not allowed to load local resource" and being told to use a <webview> instead.
The <webview> docs list BrowserView as another alternative which is what I would recommend here. That should be much easier to work with than an iframe.
const { app, BrowserView, BrowserWindow } = require('electron')
app.whenReady().then(() => {
const win = new BrowserWindow()
const view = new BrowserView()
win.setBrowserView(view)
view.setBounds({ x: 0, y: 0, width: 300, height: 300 })
view.webContents.loadFile('<yourFile>')
})
Even though it is not recommended to use webview tag, I decided to go forward as it's the only thing that works for me. The only issue then was this error where Vue does not recognize the tag. To work around that error/warning, I had to update my vite.js config:
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag === 'webview'
}
}
}),
// ...
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
}
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.
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 :)!
We are developing a website using websphere portal 8. Is there a way to prevent the portal to integrate the portal CSS in the mashup files that are being served on a page request? The CSS contains all the lotus ui styles we do not use on that website.
Yes, you can. Portal 8 Theme has different profiles, you should understand profile like 'how many js/css/other portal staff' is loaded on the page. You can say page use light profile. To set profile to page you should open page properties and set property
resourceaggregation.profile=profiles/profile_lightweight.json
But even in that case you'll see portal css that you do not want to see.
All profiles json files located in static part of your theme theme/static/themes/Portal8.0/profiles
By default there are 4 files
profile_admin.json
profile_deffered.json
profile_full.jon
profile_lightweight.json
I suppose you able to create your own profiles.
If you take a closer look at this profiles you'll see what modules this profiles brings to page, for example lightweight profile
"moduleIDs": [
"wp_theme_portal_80",
"wp_portlet_css",
"wp_one_ui",
"wp_one_ui_dijit",
"wp_legacy_layouts",
"wp_client_ext",
"wp_status_bar",
"wp_theme_menus",
"wp_theme_skin_region",
"wp_theme_high_contrast",
"wp_layout_windowstates"
],
In your case you interested with wp_theme_portal_80 - how to know what this module contains?
To know it you should open contributions directory and lookup theme.json file. Open it and you'll see next
"modules":[{
"id":"wp_theme_portal_80",
"prereqs":[{
"id":"wp_client_main"
},{
"id":"wp_client_ext"
}],
"contributions":[{
"type":"head",
"sub-contributions":[{
"type":"js",
"uris":[{
"value":"/js/head.js"
}]
}, {
"type":"css",
"uris":[{
"value":"/css/master.css"
}, {
"value":"/css/masterRTL.css",
"type":"rtl"
}]
}]
}]
},
This files will we included in your html markup if you use lightweight profile. I suppose now it is clear how to avoid portal css on the page - just edit profile json/create own profile/edit theme.json Be careful to broke default portal theme if you'll be modify theme.json or default profiles
Hope it will helpful for you.