feat: access tokens user management UI (#3587)

Signed-off-by: Sami Mazouz <ilyasmazouz@gmail.com>
Co-authored-by: David <hi@davwheat.dev>

framework/core/less/common/Button.less

@@ -164,6 +164,9 @@
     display: none;
   }
 }
+.Button--inverted {
+  .Button--color-auto('button-inverted');
+}
 .Button--danger {
   .Button--color-auto('control-danger');
 }

framework/core/less/common/LabelValue.less

@@ -0,0 +1,8 @@
+.LabelValue {
+  display: flex;
+  gap: 4px;
+
+  &-label {
+    font-weight: bold;
+  }
+}

framework/core/less/common/common.less

@@ -14,6 +14,7 @@
 @import "Button";
 @import "Checkbox";
 @import "ColorInput";
+@import "LabelValue";
 @import "Dropdown";
 @import "EditUserModal";
 @import "Form";

framework/core/less/forum.less

@@ -17,6 +17,7 @@
 @import "forum/Post";
 @import "forum/PostStream";
 @import "forum/Scrubber";
+@import "forum/UserSecurityPage";
 @import "forum/SettingsPage";
 @import "forum/SignUpModal";
 @import "forum/Slidable";

framework/core/less/forum/UserSecurityPage.less

@@ -0,0 +1,91 @@
+.UserSecurityPage {
+  > ul, fieldset > ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  > ul > li {
+    margin-bottom: 25px;
+  }
+}
+
+.AccessTokensList {
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--border-radius);
+  overflow: hidden;
+
+  > *:not(:first-child) {
+    margin-left: 1px;
+  }
+
+  &-item {
+    display: flex;
+    padding: 16px 16px 16px 0;
+    background-color: var(--control-bg);
+    color: var(--control-color);
+
+    &-icon {
+      --font-size: 1.6rem;
+      font-size: var(--font-size);
+      width: calc(~"var(--font-size) + 4rem");
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &-title {
+      font-weight: bold;
+
+      &-sub {
+        font-style: italic;
+      }
+    }
+
+    &-actions {
+      display: flex;
+      align-items: center;
+      margin-left: auto;
+
+      > *:not(:first-child) {
+        margin-left: 8px;
+      }
+    }
+
+    &--active &-title-sub {
+      color: var(--alert-success-color);
+    }
+  }
+
+  &--empty {
+    color: var(--control-color);
+  }
+}
+
+@media @phone {
+  .AccessTokensList {
+    > *:not(:first-child) {
+      margin-left: 8px;
+    }
+
+    &-item {
+      flex-wrap: wrap;
+      padding: 16px;
+
+      > *:not(:first-child) {
+        margin-left: 16px;
+      }
+
+      &-icon {
+        width: 100%;
+        justify-content: start;
+        padding: 8px;
+      }
+
+      &-actions {
+        width: 100%;
+      }
+    }
+  }
+}