web: make user password-reset button use action button

authentik/admin/views/users.py

@@ -127,7 +127,5 @@ class UserPasswordResetView(LoginRequiredMixin, PermissionRequiredMixin, DetailV
         link = request.build_absolute_uri(
             reverse_lazy("authentik_flows:default-recovery") + f"?{querystring}"
         )
-        messages.success(
-            request, _("Password reset link: <pre>%(link)s</pre>" % {"link": link})
-        )
+        messages.success(request, _("Password reset link: %(link)s" % {"link": link}))
         return redirect("/")

web/src/elements/buttons/ActionButton.ts

@@ -31,7 +31,6 @@ export class ActionButton extends SpinnerButton {
                 }
                 return r;
             })
-            .then((r) => r.json())
             .then(() => {
                 this.setDone(SUCCESS_CLASS);
             })

web/src/elements/messages/Message.ts

@@ -20,7 +20,7 @@ export class Message extends LitElement {
     message?: APIMessage;
 
     @property({type: Number})
-    removeAfter = 3000;
+    removeAfter = 8000;
 
     @property({attribute: false})
     onRemove?: (m: APIMessage) => void;

web/src/elements/messages/MessageContainer.ts

@@ -92,14 +92,14 @@ export class MessageContainer extends LitElement {
     render(): TemplateResult {
         return html`<ul class="pf-c-alert-group pf-m-toast">
             ${this.messages.map((m) => {
-        return html`<ak-message
+                return html`<ak-message
                     .message=${m}
                     .onRemove=${(m: APIMessage) => {
-        this.messages = this.messages.filter((v) => v !== m);
-        this.requestUpdate();
-    }}>
-                </ak-message>`;
-    })}
+                        this.messages = this.messages.filter((v) => v !== m);
+                            this.requestUpdate();
+                        }}>
+                    </ak-message>`;
+                })}
         </ul>`;
     }
 }

web/src/pages/users/UserListPage.ts

@@ -5,6 +5,7 @@ import { TablePage } from "../../elements/table/TablePage";
 
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/Dropdown";
+import "../../elements/buttons/ActionButton";
 import { TableColumn } from "../../elements/table/Table";
 import { User } from "../../api/Users";
 
@@ -90,9 +91,9 @@ export class UserListPage extends TablePage<User> {
                     </li>
                 </ul>
             </ak-dropdown>
-            <a class="pf-c-button pf-m-tertiary" href="${User.adminUrl(`${item.pk}/reset/`)}">
+            <ak-action-button method="GET" url="${User.adminUrl(`${item.pk}/reset/`)}">
                 ${gettext("Reset Password")}
-            </a>
+            </ak-action-button>
             <a class="pf-c-button pf-m-tertiary" href="${`-/impersonation/${item.pk}/`}">
                 ${gettext("Impersonate")}
             </a>`,