Skip to content

Commit b1af55b

Browse files
drusepthdrusepth
committed
start redoing signup page
1 parent e0bbd55 commit b1af55b

File tree

1 file changed

+70
-83
lines changed

1 file changed

+70
-83
lines changed

‎app/views/devise/registrations/new.html.erb‎

Lines changed: 70 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,84 @@
1-
<div class="row">
2-
<div class="col s12 m6 offset-m3">
3-
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
4-
<% if resource.errors.any? %>
5-
<div class="card red lighten-3">
6-
<div class="card-content">
7-
<div class="card-title">Please fix the following errors:</div>
8-
<ul class="browser-default">
9-
<%= devise_error_messages! %>
10-
</ul>
1+
<div class="flex items-center min-h-screen bg-gray-50">
2+
<div class="flex-1 h-full max-w-7xl mx-auto bg-white rounded-lg shadow-xl">
3+
<div class="flex flex-col md:flex-row">
4+
<div class="h-32 md:h-auto md:w-1/2">
5+
<%= image_tag "card-headers/languages.webp", class: 'object-cover w-full h-full' %>
6+
</div>
7+
<div class="flex items-center justify-center p-6 sm:p-12 md:w-1/2">
8+
<div class="w-full">
9+
<div class="flex justify-center mb-4">
10+
<%= image_tag 'logos/both-small.webp', class: 'object-cover w-full h-full' %>
1111
</div>
12-
</div>
13-
<% end %>
14-
15-
<div class="card">
16-
<div class="card-content">
17-
<div class="card-title">
12+
<h1 class="mb-4 text-2xl font-bold text-center text-gray-700">
1813
Sign up for Notebook.ai
19-
</div>
20-
<div style="padding: 0 2em; padding-top: 1em">
21-
<%= image_tag 'logos/both-small.webp', class: 'hide-on-small-only', style: 'width: 100%' %>
22-
<%= image_tag 'logos/book-small.webp', class: 'hide-on-med-and-up', style: 'width: 100%' %>
23-
</div>
24-
25-
<div class="field">
26-
<%= f.label 'Your name' %><br />
27-
<%= f.text_field :name, autofocus: true %>
28-
</div>
29-
30-
<div class="field">
31-
<%= f.label :email %> <em>(This is the email you will log in with)</em><br />
32-
<%= f.email_field :email %>
33-
</div>
34-
35-
<div class="field">
36-
<%= f.label :password %>
37-
<% if @minimum_password_length %>
38-
<em>(<%= @minimum_password_length %> characters minimum)</em>
39-
<% end %><br />
40-
<%= f.password_field :password, autocomplete: "off" %>
41-
</div>
14+
</h1>
4215

43-
<div class="field">
44-
<%= f.label :password_confirmation %><br />
45-
<%= f.password_field :password_confirmation, autocomplete: "off" %>
46-
</div>
47-
48-
<!--
49-
<div class="field">
50-
<%= f.label :promo_code %><br />
51-
<%= f.text_field :promo_code, value: 'LAUNCHPARTY', disabled: "disabled" %>
52-
</div>
53-
-->
16+
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
17+
<% if resource.errors.any? %>
18+
<div class="bg-red-200 p-4">
19+
<strong>Please fix the following errors:</strong>
20+
<ul class="my-2">
21+
<%= devise_error_messages! %>
22+
</ul>
23+
</div>
24+
<% end %>
25+
<div class="mt-8">
26+
<%= f.label 'Name', class: 'block text-sm' %>
27+
<%= f.text_field :name, autofocus: true, class: 'w-full px-4 py-2 text-sm border rounded-md focus:border-blue-400 focus:outline-none focus:ring-1 focus:ring-blue-600' %>
28+
</div>
29+
<div>
30+
<%= f.label 'Email', class: 'block text-sm' %>
31+
<%= f.email_field :email, class: 'w-full px-4 py-2 text-sm border rounded-md focus:border-blue-400 focus:outline-none focus:ring-1 focus:ring-blue-600' %>
32+
</div>
33+
<div>
34+
<%= f.label "Password #{'(' + @minimum_password_length.to_s + ' characters minimum)' if @minimum_password_length.present?}", class: 'block text-sm' %>
35+
<%= f.password_field :password, class: 'w-full px-4 py-2 text-sm border rounded-md focus:border-blue-400 focus:outline-none focus:ring-1 focus:ring-blue-600', autocomplete: 'off' %>
36+
</div>
37+
<div>
38+
<%= f.label 'Password confirmation', class: 'block text-sm' %>
39+
<%= f.password_field :password_confirmation, class: 'w-full px-4 py-2 text-sm border rounded-md focus:border-blue-400 focus:outline-none focus:ring-1 focus:ring-blue-600' %>
40+
</div>
41+
<div class="my-2">
42+
<%= f.label 'Email updates', class: 'block text-sm' do %>
43+
<%= f.check_box :email_updates, checked: false %>
44+
<span>
45+
We're always working to improve Notebook.ai. Please check this box if you'd like to receive occasional updates about
46+
what's new.
47+
</span>
48+
<% end %>
49+
</div>
5450

55-
<%
56-
if params.key?('referral') || session.key?('referral')
57-
referral_code = params['referral'] || session['referral']
58-
referrer = ReferralCode.where(code: referral_code).first
59-
if referrer.present?
60-
%>
61-
<div class="row">
62-
<div class="col s12 m6">
63-
<div class="field">
64-
<%= f.label :referral_code %><br />
65-
<%= f.text_field :referral_code, value: referral_code, readonly: true %>
51+
<%
52+
if params.key?('referral') || session.key?('referral')
53+
referral_code = params['referral'] || session['referral']
54+
referrer = ReferralCode.where(code: referral_code).first
55+
if referrer.present?
56+
%>
57+
<div class="row">
58+
<div class="col s12 m6">
59+
<div class="field">
60+
<%= f.label :referral_code %><br />
61+
<%= f.text_field :referral_code, value: referral_code, readonly: true %>
62+
</div>
63+
</div>
64+
<div class="col s12 m6">
65+
<%= f.label 'The following user will receive credit for referring you' %><br />
66+
<%= f.text_field :referral_user, value: referrer.user.name.split('@').first, disabled: "disabled" %>
6667
</div>
6768
</div>
68-
<div class="col s12 m6">
69-
<%= f.label 'The following user will receive credit for referring you' %><br />
70-
<%= f.text_field :referral_user, value: referrer.user.name.split('@').first, disabled: "disabled" %>
71-
</div>
72-
</div>
73-
<%
69+
<%
70+
end
7471
end
75-
end
76-
%>
72+
%>
7773

78-
<div class="field">
79-
<%= f.label :email_updates do %>
80-
<%= f.check_box :email_updates %>
81-
<span>We're always working to improve Notebook.ai. Please leave this box checked if you'd like to receive occasional updates about
82-
what's new.</span>
83-
<% end %>
84-
</div>
74+
<%= f.submit "Sign up", class: 'block w-full px-4 py-4 mt-4 text-sm font-medium leading-5 text-center text-white transition-colors duration-150 bg-blue-600 border border-transparent rounded-lg active:bg-blue-600 hover:bg-blue-700 focus:outline-none focus:shadow-outline-blue' %>
75+
<% end %>
8576

86-
<div class="actions center" style="margin-top: 20px;">
87-
<%= f.submit "Sign up", class: 'btn btn-large blue' %>
88-
<p class="center">
89-
<br />
90-
<%= render "devise/shared/links" %>
91-
</p>
77+
<div class="mt-4 text-center text-sm">
78+
<%= render "devise/shared/links" %>
9279
</div>
9380
</div>
9481
</div>
95-
<% end %>
82+
</div>
9683
</div>
9784
</div>

0 commit comments

Comments
 (0)