[ui] Read from localStorage to display a copyable access token and secret (#22105)

* Read from localStorage to display a copyable access token and secret

* Error when loading handled

Author: philrenaud

.changelog/22105.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Adds a copyable token accessor/secret on the settings page when signed in
+```

ui/packages/consul-ui/app/templates/settings.hbs

@@ -35,6 +35,34 @@ as |item|}}
         <A.Title>Local Storage</A.Title>
         <A.Description>These settings are immediately saved to local storage and persisted through browser usage.</A.Description>
       </Hds::Alert>
+
+      <DataSource
+        @src={{uri "settings://consul:token"}}
+        @onchange={{action (mut token) value="data"}}
+        @onerror={{action (mut error) value="error"}}
+      />
+      {{#if error}}
+        <Hds::Alert @type="inline" @color="highlight" class="mb-3 mt-2" @icon="token" as |A|>
+          <A.Title>Error loading token</A.Title>
+          <A.Description>
+            {{error.message}}
+          </A.Description>
+        </Hds::Alert>
+      {{/if}}
+      {{#if token}}
+        <Hds::Alert @type="inline" @color="highlight" class="mb-3 mt-2" @icon="token" as |A|>
+          <A.Title>Your Access Token</A.Title>
+          <A.Description>
+          <Hds::Form::MaskedInput::Field readonly @isContentMasked={{false}} @hasCopyButton={{true}} @value={{token.AccessorID}} as |F|>
+            <F.Label>Accessor ID</F.Label>
+          </Hds::Form::MaskedInput::Field>
+          <Hds::Form::MaskedInput::Field readonly @hasCopyButton={{true}} @value={{token.SecretID}} as |F|>
+            <F.Label>Secret ID</F.Label>
+          </Hds::Form::MaskedInput::Field>
+          </A.Description>
+        </Hds::Alert>
+      {{/if}}
+
       <form>
       {{#if (not (env 'CONSUL_UI_DISABLE_REALTIME'))}}
       <Disclosure as |disclosure|>