96 lines
6 KiB
Plaintext
96 lines
6 KiB
Plaintext
<div class="min-h-full flex flex-col justify-center sm:px-6 lg:px-8">
|
|
<div class="sm:mx-auto sm:w-full sm:max-w-md">
|
|
<h2 class="text-center text-3xl font-extrabold text-gray-900">
|
|
Sign up for an account
|
|
</h2>
|
|
<p class="mt-2 text-center text-sm text-gray-600">
|
|
Or
|
|
<%= link_to "sign in to your account", login_path, class: "font-medium text-indigo-600 hover:text-indigo-500" %>
|
|
</p>
|
|
</div>
|
|
|
|
|
|
<div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
|
|
<div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
|
|
<%= form_with model: @user, url: sign_up_path, class: "space-y-6" do |form| %>
|
|
<%= render partial: "shared/form_errors", locals: { object: form.object } %>
|
|
|
|
<div>
|
|
<%= form.label :email, class: "block text-sm font-medium text-gray-700 after:content-['*'] after:ml-0.5 after:text-red-500" do %>
|
|
Email address
|
|
<% end %>
|
|
<% if form.object.errors.where(:email).any? %>
|
|
<div class="mt-1 relative rounded-md shadow-sm">
|
|
<%= form.text_field :email, required: true, autocomplete: "email", placeholder: "you@example.com", aria: {invalid: "true", describedby: "email-error"}, class: "block w-full pr-10 border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm rounded-md" %>
|
|
<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
|
|
<%= heroicon "exclamation-circle", variant: :solid, options: { class: "h-5 w-5 text-red-500" } %>
|
|
</div>
|
|
</div>
|
|
<% form.object.errors.where(:email).each do |error| %>
|
|
<p class="mt-2 text-sm text-red-600" id="email-error"><%= error.full_message %></p>
|
|
<% end %>
|
|
<% else %>
|
|
<div class="mt-1 relative rounded-md shadow-sm">
|
|
<%= form.text_field :email, required: true, autofocus: true, autocomplete: "email", placeholder: "you@example.com", class: "block w-full pr-10 border-gray-300 text-gray-900 placeholder-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md" %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div>
|
|
<%= form.label :name, class: "block text-sm font-medium text-gray-700" do %>
|
|
Your name
|
|
<% end %>
|
|
<div class="mt-1">
|
|
<%= form.text_field :name, autocomplete: "name", class: "appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" %>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<%= form.label :password, class: "block text-sm font-medium text-gray-700 after:content-['*'] after:ml-0.5 after:text-red-500" do %>
|
|
Password
|
|
<% end %>
|
|
<% if form.object.errors.where(:password).any? %>
|
|
<div class="mt-1 relative rounded-md shadow-sm">
|
|
<%= form.password_field :password, required: true, autocomplete: "new-password", aria: {invalid: "true", describedby: "password-error"}, class: "block w-full pr-10 border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm rounded-md" %>
|
|
<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
|
|
<%= heroicon "exclamation-circle", variant: :solid, options: { class: "h-5 w-5 text-red-500" } %>
|
|
</div>
|
|
</div>
|
|
<% form.object.errors.where(:password).each do |error| %>
|
|
<p class="mt-2 text-sm text-red-600" id="password-error"><%= error.full_message %></p>
|
|
<% end %>
|
|
<% else %>
|
|
<div class="mt-1 relative rounded-md shadow-sm">
|
|
<%= form.password_field :password, required: true, autofocus: true, autocomplete: "new-password", class: "block w-full pr-10 border-gray-300 text-gray-900 placeholder-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md" %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div>
|
|
<%= form.label :password_confirmation, class: "block text-sm font-medium text-gray-700 after:content-['*'] after:ml-0.5 after:text-red-500" do %>
|
|
Password confirmation
|
|
<% end %>
|
|
<% if form.object.errors.where(:password_confirmation).any? %>
|
|
<div class="mt-1 relative rounded-md shadow-sm">
|
|
<%= form.password_field :password_confirmation, required: true, autocomplete: "new-password", aria: {invalid: "true", describedby: "password-confirmation-error"}, class: "block w-full pr-10 border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm rounded-md" %>
|
|
<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
|
|
<%= heroicon "exclamation-circle", variant: :solid, options: { class: "h-5 w-5 text-red-500" } %>
|
|
</div>
|
|
</div>
|
|
<% form.object.errors.where(:password_confirmation).each do |error| %>
|
|
<p class="mt-2 text-sm text-red-600" id="password-confirmation-error"><%= error.full_message %></p>
|
|
<% end %>
|
|
<% else %>
|
|
<div class="mt-1 relative rounded-md shadow-sm">
|
|
<%= form.password_field :password_confirmation, required: true, autofocus: true, autocomplete: "new-password", class: "block w-full pr-10 border-gray-300 text-gray-900 placeholder-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md" %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div>
|
|
<%= form.submit "Sign Up", class: "w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div> |