edemaine:accounts-ui-bootstrap-3

v1.2.93Published 3 years ago

This package has not had recent updates. Please investigate it's current state before committing to using it in your project.

meteor-accounts-ui-bootstrap-3

Meteor accounts-ui styled with Twitter's Bootstrap 3, now with multi-language support.

This fork of ian:accounts-ui-bootstrap-3 incorporates the following fixes:

Installation

With Meteor >=0.9.0:

$ meteor add edemaine:accounts-ui-bootstrap-3

twbs:bootstrap is the recommended Meteor implementation of Twitter's Bootstrap, and is declared as a weak dependency in this package. nemo64:bootstrap is also supported. If you're using any other Bootstrap package, you're on your own regarding load order problems.

Install Bootstrap like so:

$ meteor add twbs:bootstrap

This package is a replacement for the official accounts-ui package, so remove it if it's already in your project:

$ meteor remove accounts-ui

You will also need at least one accounts plugin: meteor add accounts-password, meteor add accounts-github, etc.

How to use

Add {{> loginButtons}} to your template

Example:

1<div class="navbar navbar-default" role="navigation">
2	<div class="navbar-header">
3		<a class="navbar-brand" href="#">Project name</a>
4        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
5            <span class="sr-only">Toggle navigation</span>
6            <span class="icon-bar"></span>
7            <span class="icon-bar"></span>
8            <span class="icon-bar"></span>
9        </button>
10	</div>
11	<div class="navbar-collapse collapse">
12		<ul class="nav navbar-nav">
13			<li class="active"><a href="#">Link</a></li>
14		</ul>
15		<ul class="nav navbar-nav navbar-right">
16			{{> loginButtons}} <!-- here -->
17		</ul>
18	</div>
19</div>

You can also configure Accounts.ui to your liking as you would with the official accounts-ui package.

Add additional logged in actions

You can add additional markup to the logged in dropdown, e.g. to edit the user's account or profile, by defining a _loginButtonsAdditionalLoggedInDropdownActions template and specifying the corresponding events.

1<template name="_loginButtonsAdditionalLoggedInDropdownActions">
2	<button class="btn btn-default btn-block" id="login-buttons-edit-profile">Edit profile</button>
3</template>
1Template._loginButtonsLoggedInDropdown.events({
2	'click #login-buttons-edit-profile': function(event) {
3		Router.go('profileEdit');
4	}
5});

Note that the dropdown will close since we're not stopping the propagation of the click event.

Custom signup options

You can define additional input fields to appear in the signup form, and you can decide wether to save these values to the profile object of the user document or not. Specify an array of fields using Accounts.ui.config like so:

1Accounts.ui.config({
2    requestPermissions: {},
3    extraSignupFields: [{
4        fieldName: 'first-name',
5        fieldLabel: 'First name',
6        inputType: 'text',
7        visible: true,
8        validate: function(value, errorFunction) {
9          if (!value) {
10            errorFunction("Please write your first name");
11            return false;
12          } else {
13            return true;
14          }
15        }
16    }, {
17        fieldName: 'last-name',
18        fieldLabel: 'Last name',
19        inputType: 'text',
20        visible: true,
21    }, {
22        fieldName: 'gender',
23        showFieldLabel: false,      // If true, fieldLabel will be shown before radio group
24        fieldLabel: 'Gender',
25        inputType: 'radio',
26        radioLayout: 'vertical',    // It can be 'inline' or 'vertical'
27        data: [{                    // Array of radio options, all properties are required
28    		id: 1,                  // id suffix of the radio element
29            label: 'Male',          // label for the radio element
30            value: 'm'              // value of the radio element, this will be saved.
31          }, {
32            id: 2,
33            label: 'Female',
34            value: 'f',
35            checked: 'checked'
36        }],
37        visible: true
38    }, {
39        fieldName: 'country',
40        fieldLabel: 'Country',
41        inputType: 'select',
42        showFieldLabel: true,
43        empty: 'Please select your country of residence',
44        data: [{
45            id: 1,
46            label: 'United States',
47            value: 'us'
48          }, {
49            id: 2,
50            label: 'Spain',
51            value: 'es',
52        }],
53        visible: true
54    }, {
55        fieldName: 'terms',
56        fieldLabel: 'I accept the terms and conditions',
57        inputType: 'checkbox',
58        visible: true,
59        saveToProfile: false,
60        validate: function(value, errorFunction) {
61            if (value) {
62                return true;
63            } else {
64                errorFunction('You must accept the terms and conditions.');
65                return false;
66            }
67        }
68    }]
69});

Result:

Custom signup form example

Alternatively, if you prefer to pass values directly to the onCreateUser function, without creating new fields in the signup form, you can use the accountsUIBootstrap3.setCustomSignupOptions function. If it exists, the returned value is handled as the initial options object, which is later available in onCreateUser on the server. For example:

1accountsUIBootstrap3.setCustomSignupOptions = function() {
2    return {
3    	referrerId: Session.get('referrerId') // Or whatever
4    }
5}

Logout callback

If the function accountsUIBootstrap3.logoutCallback exists, it will be called as the callback of Meteor.logout. For example:

1accountsUIBootstrap3.logoutCallback = function(error) {
2  if(error) console.log("Error:" + error);
3  Router.go('home');
4}

Forcing lowercase email, username or password

This will force emails, usernames or passwords to be lowercase on signup and will also allow users to login using uppercase emails, usernames or passwords, as it will convert them to lowercase before checking against the database. Beware however that users who already have an account with uppercase usernames or passwords won't be able to login anymore.

1Accounts.ui.config({
2    forceEmailLowercase: true,
3    forceUsernameLowercase: true,
4    forcePasswordLowercase: true
5});

Note: If you allow your users to login using both username or email, that field will only be converted to lowercase if both forceEmailLowercase and forceUsernameLowercase are set to true.

Localization

The default language is English, but this package also comes with translations to many other languages built in. If you want to change the language run one of the following on the client:

1accountsUIBootstrap3.setLanguage('es'); // for Spanish
2accountsUIBootstrap3.setLanguage('ca'); // for Catalan
3accountsUIBootstrap3.setLanguage('fr'); // for French
4accountsUIBootstrap3.setLanguage('de'); // for German
5accountsUIBootstrap3.setLanguage('it'); // for Italian
6accountsUIBootstrap3.setLanguage('pt-PT'); // for Portuguese (Portugal)
7accountsUIBootstrap3.setLanguage('pt-BR'); // for Portuguese (Brazil)
8accountsUIBootstrap3.setLanguage('ru'); // for Russian
9accountsUIBootstrap3.setLanguage('el'); // for Greek
10accountsUIBootstrap3.setLanguage('ko'); // for Korean
11accountsUIBootstrap3.setLanguage('ar'); // for Arabic
12accountsUIBootstrap3.setLanguage('pl'); // for Polish
13accountsUIBootstrap3.setLanguage('zh-CN'); // for Chinese (China)
14accountsUIBootstrap3.setLanguage('zh-TW'); // for Chinese (Taiwan)
15accountsUIBootstrap3.setLanguage('nl'); // for Dutch
16accountsUIBootstrap3.setLanguage('ja'); // for Japanese
17accountsUIBootstrap3.setLanguage('he'); // for Hebrew
18accountsUIBootstrap3.setLanguage('sv'); // for Swedish
19accountsUIBootstrap3.setLanguage('uk'); // for Ukrainian
20accountsUIBootstrap3.setLanguage('fi'); // for Finnish
21accountsUIBootstrap3.setLanguage('vi'); // for Vietnamese
22accountsUIBootstrap3.setLanguage('sk'); // for Slovak
23accountsUIBootstrap3.setLanguage('be'); // for Belarusian
24accountsUIBootstrap3.setLanguage('fa'); // for Persian
25accountsUIBootstrap3.setLanguage('sr-Cyrl'); // for Serbian, Cyrillian script
26accountsUIBootstrap3.setLanguage('sr-Latn'); // for Serbian, Latin script
27accountsUIBootstrap3.setLanguage('hu'); // for Hungarian

If you want to implement your own language, use the map function like so:

1accountsUIBootstrap3.map('es', {
2    _resetPasswordDialog: {
3      title: 'Restablece tu contraseña',
4      cancel: 'Cancelar',
5      submit: 'Guardar'
6    },
7    _enrollAccountDialog: {
8      title: 'Escribe una contraseña',
9      cancel: 'Cerrar',
10      submit: 'Guardar contraseña'
11    },
12    // ...
13})

You can use the translation files in the i18n folder as an example.

Screenshots

Sign In Sign Up Configure Login Service