neocities/views/new.erb

<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script type="text/javascript">
  Stripe.setPublishableKey('<%= $config['stripe_publishable_key'] %>');
</script>

<div class="header-Outro">
  <div class="row content single-Col">
  <h1>Create a New Website</h1>
  <h3 class="subtitle">Your free web site is only a few minutes away!</h3>
  </div>
</div>

<div class="content single-Col misc-page">
  <h3></h3>
  <form method="POST" action="/create" id="signupform">
    <input name="csrf_token" type="hidden" value="<%= csrf_token %>">

    <% if !@site.errors.empty? %>
      <div class="row content">
        <div class="col col-100 txt-Center">
          <div class="alert alert-block alert-error">
            <p>There were errors creating your home page:</p>
            <% @site.errors.each do |error| %>
              <p><%= error.last.first %></p>
            <% end %>
          </div>
        </div>
      </div>
    <% end %>

    <p>
      First, enter a username. This will also be used as your site name.<br><b>Do not forget this, it will be used to sign in to and manage your home page.</b> It can only contain letters, numbers, underscores and hyphens, and can only be 32 characters long.
    </p>
    <h5>Username</h5>
    <p>
      <input class="input-Area" name="username" type="text" placeholder="yourusername" value="<%= @site.username %>" autocapitalize="off" autocorrect="off" style="width: 200px">.neocities.org
    </p>

    <hr>

    <p>
      Next, enter a password. This will be used to allow you to login. Minimum 5 characters. If you don't make it a good password, Dade Murphy from the movie Hackers will come in and steal your "garbage files".
    </p>
    <h5>Password</h5>
    <input class="input-Area" name="password" type="password" style="width: 200px" placeholder="your password">

    <hr>

    <p>
      Now you can enter an e-mail address. Your e-mail address is private and we will not show it to anyone for any reason. You don't have to provide one, but <b>we will not be able to reset your password without it, so don't lose your username and password if you leave this blank!</b>
    </p>
    <h5>Email</h5>
    <input class="input-Area" name="email" type="email" placeholder="youremail@example.com" value="<%= @site.email %>" style="width: 300px">

    <hr>

    <input name="is_nsfw" type="hidden" value="false">
    <p>
      If your page will contain objectionable (adult) content, check this box:&nbsp;&nbsp;&nbsp;<input name="is_nsfw" type="checkbox" value="true" style="margin-top:0" <%= params[:is_nsfw].to_s == 'true' ? 'checked' : '' %>>
    </p>

    <hr>

    <p>You can optionally enter a tag! A tag allows others to find your site by looking for sites with that tag (examples: <a href="/browse?tag=pokemon">pokemon</a>, <a href="/browse?tag=chess">chess</a>). Keep your tag simple and generic. Don't use tags like "johnspersonalsite", it's too unique and won't have related sites. A tag can only contain letters (A-Z) and numbers (0-9), no spaces.
    </p>
    <p>Don't think too hard about this! You don't have to add a tag if your site doesn't have a specific topic, and you can always add one later.</p>

    <h5>Add a Tag</h5>
    <input class="input-Area typeahead" name="tags" type="text" style="width: 400px; max-width:100%" placeholder="pokemon" value="<%= params[:tags] %>" autocapitalize="off" autocorrect="off">

    <hr>

    <p><strong>The site you are creating will be free, forever.</strong> We will never charge you for your web site.</p>
    <p><a href="/donate" target="_blank">Neocities has to pay the bills though</a>, and we like the idea of being able to work on the site full-time someday. So if you would like to help us reach this goal, we have created the <strong>Supporter Plan</strong>!

    <p>Right now, the <strong>Supporter Plan</strong> is the same as the free plan, except that <strong>Supporter Plan members get 200MB</strong> of web space. You will also be listed as a supporter on our contributors page, and on your site profile page.</p>
    <p>The base plan is $12 ($1/month) billed once per year, which is the cost of <a href="/img/yafagrillmenu.jpg" target="_blank">a delicious Yafa Combo with a lousy tip</a>. If you ever decide to cancel, you get to keep the extra space. Thanks for helping us run this site!</p>

    <div>
      <input type="radio" name="plan" value="free" <%= params[:plan].nil? || params[:plan] == 'free' ? 'checked' : '' %>>
      <span><strong>Free Plan (<%= Site::FREE_MAXIMUM_IN_MEGABYTES %>MB)</strong></span>
    </div>
    <a name="plan_error_link"></a>
    <div>
      <input id="supporter" type="radio" name="plan" value="supporter" <%= params[:plan] == 'supporter' ? 'checked' : '' %>>
      <span><strong>Supporter Plan (<%= Site::SUPPORTER_MAXIMUM_IN_MEGABYTES %>MB)</strong></span>
    </div>

    <div id="plan_container" style="margin-top:20px; display: none">
      <input id="stripe_token" name="stripe_token" type="hidden" value="<%= params[:stripe_token] %>">

      <div id="plan_error" class="alert alert-block alert-error" style="display:none"></div>

      <p>
        Plan type:
        <select name="selected_plan" style="width: 200px">
          <option value="plan_one">$12/year ($1/month)</option>
          <option value="plan_two" <%= params[:selected_plan].nil? ? 'selected' : '' %>>$24/year ($2/month)</option>
          <option value="plan_three">$36/year ($3/month)</option>
          <option value="plan_four">$48/year ($4/month)</option>
          <option value="plan_five">$60/year ($5/month)</option>
        </select>
      </p>

      <% if params[:stripe_token] %>
        <p>Billing information has been saved, thank you!</p>
      <% else %>
        <p>
          Card Number: <input type="text" size="20" data-stripe="number">
          CVC: <input type="text" size="4" maxlength="4" data-stripe="cvc" style="width: 60px">
        </p>
        <p>
          Expiration:
          <input type="text" size="2" data-stripe="exp-month" placeholder="MM" maxlength="2" style="width: 50px">
          <input type="text" size="4" data-stripe="exp-year" placeholder="YYYY" maxlength="4" style="width: 60px">
        </p>
      <% end %>

      <p><strong>We accept Bitcoin!</strong> If you would prefer to use Bitcoin, choose the <strong>Free Plan</strong>, and then upgrade in the <strong>Settings</strong> page once your account is created.</p>
    </div>

    <hr>

    <p><b>Last thing!</b> Enter the captcha correctly so we know you're not a robot (don't worry robots, we still love you).</p>

    <div class="recaptcha">
      <%== recaptcha_tag :challenge, ssl: request.ssl? %>
    </div>

    <hr>

    <h3>You're done. Just click the button below!</h3>
    <input class="btn-Action" type="submit" value="Create Home Page">
  </form>
</div>

<script>
  window.onload = function() {
    $('#signupform').find(':submit').prop('disabled', false)
    $('#signupform').submit(function(event) {
      if($('#signupform input:radio[name="plan"]:checked').val() == 'free') {
        return true
      }

      if($('#stripe_token').val() != '')
        return true

      var planError = $('#plan_error')
      planError.css('display', 'none')
      var signupform = $(this)
      signupform.find(':submit').prop('disabled', true)

      Stripe.card.createToken(signupform, function(status, response) {
        console.log(response)
        if(response.error) {
          planError.text(response.error.message)
          planError.css('display', 'block')
          window.location = '#plan_error_link'
          signupform.find(':submit').prop('disabled', false)
          return false
        } else {
          $('#stripe_token').val(response.id)
          signupform.submit()
        }
      })
      return false
    })

    $('#signupform input:radio[name="plan"]').change(function(){
      showPlanIfSelected()
    })

    function showPlanIfSelected() {
      var planContainer = $('#plan_container')
      if($('#signupform input:radio[name="plan"]:checked').val() == 'supporter')
        return planContainer.css('display', 'block')
      planContainer.css('display', 'none')
    }
    showPlanIfSelected()
  }
</script>