Added names to # inputs to be consistent with the rest of the inputs.

[orlade]

Simplifies my job of writing a hacky little converter to use Semantic UI.

[queso]

Nice tweak, appreciate the PR!

[cutemachine]

@pie21

I would be interested in a semantic-ui version of accounts-entry as well. Do you have something I can work with?

Otherwise I will fork accounts-entry and do the donkeywork myself :) Thanks.

[queso]

Why fork. Just use your own templates and get it all for free with no complicated mess :)

Accounts-entry supports custom templates now.

[orlade]

@cutemachine I put something together for a hobby project, but never got terribly far with it, and it may be out of date now. You can have a look if you're interested.

fieldNameIcons =
  email: "user"
  password: "lock"
  forgottenEmail: "mail"

convert = ->
  $(".btn").addClass("ui button")
  $(".row").addClass("ui one column page grid")
  $(".col-md-4").addClass("ui column")

  # Convert the email collapse.
  #  collapse = $("[data-toggle='collapse']").addClass("ui accordion")
  #  title = collapse.text()
  #  collapse.text('').append($("<div class='title'><i class='dropdown icon'></i>#{title}</div>"))
  #  $("<div class='content'></div>").append($(collapse.attr('href'))).appendTo(collapse)
  #  $('.ui.accordion').accordion()

  # Convert form elements.
  $(".btn-default").addClass("blue")
  $(".alert-danger").addClass("ui error message")
  $("form").addClass("ui form segment")
  $(".form-control").removeClass("form-control")
  $(".form-group").removeClass("form-group").addClass("field").each (index, group) ->
    input = $("input", group)
    iconClass = fieldNameIcons[input.attr("name") || input.attr("type")]
    icon = $("<i class='#{iconClass} icon'></i>")
    if !$('label', group).length
      $("<label>#{input.attr("placeholder")}</label>").prependTo(group)
    # Repackage the field nodes.
    $("<div class='ui left labeled icon input'></div>").appendTo(group).append(input, icon)


  # Convert social buttons.
  #.removeClass("entry-social")
  $(".entry-social").children(".btn").each (index, button) ->
    service = $(button).attr("name").replace("google", "google plus")
    $(button).addClass(service).children().addClass(service + " icon")

Template.entrySignIn.rendered = ->
  convert()
  $(".entry").prepend("<h3># with:</h3>")

Template.entry#.rendered = ->
  convert()

Template.entry#.events
  'click [data-toggle="collapse"]': (event) ->
    $(event.target.getAttribute('href')).toggleClass('collapse')

Template.entryForgotPassword.rendered = ->
  convert()

Template.entryResetPassword.rendered = ->
  convert()

And for styling:

.page.grid {
  text-align: center;
  .entry-logo {
    width: auto;
  }
}

.entry-social {
  .btn {
    display: block;
    margin: 20px auto;
    width: auto;
    .icon {
      float: none;
      padding-left: 0;
    }
  }
}

.collapse {
  display: none;
}