Search code examples
htmlcsstwitter-bootstrapmeteoruser-accounts

Meteor: how to style useraccounts

I'm using meteor-useraccounts for handling user accounts - including useraccounts:bootstrap. My boilerplate is straight from the repo.

My issue: I don't understand were to put my own HTML/CSS.

My config.js:

// Options
AccountsTemplates.configure({
    defaultLayout: 'emptyLayout',
    showForgotPasswordLink: true,
    overrideLoginErrors: true,
    enablePasswordChange: true,

    showLabels: false,
    showPlaceholders: true,

    negativeValidation: true,
    positiveValidation: true,
    negativeFeedback: true,
    positiveFeedback: true,
});

AccountsTemplates.addFields([
    {
        _id: 'firstName',
        type: 'text',
        placeholder: "First Name",
        required: true,
        re: /^[^\d]{2,}$/i,
        errStr: "Please enter your first name.",
    },
    {
        _id: 'surName',
        type: 'text',
        placeholder: "Sur Name",
        required: true,
        re: /^[^\d]{2,}$/i,
        errStr: "Please enter your first name.",
    },
    {
        _id: 'institution',
        type: 'text',
        placeholder: "Institution/Company",
        required: true,
        re: /^[^\d]{2,}$/i,
        errStr: "Please enter the institution or company you work for.",
    },
    {
        _id: 'position',
        type: 'text',
        placeholder: "Position",
        required: true,
        re: /^[^\d]{2,}$/i,
        errStr: "Please enter the your position in the institution/company.",
    },
]);

I read in the documents you should replace the original template with your own, that's what I did with Template.myAtForm.replaces("atForm"); and the following template:

<template name="myAtForm">
  {{#unless hide}}
    <div class="at-form">
      {{#if showTitle}}
        {{> atTitle}}
      {{/if}}
      {{#if showError}}
        {{> atError}}
      {{/if}}
      {{#if showResult}}
        {{> atResult}}
      {{/if}}
      {{#if showOauthServices}}
        {{> atOauth}}
      {{/if}}
      {{#if showServicesSeparator}}
        {{> atSep}}
      {{/if}}
      {{#if showPwdForm}}
        {{> atPwdForm}}
      {{/if}}
      {{#if showTermsLink}}
        {{> atTermsLink}}
      {{/if}}
      {{#if showSignInLink}}
        {{> atSigninLink}}
      {{/if}}
      {{#if showSignUpLink}}
        {{> atSignupLink}}
      {{/if}}
    </div> <!-- end main div -->
  {{/unless}}
</template>

This is the given wireframe: enter image description here

For example, where do I have to add the bootstrap classes so I have two input fields in a row (but NOT in every row as seen in the WF)? Or, how can I style my own upload button (there isn't even a type:file as far as I know)?

Event with theuseraccounts:unstyled package, I don't understand where to put the HTML/CSS.

Any help really appreciated.

Solution

  • Answer: Better write your own templates

    I am sure useraccounts is doing it's stuff very well. But it is targeting on simpler UIs. I guess the most of the apps are happy with it.

    However, you can style all the fields with CSS. There are classes added to your fields templates (_id field). Take a look at the generated html and at the sources of useraccounts:unstyled package. Then you get a clear idea how its rendering algorithm is working.

    But as you mentioned in your original post, there are no file fields for example. It would mean you have to add the templates by your self, and also manage the files upload logic/validation.