Skip to content

Commit beb3d06

Browse files
ImTheKaiImTheKai
committed
Adjust the register and forgot password page to the same style
Signed-off-by: Kai Wagner <kai.wagner@percona.com>
1 parent 2b56468 commit beb3d06

4 files changed

Lines changed: 80 additions & 39 deletions

File tree

‎app/assets/stylesheets/components/session.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,13 @@
2323
color: var(--color-text-primary);
2424
}
2525

26+
.session-text {
27+
margin: 0 0 var(--spacing-6);
28+
color: var(--color-text-muted);
29+
font-size: var(--font-size-sm);
30+
line-height: var(--line-height-relaxed);
31+
}
32+
2633
.session-oauth {
2734
margin-bottom: var(--spacing-6);
2835
}
@@ -136,6 +143,13 @@
136143
font-size: var(--font-size-sm);
137144
}
138145

146+
.session-hint {
147+
display: block;
148+
margin-top: var(--spacing-2);
149+
color: var(--color-text-muted);
150+
font-size: var(--font-size-xs);
151+
}
152+
139153
.session-link {
140154
color: var(--color-text-link);
141155
text-decoration: none;

‎app/views/passwords/edit.html.slim‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
1-
h1 Set a new password
1+
.session-page
2+
.session-card
3+
h1.session-title Set a new password
24

3-
= form_with url: password_path, method: :patch, data: { turbo: false } do
4-
= hidden_field_tag :token, @raw
5-
.field
6-
= label_tag :password
7-
= password_field_tag :password
8-
.field
9-
= label_tag :password_confirmation
10-
= password_field_tag :password_confirmation
11-
.actions
12-
= submit_tag 'Update password'
5+
= form_with url: password_path, method: :patch, data: { turbo: false }, class: 'session-form' do
6+
= hidden_field_tag :token, @raw
7+
.session-field
8+
= label_tag :password, 'Password', class: 'visually-hidden'
9+
= password_field_tag :password, nil, placeholder: 'Password', autocomplete: 'new-password', class: 'session-input'
10+
.session-field
11+
= label_tag :password_confirmation, 'Confirm password', class: 'visually-hidden'
12+
= password_field_tag :password_confirmation, nil, placeholder: 'Confirm password', autocomplete: 'new-password', class: 'session-input'
13+
.session-actions
14+
= submit_tag 'Update password', class: 'session-submit'
15+
16+
.session-links
17+
= link_to 'Back to Log In', new_session_path, class: 'session-link'

‎app/views/passwords/new.html.slim‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
1-
h1 Reset password
1+
.session-page
2+
.session-card
3+
h1.session-title Reset password
24

3-
= form_with url: password_path, method: :post, data: { turbo: false } do
4-
.field
5-
= label_tag :email
6-
= email_field_tag :email
7-
.actions
8-
= submit_tag 'Send reset link'
5+
= form_with url: password_path, method: :post, data: { turbo: false }, class: 'session-form' do
6+
.session-field
7+
= label_tag :email, 'Email', class: 'visually-hidden'
8+
= email_field_tag :email, nil, placeholder: 'Email', autocomplete: 'email', class: 'session-input'
9+
.session-actions
10+
= submit_tag 'Send reset link', class: 'session-submit'
11+
12+
.session-links
13+
= link_to 'Back to Log In', new_session_path, class: 'session-link'

‎app/views/registrations/new.html.slim‎

Lines changed: 38 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,40 @@
1-
h1 Register
1+
.session-page
2+
.session-card
3+
h1.session-title Register
4+
p.session-text Enter your email. If it's in the archive, we'll verify and attach it. Otherwise, we'll create a new alias.
25

3-
p Enter your email. If it's in the archive, we'll verify and attach it. Otherwise, we'll create a new alias.
6+
.session-oauth
7+
= link_to '/auth/google_oauth2', class: 'session-oauth-button' do
8+
span.session-oauth-icon aria-hidden="true"
9+
svg.session-oauth-svg width="18" height="18" viewBox="0 0 48 48"
10+
path fill="#FFC107" d="M43.6 20.5H42V20H24v8h11.3C33.6 32.6 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3 0 5.8 1.1 7.9 2.9l5.7-5.7C34.5 6.1 29.5 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20c11 0 20-9 20-20 0-1.3-.1-2.2-.4-3.5z"
11+
path fill="#FF3D00" d="M6.3 14.7l6.6 4.8C14.7 16.2 19 14 24 14c3 0 5.8 1.1 7.9 2.9l5.7-5.7C34.5 6.1 29.5 4 24 4 16.2 4 9.5 8.3 6.3 14.7z"
12+
path fill="#4CAF50" d="M24 44c5.1 0 9.9-1.9 13.5-5.1l-6.2-5.1C29.3 35.6 26.8 36.5 24 36.5c-5.1 0-9.4-3.4-11-8.1l-6.5 5C9.7 39.7 16.4 44 24 44z"
13+
path fill="#1976D2" d="M43.6 20.5H42V20H24v8h11.3c-1.1 3.1-3.3 5.7-6.1 7.4l6.2 5.1C39.1 36.9 44 31.1 44 24c0-1.3-.1-2.2-.4-3.5z"
14+
span.session-oauth-label Continue with Google
415

5-
= form_with url: registration_path, method: :post, data: { turbo: false } do |f|
6-
.field
7-
= label_tag :email
8-
= email_field_tag :email, nil, required: true, placeholder: "you@example.com"
9-
.field
10-
= label_tag :name, 'Alias name (for new email)'
11-
= text_field_tag :name, nil, placeholder: "Your display name"
12-
.field
13-
= label_tag :username, 'Username'
14-
= text_field_tag :username, nil, placeholder: "username", pattern: "[A-Za-z0-9_.-]+", required: true
15-
small Allowed: letters, numbers, _, -, .
16-
.field
17-
= label_tag :password, 'Password'
18-
= password_field_tag :password, nil, placeholder: "Password", required: true
19-
.field
20-
= label_tag :password_confirmation, 'Confirm password'
21-
= password_field_tag :password_confirmation, nil, placeholder: "Confirm password", required: true
22-
.actions
23-
= submit_tag 'Send verification email'
16+
.session-divider
17+
span OR
18+
19+
= form_with url: registration_path, method: :post, data: { turbo: false }, class: 'session-form' do |f|
20+
.session-field
21+
= label_tag :email, 'Email', class: 'visually-hidden'
22+
= email_field_tag :email, nil, required: true, placeholder: "you@example.com", autocomplete: 'email', class: 'session-input'
23+
.session-field
24+
= label_tag :name, 'Alias name (for new email)', class: 'visually-hidden'
25+
= text_field_tag :name, nil, placeholder: "Your display name", autocomplete: 'name', class: 'session-input'
26+
.session-field
27+
= label_tag :username, 'Username', class: 'visually-hidden'
28+
= text_field_tag :username, nil, placeholder: "username", pattern: "[A-Za-z0-9_.-]+", required: true, autocomplete: 'username', class: 'session-input'
29+
small.session-hint Allowed: letters, numbers, _, -, .
30+
.session-field
31+
= label_tag :password, 'Password', class: 'visually-hidden'
32+
= password_field_tag :password, nil, placeholder: "Password", required: true, autocomplete: 'new-password', class: 'session-input'
33+
.session-field
34+
= label_tag :password_confirmation, 'Confirm password', class: 'visually-hidden'
35+
= password_field_tag :password_confirmation, nil, placeholder: "Confirm password", required: true, autocomplete: 'new-password', class: 'session-input'
36+
.session-actions
37+
= submit_tag 'Send verification email', class: 'session-submit'
38+
39+
.session-links
40+
= link_to 'Already have an account? Log In', new_session_path, class: 'session-link'

0 commit comments

Comments
 (0)