Utilizing meteor-useraccounts to manage user accounts, including the integration of useraccounts:bootstrap. The boilerplate I'm using is directly from the repository.
The challenge: I am confused about where to insert my own HTML/CSS.
Here is 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 last 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 your position in the institution/company.",
},
]);
I followed the documentation's suggestion to replace the original template with my own using
Template.myAtForm.replaces("atForm");<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 wireframe provided: https://i.sstatic.net/YeaCb.png
For instance, where should I incorporate the bootstrap classes to have two input fields in a row (but not in every row as shown in the WF)? Or, how can I customize my upload button (since there doesn't appear to be a type:file)?
Even with the useraccounts:unstyled package, I am uncertain about where to include the HTML/CSS.
Any assistance would be greatly appreciated.