From 5a2add64e733aabdc8d799246173f4013a8d02ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Jaenisch?= <andre.jaenisch@posteo.de>
Date: Sun, 5 Jun 2022 18:59:07 +0200
Subject: [PATCH 1/2] Improve UX on modal for deleting an access token
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Before, both action buttons where coloured on hover. Otherwise they
appeared as ghost buttons. UX tells us, that call to action must not
be displayed as ghost button.

Using red is perceived as warning colour in Western cultures. It was
used for the non-destructive action before. This PR swaps the colour
and turns the cancel button into a filled one, so it is saver to do
nothing then to accidentally delete an access button. We want the
person to do this consciously.

In another iteration the wording here could be improved. See the
associated issue for further details.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
---
 templates/user/settings/applications.tmpl | 142 +++++++++++-----------
 1 file changed, 74 insertions(+), 68 deletions(-)

diff --git a/templates/user/settings/applications.tmpl b/templates/user/settings/applications.tmpl
index 811ce5d64397..1dde74c502f8 100644
--- a/templates/user/settings/applications.tmpl
+++ b/templates/user/settings/applications.tmpl
@@ -1,77 +1,83 @@
 {{template "base/head" .}}
 <div class="page-content user settings applications">
-	{{template "user/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
-		<h4 class="ui top attached header">
-			{{.i18n.Tr "settings.manage_access_token"}}
-		</h4>
-		<div class="ui attached segment">
-			<div class="ui key list">
-				<div class="item">
-					{{.i18n.Tr "settings.tokens_desc"}}
-				</div>
-				{{range .Tokens}}
-					<div class="item">
-						<div class="right floated content">
-								<button class="ui red tiny button delete-button" data-modal-id="delete-token" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
-									{{svg "octicon-trash" 16 "mr-2"}}
-									{{$.i18n.Tr "settings.delete_token"}}
-								</button>
-						</div>
-						<i class="big send icon {{if .HasRecentActivity}}green{{end}}" {{if .HasRecentActivity}}data-content="{{$.i18n.Tr "settings.token_state_desc"}}" data-variation="inverted tiny"{{end}}></i>
-						<div class="content">
-							<strong>{{.Name}}</strong>
-							<div class="activity meta">
-								<i>{{$.i18n.Tr "settings.add_on"}} <span>{{.CreatedUnix.FormatShort}}</span> —  {{svg "octicon-info"}} {{if .HasUsed}}{{$.i18n.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="green"{{end}}>{{.UpdatedUnix.FormatShort}}</span>{{else}}{{$.i18n.Tr "settings.no_activity"}}{{end}}</i>
-							</div>
-						</div>
-					</div>
-				{{end}}
-			</div>
-		</div>
-		<div class="ui attached bottom segment">
-			<h5 class="ui top header">
-				{{.i18n.Tr "settings.generate_new_token"}}
-			</h5>
-			<p>{{.i18n.Tr "settings.new_token_desc"}}</p>
-			<form class="ui form ignore-dirty" action="{{.Link}}" method="post">
-				{{.CsrfTokenHtml}}
-				<div class="field {{if .Err_Name}}error{{end}}">
-					<label for="name">{{.i18n.Tr "settings.token_name"}}</label>
-					<input id="name" name="name" value="{{.name}}" autofocus required>
-				</div>
-				<button class="ui green button">
-					{{.i18n.Tr "settings.generate_token"}}
-				</button>
-			</form>
-		</div>
+  {{template "user/settings/navbar" .}}
+  <div class="ui container">
+    {{template "base/alert" .}}
+    <h4 class="ui top attached header">
+      {{.i18n.Tr "settings.manage_access_token"}}
+    </h4>
+    <div class="ui attached segment">
+      <div class="ui key list">
+        <div class="item">
+          {{.i18n.Tr "settings.tokens_desc"}}
+        </div>
+        {{range .Tokens}}
+          <div class="item">
+            <div class="right floated content">
+                <button class="ui red tiny button delete-button" data-modal-id="delete-token" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
+                  {{svg "octicon-trash" 16 "mr-2"}}
+                  {{$.i18n.Tr "settings.delete_token"}}
+                </button>
+            </div>
+            <i class="big send icon {{if .HasRecentActivity}}green{{end}}" {{if .HasRecentActivity}}data-content="{{$.i18n.Tr "settings.token_state_desc"}}" data-variation="inverted tiny"{{end}}></i>
+            <div class="content">
+              <strong>{{.Name}}</strong>
+              <div class="activity meta">
+                <i>{{$.i18n.Tr "settings.add_on"}} <span>{{.CreatedUnix.FormatShort}}</span> —  {{svg "octicon-info"}} {{if .HasUsed}}{{$.i18n.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="green"{{end}}>{{.UpdatedUnix.FormatShort}}</span>{{else}}{{$.i18n.Tr "settings.no_activity"}}{{end}}</i>
+              </div>
+            </div>
+          </div>
+        {{end}}
+      </div>
+    </div>
+    <div class="ui attached bottom segment">
+      <h5 class="ui top header">
+        {{.i18n.Tr "settings.generate_new_token"}}
+      </h5>
+      <p>{{.i18n.Tr "settings.new_token_desc"}}</p>
+      <form class="ui form ignore-dirty" action="{{.Link}}" method="post">
+        {{.CsrfTokenHtml}}
+        <div class="field {{if .Err_Name}}error{{end}}">
+          <label for="name">{{.i18n.Tr "settings.token_name"}}</label>
+          <input id="name" name="name" value="{{.name}}" autofocus required>
+        </div>
+        <button class="ui green button">
+          {{.i18n.Tr "settings.generate_token"}}
+        </button>
+      </form>
+    </div>
 
-		{{if .EnableOAuth2}}
-			{{template "user/settings/grants_oauth2" .}}
-			{{template "user/settings/applications_oauth2" .}}
-		{{end}}
-	</div>
+    {{if .EnableOAuth2}}
+      {{template "user/settings/grants_oauth2" .}}
+      {{template "user/settings/applications_oauth2" .}}
+    {{end}}
+  </div>
 </div>
 
 <div class="ui small basic delete modal" id="delete-token">
-	<div class="ui icon header">
-		{{svg "octicon-trash"}}
-		{{.i18n.Tr "settings.access_token_deletion"}}
-	</div>
-	<div class="content">
-		<p>{{.i18n.Tr "settings.access_token_deletion_desc"}}</p>
-	</div>
-	<div class="actions">
-		<div class="ui red basic inverted cancel button">
-			<i class="remove icon"></i>
-			{{.i18n.Tr "modal.no"}}
-		</div>
-		<div class="ui green basic inverted ok button">
-			<i class="checkmark icon"></i>
-			{{.i18n.Tr "modal.yes"}}
-		</div>
-	</div>
+  {{/*
+    The wording here is a bit confusing.
+    The action asks for deleting an access token.
+    Confirming is therefore the destructive option and
+    should be deemphasized because it cannot be undone.
+  */}}
+  <div class="ui icon header">
+    {{svg "octicon-trash"}}
+    {{.i18n.Tr "settings.access_token_deletion"}}
+  </div>
+  <div class="content">
+    <p>{{.i18n.Tr "settings.access_token_deletion_desc"}}</p>
+  </div>
+  <div class="actions">
+    <div class="ui cancel button">
+      <i class="remove icon"></i>
+      {{.i18n.Tr "modal.no"}}
+    </div>
+    <div class="ui red basic inverted ok button">
+      <i class="checkmark icon"></i>
+      {{.i18n.Tr "modal.yes"}}
+    </div>
+  </div>
 </div>
 
 

From 7a877a3e9d0c8f4c4fd3779d5614f635ef53975f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Jaenisch?= <andre.jaenisch@posteo.de>
Date: Sun, 5 Jun 2022 19:18:40 +0200
Subject: [PATCH 2/2] Use tabs instead of spaces.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Linter does not complain anymore. I was expecting the formatter to pick
this up but it didn't.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
---
 templates/user/settings/applications.tmpl | 148 +++++++++++-----------
 1 file changed, 74 insertions(+), 74 deletions(-)

diff --git a/templates/user/settings/applications.tmpl b/templates/user/settings/applications.tmpl
index 1dde74c502f8..6386eb3391d1 100644
--- a/templates/user/settings/applications.tmpl
+++ b/templates/user/settings/applications.tmpl
@@ -1,83 +1,83 @@
 {{template "base/head" .}}
 <div class="page-content user settings applications">
-  {{template "user/settings/navbar" .}}
-  <div class="ui container">
-    {{template "base/alert" .}}
-    <h4 class="ui top attached header">
-      {{.i18n.Tr "settings.manage_access_token"}}
-    </h4>
-    <div class="ui attached segment">
-      <div class="ui key list">
-        <div class="item">
-          {{.i18n.Tr "settings.tokens_desc"}}
-        </div>
-        {{range .Tokens}}
-          <div class="item">
-            <div class="right floated content">
-                <button class="ui red tiny button delete-button" data-modal-id="delete-token" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
-                  {{svg "octicon-trash" 16 "mr-2"}}
-                  {{$.i18n.Tr "settings.delete_token"}}
-                </button>
-            </div>
-            <i class="big send icon {{if .HasRecentActivity}}green{{end}}" {{if .HasRecentActivity}}data-content="{{$.i18n.Tr "settings.token_state_desc"}}" data-variation="inverted tiny"{{end}}></i>
-            <div class="content">
-              <strong>{{.Name}}</strong>
-              <div class="activity meta">
-                <i>{{$.i18n.Tr "settings.add_on"}} <span>{{.CreatedUnix.FormatShort}}</span> —  {{svg "octicon-info"}} {{if .HasUsed}}{{$.i18n.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="green"{{end}}>{{.UpdatedUnix.FormatShort}}</span>{{else}}{{$.i18n.Tr "settings.no_activity"}}{{end}}</i>
-              </div>
-            </div>
-          </div>
-        {{end}}
-      </div>
-    </div>
-    <div class="ui attached bottom segment">
-      <h5 class="ui top header">
-        {{.i18n.Tr "settings.generate_new_token"}}
-      </h5>
-      <p>{{.i18n.Tr "settings.new_token_desc"}}</p>
-      <form class="ui form ignore-dirty" action="{{.Link}}" method="post">
-        {{.CsrfTokenHtml}}
-        <div class="field {{if .Err_Name}}error{{end}}">
-          <label for="name">{{.i18n.Tr "settings.token_name"}}</label>
-          <input id="name" name="name" value="{{.name}}" autofocus required>
-        </div>
-        <button class="ui green button">
-          {{.i18n.Tr "settings.generate_token"}}
-        </button>
-      </form>
-    </div>
+	{{template "user/settings/navbar" .}}
+	<div class="ui container">
+		{{template "base/alert" .}}
+		<h4 class="ui top attached header">
+			{{.i18n.Tr "settings.manage_access_token"}}
+		</h4>
+		<div class="ui attached segment">
+			<div class="ui key list">
+				<div class="item">
+					{{.i18n.Tr "settings.tokens_desc"}}
+				</div>
+				{{range .Tokens}}
+					<div class="item">
+						<div class="right floated content">
+								<button class="ui red tiny button delete-button" data-modal-id="delete-token" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
+									{{svg "octicon-trash" 16 "mr-2"}}
+									{{$.i18n.Tr "settings.delete_token"}}
+								</button>
+						</div>
+						<i class="big send icon {{if .HasRecentActivity}}green{{end}}" {{if .HasRecentActivity}}data-content="{{$.i18n.Tr "settings.token_state_desc"}}" data-variation="inverted tiny"{{end}}></i>
+						<div class="content">
+							<strong>{{.Name}}</strong>
+							<div class="activity meta">
+								<i>{{$.i18n.Tr "settings.add_on"}} <span>{{.CreatedUnix.FormatShort}}</span> — {{svg "octicon-info"}} {{if .HasUsed}}{{$.i18n.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="green"{{end}}>{{.UpdatedUnix.FormatShort}}</span>{{else}}{{$.i18n.Tr "settings.no_activity"}}{{end}}</i>
+							</div>
+						</div>
+					</div>
+				{{end}}
+			</div>
+		</div>
+		<div class="ui attached bottom segment">
+			<h5 class="ui top header">
+				{{.i18n.Tr "settings.generate_new_token"}}
+			</h5>
+			<p>{{.i18n.Tr "settings.new_token_desc"}}</p>
+			<form class="ui form ignore-dirty" action="{{.Link}}" method="post">
+				{{.CsrfTokenHtml}}
+				<div class="field {{if .Err_Name}}error{{end}}">
+					<label for="name">{{.i18n.Tr "settings.token_name"}}</label>
+					<input id="name" name="name" value="{{.name}}" autofocus required>
+				</div>
+				<button class="ui green button">
+					{{.i18n.Tr "settings.generate_token"}}
+				</button>
+			</form>
+		</div>
 
-    {{if .EnableOAuth2}}
-      {{template "user/settings/grants_oauth2" .}}
-      {{template "user/settings/applications_oauth2" .}}
-    {{end}}
-  </div>
+		{{if .EnableOAuth2}}
+			{{template "user/settings/grants_oauth2" .}}
+			{{template "user/settings/applications_oauth2" .}}
+		{{end}}
+	</div>
 </div>
 
 <div class="ui small basic delete modal" id="delete-token">
-  {{/*
-    The wording here is a bit confusing.
-    The action asks for deleting an access token.
-    Confirming is therefore the destructive option and
-    should be deemphasized because it cannot be undone.
-  */}}
-  <div class="ui icon header">
-    {{svg "octicon-trash"}}
-    {{.i18n.Tr "settings.access_token_deletion"}}
-  </div>
-  <div class="content">
-    <p>{{.i18n.Tr "settings.access_token_deletion_desc"}}</p>
-  </div>
-  <div class="actions">
-    <div class="ui cancel button">
-      <i class="remove icon"></i>
-      {{.i18n.Tr "modal.no"}}
-    </div>
-    <div class="ui red basic inverted ok button">
-      <i class="checkmark icon"></i>
-      {{.i18n.Tr "modal.yes"}}
-    </div>
-  </div>
+	{{/*
+		The wording here is a bit confusing.
+		The action asks for deleting an access token.
+		Confirming is therefore the destructive option and
+		should be deemphasized because it cannot be undone.
+	*/}}
+	<div class="ui icon header">
+		{{svg "octicon-trash"}}
+		{{.i18n.Tr "settings.access_token_deletion"}}
+	</div>
+	<div class="content">
+		<p>{{.i18n.Tr "settings.access_token_deletion_desc"}}</p>
+	</div>
+	<div class="actions">
+		<div class="ui cancel button">
+			<i class="remove icon"></i>
+			{{.i18n.Tr "modal.no"}}
+		</div>
+		<div class="ui red basic inverted ok button">
+			<i class="checkmark icon"></i>
+			{{.i18n.Tr "modal.yes"}}
+		</div>
+	</div>
 </div>