Skip to content

Commit 7511f9b

Browse files
tvdeyentvdeyen
committed
feat: New login and signup screens
Displays a b/w background image from Unsplash which gracefully degrades to default background color if disconnected.
1 parent f09878e commit 7511f9b

7 files changed

Lines changed: 128 additions & 104 deletions

File tree

‎app/assets/builds/alchemy-devise.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/assets/stylesheets/alchemy-devise/login.scss‎

Lines changed: 38 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
body.user_sessions,
22
body.passwords {
3+
background-image: url("https://picsum.photos/1920/1200.webp?grayscale");
4+
background-size: cover;
5+
background-position: center;
6+
37
#errors,
48
.message.info {
59
border-color: transparent;
@@ -15,41 +19,58 @@ body.passwords {
1519
flex-direction: column;
1620
justify-content: center;
1721
}
22+
23+
&::after {
24+
content: "Image from Unsplash";
25+
position: absolute;
26+
bottom: var(--spacing-2);
27+
right: var(--spacing-2);
28+
font-size: var(--font-size_small);
29+
color: var(--body-background-color);
30+
}
1831
}
1932

2033
.logo-box {
2134
display: flex;
22-
justify-content: end;
23-
align-items: end;
24-
margin-bottom: 1.5em;
35+
flex-direction: column;
36+
align-items: center;
37+
justify-content: center;
38+
gap: var(--spacing-4);
39+
background-color: hsl(from var(--body-background-color) h s l / 50%);
40+
backdrop-filter: blur(5px);
41+
border-radius: var(--border-radius_large);
42+
box-shadow: var(--dialog-box-shadow);
43+
padding: var(--spacing-4);
44+
margin-bottom: var(--spacing-6);
45+
text-shadow: 0 0 2px var(--body-background-color);
2546

2647
svg {
2748
width: 200px;
2849
height: auto;
2950
}
30-
31-
small {
32-
width: 50px;
33-
}
3451
}
3552

3653
.login_signup_box {
3754
position: relative;
38-
max-width: 460px;
55+
max-width: 450px;
3956
margin: auto;
40-
--form-right-column-width: 1.65fr;
41-
42-
alchemy-message {
43-
width: 281px;
44-
margin-left: auto;
45-
}
4657

4758
.no-js & {
4859
display: none;
4960
}
5061

51-
.message {
52-
margin-left: 157px;
62+
alchemy-message {
63+
margin-bottom: 1.5em;
64+
}
65+
66+
.panel {
67+
--panel-background-color: var(--body-background-color);
68+
width: 100%;
69+
max-width: 100%;
70+
margin: 0;
71+
box-shadow: var(--dialog-box-shadow);
72+
border-radius: var(--border-radius_large);
73+
border-color: transparent;
5374
}
5475

5576
@media (max-width: 500px) {
@@ -81,11 +102,9 @@ body.passwords {
81102
}
82103

83104
@media (min-width: 501px) {
84-
right: 5%;
85-
86105
.submit {
87106
grid-template-columns: var(--form-left-column-width) minmax(
88-
282px,
107+
254px,
89108
var(--form-right-column-width)
90109
);
91110

‎app/views/alchemy/admin/passwords/edit.html.erb‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,32 @@
22
<%= stylesheet_link_tag "alchemy-devise" %>
33
<% end %>
44

5+
<% content_for(:main_menu_style) { 'collapsed-menu' } %>
6+
57
<div class="login_signup_box">
6-
<%= render "alchemy/admin/user_sessions/logo" %>
7-
<% if @user.errors.blank? %>
8-
<%= render_message do %>
9-
<p>
10-
<strong><%= Alchemy.t('Password reset') %></strong>
11-
</p>
12-
<p><%= Alchemy.t('Please enter a new password') %></p>
13-
<% end %>
14-
<% else %>
15-
<%= render "devise/shared/error_messages", resource: resource %>
16-
<% end %>
17-
<%= alchemy_form_for resource, as: resource_name, url: admin_update_password_path, method: 'patch' do |f| %>
18-
<%= f.hidden_field :reset_password_token %>
19-
<%= f.input :password, autofocus: true, label: Alchemy.t("New password"),
20-
required: true, input_html: {autocomplete: "new-password"} %>
21-
<%= f.input :password_confirmation, label: Alchemy.t("Confirm new password"),
22-
required: true, input_html: {autocomplete: "new-password"} %>
23-
<div class="submit">
24-
<%= link_to alchemy.admin_login_path do %>
25-
<%= render_icon("arrow-left-s", size: "1x") %>
26-
<%= Alchemy.t(:login) %>
27-
<% end %>
28-
<button type="submit">
29-
<%= Alchemy.t("Change password") %>
30-
</button>
31-
</div>
8+
<%= render "alchemy/admin/user_sessions/logo" do %>
9+
<% if @user.errors.blank? %>
10+
<strong><%= Alchemy.t('Please enter a new password') %></strong>
11+
<% end %>
3212
<% end %>
13+
14+
<div class="panel">
15+
<%= render "devise/shared/error_messages", resource: resource %>
16+
<%= alchemy_form_for resource, as: resource_name, url: admin_update_password_path, method: 'patch' do |f| %>
17+
<%= f.hidden_field :reset_password_token %>
18+
<%= f.input :password, autofocus: true, label: Alchemy.t("New password"),
19+
required: true, input_html: {autocomplete: "new-password"} %>
20+
<%= f.input :password_confirmation, label: Alchemy.t("Confirm new password"),
21+
required: true, input_html: {autocomplete: "new-password"} %>
22+
<div class="submit">
23+
<%= link_to alchemy.admin_login_path do %>
24+
<%= render_icon("arrow-left-s", size: "1x") %>
25+
<%= Alchemy.t(:login) %>
26+
<% end %>
27+
<button type="submit">
28+
<%= Alchemy.t("Change password") %>
29+
</button>
30+
</div>
31+
<% end %>
32+
</div>
3333
</div>

‎app/views/alchemy/admin/passwords/new.html.erb‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,34 +2,34 @@
22
<%= stylesheet_link_tag "alchemy-devise" %>
33
<% end %>
44

5+
<% content_for(:main_menu_style) { 'collapsed-menu' } %>
6+
57
<div class="login_signup_box">
6-
<%= render "alchemy/admin/user_sessions/logo" %>
7-
<% if @user.errors.blank? %>
8-
<%= render_message do %>
9-
<p>
10-
<strong><%= Alchemy.t('Password reset') %></strong>
11-
</p>
12-
<p><%= Alchemy.t('Please enter your email address') %></p>
13-
<% end %>
14-
<% else %>
15-
<%= render "devise/shared/error_messages", resource: resource %>
16-
<% end %>
17-
<%= alchemy_form_for :user, url: admin_reset_password_path, html: {method: 'post'} do |f| %>
18-
<%= f.input :email,
19-
autofocus: true,
20-
required: true,
21-
input_html: {
22-
autocomplete: "email",
23-
value: params[:email]
24-
} %>
25-
<div class="submit">
26-
<%= link_to alchemy.admin_login_path do %>
27-
<%= render_icon("arrow-left-s", size: "1x") %>
28-
<%= Alchemy.t(:login) %>
29-
<% end %>
30-
<button type="submit">
31-
<%= Alchemy.t("Send reset instructions") %>
32-
</button>
33-
</div>
8+
<%= render "alchemy/admin/user_sessions/logo" do %>
9+
<% if @user.errors.blank? %>
10+
<strong><%= Alchemy.t('Please enter your email address') %></strong>
11+
<% end %>
3412
<% end %>
13+
14+
<div class="panel">
15+
<%= render "devise/shared/error_messages", resource: resource %>
16+
<%= alchemy_form_for :user, url: admin_reset_password_path, html: {method: 'post'} do |f| %>
17+
<%= f.input :email,
18+
autofocus: true,
19+
required: true,
20+
input_html: {
21+
autocomplete: "email",
22+
value: params[:email]
23+
} %>
24+
<div class="submit">
25+
<%= link_to alchemy.admin_login_path do %>
26+
<%= render_icon("arrow-left-s", size: "1x") %>
27+
<%= Alchemy.t(:login) %>
28+
<% end %>
29+
<button type="submit">
30+
<%= Alchemy.t("Send reset instructions") %>
31+
</button>
32+
</div>
33+
<% end %>
34+
</div>
3535
</div>

‎app/views/alchemy/admin/user_sessions/_logo.html.erb‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@
1313
fill="currentColor"
1414
d="M102.705 26.102h8.626l9.245 33.793h-7.549l-1.541-5.856h-9.448l-1.541 5.856h-7.189l9.397-33.793zm.411 23.008h7.291c-1.282-5.857-2.925-12.841-3.594-16.487-.719 3.647-2.362 10.63-3.697 16.487zm27.472 10.786h-6.931V22.969l6.931-1.026v37.953zm22.187-1.748c-.977.409-3.545 2.364-7.549 2.364-6.883 0-10.682-4.314-10.682-13.405 0-9.554 3.953-14.176 11.143-14.176 2.878 0 5.239.719 6.163 1.079l-.822 5.083c-.666-.256-2.517-.822-4.365-.822-3.388 0-4.981 2.62-4.981 8.579 0 6.061 1.747 8.267 4.775 8.267 2.108 0 4.008-1.128 4.726-1.386l1.592 4.417zm2.671-35.179l6.931-1.026v14.943h.105c.717-.667 3.079-3.954 7.291-3.954 4.826 0 6.728 2.979 6.728 9.193v17.771h-6.934V43.819c0-3.801-.616-4.879-2.721-4.879-2.107 0-3.853 2.157-4.47 2.876v18.079h-6.931V22.969zm44.73 35.026c-.771.514-3.956 2.518-9.038 2.518-5.957 0-10.785-3.852-10.785-13.097 0-9.811 4.775-14.484 10.63-14.484 5.854 0 9.963 3.646 9.963 12.273 0 1.851-.257 3.339-.309 3.597h-13.401c.05 4.571 2.311 6.469 5.235 6.469 2.773 0 5.086-1.231 6.319-1.795l1.386 4.519zm-12.941-13.509h7.034c0-5.237-1.437-6.624-3.338-6.624-1.798 0-3.646 1.643-3.696 6.624zm17.82-10.989h6.107l.31 3.543c.772-.925 2.722-4.109 6.624-4.109 2.98 0 4.828 1.027 5.598 4.057.874-1.181 3.03-4.057 6.728-4.057 4.468 0 6.37 2.517 6.37 9.141v17.823h-6.883V42.637c0-2.311-.358-3.697-2.158-3.697-1.797 0-3.183 2.054-3.543 2.876v18.079h-6.625V42.637c0-2.311-.358-3.697-2.157-3.697-1.796 0-3.131 2.003-3.542 2.876v18.079h-6.828V33.497zm56.744 0l-8.679 27.887c-2.156 6.934-6.213 8.886-8.37 10.067-.718-.926-2.414-3.287-3.081-4.213.771-.668 4.467-2.566 5.546-6.778l-8.318-26.963h7.239c.771 3.132 3.545 14.688 4.314 19.002.821-4.417 3.545-15.87 4.367-19.002h6.982z"
1515
/>
16-
<g>
16+
<g fill="currentColor">
1717
<path
18-
fill="currentColor"
1918
d="M193.986 68.011c.319 0 .667.193 1.031.578.897.95 1.506 1.125 2.353.546.367-.254.548-.633.508-1.05-.054-.799-.66-1.456-1.799-1.957-.818-.364-1.438-.541-1.896-.541-2.436.013-4.74 1.736-6.854 5.116-1.807 2.889-2.722 5.389-2.722 7.435 0 1.336.326 2.474.969 3.379.796 1.128 1.983 1.701 3.526 1.701.029 0 .213-.016.555-.054.268-.028.427-.045.47-.046.306 0 .867-.139 2.703-1.14.226-.117.704-.468 2.439-2.166 1.932-1.896 2.285-2.549 2.366-2.884.084-.275.01-.583-.22-.921-.238-.344-.523-.518-.838-.518a.786.786 0 0 0-.708.429c-.872 1.35-1.932 2.444-3.146 3.266-1.295.868-2.615 1.308-3.923 1.308-.778 0-1.671-.234-1.671-2.074 0-1.427.742-3.47 2.211-6.08 1.621-2.872 3.183-4.327 4.646-4.327zm30.25 10.553c-.354 0-.695.247-1.103.798-.301.408-.535.409-.654.408-.259-.01-1.135-.388-1.441-4.977l-.305-4.414c-.25-1.795-.915-2.704-1.979-2.704-.68 0-1.78.545-4.245 4.804a46.07 46.07 0 0 1-2.457 3.695c-.936 1.256-1.511 1.87-1.856 2.171-.082-.436-.124-.979-.124-1.635 0-.533.027-1.253.081-2.143.055-.995.089-1.633.101-1.925.039-2.004-.251-3.293-.885-3.941a1.569 1.569 0 0 0-1.157-.483c-1.114 0-2.453 1.26-4.214 3.968-.44.683-1.144 1.88-2.093 3.565.149-2.311.529-4.59 1.141-6.795.071-.267.054-.669-.433-1.089-.33-.287-.703-.436-1.107-.436-.863 0-1.277 1.173-1.539 2.19-.313 1.16-.526 2.592-.635 4.245-.119 1.754-.181 3.891-.181 6.36 0 .357.075.868.233 1.577.203.807.5 1.631 1.17 1.631.813 0 1.32-.423 1.381-1.157.113-1.165 1.095-3.422 2.918-6.71 1.54-2.804 2.334-3.953 2.701-4.42 0 .089 0 .194-.005.32-.15 3.265-.211 5.245-.182 5.886.105 2.516.823 3.792 2.139 3.792 1.21 0 2.685-1.261 4.636-3.968.255-.355 2.324-3.588 3.537-5.488.234-.37.414-.648.545-.854.012.086.021.184.031.293.052.55.064 1.329.038 2.328v2.002c.01 1.115.313 2.354.903 3.685.812 1.851 1.907 2.786 3.252 2.786.459 0 .972-.164 1.575-.502.819-.475 1.234-1.083 1.234-1.804.001-.652-.392-1.059-1.021-1.059zm6.628-4.902c-2.19 0-2.468-.365-2.475-.365 0-.874.821-2.04 2.372-3.37 1.809-1.556 2.828-1.882 3.366-1.882.036 0 .073.003.123.006.072.004.298.046.826.328.721.386.872.415 1.009.415.727 0 1.163-.494 1.163-1.324 0-.631-.425-1.187-1.268-1.647-.651-.35-1.201-.517-1.684-.517-1.572 0-3.401 1.039-5.592 3.175-2.195 2.138-3.262 3.892-3.262 5.361 0 .738.509 1.313 1.518 1.711.65.258 1.33.402 2.023.432l3.86.141c.473.023.891.157 1.28.407.556.367.619.737.619.983 0 .86-1.161 1.629-2.133 2.122-1.358.688-2.57 1.035-3.598 1.035-.625 0-.625-.247-.625-.444 0-.104.017-.197.054-.283.126-.3.213-.694.266-1.218l.035-.339-.312-.132c-.656-.279-1.311.032-1.813.841-.316.495-.47.93-.47 1.33 0 .904.4 1.646 1.192 2.199a3.557 3.557 0 0 0 2.134.712c1.598 0 3.218-.569 4.811-1.693 1.794-1.263 2.701-2.733 2.701-4.371.002-2.398-2.057-3.613-6.12-3.613z"
2019
/>
20+
<text x="94" y="83"><%= Alchemy.version %></text>
2121
</g>
2222
<g fill-rule="evenodd" clip-rule="evenodd" fill="currentColor">
2323
<path
@@ -31,5 +31,5 @@
3131
/>
3232
</g>
3333
</svg>
34-
<small><%= Alchemy.version %></small>
34+
<%= yield %>
3535
</div>

‎app/views/alchemy/admin/user_sessions/new.html.erb‎

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,32 @@
22
<%= stylesheet_link_tag "alchemy-devise" %>
33
<% end %>
44

5+
<% content_for(:main_menu_style) { 'collapsed-menu' } %>
6+
57
<div class="login_signup_box">
6-
<%= render "alchemy/admin/user_sessions/logo" %>
7-
<%= render_message do %>
8-
<p>
9-
<strong><%= Alchemy.t('modules.user_sessions') %></strong>
10-
</p>
11-
<p><%= Alchemy.t('welcome_please_identify_notice') %></p>
8+
<%= render "alchemy/admin/user_sessions/logo" do %>
9+
<strong><%= Alchemy.t('welcome_please_identify_notice') %></strong>
1210
<% end %>
13-
<%= alchemy_form_for :user, url: {action: 'create'}, id: 'login', data: { turbo: false } do |f| %>
14-
<%= f.input Devise.authentication_keys.first, autofocus: true, required: true,
15-
input_html: {autocomplete: Devise.authentication_keys.first == :email ? "email" : "username"} %>
16-
<%= f.input :password, required: true, input_html: {autocomplete: "current-password"} %>
17-
<% if devise_mapping.rememberable? %>
18-
<div class="input">
19-
<span class="control-label">&nbsp;</span>
2011

21-
<%= f.label :remember_me, class: "checkbox" do %>
22-
<%= f.check_box :remember_me, checked: true %>
23-
<%= Alchemy.t(:remember_me, scope: 'admin.login', days: Devise.remember_for.in_days.to_i) %>
24-
<% end %>
12+
<div class="panel">
13+
<%= alchemy_form_for :user, url: {action: 'create'}, id: 'login', data: { turbo: false } do |f| %>
14+
<%= f.input Devise.authentication_keys.first, autofocus: true, required: true,
15+
input_html: {autocomplete: Devise.authentication_keys.first == :email ? "email" : "username"} %>
16+
<%= f.input :password, required: true, input_html: {autocomplete: "current-password"} %>
17+
<% if devise_mapping.rememberable? %>
18+
<div class="input">
19+
<span class="control-label">&nbsp;</span>
20+
21+
<%= f.label :remember_me, class: "checkbox" do %>
22+
<%= f.check_box :remember_me, checked: true %>
23+
<%= Alchemy.t(:remember_me, scope: 'admin.login', days: Devise.remember_for.in_days.to_i) %>
24+
<% end %>
25+
</div>
26+
<% end %>
27+
<div class="submit">
28+
<%= link_to Alchemy.t('Forgot your password?'), admin_new_password_path %>
29+
<button type="submit"><%= Alchemy.t(:login) %></button>
2530
</div>
2631
<% end %>
27-
<div class="submit">
28-
<%= link_to Alchemy.t('Forgot your password?'), admin_new_password_path %>
29-
<button type="submit"><%= Alchemy.t(:login) %></button>
30-
</div>
31-
<% end %>
32+
</div>
3233
</div>

‎app/views/alchemy/admin/users/signup.html.erb‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,19 @@
22
<%= stylesheet_link_tag "alchemy-devise" %>
33
<% end %>
44

5+
<% content_for(:main_menu_style) { 'collapsed-menu' } %>
6+
57
<div class="login_signup_box">
6-
<%= render "alchemy/admin/user_sessions/logo" %>
7-
<%= render_message do %>
8+
<%= render "alchemy/admin/user_sessions/logo" do %>
89
<p>
910
<strong><%= Alchemy.t('Welcome to Alchemy') %></strong>
1011
</p>
1112
<p><%= Alchemy.t("Please Signup") %></p>
1213
<% end %>
13-
<%= alchemy_form_for [:admin, @user] do |f| %>
14-
<%= render 'fields', f: f %>
15-
<% end %>
14+
15+
<div class="panel">
16+
<%= alchemy_form_for [:admin, @user] do |f| %>
17+
<%= render 'fields', f: f %>
18+
<% end %>
19+
</div>
1620
</div>

0 commit comments

Comments
 (0)