@windward/integrations 0.0.4 → 0.0.6

package/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "git-blame.gitWebUrl": ""
+}

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

@@ -0,0 +1,206 @@
+<template>
+    <div>
+        <div v-if="!missing && consumer">
+            <h1>{{ consumer.name }}</h1>
+            <TextViewer v-model="consumer.description"></TextViewer>
+
+            <v-btn
+                v-if="consumer.enabled"
+                color="primary"
+                block
+                @click="onLaunch"
+            >
+                <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-alert v-if="!consumer.enabled" type="error">
+                {{
+                    $t(
+                        'windward.integrations.components.content.blocks.external_integration.lti_consumer.link_disabled'
+                    )
+                }}
+            </v-alert>
+
+            <v-form
+                name="ltiForm"
+                ref="ltiForm"
+                :target="target"
+                :action="launchData.target || ''"
+                :method="launchData.method || 'POST'"
+            >
+                <input
+                    type="hidden"
+                    v-for="(value, key) of launchData.payload"
+                    :key="key"
+                    :name="key"
+                    :value="value"
+                />
+            </v-form>
+            <iframe
+                v-if="
+                    block.metadata.config.launch_type === 'inline' &&
+                    !!launchData.target
+                "
+                :name="frameId"
+                class="launch-frame"
+            ></iframe>
+        </div>
+
+        <v-alert v-if="missing" type="error">
+            {{
+                $t(
+                    'windward.integrations.components.content.blocks.external_integration.lti_consumer.missing_tool',
+                    [block.metadata.config.tool_id]
+                )
+            }}
+        </v-alert>
+        <v-alert v-else-if="consumer === null" type="warning">
+            {{
+                $t(
+                    'windward.integrations.components.content.blocks.external_integration.lti_consumer.configure_warning'
+                )
+            }}
+        </v-alert>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import { mapGetters } from 'vuex'
+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 Lti1p1Consumer from '../../../../models/ExternalIntegration/Lti1p1Consumer'
+
+export default {
+    name: 'ContentBlockExternalIntegrationLti1p1Consumer',
+    extends: BaseContentBlock,
+    components: { TextViewer },
+    extends: BaseContentBlock,
+    beforeMount() {
+        if (_.isEmpty(this.block.metadata.config)) {
+            this.block.metadata.config = {}
+        }
+        if (_.isEmpty(this.block.metadata.config.tool_id)) {
+            this.block.metadata.config.tool_id = null
+        }
+    },
+    data() {
+        return {
+            consumer: null,
+            launchData: {},
+            saveState: false, // Override the base block to disable state saving
+            target: '_blank',
+            frameId: Crypto.id() + '_frame',
+            missing: false,
+            launched: false,
+        }
+    },
+    watch: {
+        'block.metadata.config.tool_id': {
+            deep: true,
+            handler(newVal, oldVal) {
+                // We changed the consumer tool id, reload
+                if (newVal !== oldVal) {
+                    this.loadConsumer()
+                }
+            },
+        },
+    },
+    async fetch() {
+        this.target = this.frameId
+        this.loadConsumer()
+    },
+    computed: {
+        ...mapGetters({
+            organization: 'organization/get',
+            course: 'course/get',
+            enrollment: 'enrollment/get',
+        }),
+    },
+    mounted() {},
+    methods: {
+        async loadConsumer() {
+            try {
+                if (!_.isEmpty(this.block.metadata.config.tool_id)) {
+                    this.consumer = await new Lti1p1Consumer()
+                        .for(
+                            new Organization({ id: this.organization.id }),
+                            new Course({ id: this.course.id })
+                        )
+                        .find(this.block.metadata.config.tool_id)
+                } else {
+                    this.consumer = null
+                }
+                this.missing = false
+            } catch (e) {
+                // Data conflict error
+                if (e.response.status === 404) {
+                    this.missing = true
+                }
+            }
+        },
+        async onLaunch() {
+            try {
+                // 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 = {}
+
+                this.launchData = await Lti1p1Consumer.custom(
+                    new Enrollment({ id: this.enrollment.id }),
+                    this.consumer,
+                    '/launch'
+                ).first()
+
+                switch (this.block.metadata.config.launch_type) {
+                    case 'new_window':
+                        this.target = '_blank'
+                        break
+                    case 'inline':
+                        this.target = this.frameId
+                        break
+                    default:
+                        this.target = '_blank'
+                }
+
+                // Do a forceUpdate so the hidden fields are ready and available for the post below
+                await this.$forceUpdate()
+
+                if (!_.isEmpty(this.launchData)) {
+                    this.$refs.ltiForm.$el.submit()
+                    this.launched = true
+                } else {
+                    this.$dialog.error(
+                        this.$t(
+                            'windward.integrations.components.content.blocks.external_integration.lti_consumer.unknown_error'
+                        )
+                    )
+                }
+            } catch (e) {
+                console.error('LTI Link Launch Fail')
+                console.error(e)
+            }
+        },
+        onBeforeSave() {
+            // Set a generic body since we don't use this field
+            this.block.body = 'lti-' + this.consumer.version + '-consumer'
+        },
+    },
+}
+</script>
+
+<style scoped>
+.launch-frame {
+    aspect-ratio: 16/9;
+    width: 100%;
+}
+</style>

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

@@ -1,13 +1,292 @@
 <template>
-    <div>LTI 1.1 Consumers Not Implemented yet</div>
+    <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.driver.lti1p1.target_url'
+                                )
+                            "
+                            :hint="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p1.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
+                            v-model="consumer.description"
+                            id="description"
+                            :height="200"
+                        ></TextEditor>
+
+                        <v-switch
+                            v-model="consumer.enabled"
+                            :label="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p1.enabled'
+                                )
+                            "
+                        />
+
+                        <v-text-field
+                            v-model="consumer.metadata.key"
+                            :placeholder="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p1.' +
+                                        (consumer.id ? 'new_key' : 'key')
+                                )
+                            "
+                            :label="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p1.' +
+                                        (consumer.id ? 'change_key' : 'key')
+                                )
+                            "
+                        ></v-text-field>
+
+                        <v-text-field
+                            v-model="consumer.metadata.secret"
+                            :placeholder="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p1.' +
+                                        (consumer.id ? 'new_secret' : 'secret')
+                                )
+                            "
+                            :label="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p1.' +
+                                        (consumer.id
+                                            ? 'change_secret'
+                                            : 'secret')
+                                )
+                            "
+                        >
+                        </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 Lti1p1Consumer from '../../../../models/ExternalIntegration/Lti1p1Consumer'
+import FormVue from '~/components/Form'
+import Organization from '~/models/Organization'
+import Course from '~/models/Course'
+import TextEditor from '~/components/Text/TextEditor.vue'
+
 export default {
     name: 'ManageLti1p1ConsumerDriver',
+    components: { TextEditor },
+    extends: FormVue,
+    props: {
+        value: {
+            type: [Lti1p1Consumer, null],
+            required: false,
+            default: null,
+        },
+    },
+    emits: ['update:consumer'],
+    meta: {
+        privilege: {
+            '': {
+                writable: true,
+            },
+        },
+    },
     data() {
-        return {}
+        return {
+            render: false,
+            consumer: {
+                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 Lti1p1Consumer(this.consumer)
+        } else {
+            this.consumer = new Lti1p1Consumer(_.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)
+                    },
+                },
+            })
+            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 Lti1p1Consumer(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()
+            }
+        },
     },
-    methods: {},
 }
 </script>

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

@@ -1,13 +1,208 @@
 <template>
-    <div>LTI 1.1 Consumers Not Implemented yet</div>
+    <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('shared.forms.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(
+                        'windward.integrations.components.external_integration.driver.lti1p1.enabled'
+                    )
+                }}</span>
+            </template>
+
+            <template #item.created_at="{ item }">
+                {{ $d(new Date(item.created_at), 'long') }}
+            </template>
+            <template #[`item.actions`]="{ index, item }">
+                <Dialog color="primary" action-save @click:save="onSaved">
+                    <template #title>{{
+                        $t(
+                            'windward.integrations.components.external_integration.driver.lti1p1.edit'
+                        )
+                    }}</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 }"
+                        ><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 Lti1p1Consumer from '../../../../models/ExternalIntegration/Lti1p1Consumer'
+import SecretField from '../../../SecretField.vue'
+import ManageConsumer from './ManageConsumer.vue'
+import Course from '~/models/Course'
+import Organization from '~/models/Organization'
+import Dialog from '~/components/Dialog.vue'
+
 export default {
     name: 'ManageLti1p1ConsumersDriver',
+    components: { SecretField, Dialog, ManageConsumer },
     data() {
-        return {}
+        return {
+            consumers: [],
+            headers: [
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.driver.lti1p1.target_url'
+                    ),
+                    value: 'target',
+                },
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.driver.lti1p1.name'
+                    ),
+                    value: 'name',
+                },
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.driver.lti1p1.description'
+                    ),
+                    value: 'description',
+                },
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.driver.lti1p1.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)) {
+                console.error(
+                    'Cannot load external integrations because organization or course is not set!'
+                )
+            } else {
+                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(e) {
+            this.loadConsumers()
+        },
+        async loadConsumers() {
+            this.consumers = await new Lti1p1Consumer()
+                .for(
+                    new Organization({ id: this.organization.id }),
+                    new Course({ id: this.course.id })
+                )
+                .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()
+        },
     },
-    methods: {},
 }
 </script>

package/components/ExternalIntegration/Driver/ManageLti1p1.vue

@@ -10,7 +10,7 @@
                     }}
                 </v-expansion-panel-header>
                 <v-expansion-panel-content>
-                    <ListProviders></ListProviders>
+                    <ManageProviders></ManageProviders>
                 </v-expansion-panel-content>
             </v-expansion-panel>
             <v-expansion-panel>
@@ -22,7 +22,7 @@
                     }}
                 </v-expansion-panel-header>
                 <v-expansion-panel-content>
-                    <ListConsumers></ListConsumers>
+                    <ManageConsumers></ManageConsumers>
                 </v-expansion-panel-content>
             </v-expansion-panel>
         </v-expansion-panels>
@@ -30,12 +30,12 @@
 </template>
 
 <script>
-import ListProviders from './Lti1p1/ManageProviders.vue'
-import ListConsumers from './Lti1p1/ManageConsumers.vue'
+import ManageProviders from './Lti1p1/ManageProviders.vue'
+import ManageConsumers from './Lti1p1/ManageConsumers.vue'
 
 export default {
     name: 'ManageLti1p1Driver',
-    components: { ListProviders, ListConsumers },
+    components: { ManageProviders, ManageConsumers },
     data() {
         return {
             panel: 0,

package/components/Settings/ExternalIntegration/LtiConsumerSettings.vue

@@ -0,0 +1,108 @@
+<template>
+    <v-container>
+        <v-select
+            v-model="block.metadata.config.launch_type"
+            :label="
+                $t(
+                    'windward.integrations.components.settings.external_integration.lti_consumer.launch_type'
+                )
+            "
+            :items="launchTypes"
+            item-text="name"
+            item-value="value"
+        ></v-select>
+        {{
+            $t(
+                'windward.integrations.components.settings.external_integration.lti_consumer.link_select'
+            )
+        }}
+        <v-list>
+            <v-list-item
+                v-for="consumer in consumers"
+                :key="consumer.id"
+                two-line
+                :disabled="!consumer.enabled"
+                @click="onSelectLink(consumer)"
+            >
+                <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>
+    </v-container>
+</template>
+
+<script>
+import _ from 'lodash'
+import { mapGetters } from 'vuex'
+import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
+import ManageConsumer from '../../ExternalIntegration/Driver/Lti1p1/ManageConsumer.vue'
+import Course from '~/models/Course'
+import Organization from '~/models/Organization'
+import Lti1p1Consumer from '../../../models/ExternalIntegration/Lti1p1Consumer'
+
+export default {
+    name: 'ContentBlockExternalIntegrationLti1p1ConsumerSettings',
+    extends: BaseContentSettings,
+    components: { ManageConsumer },
+    props: {
+        settings: { type: Object, required: false, default: null },
+        context: { type: String, required: false, default: 'block' },
+    },
+    async fetch() {
+        this.consumers = await new Lti1p1Consumer()
+            .for(
+                new Organization({ id: this.organization.id }),
+                new Course({ id: this.course.id })
+            )
+            .orderBy('name')
+            .get()
+    },
+    computed: {
+        ...mapGetters({
+            organization: 'organization/get',
+            course: 'course/get',
+        }),
+    },
+    beforeMount() {},
+    data() {
+        return {
+            consumers: [],
+            launchTypes: [
+                {
+                    name: this.$t(
+                        'windward.integrations.components.settings.external_integration.lti_consumer.launch_type_new_window'
+                    ),
+                    value: 'new_window',
+                },
+                {
+                    name: this.$t(
+                        'windward.integrations.components.settings.external_integration.lti_consumer.launch_type_inline_frame'
+                    ),
+                    value: 'inline',
+                },
+            ],
+        }
+    },
+    watch: {},
+    mounted() {},
+    methods: {
+        onSelectLink(consumer) {
+            this.block.metadata.config.tool_id = consumer.id
+        },
+    },
+}
+</script>

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

@@ -0,0 +1,5 @@
+import ltiConsumer from './lti_consumer'
+
+export default {
+    lti_consumer: ltiConsumer,
+}

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

@@ -0,0 +1,8 @@
+export default {
+    launch: 'Launch',
+    configure_warning:
+        'This block needs to be configured. Please select a LTI tool in the settings panel.',
+    missing_tool: 'The tool id {0} is missing',
+    unknown_error: 'Something went wrong! Could not launch this link!',
+    link_disabled: 'Link disabled',
+}

package/i18n/en-US/components/content/blocks/index.ts

@@ -0,0 +1,5 @@
+import externalIntegration from './external_integration'
+
+export default {
+    external_integration: externalIntegration,
+}

package/i18n/en-US/components/content/index.ts

@@ -0,0 +1,5 @@
+import blocks from './blocks'
+
+export default {
+    blocks,
+}

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

@@ -1,8 +1,16 @@
 export default {
+    name: 'Name',
+    description: 'Description',
     key: 'Key',
     secret: 'Secret',
-    auto_key: 'Autogenerated Key',
-    auto_secret: 'Autogenerated Secret',
+    parameter_name: 'Custom Parameter Name',
+    value: 'Value',
+    auto_key: 'Leave empty for autogenerated key',
+    auto_secret: 'Leave empty for autogenerated secret',
+    change_key: 'Change Key',
+    change_secret: 'Change Secret',
+    new_key: 'New Key',
+    new_secret: 'New Secret',
     target_url: 'Target Url',
     launch_url: 'Launch Url',
     new: 'New LTI Link',

package/i18n/en-US/components/index.ts

@@ -1,8 +1,12 @@
+import content from './content'
+import settings from './settings'
 import navigation from './navigation'
 import integration from './integration'
 import externalIntegration from './external_integration'
 
 export default {
+    content,
+    settings,
     navigation,
     integration,
     external_integration: externalIntegration,

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

@@ -0,0 +1,5 @@
+import ltiConsumer from './lti_consumer'
+
+export default {
+    lti_consumer: ltiConsumer,
+}

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

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

package/i18n/en-US/components/settings/index.ts

@@ -0,0 +1,5 @@
+import externalIntegration from './external_integration'
+
+export default {
+    external_integration: externalIntegration,
+}

package/i18n/en-US/shared/content_blocks.ts

@@ -0,0 +1,8 @@
+export default {
+    title: {
+        lti_consumer: 'LTI Link',
+    },
+    grouping: {
+        integrations: 'Integrations',
+    },
+}

package/i18n/en-US/shared/index.ts

@@ -1,9 +1,11 @@
+import contentBlocks from './content_blocks'
 import settings from './settings'
 import menu from './menu'
 import permission from './permission'
 import error from './error'
 
 export default {
+    content_blocks: contentBlocks,
     settings,
     menu,
     permission,

package/i18n/en-US/shared/settings.ts

@@ -1 +1,5 @@
-export default {}
+export default {
+    title: {
+        lti_consumer: 'LTI Consumer',
+    },
+}

package/package.json

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

package/pages/admin/importCourse.vue

@@ -17,9 +17,9 @@
         </v-tabs>
         <v-tabs-items v-model="tab">
             <v-tab-item>
-                <h1>
+                <h2>
                     {{ $t('windward.integrations.pages.import_course.title') }}
-                </h1>
+                </h2>
 
                 <div v-if="!organizationIntegrations.length">
                     {{
@@ -144,13 +144,13 @@
                 </div>
             </v-tab-item>
             <v-tab-item>
-                <h1>
+                <h2>
                     {{
                         $t(
                             'windward.integrations.components.integration.job.recent_jobs_title'
                         )
                     }}
-                </h1>
+                </h2>
                 <IntegrationJobTable
                     ref="integrationJobTable"
                     :channel="'integrations.organizations.' + organization.id"

package/pages/admin/vendors.vue

@@ -3,13 +3,13 @@
         <v-row justify="center" align="center">
             <v-col cols="12">
                 <div class="d-flex mb-5">
-                    <h1 class="mr-auto flex-grow-1">
+                    <h2 class="mr-auto flex-grow-1">
                         {{
                             $t(
                                 'windward.integrations.components.navigation.integrations.title'
                             )
                         }}
-                    </h1>
+                    </h2>
                 </div>
             </v-col>
         </v-row>

package/pages/course/importContent.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <h1>Import Content</h1>
+        <h2>Import Content</h2>
         <p>Not Implemented</p>
     </div>
 </template>

package/plugin.js

@@ -6,6 +6,9 @@ import ExternalIntegrationIndexPage from './pages/course/externalIntegration/ind
 import LoginLtiErrorPage from './pages/login/lti/error.vue'
 import IntegrationHelper from './helpers/IntegrationHelper'
 
+import LtiConsumerBlock from './components/Content/Blocks/ExternalIntegration/LtiConsumer'
+import LtiConsumerBlockSettings from './components/Settings/ExternalIntegration/LtiConsumerSettings'
+
 export default {
     name: 'windward.integrations.name',
     hooks: {
@@ -131,6 +134,29 @@ export default {
                 ],
             },
         ],
+        contentBlock: [
+            {
+                tag: 'windward-integrations-lti-consumer',
+                template: LtiConsumerBlock,
+                metadata: {
+                    icon: 'mdi-shield-link-variant-outline',
+                    name: 'windward.integrations.shared.content_blocks.title.lti_consumer',
+                    grouping:
+                        'windward.integrations.shared.content_blocks.grouping.integrations',
+                },
+            },
+        ],
+        settings: [
+            {
+                tag: 'windward-integrations-lti-consumer-settings',
+                template: LtiConsumerBlockSettings,
+                context: ['block.windward-integrations-lti-consumer'],
+                metadata: {
+                    icon: 'mdi-cog',
+                    name: 'windward.integrations.shared.settings.title.lti_consumer',
+                },
+            },
+        ],
     },
     services: {
         Integration: IntegrationHelper,

package/test/Components/Content/Blocks/ExternalIntegration/LtiConsumer.spec.js

@@ -0,0 +1,26 @@
+import { shallowMount } from '@vue/test-utils'
+
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+import { defaultMocks } from '@/test/mocks'
+
+import LtiConsumer from '@/components/Content/Blocks/ExternalIntegration/LtiConsumer.vue'
+
+Vue.use(Vuetify)
+
+describe('LtiConsumer', () => {
+    test('LtiConsumer is a Vue instance', () => {
+        const wrapper = shallowMount(LtiConsumer, {
+            vuetify: new Vuetify(),
+            mocks: defaultMocks,
+            propsData: {
+                value: {
+                    id: '00000000-0000-0000-0000-000000000000',
+                    body: 'lti-integration',
+                    metadata: {},
+                },
+            },
+        })
+        expect(wrapper.vm).toBeTruthy()
+    })
+})