@windward/integrations 0.0.12 → 0.1.0

package/components/Content/Blocks/ExternalIntegration/LtiConsumer.vue

@@ -1,23 +1,52 @@
 <template>
     <div>
         <div v-if="!missing && consumer">
-            <h1>{{ consumer.name }}</h1>
-            <TextViewer v-model="consumer.description"></TextViewer>
+            <h3>{{ block.metadata.config.title }}</h3>
 
-            <v-btn
-                v-if="consumer.enabled"
-                color="primary"
-                block
-                @click="onLaunch"
+            <TextViewer
+                v-model="block.metadata.config.instructions"
+            ></TextViewer>
+
+            <v-row
+                v-if="
+                    consumer.enabled &&
+                    block.metadata.config.launch_type !== 'inline'
+                "
+                class="d-flex justify-center"
             >
-                <v-icon>mdi-launch</v-icon>
-                {{
-                    $t(
-                        'windward.integrations.components.content.blocks.external_integration.lti_consumer.launch',
-                        [block.metadata.config.tool_id]
-                    )
-                }}
-            </v-btn>
+                <v-col class="d-flex justify-center col-md-4">
+                    <v-btn
+                        v-if="
+                            block.metadata.config.launch_type === 'new_window'
+                        "
+                        color="primary"
+                        block
+                        @click="onLaunch"
+                    >
+                        {{
+                            $t(
+                                'windward.integrations.components.content.blocks.external_integration.lti_consumer.launch_in_' +
+                                    block.metadata.config.launch_type,
+                                [consumer.name]
+                            )
+                        }}
+                    </v-btn>
+                    <v-btn
+                        v-else
+                        color="primary"
+                        block
+                        @click="setLaunchTimer(100)"
+                    >
+                        {{
+                            $t(
+                                'windward.integrations.components.content.blocks.external_integration.lti_consumer.launch_in_' +
+                                    block.metadata.config.launch_type,
+                                [consumer.name]
+                            )
+                        }}
+                    </v-btn>
+                </v-col>
+            </v-row>
 
             <v-alert v-if="!consumer.enabled" type="error">
                 {{
@@ -33,6 +62,7 @@
                 :target="target"
                 :action="launchData.target || ''"
                 :method="launchData.method || 'POST'"
+                @submit.prevent
             >
                 <input
                     v-for="(value, key) of launchData.payload"
@@ -50,6 +80,35 @@
                 :name="frameId"
                 class="launch-frame"
             ></iframe>
+            <Dialog
+                v-if="block.metadata.config.launch_type === 'modal'"
+                v-model="openModal"
+                :trigger="false"
+                persistent
+                max-width="1350px"
+                @click:close="closeModal"
+            >
+                <template #title>{{ block.metadata.config.title }}</template>
+                <template #trigger>
+                    <v-icon small>mdi-pencil</v-icon>
+                    <span class="sr-only">{{
+                        $t(
+                            'windward.integrations.components.external_integration.driver.lti1p1.edit'
+                        )
+                    }}</span>
+                </template>
+                <template #form="{ on, attrs }">
+                    <iframe
+                        v-if="launched"
+                        v-bind="attrs"
+                        :name="frameId"
+                        class="launch-frame"
+                        v-on="on"
+                    ></iframe>
+
+                    <div v-else></div>
+                </template>
+            </Dialog>
         </div>
 
         <v-alert v-if="missing" type="error">
@@ -88,17 +147,18 @@
 <script>
 import _ from 'lodash'
 import { mapGetters } from 'vuex'
-import Lti1p1Consumer from '../../../../models/ExternalIntegration/Lti1p1Consumer'
+import LtiConsumer from '../../../../models/ExternalIntegration/LtiConsumer'
 import Crypto from '~/helpers/Crypto'
 import TextViewer from '~/components/Text/TextViewer.vue'
 import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
 import Course from '~/models/Course'
 import Organization from '~/models/Organization'
 import Enrollment from '~/models/Enrollment'
+import Dialog from '~/components/Dialog.vue'
 
 export default {
     name: 'ContentBlockExternalIntegrationLti1p1Consumer',
-    components: { TextViewer },
+    components: { TextViewer, Dialog },
     extends: BaseContentBlock,
     data() {
         return {
@@ -109,6 +169,8 @@ export default {
             frameId: Crypto.id() + '_frame',
             missing: false,
             launched: false,
+            launchTimeout: {},
+            openModal: false,
         }
     },
     async fetch() {
@@ -123,12 +185,27 @@ export default {
         }),
     },
     watch: {
+        'block.metadata.config.launch_type': {
+            deep: true,
+            handler(newVal, oldVal) {
+                // We changed the consumer tool id, reload
+                if (
+                    newVal === 'inline' &&
+                    this.block.metadata.config.tool_id !== null
+                ) {
+                    this.setLaunchTimer()
+                }
+            },
+        },
         'block.metadata.config.tool_id': {
             deep: true,
             handler(newVal, oldVal) {
                 // We changed the consumer tool id, reload
                 if (newVal !== oldVal) {
                     this.loadConsumer()
+                    if (this.block.metadata.config.launch_type === 'inline') {
+                        this.setLaunchTimer()
+                    }
                 }
             },
         },
@@ -140,13 +217,45 @@ export default {
         if (_.isEmpty(this.block.metadata.config.tool_id)) {
             this.block.metadata.config.tool_id = null
         }
+        if (_.isEmpty(this.block.metadata.config.title)) {
+            this.block.metadata.config.title = this.$t(
+                'windward.integrations.components.content.blocks.external_integration.lti_consumer.title'
+            )
+        }
+        if (_.isEmpty(this.block.metadata.config.instructions)) {
+            this.block.metadata.config.instructions = this.$t(
+                'windward.integrations.components.content.blocks.external_integration.lti_consumer.instructions'
+            )
+        }
+    },
+    mounted() {
+        if (
+            this.block.metadata.config.tool_id !== null &&
+            this.block.metadata.config.launch_type === 'inline'
+        ) {
+            this.setLaunchTimer()
+        }
+    },
+
+    destroyed() {
+        clearTimeout(this.launchTimeout)
     },
-    mounted() {},
     methods: {
+        setLaunchTimer(timeout = 1000) {
+            clearTimeout(this.launchTimeout)
+            this.launchTimeout = setTimeout(this.onLaunch, timeout)
+            this.launched = true
+        },
+        closeModal() {
+            this.launchData = {}
+            this.target = ''
+            this.openModal = false
+            this.launched = false
+        },
         async loadConsumer() {
             try {
                 if (!_.isEmpty(this.block.metadata.config.tool_id)) {
-                    this.consumer = await new Lti1p1Consumer()
+                    this.consumer = await new LtiConsumer()
                         .for(
                             new Organization({ id: this.organization.id }),
                             new Course({ id: this.course.id })
@@ -168,8 +277,11 @@ export default {
                 // Clear the launch data in-case we're in inline mode
                 // If the iframe isn't destroyed subsequent launches will be new windows instead of the target iframe
                 this.launchData = {}
+                if (this.block.metadata.config.launch_type === 'modal') {
+                    this.openModal = true
+                }
 
-                this.launchData = await Lti1p1Consumer.custom(
+                this.launchData = await LtiConsumer.custom(
                     new Enrollment({ id: this.enrollment.id }),
                     this.consumer,
                     '/launch'
@@ -182,6 +294,9 @@ export default {
                     case 'inline':
                         this.target = this.frameId
                         break
+                    case 'modal':
+                        this.target = this.frameId
+                        break
                     default:
                         this.target = '_blank'
                 }
@@ -216,5 +331,6 @@ export default {
 .launch-frame {
     aspect-ratio: 16/9;
     width: 100%;
+    border-style: none;
 }
 </style>

package/components/ExternalIntegration/Driver/Lti1p1/ManageConsumer.vue

@@ -33,6 +33,8 @@
                         <TextEditor
                             id="description"
                             v-model="consumer.description"
+                            menubar="edit"
+                            toolbar="undo redo | bold italic underline strikethrough "
                             :height="200"
                         ></TextEditor>
 
@@ -148,7 +150,7 @@
 <script>
 import _ from 'lodash'
 import { mapGetters } from 'vuex'
-import Lti1p1Consumer from '../../../../models/ExternalIntegration/Lti1p1Consumer'
+import LtiConsumer from '../../../../models/ExternalIntegration/LtiConsumer'
 import Organization from '~/models/Organization'
 import Course from '~/models/Course'
 import TextEditor from '~/components/Text/TextEditor.vue'
@@ -160,7 +162,7 @@ export default {
     extends: FormVue,
     props: {
         value: {
-            type: [Lti1p1Consumer, null],
+            type: [LtiConsumer, null],
             required: false,
             default: null,
         },
@@ -220,9 +222,9 @@ export default {
     },
     created() {
         if (_.isEmpty(this.value)) {
-            this.consumer = new Lti1p1Consumer(this.consumer)
+            this.consumer = new LtiConsumer(this.consumer)
         } else {
-            this.consumer = new Lti1p1Consumer(_.cloneDeep(this.value))
+            this.consumer = new LtiConsumer(_.cloneDeep(this.value))
         }
     },
     mounted() {
@@ -260,7 +262,7 @@ export default {
             this.consumer.metadata.custom.splice(index, 1)
         },
         async save() {
-            let consumer = new Lti1p1Consumer(this.consumer).for(
+            let consumer = new LtiConsumer(this.consumer).for(
                 new Organization({ id: this.organization.id }),
                 new Course({ id: this.course.id })
             )

package/components/ExternalIntegration/Driver/Lti1p1/ManageConsumers.vue

@@ -79,7 +79,7 @@
 <script>
 import _ from 'lodash'
 import { mapGetters } from 'vuex'
-import Lti1p1Consumer from '../../../../models/ExternalIntegration/Lti1p1Consumer'
+import LtiConsumer from '../../../../models/ExternalIntegration/LtiConsumer'
 import ManageConsumer from './ManageConsumer.vue'
 import Course from '~/models/Course'
 import Organization from '~/models/Organization'
@@ -168,11 +168,12 @@ export default {
             this.loadConsumers()
         },
         async loadConsumers() {
-            this.consumers = await new Lti1p1Consumer()
+            this.consumers = await new LtiConsumer()
                 .for(
                     new Organization({ id: this.organization.id }),
                     new Course({ id: this.course.id })
                 )
+                .where('version', '1.1')
                 .get()
         },
         onConfirmDelete(consumer) {

package/components/ExternalIntegration/Driver/Lti1p3/ManageConsumer.vue

@@ -0,0 +1,284 @@
+<template>
+    <div>
+        <div v-if="!render" class="integration-loading">
+            <v-progress-circular size="128" indeterminate />
+        </div>
+        <div v-if="render">
+            <v-form v-model="formValid" @submit.prevent>
+                <v-row justify="center" align="center" class="mt-5">
+                    <v-col cols="12">
+                        <v-text-field
+                            v-model="consumer.target"
+                            :label="
+                                $t(
+                                    'windward.integrations.components.external_integration.target_url'
+                                )
+                            "
+                            :hint="
+                                $t(
+                                    'windward.integrations.components.external_integration.target_url'
+                                )
+                            "
+                        ></v-text-field>
+                        <v-text-field
+                            v-model="consumer.name"
+                            :placeholder="$t('shared.forms.name')"
+                            :label="$t('shared.forms.name')"
+                            :hint="$t('shared.forms.name')"
+                        ></v-text-field>
+
+                        <label for="description">{{
+                            $t('shared.forms.description')
+                        }}</label>
+                        <TextEditor
+                            id="description"
+                            v-model="consumer.description"
+                            menubar="edit"
+                            toolbar="undo redo | bold italic underline strikethrough "
+                            :height="200"
+                        ></TextEditor>
+
+                        <v-switch
+                            v-model="consumer.enabled"
+                            :label="$t('shared.forms.enabled')"
+                        />
+                        <v-text-field
+                            v-model="consumer.metadata.tool_oidc_auth_endpoint"
+                            :placeholder="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p3.tool_oidc_auth_endpoint'
+                                )
+                            "
+                            :label="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p3.tool_oidc_auth_endpoint'
+                                )
+                            "
+                        ></v-text-field>
+                        <v-text-field
+                            v-model="consumer.metadata.tool_public_keyset_url"
+                            :placeholder="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p3.tool_public_keyset_url'
+                                )
+                            "
+                            :label="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p3.tool_public_keyset_url'
+                                )
+                            "
+                        ></v-text-field>
+
+                        <v-data-table
+                            :headers="customParameterHeaders"
+                            :items="consumer.metadata.custom"
+                            hide-default-footer
+                            class="elevation-1"
+                        >
+                            <template #[`item.key`]="{ index }">
+                                <v-text-field
+                                    v-model="
+                                        consumer.metadata.custom[index].key
+                                    "
+                                    :label="
+                                        $t(
+                                            'windward.integrations.components.external_integration.driver.lti1p1.parameter_name'
+                                        )
+                                    "
+                                />
+                            </template>
+                            <template #[`item.value`]="{ index }">
+                                <v-text-field
+                                    v-model="
+                                        consumer.metadata.custom[index].value
+                                    "
+                                    :label="
+                                        $t(
+                                            'windward.integrations.components.external_integration.driver.lti1p1.value'
+                                        )
+                                    "
+                                />
+                            </template>
+                            <template #[`item.actions`]="{ index }">
+                                <v-btn
+                                    text
+                                    color="primary"
+                                    @click="deleteCustomParameter(index)"
+                                >
+                                    <v-icon small> mdi-delete </v-icon>
+                                    <span class="sr-only">{{
+                                        $t('shared.forms.delete')
+                                    }}</span>
+                                </v-btn>
+                            </template>
+                            <template #footer>
+                                <div class="text-center">
+                                    <v-btn
+                                        color="primary"
+                                        class="mb-3"
+                                        @click="addCustomParameter"
+                                        >{{ $t('shared.forms.add') }}</v-btn
+                                    >
+                                </div>
+                            </template>
+                        </v-data-table>
+                        <br />
+                        <v-select
+                            v-model="consumer.metadata.security_level"
+                            :items="securityLevels"
+                            item-text="name"
+                            item-value="value"
+                            label="Security Level"
+                            outlined
+                        ></v-select>
+                    </v-col>
+                </v-row>
+            </v-form>
+        </div>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import { mapGetters } from 'vuex'
+import LtiConsumer from '../../../../models/ExternalIntegration/LtiConsumer'
+import Organization from '~/models/Organization'
+import Course from '~/models/Course'
+import TextEditor from '~/components/Text/TextEditor.vue'
+import FormVue from '~/components/Form'
+
+export default {
+    name: 'ManageLti1p3ConsumerDriver',
+    components: { TextEditor },
+    extends: FormVue,
+    props: {
+        value: {
+            type: [LtiConsumer, null],
+            required: false,
+            default: null,
+        },
+    },
+    emits: ['update:consumer'],
+    meta: {
+        privilege: {
+            '': {
+                writable: true,
+            },
+        },
+    },
+    data() {
+        return {
+            render: false,
+            consumer: {
+                version: '1.3',
+                metadata: {
+                    custom: [],
+                    security_level: '',
+                    security: [],
+                },
+            },
+            customParameterHeaders: [
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.driver.lti1p1.parameter_name'
+                    ),
+                    value: 'key',
+                },
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.driver.lti1p1.value'
+                    ),
+                    value: 'value',
+                },
+                {
+                    text: this.$t('shared.forms.actions'),
+                    value: 'actions',
+                    sortable: false,
+                },
+            ],
+            securityLevels: [
+                { name: 'Full Access', value: 'full' },
+                { name: 'Email Only', value: 'email' },
+                { name: 'Name Only', value: 'name' },
+                { name: 'Anonymous', value: 'anonymous' },
+                // { name: 'Custom', value: 'custom' }, // TODO: When this is selected provide direct access to check off LTI fields
+            ],
+        }
+    },
+    computed: {
+        ...mapGetters({
+            organization: 'organization/get',
+            course: 'course/get',
+        }),
+    },
+    created() {
+        if (_.isEmpty(this.value)) {
+            this.consumer = new LtiConsumer(this.consumer)
+        } else {
+            this.consumer = new LtiConsumer(_.cloneDeep(this.value))
+        }
+    },
+    mounted() {
+        if (
+            !this.$PermissionService.userHasAccessTo(
+                'plugin.windward.integrations.course.externalIntegration',
+                'writable'
+            )
+        ) {
+            // Display an angry error that they can't view this driver
+            this.$dialog.error(this.$t('shared.error.description_401'), {
+                duration: null,
+                action: {
+                    text: this.$t('shared.forms.close'),
+                    onClick: (_e, toastObject) => {
+                        toastObject.goAway(0)
+                    },
+                },
+            })
+
+            // eslint-disable-next-line no-console
+            console.error('You do not have access to this consumer!')
+
+            // Return so we don't even attempt loading
+            return false
+        }
+
+        this.render = true
+    },
+    methods: {
+        addCustomParameter() {
+            this.consumer.metadata.custom.push({ key: '', value: '' })
+        },
+        deleteCustomParameter(index) {
+            this.consumer.metadata.custom.splice(index, 1)
+        },
+        async save() {
+            let consumer = new LtiConsumer(this.consumer).for(
+                new Organization({ id: this.organization.id }),
+                new Course({ id: this.course.id })
+            )
+
+            try {
+                consumer = await consumer.save()
+                this.consumer = consumer
+
+                // Clone and delete the metadata since we don't need to share that around
+                // Also include the vendor going back for easier mapping
+                const consumerEvent = _.cloneDeep(consumer)
+
+                this.$dialog.success(this.$t('shared.forms.saved'))
+                this.$emit('update:consumer', consumerEvent)
+            } catch (e) {
+                this.$dialog.error(
+                    this.$t('windward.integrations.shared.error.save_failed')
+                )
+            }
+        },
+        async onSave() {
+            if (this.formValid) {
+                await this.save()
+            }
+        },
+    },
+}
+</script>

package/components/ExternalIntegration/Driver/Lti1p3/ManageConsumers.vue

@@ -0,0 +1,229 @@
+<template>
+    <div>
+        <Dialog
+            color="primary"
+            action-save
+            action-save-new
+            @click:save="onSaved"
+        >
+            <template #title>{{
+                $t(
+                    'windward.integrations.components.external_integration.driver.lti1p1.new'
+                )
+            }}</template>
+            <template #trigger>{{
+                $t(
+                    'windward.integrations.components.external_integration.driver.lti1p1.new'
+                )
+            }}</template>
+            <template #form="{ on, attrs }"
+                ><ManageConsumer v-bind="attrs" v-on="on"></ManageConsumer
+            ></template>
+        </Dialog>
+
+        <v-data-table
+            :headers="headers"
+            :items="consumers"
+            :items-per-page="10"
+            class="elevation-1"
+        >
+            <template #[`item.description`]="{ item }">
+                {{ item.description.replace(/(<([^>]+)>)/gi, '').trim() }}
+            </template>
+
+            <template #[`item.enabled`]="{ item }">
+                <v-icon :color="item.enabled ? 'success' : 'error'"
+                    >{{ item.enabled ? 'mdi-check' : 'mdi-close' }}
+                </v-icon>
+                <span v-if="!item.enabled" class="sr-only">{{
+                    $t('shared.forms.enabled')
+                }}</span>
+            </template>
+
+            <template #[`item.created_at`]="{ item }">
+                {{ $d(new Date(item.created_at), 'long') }}
+            </template>
+            <template #[`item.actions`]="{ index, item }">
+                <Dialog color="primary">
+                    <template #title>{{
+                        $t(
+                            'windward.integrations.components.external_integration.driver.lti1p3.view'
+                        )
+                    }}</template>
+                    <template #trigger>
+                        <v-icon small>mdi-eye-outline</v-icon>
+                        <span class="sr-only">{{
+                            $t(
+                                'windward.integrations.components.external_integration.driver.lti1p3.view'
+                            )
+                        }}</span>
+                    </template>
+                    <template #form="{ on, attrs }"
+                        ><ViewConsumer
+                            v-model="consumers[index]"
+                            v-bind="attrs"
+                            v-on="on"
+                        ></ViewConsumer
+                    ></template>
+                </Dialog>
+                <Dialog color="primary" action-save @click:save="onSaved">
+                    <template #title>{{
+                        $t(
+                            'windward.integrations.components.external_integration.driver.lti1p3.edit'
+                        )
+                    }}</template>
+                    <template #trigger>
+                        <v-icon small>mdi-pencil</v-icon>
+                        <span class="sr-only">{{
+                            $t(
+                                'windward.integrations.components.external_integration.driver.lti1p3.edit'
+                            )
+                        }}</span>
+                    </template>
+                    <template #form="{ on, attrs }"
+                        ><ManageConsumer
+                            v-model="consumers[index]"
+                            v-bind="attrs"
+                            v-on="on"
+                        ></ManageConsumer
+                    ></template>
+                </Dialog>
+
+                <v-btn icon>
+                    <v-icon @click="onConfirmDelete(item)"> mdi-delete </v-icon>
+                    <span class="sr-only">{{ $t('shared.forms.delete') }}</span>
+                </v-btn>
+            </template>
+        </v-data-table>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import { mapGetters } from 'vuex'
+import LtiConsumer from '../../../../models/ExternalIntegration/LtiConsumer'
+import ManageConsumer from './ManageConsumer.vue'
+import ViewConsumer from './ViewConsumer.vue'
+import Course from '~/models/Course'
+import Organization from '~/models/Organization'
+import Dialog from '~/components/Dialog.vue'
+
+export default {
+    name: 'ManageLti1p1ConsumersDriver',
+    components: { Dialog, ManageConsumer, ViewConsumer },
+    data() {
+        return {
+            consumers: [],
+            headers: [
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.target_url'
+                    ),
+                    value: 'target',
+                },
+                {
+                    text: this.$t('shared.forms.name'),
+                    value: 'name',
+                },
+                {
+                    text: this.$t('shared.forms.description'),
+                    value: 'description',
+                },
+                {
+                    text: this.$t('shared.forms.enabled'),
+                    value: 'enabled',
+                },
+                { text: this.$t('shared.forms.created'), value: 'created_at' },
+                {
+                    text: this.$t('shared.forms.actions'),
+                    value: 'actions',
+                    sortable: false,
+                },
+            ],
+        }
+    },
+
+    async fetch() {
+        if (
+            !this.$PermissionService.userHasAccessTo(
+                'plugin.windward.integrations.course.externalIntegration',
+                'readable'
+            ) ||
+            _.isEmpty(this.organization.id) ||
+            _.isEmpty(this.course.id)
+        ) {
+            // Display an angry error that they can't view this driver
+            this.$dialog.error(this.$t('shared.error.description_401'), {
+                duration: null,
+                action: {
+                    text: this.$t('shared.forms.close'),
+                    onClick: (_e, toastObject) => {
+                        toastObject.goAway(0)
+                    },
+                },
+            })
+            if (_.isEmpty(this.organization.id) || _.isEmpty(this.course.id)) {
+                // eslint-disable-next-line no-console
+                console.error(
+                    'Cannot load external integrations because organization or course is not set!'
+                )
+            } else {
+                // eslint-disable-next-line no-console
+                console.error(
+                    'You do not have access to this external integration!'
+                )
+            }
+
+            // Return so we don't even attempt loading
+            return false
+        }
+
+        await this.loadConsumers()
+    },
+    computed: {
+        ...mapGetters({
+            organization: 'organization/get',
+            course: 'course/get',
+        }),
+    },
+    methods: {
+        onSaved() {
+            this.loadConsumers()
+        },
+        async loadConsumers() {
+            this.consumers = await new LtiConsumer()
+                .for(
+                    new Organization({ id: this.organization.id }),
+                    new Course({ id: this.course.id })
+                )
+                .where('version', '1.3')
+                .get()
+        },
+        onConfirmDelete(consumer) {
+            this.$dialog.show(this.$t('shared.forms.confirm_delete_text'), {
+                icon: 'mdi-help',
+                duration: null,
+                action: [
+                    {
+                        text: this.$t('shared.forms.cancel'),
+                        onClick: (_e, toastObject) => {
+                            toastObject.goAway(0)
+                        },
+                    },
+                    {
+                        text: this.$t('shared.forms.confirm'),
+                        // router navigation
+                        onClick: (_e, toastObject) => {
+                            this.deleteConsumer(consumer)
+                            toastObject.goAway(0)
+                        },
+                    },
+                ],
+            })
+        },
+        deleteConsumer(consumer) {
+            consumer.delete()
+        },
+    },
+}
+</script>

package/components/ExternalIntegration/Driver/Lti1p3/ManageProvider.vue

@@ -127,6 +127,20 @@
                                 )
                             "
                         ></v-text-field>
+                        <v-text-field
+                            id="lti-oauth2-aud"
+                            v-model="provider.metadata.platform_oauth2_audience"
+                            :label="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p3.platform_oauth2_audience'
+                                )
+                            "
+                            :hint="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p3.platform_oauth2_audience'
+                                )
+                            "
+                        ></v-text-field>
                         <v-text-field
                             id="lti-client-id"
                             v-model="provider.metadata.tool_client_id"

package/components/ExternalIntegration/Driver/Lti1p3/ViewConsumer.vue

@@ -0,0 +1,224 @@
+<template>
+    <div>
+        <div v-if="!render" class="integration-loading">
+            <v-progress-circular size="128" indeterminate />
+        </div>
+        <div v-if="render">
+            <v-form v-model="formValid" @submit.prevent>
+                <v-row justify="center" align="center" class="mt-5">
+                    <v-col cols="12">
+                        <SecretField
+                            v-model="consumer.metadata.platform_id"
+                            :hidden="false"
+                            :placeholder="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p3.platform_id'
+                                )
+                            "
+                            :label="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p3.platform_id'
+                                )
+                            "
+                        ></SecretField>
+                        <SecretField
+                            v-model="consumer.metadata.client_id"
+                            :hidden="false"
+                            :placeholder="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p3.tool_client_id'
+                                )
+                            "
+                            :label="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p3.tool_client_id'
+                                )
+                            "
+                        ></SecretField>
+                        <SecretField
+                            v-model="consumer.metadata.deployment_id"
+                            :hidden="false"
+                            :placeholder="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p3.platform_deployment_id'
+                                )
+                            "
+                            :label="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p3.platform_deployment_id'
+                                )
+                            "
+                        ></SecretField>
+                        <SecretField
+                            v-model="
+                                consumer.metadata.platform_oidc_auth_endpoint
+                            "
+                            :hidden="false"
+                            :placeholder="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p3.platform_oidc_auth_endpoint'
+                                )
+                            "
+                            :label="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p3.platform_oidc_auth_endpoint'
+                                )
+                            "
+                        ></SecretField>
+                        <SecretField
+                            v-model="
+                                consumer.metadata.platform_public_keyset_url
+                            "
+                            :hidden="false"
+                            :placeholder="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p3.platform_public_keyset_url'
+                                )
+                            "
+                            :label="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p3.platform_public_keyset_url'
+                                )
+                            "
+                        ></SecretField>
+                        <SecretField
+                            v-model="
+                                consumer.metadata
+                                    .platform_oauth2_access_token_url
+                            "
+                            :hidden="false"
+                            :placeholder="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p3.platform_oauth2_access_token_url'
+                                )
+                            "
+                            :label="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p3.platform_oauth2_access_token_url'
+                                )
+                            "
+                        ></SecretField>
+                    </v-col>
+                </v-row>
+            </v-form>
+        </div>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import { mapGetters } from 'vuex'
+import LtiConsumer from '../../../../models/ExternalIntegration/LtiConsumer'
+import SecretField from '../../../SecretField.vue'
+import Organization from '~/models/Organization'
+import Course from '~/models/Course'
+import FormVue from '~/components/Form'
+export default {
+    name: 'ViewLti1p3Consumer',
+    components: { SecretField },
+    extends: FormVue,
+    props: {
+        value: {
+            type: [LtiConsumer, null],
+            required: false,
+            default: null,
+        },
+    },
+    emits: ['view:consumer'],
+    meta: {
+        privilege: {
+            '': {
+                writable: true,
+            },
+        },
+    },
+    data() {
+        return {
+            render: false,
+            consumer: {
+                version: '1.3',
+                metadata: {
+                    custom: [],
+                    security_level: '',
+                    security: [],
+                },
+            },
+        }
+    },
+    computed: {
+        ...mapGetters({
+            organization: 'organization/get',
+            course: 'course/get',
+        }),
+    },
+    created() {
+        if (_.isEmpty(this.value)) {
+            this.consumer = new LtiConsumer(this.consumer)
+        } else {
+            this.consumer = new LtiConsumer(_.cloneDeep(this.value))
+        }
+    },
+    mounted() {
+        if (
+            !this.$PermissionService.userHasAccessTo(
+                'plugin.windward.integrations.course.externalIntegration',
+                'writable'
+            )
+        ) {
+            // Display an angry error that they can't view this driver
+            this.$dialog.error(this.$t('shared.error.description_401'), {
+                duration: null,
+                action: {
+                    text: this.$t('shared.forms.close'),
+                    onClick: (_e, toastObject) => {
+                        toastObject.goAway(0)
+                    },
+                },
+            })
+
+            // eslint-disable-next-line no-console
+            console.error('You do not have access to this consumer!')
+
+            // Return so we don't even attempt loading
+            return false
+        }
+
+        this.render = true
+    },
+    methods: {
+        addCustomParameter() {
+            this.consumer.metadata.custom.push({ key: '', value: '' })
+        },
+        deleteCustomParameter(index) {
+            this.consumer.metadata.custom.splice(index, 1)
+        },
+        async save() {
+            let consumer = new LtiConsumer(this.consumer).for(
+                new Organization({ id: this.organization.id }),
+                new Course({ id: this.course.id })
+            )
+
+            try {
+                consumer = await consumer.save()
+                this.consumer = consumer
+
+                // Clone and delete the metadata since we don't need to share that around
+                // Also include the vendor going back for easier mapping
+                const consumerEvent = _.cloneDeep(consumer)
+
+                this.$dialog.success(this.$t('shared.forms.saved'))
+                this.$emit('update:consumer', consumerEvent)
+            } catch (e) {
+                this.$dialog.error(
+                    this.$t('windward.integrations.shared.error.save_failed')
+                )
+            }
+        },
+        async onSave() {
+            if (this.formValid) {
+                await this.save()
+            }
+        },
+    },
+}
+</script>

package/components/ExternalIntegration/Driver/ManageLti1p3.vue

@@ -22,7 +22,7 @@
                     }}
                 </v-expansion-panel-header>
                 <v-expansion-panel-content>
-                    <!--                    <ManageConsumers></ManageConsumers>-->
+                    <ManageConsumers></ManageConsumers>
                 </v-expansion-panel-content>
             </v-expansion-panel>
         </v-expansion-panels>
@@ -31,11 +31,11 @@
 
 <script>
 import ManageProviders from './Lti1p3/ManageProviders.vue'
-/* import ManageConsumers from './Lti1p3/ManageConsumers.vue' */
+import ManageConsumers from './Lti1p3/ManageConsumers.vue'
 
 export default {
     name: 'ManageLti1p3Driver',
-    components: { ManageProviders },
+    components: { ManageProviders, ManageConsumers },
     data() {
         return {
             panel: 0,

package/components/SecretField.vue

@@ -1,5 +1,12 @@
 <template>
-    <v-text-field id="secret-field" :value="value" readonly :type="fieldType">
+    <v-text-field
+        id="secret-field"
+        :value="value"
+        readonly
+        :type="fieldType"
+        :placeholder="placeholder"
+        :label="label"
+    >
         <template #append>
             <v-btn icon @click="toggleClear">
                 <v-icon>{{ showClear ? 'mdi-eye-off' : 'mdi-eye' }}</v-icon>
@@ -19,6 +26,14 @@ export default {
         value: { type: String, required: false, default: '' },
         hidden: { type: Boolean, required: false, default: true },
         copy: { type: Boolean, required: false, default: true },
+        placeholder: {
+            type: String,
+            required: false,
+        },
+        label: {
+            type: String,
+            required: false,
+        },
     },
     data() {
         return {

package/components/Settings/ExternalIntegration/LtiConsumerSettings.vue

@@ -1,5 +1,30 @@
 <template>
     <v-container>
+        <v-text-field
+            v-model="block.metadata.config.title"
+            outlined
+            :counter="50"
+            maxlength="50"
+            :label="
+                $t(
+                    'windward.integrations.components.settings.external_integration.lti_consumer.title'
+                )
+            "
+        ></v-text-field>
+        <v-textarea
+            v-model="block.metadata.config.instructions"
+            outlined
+            :counter="255"
+            maxlength="255"
+            :label="
+                $t(
+                    'windward.integrations.components.settings.external_integration.lti_consumer.instructions'
+                )
+            "
+        ></v-textarea>
+        <br />
+        <v-divider class="primary"></v-divider>
+        <br />
         <v-select
             v-model="block.metadata.config.launch_type"
             :label="
@@ -17,40 +42,55 @@
             )
         }}
         <v-list>
-            <v-list-item
-                v-for="consumer in consumers"
-                :key="consumer.id"
-                two-line
-                :disabled="!consumer.enabled"
-                @click="onSelectLink(consumer)"
+            <v-list-item-group
+                v-model="block.metadata.config.tool_id"
+                color="primary"
             >
-                <v-list-item-avatar :color="!consumer.enabled ? 'error' : ''">
-                    <v-icon> mdi-shield-link-variant-outline </v-icon>
-                </v-list-item-avatar>
-                <v-list-item-content>
-                    <v-list-item-title>{{ consumer.name }}</v-list-item-title>
-                    <v-list-item-subtitle v-if="!consumer.enabled">
-                        <v-chip color="error">{{
-                            $t(
-                                'windward.integrations.components.settings.external_integration.lti_consumer.link_disabled'
-                            )
-                        }}</v-chip>
-                    </v-list-item-subtitle>
-                    <v-list-item-subtitle>{{
-                        consumer.description.replace(/(<([^>]+)>)/gi, '').trim()
-                    }}</v-list-item-subtitle>
-                </v-list-item-content>
-            </v-list-item>
+                <v-list-item
+                    v-for="consumer in consumers"
+                    :key="consumer.id"
+                    two-line
+                    :disabled="!consumer.enabled"
+                    :value="consumer.id"
+                >
+                    <v-list-item-avatar
+                        :color="!consumer.enabled ? 'error' : ''"
+                    >
+                        <v-icon> mdi-shield-link-variant-outline</v-icon>
+                    </v-list-item-avatar>
+                    <v-list-item-content color="secondary">
+                        <v-list-item-title>{{
+                            consumer.name
+                        }}</v-list-item-title>
+                        <v-list-item-subtitle v-if="!consumer.enabled">
+                            <v-chip color="error"
+                                >{{
+                                    $t(
+                                        'windward.integrations.components.settings.external_integration.lti_consumer.link_disabled'
+                                    )
+                                }}
+                            </v-chip>
+                        </v-list-item-subtitle>
+                        <v-list-item-subtitle
+                            >{{
+                                consumer.description
+                                    .replace(/(<([^>]+)>)/gi, '')
+                                    .trim()
+                            }}
+                        </v-list-item-subtitle>
+                    </v-list-item-content>
+                </v-list-item>
+            </v-list-item-group>
         </v-list>
     </v-container>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
+import LtiConsumer from '../../../models/ExternalIntegration/LtiConsumer'
 import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
 import Course from '~/models/Course'
 import Organization from '~/models/Organization'
-import Lti1p1Consumer from '../../../models/ExternalIntegration/Lti1p1Consumer'
 
 export default {
     name: 'ContentBlockExternalIntegrationLti1p1ConsumerSettings',
@@ -75,11 +115,17 @@ export default {
                     ),
                     value: 'inline',
                 },
+                {
+                    name: this.$t(
+                        'windward.integrations.components.settings.external_integration.lti_consumer.launch_type_modal'
+                    ),
+                    value: 'modal',
+                },
             ],
         }
     },
     async fetch() {
-        this.consumers = await new Lti1p1Consumer()
+        this.consumers = await new LtiConsumer()
             .for(
                 new Organization({ id: this.organization.id }),
                 new Course({ id: this.course.id })
@@ -96,10 +142,6 @@ export default {
     watch: {},
     beforeMount() {},
     mounted() {},
-    methods: {
-        onSelectLink(consumer) {
-            this.block.metadata.config.tool_id = consumer.id
-        },
-    },
+    methods: {},
 }
 </script>

package/i18n/en-US/components/content/blocks/external_integration/lti_consumer.ts

@@ -1,5 +1,12 @@
 export default {
+    title: 'LTI Consumer Block Title',
+    instructions:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam fringilla ipsum eget ante tempus blandit. Maecenas vel massa\n' +
+        'nec tellus vestibulum porttitor non a enim.',
     launch: 'Launch',
+    goodbye: 'goodbye',
+    launch_in_new_window: 'launch {0} in new tab',
+    launch_in_modal: 'launch {0} in modal',
     configure_warning:
         'This block needs to be configured. Please select a LTI tool in the settings panel.',
     no_access:

package/i18n/en-US/components/external_integration/driver/lti1p3.ts

@@ -1,12 +1,15 @@
 export default {
     key: 'Key',
+    issuer: 'Issuer',
     tool_public_keyset_url: 'Tool Keyset Url',
     tool_oidc_auth_endpoint: 'Tool OpenID Connect Endpoint',
+    login_hint: 'login hint',
     platform_id: 'Platform Identifier',
     platform_name: 'Platform Name',
     platform_public_keyset_url: 'Platform Keyset Url',
     platform_oidc_auth_endpoint: 'Platform OpenID Connect Endpoint',
     platform_oauth2_access_token_url: 'Platform OAuth2 Access Token URL',
+    platform_oauth2_audience: 'Platform Oauth2 audience',
     tool_client_id: 'Tool Client ID',
     platform_deployment_id: 'Deployment ID',
     enable_button_feedback:
@@ -15,4 +18,5 @@ export default {
     value: 'Value',
     new: 'New LTI Link',
     edit: 'Edit LTI Link',
+    view: 'View LTI link details',
 }

package/i18n/en-US/components/settings/external_integration/lti_consumer.ts

@@ -1,7 +1,10 @@
 export default {
+    title: 'title',
+    instructions: 'instructions',
     launch_type: 'Launch Type',
     launch_type_new_window: 'New Window',
     launch_type_inline_frame: 'Inline Frame',
+    launch_type_modal: 'Modal',
     link_select: 'Select a Link:',
     link_disabled: 'Link Disabled',
 }

package/models/ExternalIntegration/{Lti1p1Consumer.ts → LtiConsumer.ts}

@@ -1,7 +1,7 @@
 // @ts-ignore
 import Model from '~/models/Model'
 
-export default class Lti1p1Consumer extends Model {
+export default class LtiConsumer extends Model {
     get required(): string[] {
         return []
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@windward/integrations",
-    "version": "0.0.12",
+    "version": "0.1.0",
     "description": "Windward UI Plugin Integrations for 3rd Party Systems",
     "main": "plugin.js",
     "scripts": {