Add success state (#8)

* simple success state * remove css * fix imports * fix imports
hypermodeinc · Oct 11, 2024 · 7be81cd · 7be81cd
1 parent c54cf0e
commit 7be81cd
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -82,7 +82,7 @@
   },
   "scripts": {
     "pack": "oclif pack tarballs --parallel --no-xz",
-    "build": "shx rm -rf dist && tsc -b",
+    "build": "shx rm -rf dist && tsc -b && shx cp src/commands/login/login.html dist/commands/login/login.html",
     "lint": "eslint . --ext .ts",
     "postpack": "shx rm -f oclif.manifest.json",
     "posttest": "npm run lint",

diff --git a/src/commands/login/index.ts b/src/commands/login/index.ts
@@ -1,12 +1,15 @@
 import {Command} from '@oclif/core'
 import * as fs from 'node:fs'
 import * as http from 'node:http'
+import path, {dirname} from 'node:path'
 import {createInterface} from 'node:readline'
+import {fileURLToPath} from 'node:url'
 import open from 'open'
 
-import {
-  fileExists, getEnvDir, getEnvFilePath, promptOrgSelection, sendGraphQLRequest,
-} from '../../util/index.js'
+import {fileExists, getEnvDir, getEnvFilePath, promptOrgSelection, sendGraphQLRequest} from '../../util/index.js'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
 
 export default class LoginIndex extends Command {
   static override args = {}
@@ -34,8 +37,10 @@ export default class LoginIndex extends Command {
 
       if (jwt && email) {
         // Send response back to browser indicating success
-        res.writeHead(200, {'Content-Type': 'text/plain'})
-        res.end('Login successful! You can close this tab.')
+        const filePath = path.join(__dirname, 'login.html')
+        const content = fs.readFileSync(filePath, 'utf8')
+        res.writeHead(200, {'Content-Type': 'text/html'})
+        res.end(content)
 
         // Close the server once JWT and email are captured
         server.close()
@@ -99,18 +104,18 @@ export default class LoginIndex extends Command {
       const content = fs.readFileSync(envFilePath, 'utf8')
 
       // Check if the file contains HYP_JWT and HYP_EMAIL, if not add them
-      const updatedContent
-        = !content.includes('HYP_JWT=') || !content.includes('HYP_EMAIL=') || !content.includes('HYP_ORG_ID=')
+      const updatedContent =
+        !content.includes('HYP_JWT=') || !content.includes('HYP_EMAIL=') || !content.includes('HYP_ORG_ID=')
           ? content + `HYP_JWT=${jwt}\nHYP_EMAIL=${email}\nHYP_ORG_ID=${orgId}\n`
           : content
-          .split('\n')
-          .map(line => {
-            if (line.startsWith('HYP_JWT=')) return `HYP_JWT=${jwt}`
-            if (line.startsWith('HYP_EMAIL=')) return `HYP_EMAIL=${email}`
-            if (line.startsWith('HYP_ORG_ID=')) return `HYP_ORG_ID=${orgId}`
-            return line // Keep other lines unchanged
-          })
-          .join('\n')
+              .split('\n')
+              .map((line) => {
+                if (line.startsWith('HYP_JWT=')) return `HYP_JWT=${jwt}`
+                if (line.startsWith('HYP_EMAIL=')) return `HYP_EMAIL=${email}`
+                if (line.startsWith('HYP_ORG_ID=')) return `HYP_ORG_ID=${orgId}`
+                return line // Keep other lines unchanged
+              })
+              .join('\n')
 
       // delete the file
       fs.unlinkSync(envFilePath)

diff --git a/src/commands/login/login.html b/src/commands/login/login.html
@@ -0,0 +1,50 @@
+<!-- src/commands/login/login.html -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Success!</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        width: 100vw;
+        margin: 0;
+        background-color: #14161f;
+      }
+      h1 {
+        color: #fff;
+        text-align: center;
+        margin-bottom: 8px;
+      }
+
+      p {
+        color: #62646b;
+        text-align: center;
+      }
+
+      svg {
+        width: 36px;
+        height: 36px;
+        margin-bottom: 16px;
+      }
+    </style>
+  </head>
+  <body>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        fill="#fff"
+        d="M10.0173 0H2.64764L0 10.3598H7.36967L10.0173 0ZM2.91136 22.6282L6.0172 10.3599H14.1776L16.8252 0.00012207H24.1949L18.3248 22.9691H10.9551L14.1592 10.4317L2.91136 22.6282Z"
+      />
+    </svg>
+    <h1>Authentication complete!</h1>
+    <p>You can now close this window and return to the terminal.</p>
+  </body>
+</html>