Merge pull request #244 from stakwork/ui/api-key

UI/api key

app/src/NavFiber.svelte

@@ -7,6 +7,7 @@
   import { get_graph_accessibility } from "./api/swarm";
   import { stack, selectedNode } from "./store";
   import Roles from "./components/SecondBrain/roles/roles.svelte";
+  import Apikeys from "./components/SecondBrain/apikeys.svelte";
 
   export let host = "";
   let link = host ? `https://${host}` : "http://localhost:8001";
@@ -22,7 +23,7 @@
   $: firstTime = false;
   $: currentTab = "General";
 
-  const tabs = ["General", "Roles", "Payments"];
+  const tabs = ["General", "Roles", "Payments", "Api Keys"];
 
   function setActiveTab(tab) {
     currentTab = tab;
@@ -94,6 +95,8 @@
       {:else if currentTab === "Roles"}
         <!-- <SetupAdmin /> -->
         <Roles />
+      {:else if currentTab === "Api Keys"}
+        <Apikeys />
       {:else}
         <EnpointPermission />
       {/if}

app/src/api/cmd.ts

@@ -74,7 +74,8 @@ export type Cmd =
   | "UpdateFeatureFlags"
   | "GetImageDigest"
   | "GetDockerImageTags"
-  | "UpdateUser";
+  | "UpdateUser"
+  | "GetApiToken";
 
 interface CmdData {
   cmd: Cmd;

app/src/api/swarm.ts

@@ -113,6 +113,10 @@ export async function update_feature_flags(data: { [key: string]: boolean }) {
   return await swarmCmd("UpdateFeatureFlags", data);
 }
 
+export async function get_api_token() {
+  return await swarmCmd("GetApiToken");
+}
+
 export async function login(username, password) {
   const r = await fetch(`${root}/login`, {
     method: "POST",

app/src/components/SecondBrain/apikeys.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import Password from "../input/password.svelte";
+  import { get_api_token } from "../../api/swarm";
+
+  $: x_api_token = "";
+
+  onMount(async () => {
+    const api = await get_api_token();
+
+    x_api_token = api.x_api_token;
+  });
+</script>
+
+<div class="container">
+  <div class="header">
+    <h2 class="title">Api Keys</h2>
+  </div>
+  <div class="content">
+    <div class="api-container">
+      <p class="api-title">API TOKEN</p>
+      <div class="password_container">
+        <Password
+          value={x_api_token}
+          onInput={() => {}}
+          label=""
+          readonly={true}
+        />
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .container {
+    display: flex;
+    flex-direction: column;
+    padding-left: 2.25rem;
+    padding-right: 2.25rem;
+  }
+
+  .header {
+    display: flex;
+    padding: 1.8125rem 0rem;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+  }
+
+  .title {
+    color: #fff;
+    font-family: "Barlow";
+    font-size: 1.125rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 1rem; /* 88.889% */
+    letter-spacing: 0.01125rem;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .api-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .api-title {
+    font-weight: 500;
+    font-family: "Barlow";
+  }
+
+  .password_container {
+    width: 70%;
+  }
+</style>

app/src/components/input/password.svelte

@@ -3,6 +3,7 @@
   export let placeholder = "Enter text";
   export let onInput;
   export let label;
+  export let readonly = false;
 
   $: hide = true;
 
@@ -27,6 +28,7 @@
         class="input"
         {placeholder}
         on:input={handleInput}
+        {readonly}
       />
       <!-- svelte-ignore a11y-click-events-have-key-events -->
       <img
@@ -43,6 +45,7 @@
         class="input"
         {placeholder}
         on:input={handleInput}
+        {readonly}
       />
       <!-- svelte-ignore a11y-click-events-have-key-events -->
       <img

src/cmd.rs

@@ -145,6 +145,7 @@ pub enum SwarmCmd {
     GetImageDigest(String),
     GetDockerImageTags(GetDockerImageTagsDetails),
     UpdateUser(UpdateUserDetails),
+    GetApiToken,
 }
 
 #[derive(Serialize, Deserialize, Debug, Clone)]

src/conn/boltwall/mod.rs

@@ -1,7 +1,7 @@
 use crate::cmd::FeatureFlagUserRoles;
 use crate::utils::docker_domain;
 use crate::{cmd::UpdateSecondBrainAboutRequest, images::boltwall::BoltwallImage};
-use anyhow::{anyhow, Context, Result};
+use anyhow::{anyhow, Context, Ok, Result};
 use serde::{Deserialize, Serialize};
 use std::{collections::HashMap, time::Duration};
 
@@ -24,6 +24,11 @@ pub struct UpdatePaidEndpointBody {
     status: bool,
 }
 
+#[derive(Serialize, Deserialize, Debug, Clone)]
+pub struct ApiToken {
+    x_api_token: String,
+}
+
 #[derive(Serialize, Deserialize, Debug, Clone)]
 #[serde(rename_all = "camelCase")]
 pub struct UpdateBoltwallAccessibility {
@@ -344,3 +349,16 @@ pub async fn update_user(
 
     Ok(response_text)
 }
+
+pub async fn get_api_token(boltwall: &BoltwallImage) -> Result<ApiToken> {
+    let api_token = boltwall
+        .stakwork_secret
+        .clone()
+        .context(anyhow!("No admin token"))?;
+
+    let response = ApiToken {
+        x_api_token: api_token,
+    };
+
+    Ok(response)
+}

src/handler.rs

@@ -6,6 +6,7 @@ use crate::builder;
 use crate::cmd::*;
 use crate::config;
 use crate::config::{Clients, Node, Stack, State, STATE};
+use crate::conn::boltwall::get_api_token;
 use crate::conn::boltwall::update_user;
 use crate::conn::swarm::get_image_tags;
 use crate::dock::*;
@@ -316,6 +317,12 @@ pub async fn handle(proj: &str, cmd: Cmd, tag: &str, docker: &Docker) -> Result<
                     update_user(&boltwall, body.pubkey, body.name, body.id, body.role).await?;
                 return Ok(serde_json::to_string(&response)?);
             }
+            SwarmCmd::GetApiToken => {
+                log::info!("Get API TOKEN");
+                let boltwall = find_boltwall(&state.stack.nodes)?;
+                let response = get_api_token(&boltwall).await?;
+                return Ok(serde_json::to_string(&response)?);
+            }
         },
         Cmd::Relay(c) => {
             let client = state.clients.relay.get(tag).context("no relay client")?;