Skip to content

Commit d2ba2f0

Browse files
authored
tidy up oauth screen (#669)
1 parent 402b291 commit d2ba2f0

File tree

3 files changed

+40
-39
lines changed

3 files changed

+40
-39
lines changed
Lines changed: 26 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,30 @@
1-
<header class="page-header" role="banner" style="margin: 0 auto;">
2-
<h1><%= t('.title') %></h1>
1+
<header class="text-center mb-8">
2+
<h1 class="font-bold text-3xl text-white"><%= t('.title') %></h1>
33
</header>
4-
<p class="h4">
5-
<%= raw t('.prompt', client_name: content_tag(:strong, class: 'text-info') { @pre_auth.client.name }) %>
6-
</p>
74

8-
<% if @pre_auth.scopes.count > 0 %>
9-
<div id="oauth-permissions">
10-
<p><%= t('.able_to') %>:</p>
5+
<div class="bg-dark rounded-lg p-6 mb-8 border border-darkless">
6+
<p class="text-lg text-white mb-4">
7+
<%= raw t('.prompt', client_name: content_tag(:strong, class: 'text-primary') { @pre_auth.client.name }) %>
8+
</p>
119

12-
<ul class="text-info">
13-
<% @pre_auth.scopes.each do |scope| %>
14-
<li><%= t scope, scope: [:doorkeeper, :scopes] %></li>
15-
<% end %>
16-
</ul>
17-
</div>
18-
<% end %>
10+
<% if @pre_auth.scopes.count > 0 %>
11+
<div id="oauth-permissions">
12+
<p class="text-sm text-white mb-3"><%= t('.able_to') %>:</p>
1913

20-
<div class="actions">
21-
<%= form_tag oauth_authorization_path, method: :post do %>
14+
<ul class="space-y-2">
15+
<% @pre_auth.scopes.each do |scope| %>
16+
<li class="flex items-center text-white">
17+
<span class="inline-block w-2 h-2 bg-primary rounded-full mr-3"></span>
18+
<%= t scope, scope: [:doorkeeper, :scopes] %>
19+
</li>
20+
<% end %>
21+
</ul>
22+
</div>
23+
<% end %>
24+
</div>
25+
26+
<div class="space-y-3">
27+
<%= form_tag oauth_authorization_path, method: :post, class: "w-full" do %>
2228
<%= hidden_field_tag :client_id, @pre_auth.client.uid, id: nil %>
2329
<%= hidden_field_tag :redirect_uri, @pre_auth.redirect_uri, id: nil %>
2430
<%= hidden_field_tag :state, @pre_auth.state, id: nil %>
@@ -27,9 +33,9 @@
2733
<%= hidden_field_tag :scope, @pre_auth.scope, id: nil %>
2834
<%= hidden_field_tag :code_challenge, @pre_auth.code_challenge, id: nil %>
2935
<%= hidden_field_tag :code_challenge_method, @pre_auth.code_challenge_method, id: nil %>
30-
<%= submit_tag t('doorkeeper.authorizations.buttons.authorize'), class: "btn btn-success btn-lg btn-block", style: "background-color: oklch(70.03% 0.194 144.71); border: none" %>
36+
<%= submit_tag t('doorkeeper.authorizations.buttons.authorize'), class: "w-full px-4 py-3 bg-primary hover:bg-red-600 text-white font-bold rounded transition-colors cursor-pointer" %>
3137
<% end %>
32-
<%= form_tag oauth_authorization_path, method: :delete do %>
38+
<%= form_tag oauth_authorization_path, method: :delete, class: "w-full" do %>
3339
<%= hidden_field_tag :client_id, @pre_auth.client.uid, id: nil %>
3440
<%= hidden_field_tag :redirect_uri, @pre_auth.redirect_uri, id: nil %>
3541
<%= hidden_field_tag :state, @pre_auth.state, id: nil %>
@@ -38,6 +44,6 @@
3844
<%= hidden_field_tag :scope, @pre_auth.scope, id: nil %>
3945
<%= hidden_field_tag :code_challenge, @pre_auth.code_challenge, id: nil %>
4046
<%= hidden_field_tag :code_challenge_method, @pre_auth.code_challenge_method, id: nil %>
41-
<%= submit_tag t('doorkeeper.authorizations.buttons.deny'), class: "btn btn-danger btn-lg btn-block" %>
47+
<%= submit_tag t('doorkeeper.authorizations.buttons.deny'), class: "w-full px-4 py-3 border-darkless bg-dark hover:bg-gray-600 border border-gray-600 text-gray-300 rounded transition-colors cursor-pointer" %>
4248
<% end %>
4349
</div>
Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,25 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html class="production" data-theme="dark">
33
<head>
44
<title><%= t('doorkeeper.layouts.application.title') %></title>
55
<meta charset="utf-8">
66
<meta http-equiv="X-UA-Compatible" content="IE=edge">
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<meta name="color-scheme" content="dark">
89

9-
<%= stylesheet_link_tag :app %>
10+
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
11+
<%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
1012
<%= csrf_meta_tags %>
11-
<style>
12-
input[type="submit"] {
13-
max-width: 200px;
14-
}
15-
</style>
1613
</head>
17-
<body>
18-
<main class="container">
19-
<div style="margin 0 auto;">
20-
<%- if flash[:notice].present? %>
21-
<div class="alert alert-info">
22-
<%= flash[:notice] %>
23-
</div>
24-
<% end -%>
14+
<body class="min-h-screen bg-darker text-white" style="margin: 0; padding: 0; display: flex; align-items: center; justify-content: center;">
15+
<main class="w-full max-w-md px-5 py-8">
16+
<%- if flash[:notice].present? %>
17+
<div class="mb-6 p-4 bg-green-500/10 border border-green-500/20 rounded-lg text-green-400">
18+
<%= flash[:notice] %>
19+
</div>
20+
<% end -%>
2521

26-
<%= yield %>
27-
</div>
28-
</main>
22+
<%= yield %>
23+
</main>
2924
</body>
3025
</html>

config/locales/doorkeeper.en.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ en:
6868
title: 'An error has occurred'
6969
new:
7070
title: 'Authorization required'
71-
prompt: 'Authorize %{client_name} to use your account?'
71+
prompt: 'Authorize %{client_name} to use your Hackatime account?'
7272
able_to: 'This application will be able to'
7373
show:
7474
title: 'Authorization code'

0 commit comments

Comments
 (0)