Merge pull request #6 from FuelLabs/sophie/api-tokens

feat: manage user API tokens

.env

@@ -1,5 +1,12 @@
+# Server env
 POSTGRES_USER="postgres"
 POSTGRES_PASSWORD="localpw"
 POSTGRES_URI="localhost"
 POSTGRES_PORT="5432"
-POSTGRES_DB_NAME="forc_pub"
+POSTGRES_DB_NAME="forc_pub"
+
+# Local env
+CORS_HTTP_ORIGIN="http://localhost:3000"
+
+# Diesel CLI env
+DATABASE_URL="postgres://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${POSTGRES_URI}/${POSTGRES_DB_NAME}"

Cargo.toml

@@ -21,3 +21,6 @@ diesel = { version = "2.1.6", features = ["postgres", "uuid", "r2d2"] }
 dotenvy = "0.15"
 uuid = "1.8.0"
 diesel_migrations = "2.1.0"
+rand = "0.8.5"
+sha2 = "0.10.8"
+serial_test = "3.1.1"

app/package.json

@@ -15,10 +15,13 @@
     "@types/node": "^16.18.91",
     "@types/react": "^18.2.67",
     "@types/react-dom": "^18.2.22",
+    "axios": "^1.6.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
+    "react-use-cookie": "^1.5.0",
+    "typed-axios-instance": "^3.3.1",
     "typescript": "^4.9.5",
     "usehooks-ts": "^3.0.2",
     "web-vitals": "^2.1.4"

app/src/features/tokens/components/CopyableToken.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import IconButton from '@mui/material/IconButton';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+
+export interface CopyableProps {
+  token: string;
+}
+
+async function handleCopy(value: string) {
+  await navigator.clipboard.writeText(value);
+}
+
+function CopyableToken({ token }: CopyableProps) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        fontSize: '16px',
+        background: '#383838',
+        color: 'white',
+        borderRadius: '4px',
+        textAlign: 'left',
+        position: 'relative',
+      }}>
+      <div
+        style={{
+          flex: '1 1 auto',
+          overflow: 'auto',
+          padding: '0 1rem',
+        }}>
+        <pre>{token}</pre>
+      </div>
+      <div style={{ flex: '0 0 auto', margin: '5px 5px 0 0' }}>
+        <IconButton onClick={() => handleCopy(token)} aria-label='copy'>
+          <ContentCopyIcon style={{ color: 'white' }} />
+        </IconButton>
+      </div>
+    </div>
+  );
+}
+
+export default CopyableToken;