Update oauth template css fix See merge request pleroma/pleroma!1238tags/v1.1.4
@@ -63,13 +63,14 @@ | |||||
.scopes-input { | .scopes-input { | ||||
display: flex; | display: flex; | ||||
flex-direction: column; | |||||
margin-top: 1em; | margin-top: 1em; | ||||
text-align: left; | text-align: left; | ||||
color: #89898a; | color: #89898a; | ||||
} | } | ||||
.scopes-input label:first-child { | .scopes-input label:first-child { | ||||
flex-basis: 40%; | |||||
height: 2em; | |||||
} | } | ||||
.scopes { | .scopes { | ||||
@@ -80,13 +81,22 @@ | |||||
} | } | ||||
.scope { | .scope { | ||||
flex-basis: 100%; | |||||
display: flex; | display: flex; | ||||
flex-basis: 100%; | |||||
height: 2em; | height: 2em; | ||||
align-items: center; | align-items: center; | ||||
} | } | ||||
.scope:before { | |||||
color: #b9b9ba; | |||||
content: "✔\fe0e"; | |||||
margin-left: 1em; | |||||
margin-right: 1em; | |||||
} | |||||
[type="checkbox"] + label { | [type="checkbox"] + label { | ||||
display: none; | |||||
cursor: pointer; | |||||
margin: 0.5em; | margin: 0.5em; | ||||
} | } | ||||
@@ -95,10 +105,12 @@ | |||||
} | } | ||||
[type="checkbox"] + label:before { | [type="checkbox"] + label:before { | ||||
cursor: pointer; | |||||
display: inline-block; | display: inline-block; | ||||
color: white; | color: white; | ||||
background-color: #121a24; | background-color: #121a24; | ||||
border: 4px solid #121a24; | border: 4px solid #121a24; | ||||
box-shadow: 0px 0px 1px 0 #d8a070; | |||||
box-sizing: border-box; | box-sizing: border-box; | ||||
width: 1.2em; | width: 1.2em; | ||||
height: 1.2em; | height: 1.2em; | ||||
@@ -128,7 +140,8 @@ | |||||
border-radius: 4px; | border-radius: 4px; | ||||
border: none; | border: none; | ||||
padding: 10px; | padding: 10px; | ||||
margin-top: 30px; | |||||
margin-top: 20px; | |||||
margin-bottom: 20px; | |||||
text-transform: uppercase; | text-transform: uppercase; | ||||
font-size: 16px; | font-size: 16px; | ||||
box-shadow: 0px 0px 2px 0px black, | box-shadow: 0px 0px 2px 0px black, | ||||
@@ -147,8 +160,8 @@ | |||||
box-sizing: border-box; | box-sizing: border-box; | ||||
width: 100%; | width: 100%; | ||||
background-color: #931014; | background-color: #931014; | ||||
border: 1px solid #a06060; | |||||
border-radius: 4px; | border-radius: 4px; | ||||
border: none; | |||||
padding: 10px; | padding: 10px; | ||||
margin-top: 20px; | margin-top: 20px; | ||||
font-weight: 500; | font-weight: 500; | ||||
@@ -171,12 +184,27 @@ | |||||
margin-top: 0 | margin-top: 0 | ||||
} | } | ||||
.scopes-input { | |||||
flex-direction: column; | |||||
.scope { | |||||
flex-basis: 0%; | |||||
} | } | ||||
.scope { | |||||
flex-basis: 50%; | |||||
.scope:before { | |||||
content: ""; | |||||
margin-left: 0em; | |||||
margin-right: 1em; | |||||
} | |||||
.scope:first-child:before { | |||||
margin-left: 1em; | |||||
content: "✔\fe0e"; | |||||
} | |||||
.scope:after { | |||||
content: ","; | |||||
} | |||||
.scope:last-child:after { | |||||
content: ""; | |||||
} | } | ||||
} | } | ||||
.form-row { | .form-row { | ||||
@@ -1,13 +1,19 @@ | |||||
<div class="scopes-input"> | <div class="scopes-input"> | ||||
<%= label @form, :scope, "Permissions" %> | |||||
<%= label @form, :scope, "The following permissions will be granted" %> | |||||
<div class="scopes"> | <div class="scopes"> | ||||
<%= for scope <- @available_scopes do %> | <%= for scope <- @available_scopes do %> | ||||
<%# Note: using hidden input with `unchecked_value` in order to distinguish user's empty selection from `scope` param being omitted %> | <%# Note: using hidden input with `unchecked_value` in order to distinguish user's empty selection from `scope` param being omitted %> | ||||
<div class="scope"> | |||||
<%= if scope in @scopes do %> | |||||
<div class="scope"> | |||||
<%= 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 %> | |||||
<%= String.capitalize(scope) %> | |||||
<% end %> | |||||
</div> | |||||
<% else %> | |||||
<%= checkbox @form, :"scope_#{scope}", value: scope in @scopes && scope, checked_value: scope, unchecked_value: "", name: "authorization[scope][]" %> | <%= checkbox @form, :"scope_#{scope}", value: scope in @scopes && scope, checked_value: scope, unchecked_value: "", name: "authorization[scope][]" %> | ||||
<%= label @form, :"scope_#{scope}", String.capitalize(scope) %> | |||||
</div> | |||||
<% end %> | |||||
<% end %> | <% end %> | ||||
</div> | </div> | ||||
</div> | </div> |
@@ -1,7 +1,9 @@ | |||||
<h2>Sign in with external provider</h2> | <h2>Sign in with external provider</h2> | ||||
<%= form_for @conn, o_auth_path(@conn, :prepare_request), [as: "authorization", method: "get"], fn f -> %> | <%= form_for @conn, o_auth_path(@conn, :prepare_request), [as: "authorization", method: "get"], fn f -> %> | ||||
<%= render @view_module, "_scopes.html", Map.put(assigns, :form, f) %> | |||||
<div style="display: none"> | |||||
<%= render @view_module, "_scopes.html", Map.merge(assigns, %{form: f}) %> | |||||
</div> | |||||
<%= hidden_input f, :client_id, value: @client_id %> | <%= hidden_input f, :client_id, value: @client_id %> | ||||
<%= hidden_input f, :redirect_uri, value: @redirect_uri %> | <%= hidden_input f, :redirect_uri, value: @redirect_uri %> | ||||
@@ -6,26 +6,38 @@ | |||||
<% end %> | <% end %> | ||||
<h2>OAuth Authorization</h2> | <h2>OAuth Authorization</h2> | ||||
<%= form_for @conn, o_auth_path(@conn, :authorize), [as: "authorization"], fn f -> %> | <%= form_for @conn, o_auth_path(@conn, :authorize), [as: "authorization"], fn f -> %> | ||||
<div class="input"> | |||||
<%= label f, :name, "Name or email" %> | |||||
<%= text_input f, :name %> | |||||
</div> | |||||
<div class="input"> | |||||
<%= label f, :password, "Password" %> | |||||
<%= password_input f, :password %> | |||||
</div> | |||||
<%= render @view_module, "_scopes.html", Map.merge(assigns, %{form: f}) %> | |||||
<%= if @params["registration"] in ["true", true] do %> | |||||
<h3>This is the first time you visit! Please enter your Pleroma handle.</h3> | |||||
<p>Choose carefully! You won't be able to change this later. You will be able to change your display name, though.</p> | |||||
<div class="input"> | |||||
<%= label f, :nickname, "Pleroma Handle" %> | |||||
<%= text_input f, :nickname, placeholder: "lain" %> | |||||
</div> | |||||
<%= hidden_input f, :name, value: @params["name"] %> | |||||
<%= hidden_input f, :password, value: @params["password"] %> | |||||
<br> | |||||
<% else %> | |||||
<div class="input"> | |||||
<%= label f, :name, "Username" %> | |||||
<%= text_input f, :name %> | |||||
</div> | |||||
<div class="input"> | |||||
<%= label f, :password, "Password" %> | |||||
<%= password_input f, :password %> | |||||
</div> | |||||
<%= submit "Log In" %> | |||||
<%= render @view_module, "_scopes.html", Map.merge(assigns, %{form: f}) %> | |||||
<% end %> | |||||
<%= hidden_input f, :client_id, value: @client_id %> | <%= hidden_input f, :client_id, value: @client_id %> | ||||
<%= hidden_input f, :response_type, value: @response_type %> | <%= hidden_input f, :response_type, value: @response_type %> | ||||
<%= hidden_input f, :redirect_uri, value: @redirect_uri %> | <%= hidden_input f, :redirect_uri, value: @redirect_uri %> | ||||
<%= hidden_input f, :state, value: @state %> | <%= hidden_input f, :state, value: @state %> | ||||
<%= submit "Authorize" %> | |||||
<% end %> | <% end %> | ||||
<%= if Pleroma.Config.oauth_consumer_enabled?() do %> | <%= if Pleroma.Config.oauth_consumer_enabled?() do %> | ||||
<%= render @view_module, Pleroma.Web.Auth.Authenticator.oauth_consumer_template(), assigns %> | <%= render @view_module, Pleroma.Web.Auth.Authenticator.oauth_consumer_template(), assigns %> | ||||
<% end %> | <% end %> | ||||