fix(amazonq): update login screen and auth notification (#5188)

* fix(amazonq): update login screen and auth notification

- Update Styling for Login Page and Reauth page
- Show notification once if a user is not logged in when Amazon Q extension activates.

* Update packages/amazonq/.changes/next-release/Bug Fix-9130bd3b-edc4-4749-8c96-bd9a4fb9f03c.json

---------

Co-authored-by: Maxim Hayes <[email protected]>

Author: ivikash

packages/amazonq/.changes/next-release/Bug Fix-9130bd3b-edc4-4749-8c96-bd9a4fb9f03c.json

@@ -0,0 +1,4 @@
+{
+	"type": "Feature",
+	"description": "UX: New style for the login window"
+}

packages/core/src/amazonq/activation.ts

@@ -23,10 +23,6 @@ import { Commands, placeholder } from '../shared/vscode/commands2'
 import { focusAmazonQPanel, focusAmazonQPanelKeybinding } from '../codewhispererChat/commands/registerCommands'
 import { TryChatCodeLensProvider, tryChatCodeLensCommand } from '../codewhispererChat/editor/codelens'
 import { Auth } from '../auth'
-import { learnMoreUri } from '../codewhisperer/models/constants'
-import { openUrl } from '../shared/utilities/vsCodeUtils'
-import { AuthUtil } from '../codewhisperer'
-import { ConnectionStateChangeEvent } from '../auth/auth'
 import { telemetry } from '../shared/telemetry'
 
 export async function activate(context: ExtensionContext) {
@@ -64,10 +60,7 @@ export async function activate(context: ExtensionContext) {
     })
 
     await activateBadge()
-    void setupAuthNotification(
-        appInitContext.onDidChangeAmazonQVisibility.event,
-        Auth.instance.onDidChangeConnectionState
-    )
+    void setupAuthNotification()
 }
 
 function registerApps(appInitContext: AmazonQAppInitContext) {
@@ -80,85 +73,38 @@ function registerApps(appInitContext: AmazonQAppInitContext) {
  * Display a notification to user for Log In.
  *
  * Authentication Notification is displayed when:
- * - The user closes the Amazon Q chat panel, and
- * - The user has not performed any authentication action.
- *
- * Error Notification is displayed when:
- * - The user closes the Amazon Q chat panel, and
- * - The user attempts an authentication action but is not logged in.
+ * - User is not authenticated
+ * - Once every session
  *
- * @param {Event} onAmazonQChatVisibility - Event indicating the visibility status of the Amazon Q chat.
- * @param {Event} onDidUpdateConnection - Event indicating the authentication connection update.
  */
-async function setupAuthNotification(
-    onAmazonQChatVisibility: vscode.Event<boolean>,
-    onDidUpdateConnection: vscode.Event<ConnectionStateChangeEvent | undefined>
-) {
-    let isAmazonQVisible = true // Assume Chat is open by default.
+async function setupAuthNotification() {
     let notificationDisplayed = false // Auth Notification should be displayed only once.
-    let authConnection: ConnectionStateChangeEvent
-
-    // Updates the visibility state of the Amazon Q chat.
-    const updateVisibility = async (visible: boolean) => {
-        isAmazonQVisible = visible
-        await tryShowNotification()
-    }
+    await tryShowNotification()
 
-    // Updates the source of the connection for Amazon Q sign in.
-    const updateConnection = async (connection: ConnectionStateChangeEvent | undefined) => {
-        if (connection) {
-            authConnection = connection
-            await tryShowNotification()
+    async function tryShowNotification() {
+        // Do not show the notification if the IDE starts and user is already authenticated.
+        if (Auth.instance.activeConnection) {
+            notificationDisplayed = true
         }
-    }
-
-    const disposables: vscode.Disposable[] = [
-        onAmazonQChatVisibility(updateVisibility),
-        onDidUpdateConnection(updateConnection),
-    ]
 
-    async function tryShowNotification() {
-        if (notificationDisplayed || Auth.instance.activeConnection) {
+        if (notificationDisplayed) {
             return
         }
 
         const source = 'authNotification'
-
-        if (!isAmazonQVisible && !authConnection && !AuthUtil.instance.isConnectionExpired()) {
-            const buttonAction = 'Sign In'
-            notificationDisplayed = true
-            disposables.forEach(item => item.dispose())
-
-            telemetry.toolkit_showNotification.emit({
-                component: 'editor',
-                id: source,
-                reason: 'notLoggedIn',
-                result: 'Succeeded',
-            })
-            const selection = await vscode.window.showWarningMessage('Start using Amazon Q', buttonAction)
-
-            if (selection === buttonAction) {
-                void focusAmazonQPanel.execute(placeholder, source)
-            }
-        } else if (!isAmazonQVisible && authConnection.state === 'authenticating') {
-            const buttonAction = 'Open documentation'
-            notificationDisplayed = true
-            disposables.forEach(item => item.dispose())
-
-            telemetry.toolkit_showNotification.emit({
-                component: 'editor',
-                id: source,
-                reason: 'authenticating',
-                result: 'Succeeded',
-            })
-            const selection = await vscode.window.showWarningMessage(
-                'See Amazon Q documentation for help on signing in',
-                buttonAction
-            )
-
-            if (selection === buttonAction) {
-                void openUrl(vscode.Uri.parse(`${learnMoreUri}#q-in-IDE-setup-bid`), source)
-            }
+        const buttonAction = 'Sign In'
+        notificationDisplayed = true
+
+        telemetry.toolkit_showNotification.emit({
+            component: 'editor',
+            id: source,
+            reason: 'notLoggedIn',
+            result: 'Succeeded',
+        })
+        const selection = await vscode.window.showWarningMessage('Start using Amazon Q', buttonAction)
+
+        if (selection === buttonAction) {
+            void focusAmazonQPanel.execute(placeholder, source)
         }
     }
 }

packages/core/src/login/webview/vue/login.vue

@@ -1,11 +1,17 @@
 <!-- This Vue File is the login webview of AWS Toolkit and Amazon Q.-->
 <template>
-    <div v-bind:class="[disabled ? 'disabled-form' : '']" class="auth-container" @click="handleDocumentClick">
+    <div
+        v-bind:class="[disabled ? 'disabled-form' : '']"
+        class="auth-container"
+        :data-app="app"
+        @click="handleDocumentClick"
+        v-if="stage !== 'CONNECTED'"
+    >
         <div class="logoIcon bottomMargin">
             <!-- Icon -->
 
             <svg
-                v-if="app === 'AMAZONQ' && stage !== 'CONNECTED'"
+                v-if="app === 'AMAZONQ'"
                 width="71"
                 height="71"
                 viewBox="0 0 71 71"
@@ -46,7 +52,7 @@
                 </defs>
             </svg>
             <svg
-                v-if="app === 'TOOLKIT' && stage !== 'CONNECTED'"
+                v-if="app === 'TOOLKIT'"
                 width="100"
                 height="80"
                 viewBox="0 0 54 40"
@@ -226,7 +232,6 @@
             </div>
         </template>
 
-        <template v-if="stage === 'CONNECTED'"> </template>
         <template v-if="stage === 'AWS_PROFILE'">
             <button class="back-button bottomMargin" @click="handleBackButtonClick">
                 <svg width="13" height="11" viewBox="0 0 13 11" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -624,6 +629,16 @@ export default defineComponent({
     width: 260px;
 }
 
+.auth-container[data-app='AMAZONQ'] {
+    border-radius: 11px;
+    background: rgba(30, 30, 30, 0.8);
+    padding: 15px;
+}
+
+.vscode-light .auth-container[data-app='AMAZONQ'] {
+    background: rgba(255, 255, 255, 1);
+}
+
 .header {
     font-size: var(--font-size-base);
     font-weight: bold;

packages/core/src/login/webview/vue/reauthenticate.vue

@@ -7,7 +7,7 @@ The goal is to have all state managed outside of this Vue file. Instead all stat
 and the final results are retrieved by the frontend. For this Component to update the root Component must refresh it.
 -->
 <template>
-    <div v-show="doShow" id="reauthenticate-container">
+    <div v-show="doShow" id="reauthenticate-container" :data-app="app">
         <!-- Icon -->
         <div id="icon-container">
             <svg
@@ -157,6 +157,17 @@ export default defineComponent({
     width: 100%;
 }
 
+#reauthenticate-container[data-app='AMAZONQ'] {
+    border-radius: 11px;
+    background: rgba(30, 30, 30, 0.8);
+    padding: 15px;
+    width: 70%;
+}
+
+.vscode-light .auth-container[data-app='AMAZONQ'] {
+    background: rgba(255, 255, 255, 1);
+}
+
 /* Immediate children */
 #reauthenticate-container > * {
     margin-bottom: 2rem;

packages/core/src/login/webview/vue/root.vue

@@ -3,7 +3,7 @@ configure app to AMAZONQ if for Amazon Q login
 -->
 <template>
     <!-- Body -->
-    <div class="body" style="height: 100vh">
+    <div class="body" style="height: 100vh" :data-app="app">
         <!-- Functionality -->
         <Login v-if="authFlowState === 'LOGIN'" :app="app"></Login>
         <Reauthenticate
@@ -62,6 +62,14 @@ export default defineComponent({
 })
 </script>
 <style>
+body {
+    /**
+     * Overriding the margin and padding defined by vscode
+     * https://github.com/microsoft/vscode/blame/54e0cddffb51553e76fb8d65474ba855c30621e8/src/vs/workbench/contrib/webview/browser/pre/index.html
+     */
+    padding: 0;
+}
+
 .body {
     /* The container takes up the entire height of the screen */
     height: 100vh;
@@ -70,4 +78,8 @@ export default defineComponent({
     /* All items are centered horizontally */
     align-items: center;
 }
+
+.body[data-app='AMAZONQ'] {
+    background: linear-gradient(11deg, #541fae 0%, #38b1ff 100.5%);
+}
 </style>