List enabled authentication methods in "Settings"

CHANGELOG.md

@@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Detect preferred color scheme.
 - Show loading indicator while attachment is being uploaded.
 - Content warnings.
+- List enabled authentication methods in "Settings".
 
 ### Fixed
 

src/api/users.ts

@@ -83,6 +83,7 @@ export function defaultProfile(): Profile {
 export interface User extends Profile {
   source: Source;
   role: Role,
+  authentication_methods: string[];
   client_config: { [clientName: string]: { [property: string]: any } },
 }
 

src/views/Settings.vue

@@ -22,7 +22,16 @@
         </button>
       </section>
       <section>
-        <h2>Change password</h2>
+        <h2>Authentication</h2>
+        <div class="authentication-methods">
+          Enabled authentication methods:
+          <span v-for="(method, index) in currentUser.authentication_methods" :key="method">
+            <template v-if="method === 'password'">password</template>
+            <template v-else-if="method === 'eip4361'">EIP-4361</template>
+            <template v-if="index !== currentUser.authentication_methods.length - 1">, </template>
+          </span>
+        </div>
+        <h3>Change password</h3>
         <form @submit.prevent="onChangePassword()">
           <div class="input-group">
             <label for="new-password">New password</label>
@@ -145,6 +154,10 @@ form {
   @include content-form;
 }
 
+.authentication-methods {
+  margin-bottom: $block-inner-padding;
+}
+
 .password-form-message {
   margin-top: $block-outer-padding;
 }