Merge branch 'update-oauth-template-css-fix' into 'develop'

Update oauth template css fix

See merge request pleroma/pleroma!1238

lib/pleroma/web/templates/layout/app.html.eex

@@ -63,13 +63,14 @@
 
       .scopes-input {
         display: flex;
+        flex-direction: column;
         margin-top: 1em;
         text-align: left;
         color: #89898a;
       }
 
       .scopes-input label:first-child {
-        flex-basis: 40%;
+        height: 2em;
       }
 
       .scopes {
@@ -80,13 +81,22 @@
       }
 
       .scope {
-        flex-basis: 100%;
         display: flex;
+        flex-basis: 100%;
         height: 2em;
         align-items: center;
       }
 
+      .scope:before {
+        color: #b9b9ba;
+        content: "✔\fe0e";
+        margin-left: 1em;
+        margin-right: 1em;
+      }
+
       [type="checkbox"] + label {
+        display: none;
+        cursor: pointer;
         margin: 0.5em;
       }
 
@@ -95,10 +105,12 @@
       }
 
       [type="checkbox"] + label:before {
+        cursor: pointer;
         display: inline-block;
         color: white;
         background-color: #121a24;
         border: 4px solid #121a24;
+        box-shadow: 0px 0px 1px 0 #d8a070;
         box-sizing: border-box;
         width: 1.2em;
         height: 1.2em;
@@ -128,7 +140,8 @@
         border-radius: 4px;
         border: none;
         padding: 10px;
-        margin-top: 30px;
+        margin-top: 20px;
+        margin-bottom: 20px;
         text-transform: uppercase;
         font-size: 16px;
         box-shadow: 0px 0px 2px 0px black,
@@ -147,8 +160,8 @@
         box-sizing: border-box;
         width: 100%;
         background-color: #931014;
+        border: 1px solid #a06060;
         border-radius: 4px;
-        border: none;
         padding: 10px;
         margin-top: 20px;
         font-weight: 500;
@@ -171,12 +184,27 @@
           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 {

lib/pleroma/web/templates/o_auth/o_auth/_scopes.html.eex

@@ -1,13 +1,19 @@
 <div class="scopes-input">
-  <%= label @form, :scope, "Permissions" %>
-
+  <%= label @form, :scope, "The following permissions will be granted" %>
   <div class="scopes">
     <%= 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 %>
-      <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][]" %>
-        <%= label @form, :"scope_#{scope}", String.capitalize(scope) %>
-      </div>
+      <% end %>
     <% end %>
   </div>
 </div>

lib/pleroma/web/templates/o_auth/o_auth/consumer.html.eex

@@ -1,7 +1,9 @@
 <h2>Sign in with external provider</h2>
 
 <%= 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, :redirect_uri, value: @redirect_uri %>

lib/pleroma/web/templates/o_auth/o_auth/show.html.eex

@@ -6,26 +6,38 @@
 <% end %>
 
 <h2>OAuth Authorization</h2>
-
 <%= 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, :response_type, value: @response_type %>
 <%= hidden_input f, :redirect_uri, value: @redirect_uri %>
 <%= hidden_input f, :state, value: @state %>
-<%= submit "Authorize" %>
 <% end %>
 
 <%= if Pleroma.Config.oauth_consumer_enabled?() do %>
   <%= render @view_module, Pleroma.Web.Auth.Authenticator.oauth_consumer_template(), assigns %>
 <% end %>
+