AccountsTemplates is a suite of packages for the Meteor.js platform. It provides highly customizable user accounts UI templates for many different front-end frameworks. At the moment it includes forms for sign in, sign up, forgot password, reset password, change password, enroll account, and link or remove of many 3rd party services.

The package useraccounts:core contains all the core logic and templates' helpers and events used by dependant packages providing styled versions of the accounts UI. This means that developing a version of the UI with a different styling is just a matter of writing a few dozen of html lines, nothing more!

Thanks to accounts-t9n you can switch to your preferred language on the fly! Available languages are now: Arabic, Czech, French, German, Italian, Polish, Portuguese, Russian, Slovenian, Spanish, Swedish and Vietnamese.

It also uses iron-router for basic routing and content protection.

You can get a better idea about this heading to http://accounts-templates.meteor.com/ and then, on your choice, to:

• http://accounts-templates-bootstrap.meteor.com/
• http://accounts-templates-foundation.meteor.com/
• http://accounts-templates-semantic-ui.meteor.com/

Any comments, suggestions, testing efforts, and PRs are very very welcome! Please use the repository issues tracker for reporting bugs, problems, ideas, discussions, etc..

• Telescope
• bootstrappers.io
• Henfood

Aren't you on the list?! If you have a production app using accounts templates, let me know! I'd like to add your link to the above ones.

• Features
• Quick Start
  • Available Versions
  • Setup
  • Templates
• Basic Customization
  • I18n Support
  • Configuration API
  • Options
  • Routing
  • Content Protection
• Advanced Customization
  • Configuring Texts
    • Form Title
    • Button Text
  • Disabling Client-side Accounts Creation
  • Form Fields Configuration
  • CSS Rules
• Wrapping Up for Famo.us
• Side Notes
  • 3rd Party Login Services Configuration
• Contributing

• fully customizable
• security aware
• internationalization support thanks to accounts-t9n
• custom sign-up fields
• robust server side sign-up field validation
• easy content protection
• return to previous route after sign-in (even for random sign in choice and not only after required sign-in)
• fully reactive, Blaze fast!
• no use of Session object
• very easily stylizable for different font-end frameworks
• ...wrap it up for famo.us with a simple meteor line!

• useraccounts:unstyled with plain html and no CSS rules
• useraccounts:bootstrap styled for Twitter Bootstrap
• useraccounts:foundation styled for Zurb Foundation
• useraccounts:semantic-ui styled for Semantic UI
• plus others coming soon...

Just choose one of the packages among the available styled versions and install it via meteorite:

meteor add useraccounts:bootstrap

Warning: You don't have to add useraccounts:core to your app! It is automatically added when you add useraccounts:<something>...

Then add at least one login service:

meteor add accounts-password
meteor add accounts-facebook
meteor add accounts-google
...

Note: 3rd party services need to be configured... more about this here

And finally call AccountsTemplates.init() at meteor startup, on both the client and the server: the easiest way is to put the call inside a file shared between both. For example your file lib/config/at_config.js should contain at least the following lines:

Meteor.startup(function(){
    AccountsTemplates.init();
});

And that's it!

...but don't expect to see much without doing something more ;-) This is to let you configure your app exactly the way you wish, without imposing anything beforehand!

{{> atForm}}

{{> atForm state='signUp'}}

this will prevent the template to change its content. See internal states for more details...

i18n is achieved using accounts-t9n. The only thing you have to do is ensure

T9n.setLanguage('<lang>');

is called somewhere, whenever you want to switch language.

AccountsTemplates.configure({
    // Behaviour
    confirmPassword: true,
    enablePasswordChange: true,
    forbidClientAccountCreation: false,
    overrideLoginErrors: true,
    sendVerificationEmail: false,

    // Appearance
    showAddRemoveServices: false,
    showForgotPasswordLink: true,
    showLabels: true,
    showPlaceholders: true,

    // Client-side Validation
    continuousValidation: false,
    negativeFeedback: false,
    negativeValidation: true,
    positiveValidation: true,
    positiveFeedback: true,

    // Privacy Policy and Terms of Use
    privacyUrl: 'privacy',
    termsUrl: 'terms-of-use',

    // Redirects
    homeRoutePath: '/home',
    redirectTimeout: 4000,

    // Texts
    texts: {
      button: {
          signUp: "Register Now!"
      },
      socialSignUp: "Register",
      title: {
          forgotPwd: "Recover Your Passwod"
      },
    },
});

There are no routes provided by default. But you can easily configure routes for sign in, sign up, forgot password, reset password, change password, enroll account using AccountsTemplates.configureRoute. This is done internally relying on the awesome Iron-Router package.

The simplest way is to make the call passing just the route code (available codes are: changePwd, enrollAccount, forgotPwd, resetPwd, signIn, signUp):

AccountsTemplates.configureRoute('signIn');

This will set up the sign in route with a full-page form letting users access your app.

But you can also pass in more options to adapt it to your needs with:

AccountsTemplates.configureRoute(route_code, options);

The following is a complete example of a route configuration:

AccountsTemplates.configureRoute('signIn', {
    name: 'signin',
    path: '/login',
    template: 'myLogin',
    layoutTemplate: 'myLayout',
    redirect: '/user-profile',
});

Fields name, path, template, and layoutTemplate are passed down directly to Router.map (see the official iron router documentation here for more details), while redirect permits to specify where to redirect the user after successful form submit. Actually, redirect can be a function so that, for example, the following:

AccountsTemplates.configureRoute('signIn', {
    redirect: function(){
        var user = Meteor.user();
        if (user)
          Router.go('/user/' + user._id);
    }
});

will redirect to, e.g., '/user/ae8WQQk6DrtDzA2AZ' after succesful login :-)

All the above fields are optional and fall back to default values in case you don't provide them. Default values are as follows:

If layoutTemplate is not specified, it falls back to what is currently set up with Iron-Router. If redirect is not specified, it default to the previous route (obviously routes set up with AccountsTemplates.configureRoute are excluded to provide a better user experience). What more, when the login form is shown to protect private content (see Content Protection, the user is redirect to the protected page after successful sign in or sign up, regardless of whether a redirect parameter was passed for signIn or signUp route configuration or not.

When navigating in code, you would use the Route name like Rounter.go('atSignIn')

AccountsTemplates.ensureSignedIn

Router.onBeforeAction(AccountsTemplates.ensureSignedIn, {
    except: ['home', 'atSignIn', 'atSignUp', 'atForgotPassword']
});

Router.onBeforeAction(AccountsTemplates.ensureSignedIn, {
    only: ['profile', 'privateStuff']
});

Router.map(function() {
    this.route('home', {
        path: '/',
        template: 'homeMain'
    });

    this.route('aboutPage', {
        path: '/about',
        template: 'about'
    });

    this.route('private1', {
        path: '/private1',
        template: 'privatePage1',
        onBeforeAction: AccountsTemplates.ensureSignedIn
    });

    this.route('private2', {
        path: '/private2',
        template: 'privatePage2',
        onBeforeAction: function(pause){
            AccountsTemplates.ensureSignedIn.call(this, pause);

            // Some more stuff to check advanced permission an the like...
        }
    });
});

In this case only private1 and private2 routes are protected with sign-in access. Please note that ensureSignedIn is called through the call method passing this (the Router object) and pause as parameters inside onBeforeAction for route private2 in order to achieve correct functioning (see here).

possibly have a look at the iron-router documentation for more details.

AccountsTemplates.configure({
    texts: {
        optionalField: "optional",
        pwdLink_pre: "",
        pwdLink_link: "forgotPassword",
        pwdLink_suff: "",
        sep: "OR",
        signInLink_pre: "ifYouAlreadyHaveAnAccount",
        signInLink_link: "signin",
        signInLink_suff: "",
        signUpLink_pre: "dontHaveAnAccount",
        signUpLink_link: "signUp",
        signUpLink_suff: "",
        socialAdd: "add",
        socialConfigure: "configure",
        socialRemove: "remove",
        socialSignIn: "signIn",
        socialSignUp: "signUp",
        socialWith: "with",
        termsPreamble: "clickAgree",
        termsPrivacy: "privacyPolicy",
        termsAnd: "and",
        termsTerms: "terms",
    }
};

AccountsTemplates.configure({
    texts: {
      title: {
        changePwd: "Password Title",
        enrollAccount: "Enrol Title",
        forgotPwd: "Forgot Pwd Title",
        resetPwd: "Reset Pwd Title",
        signIn: "Sign In Title",
        signUp: "Sign Up Title",
      }
    }
});

AccountsTemplates.configure({
    texts: {
        button: {
          changePwd: "Password Text",
          enrollAccount: "Enroll Text",
          forgotPwd: "Forgot Pwd Text",
          resetPwd: "Reset Pwd Text",
          signIn: "Sign In Text",
          signUp: "Sign Up Text",
        }
    }
});

AccountsTemplates.configure({
    texts: {
        info: {
            emailSent: "info.emailSent",
            pwdChanged: "info.passwordChanged",
            pwdReset: "info.passwordReset",
            pwdSet: "info.passwordReset",
            singUpVerifyEmail: "Registration Successful! Please check your email and follow the instructions.",
        }
    }
});

AccountsTemplates.configure({
    texts: {
        errors: {
            mustBeLoggedIn: "error.accounts.Must be logged in",
            pwdMismatch: "error.pwdsDontMatch",
        }
    }
});

The above calls simply set all values as the current default ones. Note: The above list of errors refres to those set directly by AccountsTemplates only! Errors which comes from the Accounts packages cannot be overwritten (at least not easily...) Please have a look at Form Fields Configuration to lear how to set validation errors on a field basis.

AccountsTemplates.config({
    forbidClientAccountCreation: true
});

Accounts.config({
  forbidClientAccountCreation : true
});

displayName, placeholder, and errStr can also be an accounts-t9n registered key, in which case it will be translated based on the currently selected language. In case you'd like to specify a key which is not already provided by accounts-t9n you can always map your own keys. To learn how to register new labels, please refer to the official documentation.

Furthermore, you can pass an object for displayName, placeholder to specify different texts for different form states. The matched pattern is:

{
    default: Match.Optional(String),
    changePwd: Match.Optional(String),
    enrollAccount: Match.Optional(String),
    forgotPwd: Match.Optional(String),
    resetPwd: Match.Optional(String),
    signIn: Match.Optional(String),
    signUp: Match.Optional(String),
}

which permits to specify a different text for each different state, or a default value to be used for states which are not explicitely provided. For example:

AccountsTemplates.addField({
    _id: 'password',
    type: 'password',
    placeholder: {
        signUp: "At least six characters"
    },
    required: true,
    minLength: 6,
    re: /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/,
    errStr: 'At least 1 digit, 1 lowercase and 1 uppercase',
});

asks AccountsTemplates to display "At least six characters" as the placeholder for the password field when the sign up form is display, and to display "Password" (the capitalized _id_) in any other case.

Custom validation can be achieved by providing a regular expression or a function. In case you go for the function solution, this:

AccountsTemplates.addField({
    _id: 'name',
    type: 'text',
    displayName: "Name",
    func: function(value){return value === 'Full Name';},
    errStr: 'Only "Full Name" allowed!',
});

will require the name input to be exactly "Full Name" (though this might not be that interesting...). If instead you do something along the following line:

AccountsTemplates.addField({
    _id: 'phone',
    type: 'tel',
    displayName: "Phone",
    required: true,
    func: function (number) {
        if (Meteor.isServer){
            return isValidPhone(number);
        }
        return true;
    },
    errStr: 'Invalid Phone number!',
});

supposing isValidPhone is available only server-side, you will be validating the field only server-side, on form submission. If, differently you do it this way:

if (Meteor.isServer){
    Meteor.methods({
        validatePhone: function (number) {
            return isValidPhone(number);
        },
    });
}

AccountsTemplates.addField({
    _id: 'phone',
    type: 'tel',
    displayName: "Phone",
    required: true,
    func: function(val){
        Meteor.call('validatePhone', val, function (error, valid) {
            if (error) {
                console.log(error.reason);
            } else {
                if (valid)
                    AccountsTemplates.setFieldError('phone', false);
                else
                    AccountsTemplates.setFieldError('phone', 'Invalid Phone number!');
            }
        });
        return true;
    },
    errStr: 'Invalid Phone number!',
});

you can achieve also client-side validation, even if there will be a bit of delay before getting the error displayed...

Note: AccountsTemplates.setFieldError(fieldName, value) is the method used internally to deal with inputs' validation states. A null value means non-validated, false means correctly validated, no error, and any other value evaluated as true (usually strings specifying the reason for the validation error), are finally interpreted as error and displayed where more appropriate.

This is an example about how to add Checkboxes, Selects, and Radios to the sign up fields:

AccountsTemplates.addField({
    _id: "gender",
    type: "select",
    displayName: "Gender",
    select: [
        {
            text: "Male",
            value: "male",
        },
        {
            text: "Female",
            value: "female",
        },
    ],
});

AccountsTemplates.addField({
    _id: "fruit",
    type: "radio",
    displayName: "Preferred Fruit",
    select: [
        {
        text: "Apple",
        value: "aa",
      }, {
        text: "Banana",
        value: "bb",
      }, {
        text: "Carrot",
        value: "cc",
      },
    ],
});

AccountsTemplates.addField({
    _id: "mailing_list",
    type: "checkbox",
    displayName: "Subscribe me to mailing List",
});

please note the select list which lets you specify the values for the choice. The value value of corresponding selected text will be picked up and added into the profile field of the user object.

There are a number of special ids used for basic input fields. These are:

• username
• email
• username_and_email
• password
• password_again
• current_password
• new_password
• new_password_again

Any other id will be interpreted as an additional sign up field. In case a special field is not explicitly added, it will be automatically inserted at initialization time (with appropriate default properties).

You can use AccountsTemplates.addField(options) to configure an input field. This apply for both special fields and custom ones. For example you can do:

AccountsTemplates.addField({
    _id: 'phone',
    type: 'tel',
    displayName: "Landline Number",
});

The above snippet asks AccountsTemplates to draw an additional input element within the sign-up form.

Another possibility is to add many additional fields at once using addFields:

AccountsTemplates.addFields([
    {
        _id: 'phone',
        type: 'tel',
        displayName: "Landline Number",
    },
    {
        _id: 'fax',
        type: 'tel',
        displayName: "Fax Number",
    }
]);

There is also a removeField method which can be used to remove predefined required fields and adding them again specify different options.

AccountsTemplates.removeField('password');
AccountsTemplates.addField({
    _id: 'password',
    type: 'password',
    required: true,
    minLength: 6,
    re: "(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{6,}",
    errStr: 'At least 1 digit, 1 lower-case and 1 upper-case',
});

In order to let the user register with both a username and an email address and let him the possibility to log in using one of them, both the username and email fields must be added. This is an example about how to configure such a behaviour:

AccountsTemplates.removeField('email');
AccountsTemplates.addFields([
  {
      _id: "username",
      type: "text",
      displayName: "username",
      required: true,
      minLength: 5,
  },
  {
      _id: 'email',
      type: 'email',
      required: true,
      displayName: "email",
      re: /.+@(.+){2,}\.(.+){2,}/,
      errStr: 'Invalid email',
  }
]);

This will trigger the automatic insertion of the special field username_and_email to be used for the sign in form. If you wish to further customize the username_and_email field you can add it together with the other two:

AccountsTemplates.removeField('email');
AccountsTemplates.addFields([
  {
      _id: "username",
      type: "text",
      displayName: "username",
      required: true,
      minLength: 5,
  },
  {
      _id: 'email',
      type: 'email',
      required: true,
      displayName: "email",
      re: /.+@(.+){2,}\.(.+){2,}/,
      errStr: 'Invalid email',
  },
  {
      _id: 'username_and_email',
      type: 'text',
      required: true,
      displayName: "Login",
  }
]);

<div class="at-form">
  <!-- Title -->
  <div class="at-title">
    <h3>Create an Account</h3>
  </div>
  <!-- Social Buttons for Oauth Sign In / Sign Up-->
  <div class="at-oauth">
    <button class="at-social-btn" id="at-facebook" name="facebook">
      <i class="fa fa-facebook"></i> Sign in with Facebook
    </button>
    <button class="at-social-btn" id="at-twitter" name="twitter">
      <i class="fa fa-twitter"></i> Sign in with Twitter
    </button>
  </div>
  <!-- Services Separator -->
  <div class="at-sep">
    <strong>OR</strong>
  </div>
  <!-- Global Error -->
  <div class="at-error">
      <p>Login forbidden</p>
  </div>
  <!-- Global Resutl -->
  <div class="at-result">
      <p>Email Sent!</p>
  </div>
  <!-- Password Service -->
  <div class="at-pwd-form">
    <form role="form" id="at-pwd-form" novalidate="">
      <!-- Input -->
      <div class="at-input">
        <label for="at-field-username">
          Username
        </label>
        <input type="text" id="at-field-username" name="at-field-username" placeholder="Username" autocapitalize="none" autocorrect="off">
      </div>
      <!-- Input with Validation Error -->
      <div class="at-input has-error">
        <label for="at-field-email">
          Email
        </label>
        <input type="email" id="at-field-email" name="at-field-email" placeholder="Email" autocapitalize="none" autocorrect="off">
        <span>Invalid email</span>
      </div>
      <!-- Input with Successful Validation -->
      <div class="at-input has-success">
        <label for="at-field-password">
          Password
        </label>
        <input type="password" id="at-field-password" name="at-field-password" placeholder="Password" autocapitalize="none" autocorrect="off">
      </div>
      <!-- Forgot Password Link -->
      <div class="at-pwd-link">
        <p>
          <a href="/forgot-password" id="at-forgotPwd" class="at-link at-pwd">Forgot your password?</a>
        </p>
      </div>
      <!-- Form Submit Button -->
      <button type="submit" class="at-btn submit disabled" id="at-btn">
        Register
      </button>
    </form>
  </div>
  <!-- Link to Sign In -->
  <div class="at-signin-link">
    <p>
      If you already have an account
      <a href="/sign-in" id="at-signIn" class="at-link at-signin">sign in</a>
    </p>
  </div>
  <!-- Link to Sign Up -->
  <div class="at-signup-link">
    <p>
      Don't have an account?
      <a href="/sign-up" id="at-signUp" class="at-link at-signup">Register</a>
    </p>
  </div>
  <!-- Link to Privacy Policy and Terms of use -->
  <div class="at-terms-link">
    <p>
      By clicking Register, you agree to our
        <a href="/privacyPolicy">Privacy Policy</a>
        and
        <a href="/termsOfUse">Terms of Use</a>
    </p>
  </div>
</div>

meteor add useraccounts:famous-wrapper

you'll be able to turn your preferred flavour of accounts templates into a package ready to be used within a famous-views + Famo.us application.

This means you can get an animated version of the atForm template without any effort! :-)

To learn how to make animations you might want to check the following links:

• http://famous-views.meteor.com
• http://famous-views.meteor.com/examples/animate
• http://famo.us/university/lessons/#/famous-101/animating/1
• http://famo.us/guides/layout
• http://famo.us/guides/animations
• http://famo.us/docs/modifiers/StateModifier
• http://famo.us/docs/transitions/Transitionable

...well, actually it might be that you don't like the default animations so you might consider to use AccountsTemplates.configureAnimations (provided by the wrapper...) to specify your custom animation functions. This is an example showing how to do it:

var Transform;
var Easing;
if (Meteor.isClient){
    FView.ready(function(require) {
        Transform = famous.core.Transform;
        Easing = famous.transitions.Easing;
    });
}

var slideLeftDestroy = function(fview){
    fview.modifier.setTransform(
        Transform.translate(-$(window).width(),0),
        { duration : 250, curve: Easing.easeOutSine },
        function() { fview.destroy();}
    );
};


AccountsTemplates.configureAnimations({
    destroy: {
        atSignupLink: slideLeftDestroy,
    }
});

this asks AT to use slideLeftDestroy to animate the template atSignupLink when it is to be destroyed.

As you've just seen configureAnimations take an options object as parameter:

AccountsTemplates.configureAnimations(options);

this options object can have three different keys at the first level:

var options = {
    render: {
      // more stuff here...
    },
    destroy: {
      // more stuff here...
    },
    state_change: {
      // more stuff here...
    },
    animQueueDelay: 100,
    animQueueStartDelay: 200,
    setStateDelay: 300,

};
AccountsTemplates.configureAnimations(options);

they are render, destroy, state_change, animQueueDelay, animQueueStartDelay, and setStateDelay. The first three, what a surprise, they let you specify what to do when one of the templates building up the atForm is rendered, destroyed or when the form's state changes (respectively).

...at the second level you can specify which animation has to be applied to which template:

var options = {
    render: {
        default: animA,
        atTitle: animB,
        atSocial: animC,
        atSep: animC,
        atError: animB,
        atResult: animB,
        atPwdForm: null,
        atSigninLink: null,
        atSignupLink: animB,
        atTermsLink: animD,
    },
    // ...
};

the above one is the full list of available animated templates... The value you specify can be null (to remove a default animation...) or a function. If you specify a function it should be like the following:

var animFunc = function(fview){
    fview.modifier.setTransform(
        Transform.<some_transform>( ... ),
        { duration : <millisecs>, curve: Easing.<some_curve> }
    );
};

the fview parameter actually let you access the famous view associated with the template (so feel free to do whatever you wish with it...).

Warning: when you specify an animation to be used on destroy you must take care of the actual destroy! ...usually it is enough to call fview.destroy() when the animation completes:

var animFunc = function(fview){
    fview.modifier.setTransform(
        Transform.<some_transform>( ... ),
        { duration : <millisecs>, curve: Easing.<some_curve> },
        function(){ fview.destroy();}
    );
};

Warning2: At the moment the animation for the state change is supposed to last for double the setStateDelay duration, and the state change is actually postponed by setStateDelay milliseconds. This let you divide your animation in two different part (so, e.g., you can hide things and show them again with the new content...). The following is the default animations used on state change:

vFlip = function(fview){
    fview.modifier.setTransform(
        Transform.rotate(Math.PI-0.05,0,0),
        {
            duration : AccountsTemplates.animations.setStateDelay,
            curve: "easeIn",
        },
        function() {
            fview.modifier.setTransform(
                Transform.rotate(-0.1,0,0),
                {
                    duration : AccountsTemplates.animations.setStateDelay,
                    curve: "easeOut",
                }
            );
        }
    );
};

and as you can see schedules two different animations, one after the another, lasting setStateDelay ms each.

In case you're interested in sequence animation, AT also provides an experimental animation cue you can use to schedule your animation with a bit of delay between them. To use it simply wrap the modifier.setTransform within an AccountsTemplates.pushToAnimationQueue call, like this:

var fallFromTop = function(fview){
    fview.modifier.setTransform(Transform.translate(0, -$(window).height()));
    AccountsTemplates.pushToAnimationQueue(function() {
        fview.modifier.setTransform(
            Transform.translate(0,0),
            { duration : 450, curve: Easing.easeOutSine }
        );
    });
};

the full signature for it is:

AccountsTemplates.pushToAnimationQueue(func, at_begin);

and if pass true for at_begin, the function will be pushed to the begin of the cue rather than at the end.

The first animation is started after animQueueStartDelay milliseconds from the first insertion and a delay of animQueueStartDelay milliseconds is applied between start of animations (you can configure these two values with configureAnimations function as listed above...).

And that's it! Enjoy ;-)

// Set up login services
Meteor.startup(function() {
    // Remove configuration entries in case service is already configured
    ServiceConfiguration.configurations.remove({$or: [
        {service: "facebook"},
        {service: "github"}
    ]});

    // Add Facebook configuration entry
    ServiceConfiguration.configurations.insert({
        "service": "facebook",
        "appId": "XXXXXXXXXXXXXXX",
        "secret": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
    });

    // Add GitHub configuration entry
    ServiceConfiguration.configurations.insert({
        "service": "github",
        "clientId": "XXXXXXXXXXXXXXXXXXXX",
        "secret": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
    });
});

meteor add service-configuration
meteor add accounts-ui

Anyone is welcome to contribute. Fork, make your changes, and then submit a pull request.

Thanks to all those who have contributed code changes and all who have helped by submitting bug reports and feature ideas.