webview-ui: Toolkit IAM profile input form styling & cleanup (#4268)

aws · Apr 12, 2024 · 044fd32 · 044fd32
1 parent 8f5f600
commit 044fd32
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 23 deletions.
diff --git a/plugins/core/webview/src/q-ui/components/awsProfileForm.vue b/plugins/core/webview/src/q-ui/components/awsProfileForm.vue
@@ -10,17 +10,17 @@
             />
         </svg>
     </button>
-    <div class="p">Profile Name</div>
+    <div class="title no-bold">Profile Name</div>
     <div class="hint">The identifier for these credentials</div>
-    <input class="iamInput" type="text" id="profileName" name="profileName" v-model="profileName"/>
+    <input class="iamInput font-amazon" type="text" id="profileName" name="profileName" v-model="profileName"/>
 
     <br/><br/>
-    <div class="p">Access Key</div>
-    <input class="iamInput" type="text" id="accessKey" name="accessKey" v-model="accessKey"/>
+    <div class="title no-bold">Access Key</div>
+    <input class="iamInput font-amazon" type="text" id="accessKey" name="accessKey" v-model="accessKey"/>
 
     <br/><br/>
-    <div class="p">Secret Key</div>
-    <input class="iamInput" type="text" id="secretKey" name="secretKey" v-model="secretKey"/>
+    <div class="title no-bold">Secret Key</div>
+    <input class="iamInput font-amazon" type="text" id="secretKey" name="secretKey" v-model="secretKey"/>
 
     <br/><br/>
     <button
@@ -47,6 +47,12 @@ export default defineComponent({
     methods: {
         async handleContinueClick() {
             this.$emit('stageChanged', 'AUTHENTICATING')
+            window.ideApi.postMessage({
+                command: 'loginIAM',
+                profileName: this.profileName,
+                accessKey: this.accessKey,
+                secretKey: this.secretKey
+            })
         },
         handleBackButtonClick() {
             this.$emit('backToMenu')
@@ -55,7 +61,7 @@ export default defineComponent({
 })
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .back-button {
     background: none;
     border: none;
@@ -65,22 +71,32 @@ export default defineComponent({
 }
 
 .hint {
-    color: #948a8a;
+    color: #909090;
     margin-bottom: 5px;
     margin-top: 5px;
+    font-size: 12px;
 }
 
 .iamInput {
     background-color: #252526;
     width: 100%;
-    color: white;
+    height: 37px;
+    border-radius: 4px;
 }
 
-body.vscode-dark #logo-text {
-    fill: white;
+/* Theme specific styles */
+body.jb-dark {
+    .iamInput {
+        background-color: #252526;
+        color: white;
+        border: none;
+    }
 }
 
-body.vscode-light #logo-text {
-    fill: #232f3e; /* squid ink */
+body.jb-light {
+    .iamInput {
+        color: black;
+        border: 1px solid #c9ccd6;
+    }
 }
 </style>
diff --git a/plugins/core/webview/src/q-ui/toolkit.ts b/plugins/core/webview/src/q-ui/toolkit.ts
@@ -11,16 +11,6 @@ import './assets/common.scss'
 
 const app = createApp(root, { app: 'TOOLKIT' })
 
-// const app = createApp({
-//     data() {
-//         return {
-//             message: 'Hello World!'
-//         }
-//     },
-//     template: '<h1>{{ message }}</h1>'
-//
-// })
-
 const store = createStore<State>({
     state: {
         stage: 'START' as Stage,