|
| 1 | +<template> |
| 2 | + <div class="auth-form container-background border-common" id="identity-center-form"> |
| 3 | + <div v-show="canShowAll"> |
| 4 | + <FormTitle :isConnected="isConnected">IAM Identity Center</FormTitle> |
| 5 | + <div v-if="!isConnected">Successor to AWS Single Sign-on</div> |
| 6 | + |
| 7 | + <div v-if="stage === 'START'"> |
| 8 | + <div class="form-section"> |
| 9 | + If your organization has provided you a CodeWhisperer license, sign in with your Identity Center |
| 10 | + access portal login page. |
| 11 | + <a>Read more.</a> |
| 12 | + </div> |
| 13 | + |
| 14 | + <div class="form-section"> |
| 15 | + <label class="input-title">Start URL</label> |
| 16 | + <label class="small-description">The Start URL</label> |
| 17 | + <input v-model="data.startUrl" type="text" :data-invalid="!!errors.startUrl" /> |
| 18 | + <div class="small-description error-text">{{ errors.startUrl }}</div> |
| 19 | + </div> |
| 20 | + |
| 21 | + <div class="form-section"> |
| 22 | + <label class="input-title">Region</label> |
| 23 | + <label class="small-description">The Region</label> |
| 24 | + |
| 25 | + <select v-on:click="getRegion()"> |
| 26 | + <option v-if="!!data.region" :selected="true">{{ data.region }}</option> |
| 27 | + </select> |
| 28 | + </div> |
| 29 | + |
| 30 | + <div class="form-section"> |
| 31 | + <button v-on:click="signin()" :disabled="!canSubmit">Sign up or Sign in</button> |
| 32 | + </div> |
| 33 | + </div> |
| 34 | + |
| 35 | + <div v-if="stage === 'WAITING_ON_USER'"> |
| 36 | + <div class="form-section"> |
| 37 | + <div>Follow instructions...</div> |
| 38 | + </div> |
| 39 | + </div> |
| 40 | + |
| 41 | + <div v-if="stage === 'CONNECTED'"> |
| 42 | + <div class="form-section"> |
| 43 | + <div v-on:click="signout()" style="cursor: pointer; color: #75beff">Sign out</div> |
| 44 | + </div> |
| 45 | + </div> |
| 46 | + </div> |
| 47 | + </div> |
| 48 | +</template> |
| 49 | +<script lang="ts"> |
| 50 | +import { PropType, defineComponent } from 'vue' |
| 51 | +import BaseAuthForm from './baseAuth.vue' |
| 52 | +import FormTitle from './formTitle.vue' |
| 53 | +import { WebviewClientFactory } from '../../../../webviews/client' |
| 54 | +import { AuthWebview } from '../show' |
| 55 | +import { AuthStatus } from './shared.vue' |
| 56 | +import { AuthFormId, authForms } from './types.vue' |
| 57 | +import { Region } from '../../../../shared/regions/endpoints' |
| 58 | +
|
| 59 | +const client = WebviewClientFactory.create<AuthWebview>() |
| 60 | +
|
| 61 | +export type IdentityCenterStage = 'START' | 'WAITING_ON_USER' | 'CONNECTED' |
| 62 | +
|
| 63 | +export default defineComponent({ |
| 64 | + name: 'IdentityCenterForm', |
| 65 | + extends: BaseAuthForm, |
| 66 | + components: { FormTitle }, |
| 67 | + props: { |
| 68 | + state: { |
| 69 | + type: Object as PropType<BaseIdentityCenterState>, |
| 70 | + required: true, |
| 71 | + }, |
| 72 | + }, |
| 73 | + data() { |
| 74 | + return { |
| 75 | + data: { |
| 76 | + startUrl: '', |
| 77 | + region: '' as Region['id'], |
| 78 | + }, |
| 79 | + errors: { |
| 80 | + startUrl: '', |
| 81 | + }, |
| 82 | + canSubmit: false, |
| 83 | + isConnected: false, |
| 84 | +
|
| 85 | + stage: 'START' as IdentityCenterStage, |
| 86 | +
|
| 87 | + canShowAll: false, |
| 88 | + } |
| 89 | + }, |
| 90 | +
|
| 91 | + async created() { |
| 92 | + // Populate form if data already exists (triggers 'watch' functions) |
| 93 | + this.data.startUrl = this.state.getValue('startUrl') |
| 94 | + this.data.region = this.state.getValue('region') |
| 95 | +
|
| 96 | + await this.update() |
| 97 | + this.canShowAll = true |
| 98 | + }, |
| 99 | + computed: {}, |
| 100 | + methods: { |
| 101 | + async signin(): Promise<void> { |
| 102 | + await this.state.startIdentityCenterSetup() |
| 103 | + }, |
| 104 | + async signout(): Promise<void> { |
| 105 | + await this.state.signout() |
| 106 | + }, |
| 107 | + async update() { |
| 108 | + this.stage = await this.state.stage() |
| 109 | + this.isConnected = await this.state.isAuthConnected() |
| 110 | + this.emitAuthConnectionUpdated(this.state.id) |
| 111 | + }, |
| 112 | + async getRegion() { |
| 113 | + const region = await this.state.getRegion() |
| 114 | + this.data.region = region.id |
| 115 | + }, |
| 116 | + async updateData(key: IdentityCenterKey, value: string) { |
| 117 | + this.state.setValue(key, value) |
| 118 | +
|
| 119 | + if (key === 'startUrl') { |
| 120 | + this.errors.startUrl = await this.state.getStartUrlError() |
| 121 | + } |
| 122 | +
|
| 123 | + this.canSubmit = await this.state.canSubmit() |
| 124 | + }, |
| 125 | + }, |
| 126 | + watch: { |
| 127 | + 'data.startUrl'(value: string) { |
| 128 | + this.updateData('startUrl', value) |
| 129 | + }, |
| 130 | + 'data.region'(value: string) { |
| 131 | + this.updateData('region', value) |
| 132 | + }, |
| 133 | + }, |
| 134 | +}) |
| 135 | +
|
| 136 | +type IdentityCenterData = { startUrl: string; region: Region['id'] } |
| 137 | +type IdentityCenterKey = keyof IdentityCenterData |
| 138 | +
|
| 139 | +/** |
| 140 | + * Manages the state of Builder ID. |
| 141 | + */ |
| 142 | +abstract class BaseIdentityCenterState implements AuthStatus { |
| 143 | + protected _data: IdentityCenterData |
| 144 | + protected _stage: IdentityCenterStage = 'START' |
| 145 | +
|
| 146 | + constructor() { |
| 147 | + this._data = { |
| 148 | + startUrl: '', |
| 149 | + region: '', |
| 150 | + } |
| 151 | + } |
| 152 | +
|
| 153 | + abstract get id(): AuthFormId |
| 154 | + protected abstract _startIdentityCenterSetup(): Promise<void> |
| 155 | + abstract isAuthConnected(): Promise<boolean> |
| 156 | +
|
| 157 | + setValue(key: IdentityCenterKey, value: string) { |
| 158 | + this._data[key] = value |
| 159 | + } |
| 160 | +
|
| 161 | + getValue(key: IdentityCenterKey): string { |
| 162 | + return this._data[key] |
| 163 | + } |
| 164 | +
|
| 165 | + async startIdentityCenterSetup(): Promise<void> { |
| 166 | + this._stage = 'WAITING_ON_USER' |
| 167 | + return this._startIdentityCenterSetup() |
| 168 | + } |
| 169 | +
|
| 170 | + async stage(): Promise<IdentityCenterStage> { |
| 171 | + const isAuthConnected = await this.isAuthConnected() |
| 172 | + this._stage = isAuthConnected ? 'CONNECTED' : 'START' |
| 173 | + return this._stage |
| 174 | + } |
| 175 | +
|
| 176 | + async signout(): Promise<void> { |
| 177 | + return client.signoutIdentityCenter() |
| 178 | + } |
| 179 | +
|
| 180 | + async getRegion(): Promise<Region> { |
| 181 | + return client.getIdentityCenterRegion() |
| 182 | + } |
| 183 | +
|
| 184 | + async getStartUrlError() { |
| 185 | + const error = await client.getSsoUrlError(this._data.startUrl) |
| 186 | + return error ?? '' |
| 187 | + } |
| 188 | +
|
| 189 | + async canSubmit() { |
| 190 | + const allFieldsFilled = Object.values(this._data).every(val => !!val) |
| 191 | + const hasErrors = await this.getStartUrlError() |
| 192 | + return allFieldsFilled && !hasErrors |
| 193 | + } |
| 194 | +
|
| 195 | + protected async getSubmittableDataOrThrow(): Promise<IdentityCenterData> { |
| 196 | + return this._data as IdentityCenterData |
| 197 | + } |
| 198 | +} |
| 199 | +
|
| 200 | +export class CodeWhispererIdentityCenterState extends BaseIdentityCenterState { |
| 201 | + override get id(): AuthFormId { |
| 202 | + return authForms.IDENTITY_CENTER_CODE_WHISPERER |
| 203 | + } |
| 204 | +
|
| 205 | + protected override async _startIdentityCenterSetup(): Promise<void> { |
| 206 | + const data = await this.getSubmittableDataOrThrow() |
| 207 | + return client.startIdentityCenterSetup(data.startUrl, data.region) |
| 208 | + } |
| 209 | +
|
| 210 | + override async isAuthConnected(): Promise<boolean> { |
| 211 | + return client.isCodeWhispererIdentityCenterConnected() |
| 212 | + } |
| 213 | +} |
| 214 | +</script> |
| 215 | +<style> |
| 216 | +@import './sharedAuthForms.css'; |
| 217 | +@import '../shared.css'; |
| 218 | +
|
| 219 | +#identity-center-form { |
| 220 | + width: 250px; |
| 221 | + height: fit-content; |
| 222 | +} |
| 223 | +</style> |
0 commit comments