codecombat/app/templates/core/auth.jade

.modal-dialog
  .modal-content

    if mode === 'login'
      img(src="/images/pages/modal/auth/login-background.png", draggable="false").auth-modal-background
    else
      img(src="/images/pages/modal/auth/signup-background.png", draggable="false").auth-modal-background

    if mode === 'login'
      h1(data-i18n="login.log_in") Log In
    if mode === 'signup'
      h1(data-i18n="login.sign_up") Create Account

    div#close-modal
      span.glyphicon.glyphicon-remove


  .auth-form-content

    if showRequiredError
      .alert.alert-success
        span(data-i18n="signup.required") You need to log in before you can that way.
    else if mode === 'signup' && showSignupRationale
      .alert.alert-info
        span(data-i18n="play_level.victory_sign_up_poke") Want to save your code? Create a free account!

    form.form
      .form-group
        label.control-label(for="email")
          span(data-i18n="general.email") Email
          | :
        .input-border
          input#email.input-large.form-control(name="email", type="email", value=formValues.email)
      .form-group
        if mode === 'login'
          div#recover-account-wrapper
            a(data-toggle="coco-modal", data-target="core/RecoverModal", data-i18n="login.forgot_password")#link-to-recover Forgot your password?
        label.control-label(for="password")
          span(data-i18n="general.password") Password
          | :
        .input-border
          input#password.input-large.form-control(name="password", type="password", value=formValues.password)

      if mode === 'signup'
        .row
          .col-md-6
            .form-group
              label.control-label(for="name")
                span(data-i18n="general.name") Name
                | :
              .input-border
                if me.get('name')
                  input#name.input-large.form-control(name="name", type="text", value=me.get('name'))
                else
                  input#name.input-large.form-control(name="name", type="text", value="", placeholder="e.g. Alex W the Skater")
          .col-md-6
            .form-group
              label.control-label(for="school-input")
                span.spr(data-i18n="signup.school_name") School Name and City
                em.optional-note
                  | (
                  span(data-i18n="signup.optional") optional
                  | ):
              .input-border
                input#school-input.input-large.form-control(name="schoolName", data-i18n="[placeholder]signup.school_name_placeholder", value=formValues.schoolName || '')
        .form-group.checkbox
          label.control-label(for="subscribe")
            .input-border
              input#subscribe(name="subscribe", type="checkbox", checked='checked')
              span.custom-checkbox
                .glyphicon.glyphicon-ok
            span(data-i18n="signup.email_announcements") Receive announcements by email

      if mode === 'login'
        input.btn.btn-lg.btn-illustrated.btn-block.btn-success#login-button(value=translate("login.log_in"), type="submit")
      else if mode === 'signup'
        input.btn.btn-lg.btn-illustrated.btn-block.btn-success#signup-button(value=translate("signup.sign_up"), type="submit")

    .wait.secret
      if mode === 'login'
        h3(data-i18n="login.logging_in") Logging In
      if mode === 'signup'
        h3(data-i18n="signup.creating") Creating Account...

  .auth-network-logins
    // GitHub login complete, but the button does not fit in with the design yet. Hidden for now
    //div.network-login
    //  btn.btn.btn-sm.github-login-button#github-login-button
    //    img(src="/images/pages/modal/auth/github_icon.png")
    //    | GitHub
    #facebook-login-btn.btn.btn-primary.btn-lg.btn-illustrated.network-login
      img.network-logo(src="/images/pages/community/logo_facebook.png", draggable="false")
      span.sign-in-blurb(data-i18n="login.sign_in_with_facebook") Sign in with Facebook
    .btn.btn-danger.btn-lg.btn-illustrated.network-login
      img.network-logo(src="/images/pages/community/logo_g+.png", draggable="false")
      span.sign-in-blurb(data-i18n="login.sign_in_with_gplus") Sign in with G+
      .gplus-login-wrapper
        .gplus-login-button#gplus-login-button

  .extra-pane
    if mode === 'login'
      .switch-explanation(data-i18n="login.signup_switch") Want to create an account?
      .btn.btn-lg.btn-illustrated.btn-warning#switch-to-signup-button(data-i18n="login.sign_up") Create Account
    else if mode === 'signup'
      .switch-explanation(data-i18n="signup.login_switch") Already have an account?
      .btn.btn-lg.btn-illustrated.btn-warning#switch-to-login-button(data-i18n="login.log_in")