Right side auth webview (#3352)

authWebview: Right side container + reactive in portrait

Signed-off-by: Nikolas Komonen <[email protected]>

Author: nkomonen-amazon

src/credentials/vue/ServiceItem.vue

@@ -7,7 +7,7 @@
     of the service items.
  -->
 <template>
-    <button class="service-item-container" :class="classWhenIsSelected" v-on:mousedown="serviceItemClicked">
+    <li class="service-item-container" :class="classWhenIsSelected" v-on:mousedown="serviceItemClicked">
         <!-- The icon -->
         <div class="icon-item" :class="serviceIconClass"></div>
 
@@ -20,10 +20,16 @@
                 {{ description }}
             </div>
         </div>
-    </button>
+    </li>
+
+    <li class="service-item-content-list-item">
+        <!-- See 'Named Slots' for more info -->
+        <slot name="service-item-content-slot"></slot>
+    </li>
 </template>
 <script lang="ts">
 import { defineComponent, PropType } from 'vue'
+import { ServiceItemContent } from './ServiceItemContent.vue'
 
 /* The status of the icon for a service */
 type ServiceIconStatus = keyof typeof serviceIconClasses
@@ -58,6 +64,8 @@ export interface StaticServiceItemProps {
  */
 export default defineComponent({
     name: 'ServiceItem',
+    components: { ServiceItemContent },
+    emits: ['service-item-clicked'],
     props: {
         id: {
             type: String as PropType<ServiceItemId>,
@@ -79,6 +87,11 @@ export default defineComponent({
             type: Boolean,
             default: false,
         },
+        isLandscape: {
+            type: Boolean,
+            required: true,
+            description: 'Whether the screen is in landscape mode or not.',
+        },
     },
     data() {
         return {
@@ -151,7 +164,7 @@ export class ServiceItemsState {
     private readonly unlockedServices: Set<ServiceItemId> = new Set(['NON_AUTH_FEATURES'])
 
     /** Note a service item is pre-selected by default */
-    private currentlySelected: ServiceItemId = 'NON_AUTH_FEATURES'
+    private currentlySelected?: ServiceItemId = 'NON_AUTH_FEATURES'
 
     /**
      * The Ids of the service items, separated by the ones that are locked vs. unlocked
@@ -180,7 +193,7 @@ export class ServiceItemsState {
     }
 
     /** The currently selected service item */
-    get selected(): ServiceItemId {
+    get selected(): ServiceItemId | undefined {
         return this.currentlySelected
     }
 
@@ -189,6 +202,18 @@ export class ServiceItemsState {
         this.currentlySelected = id
     }
 
+    deselect() {
+        this.currentlySelected = undefined
+    }
+
+    toggleSelected(id: ServiceItemId) {
+        if (this.currentlySelected === id) {
+            this.deselect()
+        } else {
+            this.select(id)
+        }
+    }
+
     /** Marks the item as being 'unlocked', implying the required auth is completed. */
     unlock(id: ServiceItemId) {
         this.unlockedServices.add(id)
@@ -209,19 +234,18 @@ export class ServiceItemsState {
     display: flex;
     margin-top: 10px;
     padding: 20px 15px 20px 15px;
-    width: 100%;
+
+    min-height: 35px;
 
     border-style: solid;
     border-width: 2px;
     border-radius: 4px;
     border-color: transparent;
 
-    /* Assumes that description is a single line.
-    If it can be multiple lines this value should be re-evaluated */
-    height: 75px;
-
     /* Icon and text are centered on the secondary axis */
     align-items: center;
+
+    cursor: pointer;
 }
 
 /* When a service item was clicked */
@@ -273,4 +297,10 @@ export class ServiceItemsState {
     flex-direction: column;
     text-align: left;
 }
+
+/* ******** Service Item Content Container ******** */
+
+.service-item-content-list-item:empty {
+    display: none;
+}
 </style>

src/credentials/vue/ServiceItemContent.vue

@@ -0,0 +1,29 @@
+<template>
+    <div id="service-item-content-container">TODO</div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export const ServiceItemContent = defineComponent({})
+
+export default ServiceItemContent
+</script>
+<style>
+#service-item-content-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    border-style: solid;
+    border-width: 2px;
+    border-radius: 4px;
+    border-color: #0097fb;
+
+    width: 700px;
+    height: 100%;
+
+    /* For testing purposes, before we have content to fill */
+    min-height: 600px;
+}
+</style>

src/credentials/vue/root.vue

@@ -1,63 +1,89 @@
 <template>
-    <div class="flex-container" style="display: flex">
+    <div class="flex-container">
         <div id="left-column">
             <div>
                 <h1>Select a feature to get started</h1>
-                <div v-for="itemId in unlockedItemIds">
+                <ul class="service-item-list" v-for="itemId in unlockedItemIds">
                     <ServiceItem
                         :title="getServiceItemProps(itemId).title"
                         :description="getServiceItemProps(itemId).description"
                         :status="'UNLOCKED'"
                         :isSelected="isServiceSelected(itemId)"
+                        :isLandscape="isLandscape"
                         :id="itemId"
                         :key="buildServiceItemKey(itemId, 'UNLOCKED')"
                         @service-item-clicked="serviceWasSelected(itemId)"
                     >
+                        <template v-slot:service-item-content-slot v-if="isServiceSelected(itemId) && !isLandscape">
+                            <ServiceItemContent></ServiceItemContent>
+                        </template>
                     </ServiceItem>
-                </div>
+                </ul>
             </div>
 
             <div>
                 <h3>UNLOCK ADDITIONAL FEATURES</h3>
                 <div>Some features have additional authentication requirements to use. <a>Read more.</a></div>
 
-                <div v-for="itemId in lockedItemIds">
+                <ul class="service-item-list" v-for="itemId in lockedItemIds">
                     <ServiceItem
                         :title="getServiceItemProps(itemId).title"
                         :description="getServiceItemProps(itemId).description"
                         :status="'LOCKED'"
                         :isSelected="isServiceSelected(itemId)"
+                        :isLandscape="isLandscape"
                         :id="itemId"
                         :key="buildServiceItemKey(itemId, 'LOCKED')"
                         @service-item-clicked="serviceWasSelected(itemId)"
                     >
+                        <template v-slot:service-item-content-slot v-if="isServiceSelected(itemId) && !isLandscape">
+                            <ServiceItemContent></ServiceItemContent>
+                        </template>
                     </ServiceItem>
-                </div>
+                </ul>
             </div>
             <h3></h3>
         </div>
-        <div id="right-column"></div>
+        <div v-if="isLandscape && isAnyServiceSelected" id="right-column">
+            <ServiceItemContent></ServiceItemContent>
+        </div>
     </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
 import ServiceItem, { ServiceItemsState, ServiceItemId, ServiceStatus, StaticServiceItemProps } from './ServiceItem.vue'
+import ServiceItemContent from './ServiceItemContent.vue'
 
 const serviceItemsState = new ServiceItemsState()
 
 export default defineComponent({
-    components: { ServiceItem },
+    components: { ServiceItem, ServiceItemContent },
     name: 'AuthRoot',
     data() {
         return {
             unlockedItemIds: [] as ServiceItemId[],
             lockedItemIds: [] as ServiceItemId[],
+            currWindowWidth: window.innerWidth,
         }
     },
     created() {
         this.renderItems()
     },
+    mounted() {
+        window.addEventListener('resize', this.updateWindowWidth)
+    },
+    unmounted() {
+        window.removeEventListener('resize', this.updateWindowWidth)
+    },
+    computed: {
+        isLandscape() {
+            return this.currWindowWidth > 1300
+        },
+        isAnyServiceSelected(): boolean {
+            return serviceItemsState.selected !== undefined
+        },
+    },
     methods: {
         /**
          * Triggers a rendering of the service items.
@@ -86,6 +112,9 @@ export default defineComponent({
         buildServiceItemKey(id: ServiceItemId, lockStatus: ServiceStatus) {
             return id + '_' + (this.isServiceSelected(id) ? `${lockStatus}_SELECTED` : `${lockStatus}`)
         },
+        updateWindowWidth() {
+            this.currWindowWidth = window.innerWidth
+        },
     },
 })
 </script>
@@ -95,32 +124,28 @@ export default defineComponent({
 .flex-container {
     display: flex;
     flex-direction: row;
-    width: 1200px;
-}
-
-/* Makes webview responsive and changes to single column when necessary */
-@media (max-width: 1200px) {
-    .flex-container {
-        flex-direction: column;
-
-        color: red;
-    }
 }
 
 #left-column {
-    flex-grow: 1;
-    max-width: 40%;
+    width: 500px;
     box-sizing: border-box;
     margin: 10px;
 }
 
-#right-column {
-    flex-grow: 1;
-    max-width: 60%;
+.service-item-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
 
+.service-item-list li {
+    /* Creates an even separation between all list items*/
+    margin-top: 10px;
+}
+
+#right-column {
     /* This can be deleted, for development purposes */
-    background-color: aqua;
-    color: black;
-    height: 200px;
+    height: 800px;
+    margin: 10px;
 }
 </style>