Customizing default Accounts-ui

[krister viirsaar]

I am logging my progress for others in need. This is very much the hackyest thing I've had to do in Meteor so far, I hope there will be a better solution in the future.

Looking through the docs ad internet it is clear that a simple translation of the accounts-ui package is impossible. So I took the advice of some Stackoverflow guy and copied the Accounts-ui-unstyled and accounts-ui as normal files, from github, straight to my project.

I was able to translate everything, but there were two problems.

1. Console gave error about "loginButtonsSession" being undefined

Solution was to take every accounts-ui-unstyled .js file and replace all instances of "loginButtonsSession" with what it's supposed to correspond to: "Accounts._loginButtonsSession".

Don't know JS enough to understand this problem any deeper.

2. When a user follows the reset-password link I get a few errors:

Uncaught TypeError: Cannot read property 'set' of undefined
Uncaught TypeError: Cannot read property 'ServiceConfiguration' of undefined

The solution here was to go into login_buttons_dialogs.js and encapsulate the first two if's into a timeout. Like this

Meteor.setTimeout(function(){

  if (Accounts._resetPasswordToken) {

    Accounts._loginButtonsSession.set('resetPasswordToken', Accounts._resetPasswordToken);

  }

  if (Accounts._enrollAccountToken) {

    Accounts._loginButtonsSession.set('enrollAccountToken', Accounts._enrollAccountToken);

  }

}, 1000)

[David Collier]

Krister hi -

thanks for sharing this, I'm about to do the same thing! did you check your work into a package anywhere?

I believe Luca ( @splendido ) is the expert on styling the accounts UI and has done a number of versions

https://github.com/splendido?tab=repositories

for bootstrap, semantic-ui and other FE frameworks. Though not sure if he implemented localisation too.

btw which i18n package are you using?

/dc

[Luca Mussi (@splendido)]

Hi all,

Thanks for mentioning accounts-templates David!

Yes, localization is implemented through accounts-t9n by @softwarerero which now includes more than 20 languages.

What more, you can overwrite/customize almost all texts appearing on atForm, just have a look at the documentation.

Btw, in case you'll go for a try, any feedback is truly welcome!

Luca