htmlcssmeteoraccounts

How to change the shape of the login forms? accounts-entry & Meteor

I'm trying to make my sign in form all on one line with the email on the left and the password on the right and the submit button to the right of that. Right now it looks like this:

enter image description here

How can I make it so that the whole form is on one line starting with the 'Forgot your password?' on the far left, followed by the email, then password, then the sign in button on the far right? Here is the code:

<template name='entrySignIn'>
  <div class="container">
    <div class="row">
      {{#if logo}}
        <div class="entry-logo">
            <a href="/"><img src="{{logo}}" alt="logo"></a>
        </div>
      {{/if}}
      <div class="entry-sign-in">
        {{#if otherLoginServices}}
        <div class="entry-social">
          {{#each loginServices}}
            {{> entrySocial}}
          {{/each}}
          {{#if passwordLoginService}}
          <div class="email-option">
            <strong class="line-thru or-sign-in">{{i18n "OR"}}</strong>
          </div>
          {{/if}}
        </div>
        {{/if}}
        {{> entryError}}
        {{#unless otherLoginServices}}
        {{/unless}}
        {{#if passwordLoginService}}
          <form class="entry-form" id='signIn'>
            <div class="form-group">
              <input autofocus name="email" type="{{emailInputType}}" class="form-control" value='{{email}}' placeholder="{{emailPlaceholder}}">
            </div>
            <div class="form-group">
              <input name="password" type="password" class="form-control" value='{{password}}' placeholder="{{i18n 'password'}}">
            </div>
            <p><a href="/forgot-password">{{i18n "forgotPassword"}}</a></p>
            <button type="submit" class="submit btn btn-success">{{i18n "signIn"}}</button>
          </form>
        {{/if}}

      </div>
    </div>
  </div>
</template>

I tried jason's suggestion and it kind of worked but now it looks like this:

enter image description here

Does anyone know how to fix this?

Solution

  • I would suggest putting your controls into a table. For example:

    <form class="entry-form" id='signIn'>

<table>
   <tr>
      <td>
          <div class="form-group">
              <input autofocus name="email" type="{{emailInputType}}" class="form-control" value='{{email}}' placeholder="{{emailPlaceholder}}">
          </div>
     </td>
     <td>
         <div class="form-group">
            <input name="password" type="password" class="form-control" value='{{password}}' placeholder="{{i18n 'password'}}">
         </div>
     </td>
  </tr>
  <tr>
     <td colspan = "2"> 
        <div class="form-group">
          <input name="password" type="password" class="form-control" value='{{password}}' placeholder="{{i18n 'password'}}">
        </div>
    </td>
  </tr>
  <tr>
    <td colspan = "2">
       <button type="submit" class="submit btn btn-success">{{i18n "signIn"}}</button>
    </td>
  </tr>
</table>
</form>

    Although I dont know what the other markup is ( {{#if passwordLoginService}}). Handlebars? It should still work with that.