make 2fa UI less awful

.gitattributes

@@ -7,5 +7,4 @@
 *.js.map binary
 *.css binary
 
-priv/static/instance/static.css diff=css
-priv/static/static-fe/static-fe.css diff=css
+*.css diff=css

lib/pleroma/web/plugs/http_security_plug.ex

@@ -111,8 +111,8 @@ defmodule Pleroma.Web.Plugs.HTTPSecurityPlug do
         ["connect-src 'self' blob: ", static_url, ?\s, websocket_url]
       end
 
-    style_src = "style-src 'self' '#{nonce_tag}'"
-    font_src = "font-src 'self' '#{nonce_tag}' data:"
+    style_src = "style-src 'self' 'unsafe-inline'"
+    font_src = "font-src 'self' data:"
 
     script_src =
       if Config.get(:env) == :dev do

lib/pleroma/web/preload.ex

@@ -5,7 +5,7 @@
 defmodule Pleroma.Web.Preload do
   alias Phoenix.HTML
 
-  def build_tags(_conn, params) do
+  def build_tags(%{assigns: %{csp_nonce: nonce}} = conn, params) do
     preload_data =
       Enum.reduce(Pleroma.Config.get([__MODULE__, :providers], []), %{}, fn parser, acc ->
         terms =
@@ -20,16 +20,17 @@ defmodule Pleroma.Web.Preload do
     rendered_html =
       preload_data
       |> Jason.encode!()
-      |> build_script_tag()
+      |> build_script_tag(nonce)
       |> HTML.safe_to_string()
 
     rendered_html
   end
 
-  def build_script_tag(content) do
+  def build_script_tag(content, nonce) do
     HTML.Tag.content_tag(:script, HTML.raw(content),
       id: "initial-results",
-      type: "application/json"
+      type: "application/json",
+      nonce: nonce
     )
   end
 end

lib/pleroma/web/templates/o_auth/mfa/recovery.html.eex

@@ -1,24 +1,29 @@
-<%= if get_flash(@conn, :info) do %>
-<p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
-<% end %>
-<%= if get_flash(@conn, :error) do %>
-<p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
-<% end %>
+<div>
+  <%= if get_flash(@conn, :info) do %>
+  <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
+  <% end %>
+  <%= if get_flash(@conn, :error) do %>
+  <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
+  <% end %>
+  <div class="panel-heading">
+      <%= Gettext.dpgettext("static_pages", "mfa recover page title", "Two-factor recovery") %>
+  </div>
+  <div class="panel-content">
+      <%= form_for @conn, Routes.mfa_verify_path(@conn, :verify), [as: "mfa"], fn f -> %>
+      <div class="input">
+        <%= label f, :code, Gettext.dpgettext("static_pages", "mfa recover recovery code prompt", "Recovery code") %>
+        <%= text_input f, :code, [autocomplete: false, autocorrect: "off", autocapitalize: "off", autofocus: true, spellcheck: false] %>
+        <%= hidden_input f, :mfa_token, value: @mfa_token %>
+        <%= hidden_input f, :state, value: @state %>
+        <%= hidden_input f, :redirect_uri, value: @redirect_uri %>
+        <%= hidden_input f, :challenge_type, value: "recovery" %>
+      </div>
 
-<h2><%= Gettext.dpgettext("static_pages", "mfa recover page title", "Two-factor recovery") %></h2>
+      <%= submit Gettext.dpgettext("static_pages", "mfa recover verify recovery code button", "Verify") %>
+      <% end %>
+      <a href="<%= Routes.mfa_path(@conn, :show, %{challenge_type: "totp", mfa_token: @mfa_token, state: @state, redirect_uri: @redirect_uri}) %>">
+        <%= Gettext.dpgettext("static_pages", "mfa recover use 2fa code link", "Enter a two-factor code") %>
+      </a>
 
-<%= form_for @conn, Routes.mfa_verify_path(@conn, :verify), [as: "mfa"], fn f -> %>
-<div class="input">
-  <%= label f, :code, Gettext.dpgettext("static_pages", "mfa recover recovery code prompt", "Recovery code") %>
-  <%= text_input f, :code, [autocomplete: false, autocorrect: "off", autocapitalize: "off", autofocus: true, spellcheck: false] %>
-  <%= hidden_input f, :mfa_token, value: @mfa_token %>
-  <%= hidden_input f, :state, value: @state %>
-  <%= hidden_input f, :redirect_uri, value: @redirect_uri %>
-  <%= hidden_input f, :challenge_type, value: "recovery" %>
+  </div>
 </div>
-
-<%= submit Gettext.dpgettext("static_pages", "mfa recover verify recovery code button", "Verify") %>
-<% end %>
-<a href="<%= Routes.mfa_path(@conn, :show, %{challenge_type: "totp", mfa_token: @mfa_token, state: @state, redirect_uri: @redirect_uri}) %>">
-  <%= Gettext.dpgettext("static_pages", "mfa recover use 2fa code link", "Enter a two-factor code") %>
-</a>

lib/pleroma/web/templates/o_auth/mfa/totp.html.eex

@@ -1,24 +1,28 @@
-<%= if get_flash(@conn, :info) do %>
-<p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
-<% end %>
-<%= if get_flash(@conn, :error) do %>
-<p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
-<% end %>
+<div>
+  <%= if get_flash(@conn, :info) do %>
+  <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
+  <% end %>
+  <%= if get_flash(@conn, :error) do %>
+  <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
+  <% end %>
+  <div class="panel-heading">
+      <%= Gettext.dpgettext("static_pages", "mfa auth page title", "Two-factor authentication") %>
+  </div>
+  <div class="panel-content">
+      <%= form_for @conn, Routes.mfa_verify_path(@conn, :verify), [as: "mfa"], fn f -> %>
+      <div class="input">
+        <%= label f, :code, Gettext.dpgettext("static_pages", "mfa auth code prompt", "Authentication code") %>
+        <%= text_input f, :code, [autocomplete: "one-time-code", autocorrect: "off", autocapitalize: "off", autofocus: true, pattern: "[0-9]*", spellcheck: false] %>
+        <%= hidden_input f, :mfa_token, value: @mfa_token %>
+        <%= hidden_input f, :state, value: @state %>
+        <%= hidden_input f, :redirect_uri, value: @redirect_uri %>
+        <%= hidden_input f, :challenge_type, value: "totp" %>
+      </div>
 
-<h2><%= Gettext.dpgettext("static_pages", "mfa auth page title", "Two-factor authentication") %></h2>
-
-<%= form_for @conn, Routes.mfa_verify_path(@conn, :verify), [as: "mfa"], fn f -> %>
-<div class="input">
-  <%= label f, :code, Gettext.dpgettext("static_pages", "mfa auth code prompt", "Authentication code") %>
-  <%= text_input f, :code, [autocomplete: "one-time-code", autocorrect: "off", autocapitalize: "off", autofocus: true, pattern: "[0-9]*", spellcheck: false] %>
-  <%= hidden_input f, :mfa_token, value: @mfa_token %>
-  <%= hidden_input f, :state, value: @state %>
-  <%= hidden_input f, :redirect_uri, value: @redirect_uri %>
-  <%= hidden_input f, :challenge_type, value: "totp" %>
+      <%= submit Gettext.dpgettext("static_pages", "mfa auth verify code button", "Verify") %>
+      <% end %>
+      <a href="<%= Routes.mfa_path(@conn, :show, %{challenge_type: "recovery", mfa_token: @mfa_token, state: @state, redirect_uri: @redirect_uri}) %>">
+        <%= Gettext.dpgettext("static_pages", "mfa auth page use recovery code link", "Enter a two-factor recovery code") %>
+      </a>
+  </div>
 </div>
-
-<%= submit Gettext.dpgettext("static_pages", "mfa auth verify code button", "Verify") %>
-<% end %>
-<a href="<%= Routes.mfa_path(@conn, :show, %{challenge_type: "recovery", mfa_token: @mfa_token, state: @state, redirect_uri: @redirect_uri}) %>">
-  <%= Gettext.dpgettext("static_pages", "mfa auth page use recovery code link", "Enter a two-factor recovery code") %>
-</a>

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

@@ -1,2 +1,8 @@
-<h1><%= Gettext.dpgettext("static_pages", "oauth authorization exists page title", "Authorization exists") %></h1>
-<h2><%= raw Gettext.dpgettext("static_pages", "oauth token code message", "Token code is <br>%{token}", token: safe_to_string(html_escape(@token.token))) %></h2>
+<div>
+    <div class="panel-heading">
+        <%= Gettext.dpgettext("static_pages", "oauth authorization exists page title", "Authorization exists") %>
+    </div>
+    <div class="panel-content">
+        <%= raw Gettext.dpgettext("static_pages", "oauth token code message", "Token code is <br>%{token}", token: safe_to_string(html_escape(@token.token))) %>
+    </div>
+</div>

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

@@ -10,11 +10,13 @@
 <%= if @user do %>
   <div class="account-header">
     <div class="account-header__banner" style="background-image: url('<%= Pleroma.User.banner_url(@user) %>')"></div>
-    <div class="account-header__avatar" style="background-image: url('<%= Pleroma.User.avatar_url(@user) %>')"></div>
-    <div class="account-header__meta">
+    <div class="account-header__avatar" style="background-image: url('<%= Pleroma.User.avatar_url(@user) %>')">
+      <div class="account-header__meta">
       <div class="account-header__display-name"><%= @user.name %></div>
       <div class="account-header__nickname">@<%= @user.nickname %>@<%= Pleroma.User.get_host(@user) %></div>
     </div>
+    </div>
+
   </div>
 <% end %>
 
@@ -23,39 +25,41 @@
     <div class="panel-heading">
       <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>
     </div>
-    <%= render @view_module, "_scopes.html", Map.merge(assigns, %{form: f}) %>
   <% end %>
 
-  <%= if @user do %>
-    <div class="actions">
-      <a class="button button--cancel" href="/">
-        <%= Gettext.dpgettext("static_pages", "oauth authorize cancel button", "Cancel") %>
-      </a>
-      <%= submit Gettext.dpgettext("static_pages", "oauth authorize approve button", "Approve"), class: "button--approve" %>
-    </div>
-  <% else %>
-    <%= if @params["registration"] in ["true", true] do %>
-      <h3><%= Gettext.dpgettext("static_pages", "oauth register page title", "This is the first time you visit! Please enter your Pleroma handle.") %></h3>
-      <p><%= Gettext.dpgettext("static_pages", "oauth register nickname unchangeable warning", "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, Gettext.dpgettext("static_pages", "oauth register nickname prompt", "Pleroma Handle") %>
-        <%= text_input f, :nickname, placeholder: "lain", autocomplete: "username" %>
+  <div class="panel-content">
+    <%= render @view_module, "_scopes.html", Map.merge(assigns, %{form: f}) %>
+    <%= if @user do %>
+      <div class="actions">
+        <a class="button button-cancel" href="/">
+          <%= Gettext.dpgettext("static_pages", "oauth authorize cancel button", "Cancel") %>
+        </a>
+        <%= submit Gettext.dpgettext("static_pages", "oauth authorize approve button", "Approve"), class: "button--approve" %>
       </div>
-      <%= hidden_input f, :name, value: @params["name"] %>
-      <%= hidden_input f, :password, value: @params["password"] %>
-      <br>
     <% else %>
-      <div class="input">
-        <%= label f, :name, Gettext.dpgettext("static_pages", "oauth login username prompt", "Username") %>
-        <%= text_input f, :name %>
-      </div>
-      <div class="input">
-        <%= label f, :password, Gettext.dpgettext("static_pages", "oauth login password prompt", "Password") %>
-        <%= password_input f, :password %>
-      </div>
-      <%= submit Gettext.dpgettext("static_pages", "oauth login button", "Log In") %>
+      <%= if @params["registration"] in ["true", true] do %>
+        <h3><%= Gettext.dpgettext("static_pages", "oauth register page title", "This is your first visit! Please enter your Akkoma handle.") %></h3>
+        <p><%= Gettext.dpgettext("static_pages", "oauth register nickname unchangeable warning", "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, Gettext.dpgettext("static_pages", "oauth register nickname prompt", "Pleroma Handle") %>
+          <%= text_input f, :nickname, placeholder: "lain", autocomplete: "username" %>
+        </div>
+        <%= hidden_input f, :name, value: @params["name"] %>
+        <%= hidden_input f, :password, value: @params["password"] %>
+        <br>
+      <% else %>
+        <div class="input">
+          <%= label f, :name, Gettext.dpgettext("static_pages", "oauth login username prompt", "Username") %>
+          <%= text_input f, :name %>
+        </div>
+        <div class="input">
+          <%= label f, :password, Gettext.dpgettext("static_pages", "oauth login password prompt", "Password") %>
+          <%= password_input f, :password %>
+        </div>
+        <%= submit Gettext.dpgettext("static_pages", "oauth login button", "Log In") %>
+      <% end %>
     <% end %>
-  <% end %>
+  </div>
 </div>
 
 <%= hidden_input f, :client_id, value: @client_id %>

priv/static/static-fe/forms.css

@@ -90,25 +90,69 @@ input {
 
 a.button,
 button {
-  width: 100%;
-  background-color: #1c2a3a;
-  color: var(--primary-text-color);
-  border-radius: 4px;
-  border: none;
-  padding: 10px 16px;
-  margin-top: 20px;
-  margin-bottom: 20px;
-  text-transform: uppercase;
-  font-size: 16px;
-  box-shadow: 0px 0px 2px 0px black,
-    0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset,
-    0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
+    width: 100%;
+    background-color: #1c2a3a;
+    color: var(--primary-text-color);
+    border-radius: 4px;
+    border: none;
+    padding: 10px 16px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    text-transform: uppercase;
+    font-size: 16px;
+    box-shadow: 0px 0px 2px 0px black,
+        0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset,
+        0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
 }
 
 a.button:hover,
 button:hover {
-  cursor: pointer;
-  box-shadow: 0px 0px 0px 1px var(--brand-color),
-    0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset,
-    0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
+    cursor: pointer;
+    box-shadow: 0px 0px 0px 1px var(--brand-color),
+        0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset,
+        0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
 }
+
+.actions {
+    display: flex;
+    flex-grow: 1;
+}
+
+.actions button,
+.actions a.button {
+    width: auto;
+    margin-left: 2%;
+    width: 45%;
+    text-align: center;
+}
+
+.account-header__banner {
+    width: 100%;
+    height: 80px;
+    background-size: cover;
+    background-position: center;
+}
+
+.account-header__avatar {
+    width: 64px;
+    height: 64px;
+    background-size: cover;
+    background-position: center;
+    margin: -60px 10px 10px;
+    border: 6px solid var(--foreground-color);
+    border-radius: 999px;
+}
+
+.account-header__meta {
+    padding: 12px 20px 17px 70px;
+}
+
+.account-header__display-name {
+    font-size: 20px;
+    font-weight: bold;
+}
+
+.account-header__nickname {
+    font-size: 14px;
+    color: var(--muted-text-color);
+}