Connect OSM account

app/components/user-menu.gjs

@@ -1,9 +1,13 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
+import { service } from '@ember/service';
 import Icon from '#components/icon';
 import { on } from '@ember/modifier';
 
 export default class UserMenuComponent extends Component {
+  @service storage;
+  @service osmAuth;
+
   @action
   connectRS() {
     this.args.onClose();
@@ -15,6 +19,17 @@ export default class UserMenuComponent extends Component {
     this.args.storage.disconnect();
   }
 
+  @action
+  connectOsm() {
+    this.args.onClose();
+    this.osmAuth.login();
+  }
+
+  @action
+  disconnectOsm() {
+    this.osmAuth.logout();
+  }
+
   <template>
     <div class="user-menu-popover">
       <ul class="account-list">
@@ -40,22 +55,39 @@ export default class UserMenuComponent extends Component {
           </div>
           <div class="account-status">
             {{#if @storage.connected}}
-              <strong>{{@storage.userAddress}}</strong>
+              {{@storage.userAddress}}
             {{else}}
               Not connected
             {{/if}}
           </div>
         </li>
 
-        <li class="account-item disabled">
+        <li class="account-item">
           <div class="account-header">
             <div class="account-info">
               <Icon @name="map" @size={{18}} />
               <span>OpenStreetMap</span>
             </div>
+            {{#if this.osmAuth.isConnected}}
+              <button
+                class="btn-text text-danger"
+                type="button"
+                {{on "click" this.disconnectOsm}}
+              >Disconnect</button>
+            {{else}}
+              <button
+                class="btn-text text-primary"
+                type="button"
+                {{on "click" this.connectOsm}}
+              >Connect</button>
+            {{/if}}
           </div>
           <div class="account-status">
-            Coming soon
+            {{#if this.osmAuth.isConnected}}
+              {{this.osmAuth.userDisplayName}}
+            {{else}}
+              Not connected
+            {{/if}}
           </div>
         </li>