mirror of
https://git.pleroma.social/pleroma/pleroma.git
synced 2026-02-15 17:16:57 +00:00
Improve the UI of the OAuth login page
This commit is contained in:
Mark Felder
parent
34efff85da
commit
7e6392f603
3 changed files with 269 additions and 8 deletions
1
changelog.d/oauth-static-page.change
Normal file
1
changelog.d/oauth-static-page.change
Normal file
|
|
@ -0,0 +1 @@
|
|||
Improve the UI of the OAuth login page served directly from the backend
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
<%= checkbox @form, :"scope_#{scope}", value: scope in @scopes && scope, checked_value: scope, unchecked_value: "", name: "authorization[scope][]" %>
|
||||
<%= label @form, :"scope_#{scope}", String.capitalize(scope) %>
|
||||
<%= if scope in @scopes && scope do %>
|
||||
<code><%= scope %></code> <%= :"Elixir.Gettext".dgettext(Gettext, "oauth_scopes", scope) %>
|
||||
<span class="scope-description"><%= :"Elixir.Gettext".dgettext(Gettext, "oauth_scopes", scope) %></span>
|
||||
<% end %>
|
||||
</div>
|
||||
<% else %>
|
||||
|
|
@ -17,3 +17,162 @@
|
|||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Make scope label bold and white */
|
||||
.scopes-input label:first-child {
|
||||
color: var(--primary-text-color) !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
.scope-description {
|
||||
color: var(--primary-text-color);
|
||||
font-size: 0.9em;
|
||||
margin-left: 8px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Override existing CSS that applies old checkmark content */
|
||||
.scope:first-child:before {
|
||||
content: "" !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
/* Make checkmarks consistently orange and remove all margin-left */
|
||||
.scope:before {
|
||||
color: var(--brand-color) !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure proper horizontal layout for all screen sizes */
|
||||
.scopes {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.scope {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 8px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.scope:before {
|
||||
content: "";
|
||||
margin-right: 8px;
|
||||
flex-shrink: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23d8a070'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z' /%3E%3C/svg%3E");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.scope label {
|
||||
font-weight: bold;
|
||||
margin-right: 8px;
|
||||
flex-shrink: 0;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
.scope-description {
|
||||
color: var(--primary-text-color);
|
||||
font-size: 0.9em;
|
||||
line-height: 1.4;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
flex: 1;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Mobile responsive fixes with grid layout */
|
||||
@media all and (max-width: 420px) {
|
||||
.scopes {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.scope {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-areas:
|
||||
"checkmark label"
|
||||
"checkmark description";
|
||||
align-items: start;
|
||||
padding: 4px 0;
|
||||
gap: 0 8px;
|
||||
}
|
||||
|
||||
.scope:before {
|
||||
content: "";
|
||||
grid-area: checkmark;
|
||||
align-self: start;
|
||||
margin: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23d8a070'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z' /%3E%3C/svg%3E");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.scope label {
|
||||
font-weight: bold;
|
||||
grid-area: label;
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
.scope-description {
|
||||
grid-area: description;
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
font-size: 0.85em;
|
||||
color: var(--primary-text-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.scope:after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
/* For very small screens */
|
||||
@media all and (max-width: 320px) {
|
||||
.scope {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas:
|
||||
"checkmark"
|
||||
"label"
|
||||
"description";
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.scope:before {
|
||||
justify-self: center;
|
||||
margin: 0 0 4px 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23d8a070'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z' /%3E%3C/svg%3E");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.scope label {
|
||||
text-align: center;
|
||||
margin: 0 0 4px 0;
|
||||
color: var(--primary-text-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.scope-description {
|
||||
text-align: center;
|
||||
color: var(--primary-text-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -20,16 +20,16 @@
|
|||
|
||||
<div class="container__content">
|
||||
<%= if @app do %>
|
||||
<p><%= raw Gettext.dpgettext("static_pages", "oauth authorize message", "Application <strong>%{client_name}</strong> is requesting access to your account.", client_name: safe_to_string(html_escape(@app.client_name))) %></p>
|
||||
<h2><%= raw Gettext.dpgettext("static_pages", "oauth authorize message", "Application <strong>%{client_name}</strong> is requesting access to your account.", client_name: safe_to_string(html_escape(@app.client_name))) %></h2>
|
||||
<%= render Phoenix.Controller.view_module(@conn), "_scopes.html", Map.merge(assigns, %{form: f}) %>
|
||||
<% end %>
|
||||
|
||||
<%= if @user do %>
|
||||
<div class="actions">
|
||||
<a class="button button--cancel" href="/">
|
||||
<a class="button" href="/">
|
||||
<%= Gettext.dpgettext("static_pages", "oauth authorize cancel button", "Cancel") %>
|
||||
</a>
|
||||
<%= submit Gettext.dpgettext("static_pages", "oauth authorize approve button", "Approve"), class: "button--approve" %>
|
||||
<%= submit Gettext.dpgettext("static_pages", "oauth authorize approve button", "Approve"), class: "button" %>
|
||||
</div>
|
||||
<% else %>
|
||||
<%= if @params["registration"] in ["true", true] do %>
|
||||
|
|
@ -41,17 +41,18 @@
|
|||
</div>
|
||||
<%= hidden_input f, :name, value: @params["name"] %>
|
||||
<%= hidden_input f, :password, value: @params["password"] %>
|
||||
<br>
|
||||
<%= submit Gettext.dpgettext("static_pages", "oauth register button", "Register"), class: "button" %>
|
||||
<% else %>
|
||||
<h3><%= Gettext.dpgettext("static_pages", "oauth login page title", "Sign in to your account") %></h3>
|
||||
<div class="input">
|
||||
<%= label f, :name, Gettext.dpgettext("static_pages", "oauth login username prompt", "Username") %>
|
||||
<%= text_input f, :name %>
|
||||
<%= text_input f, :name, autocomplete: "username" %>
|
||||
</div>
|
||||
<div class="input">
|
||||
<%= label f, :password, Gettext.dpgettext("static_pages", "oauth login password prompt", "Password") %>
|
||||
<%= password_input f, :password %>
|
||||
<%= password_input f, :password, autocomplete: "current-password" %>
|
||||
</div>
|
||||
<%= submit Gettext.dpgettext("static_pages", "oauth login button", "Log In") %>
|
||||
<%= submit Gettext.dpgettext("static_pages", "oauth login button", "Log In"), class: "button" %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
@ -65,3 +66,103 @@
|
|||
<%= if Pleroma.Config.oauth_consumer_enabled?() do %>
|
||||
<%= render Phoenix.Controller.view_module(@conn), Pleroma.Web.Auth.WrapperAuthenticator.oauth_consumer_template(), assigns %>
|
||||
<% end %>
|
||||
|
||||
<style>
|
||||
/* Make app name orange */
|
||||
h2 strong {
|
||||
color: var(--brand-color);
|
||||
}
|
||||
|
||||
/* Make approve button text orange on hover */
|
||||
.button:hover {
|
||||
color: var(--brand-color) !important;
|
||||
border-color: var(--brand-color) !important;
|
||||
}
|
||||
|
||||
/* Ensure equal button widths and proper centering */
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.actions .button {
|
||||
flex: 1;
|
||||
width: auto;
|
||||
margin-left: 0;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Mobile responsive improvements */
|
||||
@media all and (max-width: 420px) {
|
||||
.container__content {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 15px;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.actions .button {
|
||||
flex: 1;
|
||||
width: auto;
|
||||
margin-left: 0;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.account-header__banner {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.account-header__avatar {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin: -35px 10px 0;
|
||||
}
|
||||
|
||||
.account-header__display-name {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.account-header__nickname {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.input {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 16px; /* Prevents zoom on iOS */
|
||||
}
|
||||
}
|
||||
|
||||
/* Ensure proper text wrapping on all screen sizes */
|
||||
h2, h3, p {
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue