@windward/integrations 0.0.1 → 0.0.3

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

@@ -0,0 +1,13 @@
+<template>
+    <div>LTI 1.1 Consumers Not Implemented yet</div>
+</template>
+
+<script>
+export default {
+    name: 'ManageLti1p1ConsumerDriver',
+    data() {
+        return {}
+    },
+    methods: {},
+}
+</script>

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

@@ -0,0 +1,13 @@
+<template>
+    <div>LTI 1.1 Consumers Not Implemented yet</div>
+</template>
+
+<script>
+export default {
+    name: 'ManageLti1p1ConsumersDriver',
+    data() {
+        return {}
+    },
+    methods: {},
+}
+</script>

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

@@ -0,0 +1,374 @@
+<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="provider.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-switch
+                            v-model="provider.enabled"
+                            :label="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p1.enabled'
+                                )
+                            "
+                        />
+
+                        <v-text-field
+                            v-model="provider.metadata.key"
+                            :placeholder="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p1.auto_key'
+                                )
+                            "
+                            :label="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p1.key'
+                                )
+                            "
+                            :hint="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p1.key'
+                                )
+                            "
+                        ></v-text-field>
+
+                        <v-text-field
+                            v-model="provider.metadata.secret"
+                            :placeholder="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p1.auto_secret'
+                                )
+                            "
+                            :label="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p1.secret'
+                                )
+                            "
+                            :hint="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p1.secret'
+                                )
+                            "
+                        >
+                        </v-text-field>
+                    </v-col>
+                </v-row>
+                <v-row>
+                    <v-col cols="12">
+                        <v-expansion-panels v-model="rolePanel">
+                            <v-expansion-panel>
+                                <v-expansion-panel-header>
+                                    {{
+                                        $t(
+                                            'windward.integrations.components.external_integration.driver.lti1p1.role_map_panel'
+                                        )
+                                    }}
+                                </v-expansion-panel-header>
+                                <v-expansion-panel-content>
+                                    <p>
+                                        <strong>
+                                            {{
+                                                $t(
+                                                    'windward.integrations.components.external_integration.driver.lti1p1.role_map_instructions'
+                                                )
+                                            }}
+                                        </strong>
+                                    </p>
+                                    <p>
+                                        {{
+                                            $t(
+                                                'windward.integrations.components.external_integration.driver.lti1p1.role_map_warning'
+                                            )
+                                        }}
+                                    </p>
+                                    <v-simple-table>
+                                        <template #default>
+                                            <thead>
+                                                <tr>
+                                                    <th>
+                                                        {{
+                                                            $t(
+                                                                'windward.integrations.components.external_integration.driver.lti1p1.role_in_host'
+                                                            )
+                                                        }}
+                                                    </th>
+                                                    <th>
+                                                        {{
+                                                            $t(
+                                                                'windward.integrations.components.external_integration.driver.lti1p1.role_in_local'
+                                                            )
+                                                        }}
+                                                    </th>
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                <tr
+                                                    v-for="(
+                                                        id, externalName
+                                                    ) in provider.role_metadata"
+                                                    :key="externalName"
+                                                >
+                                                    <td>
+                                                        {{
+                                                            uppercase(
+                                                                externalName
+                                                            )
+                                                        }}
+                                                    </td>
+                                                    <td>
+                                                        <v-select
+                                                            v-model="
+                                                                provider
+                                                                    .role_metadata[
+                                                                    externalName
+                                                                ]
+                                                            "
+                                                            :items="roles"
+                                                            item-value="id"
+                                                            item-text="name"
+                                                            :label="
+                                                                $t(
+                                                                    'windward.integrations.components.external_integration.driver.lti1p1.map_to_role'
+                                                                )
+                                                            "
+                                                        ></v-select>
+                                                    </td>
+                                                    <td>
+                                                        <v-btn
+                                                            icon
+                                                            @click="
+                                                                deleteMapItem(
+                                                                    externalName
+                                                                )
+                                                            "
+                                                        >
+                                                            <v-icon>
+                                                                mdi-delete
+                                                            </v-icon>
+                                                            <span
+                                                                class="sr-only"
+                                                            >
+                                                                {{
+                                                                    $t(
+                                                                        'windward.integrations.components.external_integration.driver.lti1p1.delete_role_map_item'
+                                                                    )
+                                                                }}
+                                                            </span>
+                                                        </v-btn>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td>
+                                                        <v-text-field
+                                                            v-model="
+                                                                newMap.name
+                                                            "
+                                                            :label="
+                                                                $t(
+                                                                    'windward.integrations.components.external_integration.driver.lti1p1.remote_role'
+                                                                )
+                                                            "
+                                                        ></v-text-field>
+                                                    </td>
+                                                    <td>
+                                                        <v-select
+                                                            v-model="newMap.id"
+                                                            :items="roles"
+                                                            :label="
+                                                                $t(
+                                                                    'windward.integrations.components.external_integration.driver.lti1p1.map_to_role'
+                                                                )
+                                                            "
+                                                            item-value="id"
+                                                            item-text="name"
+                                                        ></v-select>
+                                                    </td>
+                                                    <td>
+                                                        <v-btn
+                                                            icon
+                                                            :disabled="
+                                                                !newMap.id ||
+                                                                !newMap.name
+                                                            "
+                                                            @click="addMapItem"
+                                                        >
+                                                            <v-icon>
+                                                                mdi-plus
+                                                            </v-icon>
+                                                            <span
+                                                                class="sr-only"
+                                                            >
+                                                                {{
+                                                                    $t(
+                                                                        'windward.integrations.components.external_integration.driver.lti1p1.add_role_map_item'
+                                                                    )
+                                                                }}
+                                                            </span>
+                                                        </v-btn>
+                                                    </td>
+                                                </tr>
+                                            </tbody>
+                                        </template>
+                                    </v-simple-table>
+                                </v-expansion-panel-content>
+                            </v-expansion-panel>
+                        </v-expansion-panels>
+                    </v-col>
+                </v-row>
+            </v-form>
+        </div>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import { mapGetters } from 'vuex'
+import Lti1p1Provider from '../../../../models/ExternalIntegration/Lti1p1Provider'
+import FormVue from '~/components/Form'
+import Role from '~/models/Role'
+import Organization from '~/models/Organization'
+import Course from '~/models/Course'
+
+export default {
+    name: 'ManageLti1p1ProviderDriver',
+    components: {},
+    extends: FormVue,
+    props: {
+        value: {
+            type: [Lti1p1Provider, null],
+            required: false,
+            default: null,
+        },
+    },
+    emits: ['update:provider'],
+    meta: {
+        privilege: {
+            '': {
+                writable: true,
+            },
+        },
+    },
+    data() {
+        return {
+            render: false,
+            provider: {
+                role_metadata: {},
+                metadata: {},
+            },
+            rolePanel: false,
+            roles: [],
+            newMap: {
+                name: null,
+                id: null,
+            },
+        }
+    },
+    async fetch() {
+        // Get available roles but filter out default high level roles since they'll be ignore anyways from the api
+        this.roles = await Role.whereIn('name,ne', [
+            'admin',
+            'editor',
+            'instructor',
+            'student',
+        ]).all()
+    },
+    computed: {
+        ...mapGetters({
+            organization: 'organization/get',
+            course: 'course/get',
+        }),
+    },
+    created() {
+        if (_.isEmpty(this.value)) {
+            this.provider = new Lti1p1Provider({
+                role_metadata: {},
+                metadata: {},
+            })
+        } else {
+            this.provider = _.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 provider!')
+
+            // Return so we don't even attempt loading
+            return false
+        }
+
+        this.render = true
+    },
+    methods: {
+        uppercase(value) {
+            return _.startCase(value)
+        },
+        deleteMapItem(key) {
+            this.$delete(this.provider.role_metadata, key)
+        },
+        addMapItem() {
+            this.provider.role_metadata[this.newMap.name] = this.newMap.id
+            this.newMap.name = null
+            this.newMap.id = null
+        },
+        async save() {
+            let provider = new Lti1p1Provider(this.provider).for(
+                new Organization({ id: this.organization.id }),
+                new Course({ id: this.course.id })
+            )
+
+            try {
+                provider = await provider.save()
+                this.provider = provider
+
+                // Clone and delete the metadata since we don't need to share that around
+                // Also include the vendor going back for easier mapping
+                const providerEvent = _.cloneDeep(provider)
+
+                this.$dialog.success(this.$t('shared.forms.saved'))
+                this.$emit('update:provider', providerEvent)
+            } 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/Lti1p1/ManageProviders.vue

@@ -0,0 +1,220 @@
+<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('shared.forms.new') }}</template>
+            <template #form="{ on, attrs }"
+                ><ManageProvider v-bind="attrs" v-on="on"></ManageProvider
+            ></template>
+        </Dialog>
+
+        <v-data-table
+            :headers="headers"
+            :items="providers"
+            :items-per-page="10"
+            class="elevation-1"
+        >
+            <template #item.metadata.key="{ item }">
+                <SecretField v-model="item.metadata.key"></SecretField>
+            </template>
+            <template #item.metadata.secret="{ item }">
+                <SecretField v-model="item.metadata.secret"></SecretField>
+            </template>
+            <template #item.url="{ item }">
+                <SecretField v-model="item.url" :hidden="false"></SecretField>
+            </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 }"
+                        ><ManageProvider
+                            v-model="providers[index]"
+                            v-bind="attrs"
+                            v-on="on"
+                        ></ManageProvider
+                    ></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 Lti1p1Provider from '../../../../models/ExternalIntegration/Lti1p1Provider'
+import SecretField from '../../../SecretField.vue'
+import ManageProvider from './ManageProvider.vue'
+import Course from '~/models/Course'
+import Organization from '~/models/Organization'
+import Dialog from '~/components/Dialog.vue'
+
+export default {
+    name: 'ManageLti1p1ProvidersDriver',
+    components: { SecretField, Dialog, ManageProvider },
+    data() {
+        return {
+            providers: [],
+            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.key'
+                    ),
+                    value: 'metadata.key',
+                },
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.driver.lti1p1.secret'
+                    ),
+                    value: 'metadata.secret',
+                },
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.driver.lti1p1.launch_url'
+                    ),
+                    value: 'url',
+                },
+                {
+                    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.loadProviders()
+    },
+    computed: {
+        ...mapGetters({
+            organization: 'organization/get',
+            course: 'course/get',
+        }),
+    },
+    methods: {
+        onSaved(e) {
+            this.loadProviders()
+        },
+        async loadProviders() {
+            this.providers = await new Lti1p1Provider()
+                .for(
+                    new Organization({ id: this.organization.id }),
+                    new Course({ id: this.course.id })
+                )
+                .get()
+        },
+        onConfirmDelete(provider) {
+            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.deleteProvider(provider)
+                            toastObject.goAway(0)
+                        },
+                    },
+                ],
+            })
+        },
+        deleteProvider(provider) {
+            provider.delete()
+        },
+    },
+}
+</script>

package/components/ExternalIntegration/Driver/ManageLti1p1.vue

@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <v-expansion-panels v-model="panel">
+            <v-expansion-panel>
+                <v-expansion-panel-header>
+                    {{
+                        $t(
+                            'windward.integrations.components.external_integration.driver.lti1p1.provider_panel'
+                        )
+                    }}
+                </v-expansion-panel-header>
+                <v-expansion-panel-content>
+                    <ListProviders></ListProviders>
+                </v-expansion-panel-content>
+            </v-expansion-panel>
+            <v-expansion-panel>
+                <v-expansion-panel-header>
+                    {{
+                        $t(
+                            'windward.integrations.components.external_integration.driver.lti1p1.consumer_panel'
+                        )
+                    }}
+                </v-expansion-panel-header>
+                <v-expansion-panel-content>
+                    <ListConsumers></ListConsumers>
+                </v-expansion-panel-content>
+            </v-expansion-panel>
+        </v-expansion-panels>
+    </div>
+</template>
+
+<script>
+import ListProviders from './Lti1p1/ManageProviders.vue'
+import ListConsumers from './Lti1p1/ManageConsumers.vue'
+
+export default {
+    name: 'ManageLti1p1Driver',
+    components: { ListProviders, ListConsumers },
+    data() {
+        return {
+            panel: 0,
+        }
+    },
+}
+</script>

package/components/Integration/Driver/ManageBase.vue

@@ -29,7 +29,7 @@ export default {
     async fetch() {
         if (
             !this.$PermissionService.userHasAccessTo(
-                'plugin.integration.organization',
+                'plugin.windward.integrations.organization.integration',
                 'writable'
             )
         ) {

package/components/SecretField.vue

@@ -0,0 +1,50 @@
+<template>
+    <v-text-field :value="value" readonly :type="fieldType">
+        <template #append>
+            <v-btn icon @click="toggleClear">
+                <v-icon>{{ showClear ? 'mdi-eye-off' : 'mdi-eye' }}</v-icon>
+            </v-btn>
+            <v-btn v-if="copy" icon @click="copyText(value)">
+                <v-icon>mdi-content-copy</v-icon>
+            </v-btn>
+        </template>
+    </v-text-field>
+</template>
+
+<script>
+export default {
+    name: 'SecretField',
+    props: {
+        value: { type: String, required: false, default: '' },
+        hidden: { type: Boolean, required: false, default: true },
+        copy: { type: Boolean, required: false, default: true },
+    },
+    data() {
+        return {
+            showClear: false,
+        }
+    },
+
+    computed: {
+        fieldType() {
+            if (this.showClear) {
+                return 'text'
+            } else {
+                return 'password'
+            }
+        },
+    },
+    mounted() {
+        this.showClear = !this.hidden
+    },
+    methods: {
+        toggleClear() {
+            this.showClear = !this.showClear
+        },
+        copyText(text) {
+            navigator.clipboard.writeText(text || '')
+            this.$dialog.show(this.$t('shared.forms.copied'))
+        },
+    },
+}
+</script>

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

@@ -0,0 +1,26 @@
+export default {
+    key: 'Key',
+    secret: 'Secret',
+    auto_key: 'Autogenerated Key',
+    auto_secret: 'Autogenerated Secret',
+    target_url: 'Target Url',
+    launch_url: 'Launch Url',
+    new: 'New LTI Link',
+    edit: 'Edit LTI Link',
+    enabled: 'Enabled',
+    provider: 'Provider',
+    consumer: 'Consumer',
+    provider_panel: 'Provider (Students incoming to Windward)',
+    consumer_panel: 'Consumer (Students outgoing from Windward)',
+    role_map_panel: 'Role map',
+    role_in_host: 'Role in Host LMS',
+    role_in_local: 'Role in Windward',
+    remote_role: 'Remote Role name',
+    map_to_role: 'Map to Windward Role',
+    delete_role_map_item: 'Delete role map item',
+    add_role_map_item: 'Add role map item',
+    role_map_instructions:
+        'Only add roles to the below map if the host LMS uses different role names that you want to elevated permissions. Eg "Mentor" that you want to elevate to "External Instructor"',
+    role_map_warning:
+        'Only add roles to the below map if the host LMS uses different role names that you want to elevated permissions. Eg "Mentor" that you want to elevate to "External Instructor"',
+}

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

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

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

@@ -1,7 +1,9 @@
 import navigation from './navigation'
 import integration from './integration'
+import externalIntegration from './external_integration'
 
 export default {
     navigation,
     integration,
+    external_integration: externalIntegration,
 }

package/i18n/en-US/pages/course/external_integration/index.ts

@@ -0,0 +1,6 @@
+export default {
+    title: 'External Integrations',
+    lti_1p1: 'LTI 1.1',
+    lti_1p3: 'LTI 1.3',
+    scorm_1p2: 'SCORM 1.2',
+}

package/i18n/en-US/pages/course/index.ts

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

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

@@ -1,9 +1,13 @@
 import vendor from './vendor'
 import importCourse from './importCourse'
 import importContent from './importContent'
+import login from './login'
+import course from './course'
 
 export default {
     vendor,
     import_course: importCourse,
     import_content: importContent,
+    login,
+    course,
 }

package/i18n/en-US/pages/login/index.ts

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

package/i18n/en-US/pages/login/lti.ts

@@ -0,0 +1,21 @@
+export default {
+    lti_error: 'LTI Errors',
+    launch_error: 'LTI link failed to launch',
+    missing_title: 'The below fields are missing:',
+    error_title: 'The below errors occurred:',
+    error: {
+        unknown: 'An unknown error occurred',
+        organization: 'Invalid organization',
+        tool: 'Invalid tool id',
+        tool_organization: 'This tool does not belong to this organization',
+        oauth: 'Invalid OAuth. Check your key and secret.',
+    },
+    missing: {
+        context_label:
+            'The context label field `context_label` is missing or invalid.',
+        resource_link_title:
+            'The resource link title `resource_link_title` is missing or invalid.',
+        lis_person_contact_email_primary:
+            'The users email is missing and an anonymous email could not be generated.',
+    },
+}

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

@@ -8,6 +8,8 @@ export default {
             'Organization Integrations',
         'plugin->windward->integrations->course': 'Course Integrations',
         'plugin->windward->integrations->content': 'Content Integrations',
+        'plugin->windward->integrations->course->externalIntegration':
+            'External Integrations (LTI / SCORM / etc)',
     },
 
     type_description: {
@@ -22,5 +24,7 @@ export default {
             'Access and manage course imports',
         'plugin->windward->integrations->content':
             'Access and manage content imports',
+        'plugin->windward->integrations->course->externalIntegration':
+            'Access and manage external integrations such as LTI and SCORM',
     },
 }

package/models/ExternalIntegration/Lti1p1Consumer.ts

@@ -0,0 +1,13 @@
+// @ts-ignore
+import Model from '~/models/Model'
+
+export default class Lti1p1Consumer extends Model {
+    get required(): string[] {
+        return []
+    }
+
+    // Set the resource route of the model
+    resource() {
+        return 'external-integrations/lti/1.1/consumers'
+    }
+}

package/models/ExternalIntegration/Lti1p1Provider.ts

@@ -0,0 +1,13 @@
+// @ts-ignore
+import Model from '~/models/Model'
+
+export default class Lti1p1Provider extends Model {
+    get required(): string[] {
+        return []
+    }
+
+    // Set the resource route of the model
+    resource() {
+        return 'external-integrations/lti/1.1/providers'
+    }
+}

package/package.json

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

package/pages/admin/vendors.vue

@@ -151,9 +151,9 @@
 import _ from 'lodash'
 import { mapGetters } from 'vuex'
 
-import Dialog from '~/components/Dialog.vue'
 import Organization from '../../models/Organization'
 import IntegrationJobTable from '../../components/Integration/JobTable.vue'
+import Dialog from '~/components/Dialog.vue'
 
 export default {
     name: 'PluginIntegrationsAdminVendorsPage',

package/pages/course/externalIntegration/index.vue

@@ -0,0 +1,72 @@
+<template>
+    <div>
+        <h1>
+            {{
+                $t(
+                    'windward.integrations.pages.course.external_integration.title'
+                )
+            }}
+        </h1>
+        <v-tabs v-model="tab">
+            <v-tabs-slider></v-tabs-slider>
+
+            <v-tab>
+                {{
+                    $t(
+                        'windward.integrations.pages.course.external_integration.lti_1p1'
+                    )
+                }}
+            </v-tab>
+
+            <v-tab>
+                {{
+                    $t(
+                        'windward.integrations.pages.course.external_integration.lti_1p3'
+                    )
+                }}
+            </v-tab>
+
+            <v-tab>
+                {{
+                    $t(
+                        'windward.integrations.pages.course.external_integration.scorm_1p2'
+                    )
+                }}
+            </v-tab>
+        </v-tabs>
+
+        <v-tabs-items v-model="tab">
+            <v-tab-item> <ManageLti1p1></ManageLti1p1> </v-tab-item>
+            <v-tab-item>
+                <p class="ma-5">LTI 1.3 Not yet implemented</p>
+            </v-tab-item>
+            <v-tab-item>
+                <p class="ma-5">SCORM 1.2 Not yet implemented</p>
+            </v-tab-item>
+        </v-tabs-items>
+    </div>
+</template>
+
+<script>
+import ManageLti1p1 from '../../../components/ExternalIntegration/Driver/ManageLti1p1.vue'
+
+export default {
+    name: 'PluginIntegrationsExternalIntegrationIndexPage',
+    components: { ManageLti1p1 },
+    layout: 'authenticated',
+    meta: {
+        privilege: {
+            'plugin.windward.integrations.course.externalIntegration': {
+                readable: true,
+            },
+        },
+    },
+    data() {
+        return {
+            tab: 0,
+        }
+    },
+    async fetch() {},
+    computed: {},
+}
+</script>

package/pages/login/lti/error.vue

@@ -0,0 +1,98 @@
+<template>
+    <v-container>
+        <v-divider />
+        <v-row>
+            <v-col cols="12" md="6" offset-md="3">
+                <h1 class="text-center mt-5">
+                    {{
+                        $t('windward.integrations.pages.login.lti.launch_error')
+                    }}
+                </h1>
+                <v-alert
+                    v-if="error.length === 0 && missing.length === 0"
+                    type="error"
+                    class="mt-5"
+                >
+                    <strong>{{
+                        $t(
+                            'windward.integrations.pages.login.lti.error.unknown'
+                        )
+                    }}</strong>
+                </v-alert>
+                <v-alert v-if="missing.length" type="warning" class="mt-5">
+                    <strong>{{
+                        $t(
+                            'windward.integrations.pages.login.lti.missing_title'
+                        )
+                    }}</strong>
+                    <ul>
+                        <li v-for="missingItem in missing" :key="missingItem">
+                            {{
+                                $t(
+                                    'windward.integrations.pages.login.lti.missing.' +
+                                        missingItem
+                                )
+                            }}
+                        </li>
+                    </ul>
+                </v-alert>
+                <v-alert v-if="error.length" type="error" class="mt-5">
+                    <strong>{{
+                        $t('windward.integrations.pages.login.lti.error_title')
+                    }}</strong>
+                    <ul>
+                        <li v-for="errorItem in error" :key="errorItem">
+                            {{
+                                $t(
+                                    'windward.integrations.pages.login.lti.error.' +
+                                        errorItem
+                                )
+                            }}
+                        </li>
+                    </ul>
+                </v-alert>
+            </v-col>
+        </v-row>
+    </v-container>
+</template>
+
+<script>
+import _ from 'lodash'
+export default {
+    name: 'PluginIntegrationsLoginLtiErrorPage',
+    layout: 'default',
+    data() {
+        return {
+            missing: [],
+            error: [],
+        }
+    },
+    async fetch() {},
+    computed: {},
+    mounted() {
+        // Get the missing url parameters to display
+        if (!_.isEmpty(_.get(this.$route, 'query.missing', ''))) {
+            this.missing = _.get(this.$route, 'query.missing', '')
+                .split(',')
+                .map((v) => v.trim())
+        }
+
+        // Get the error url parameters to display
+        if (!_.isEmpty(_.get(this.$route, 'query.error', ''))) {
+            this.error = _.get(this.$route, 'query.error', '')
+                .split(',')
+                .map((v) => v.trim())
+        }
+
+        // Set the appropriate locale
+        if (!_.isEmpty(_.get(this.$route, 'query.locale', ''))) {
+            const locale = _.get(this.$route, 'query.locale', '')
+
+            if (this.$i18n.locales.includes(locale)) {
+                this.$i18n.setLocale(locale)
+            }
+        }
+    },
+    methods: {},
+}
+</script>

package/plugin.js

@@ -2,6 +2,8 @@ import enUS from './i18n/en-US'
 import AdminVendorsPage from './pages/admin/vendors.vue'
 import AdminImportCoursePage from './pages/admin/importCourse.vue'
 import ImportContentPage from './pages/course/importContent.vue'
+import ExternalIntegrationIndexPage from './pages/course/externalIntegration/index.vue'
+import LoginLtiErrorPage from './pages/login/lti/error.vue'
 import IntegrationHelper from './helpers/IntegrationHelper'
 
 export default {
@@ -41,6 +43,21 @@ export default {
             name: 'PluginIntegrationsImportContentPage',
             template: ImportContentPage,
         },
+
+        {
+            page: 'admin-integrations',
+            path: '/course/:course/integrations/external',
+            i18n: 'windward.integrations.pages.course.external_integration.title',
+            name: 'PluginIntegrationsExternalIntegrationIndexPage',
+            template: ExternalIntegrationIndexPage,
+        },
+        {
+            page: 'lti-error',
+            path: '/login/lti/error',
+            i18n: 'windward.integrations.pages.login.lti.lti_error',
+            name: 'PluginIntegrationsLoginLtiErrorPage',
+            template: LoginLtiErrorPage,
+        },
     ],
     components: {
         menu: [
@@ -78,6 +95,17 @@ export default {
                             },
                         },
                     },
+                    {
+                        i18n: 'windward.integrations.pages.course.external_integration.title',
+                        path: '/course/{course.id}/integrations/external',
+                        context: ['course'],
+                        permissions: {
+                            'plugin.windward.integrations.course.externalIntegration':
+                                {
+                                    readable: true,
+                                },
+                        },
+                    },
                     /*
                     {
                         i18n: 'windward.integrations.components.navigation.integrations.manage_lti',

package/test/Components/ExternalIntegration/Lti1p1/ManageConsumer.spec.js

@@ -0,0 +1,19 @@
+import { shallowMount } from '@vue/test-utils'
+
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+import { defaultMocks } from '@/test/mocks'
+
+import ManageConsumer from '@/components/ExternalIntegration/Driver/Lti1p1/ManageConsumer.vue'
+
+Vue.use(Vuetify)
+
+describe('ManageConsumer', () => {
+    test('ManageConsumer is a Vue instance', () => {
+        const wrapper = shallowMount(ManageConsumer, {
+            vuetify: new Vuetify(),
+            mocks: defaultMocks,
+        })
+        expect(wrapper.vm).toBeTruthy()
+    })
+})

package/test/Components/ExternalIntegration/Lti1p1/ManageConsumers.spec.js

@@ -0,0 +1,19 @@
+import { shallowMount } from '@vue/test-utils'
+
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+import { defaultMocks } from '@/test/mocks'
+
+import ManageConsumers from '@/components/ExternalIntegration/Driver/Lti1p1/ManageConsumers.vue'
+
+Vue.use(Vuetify)
+
+describe('ManageConsumers', () => {
+    test('ManageConsumers is a Vue instance', () => {
+        const wrapper = shallowMount(ManageConsumers, {
+            vuetify: new Vuetify(),
+            mocks: defaultMocks,
+        })
+        expect(wrapper.vm).toBeTruthy()
+    })
+})

package/test/Components/ExternalIntegration/Lti1p1/ManageProvider.spec.js

@@ -0,0 +1,19 @@
+import { shallowMount } from '@vue/test-utils'
+
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+import { defaultMocks } from '@/test/mocks'
+
+import ManageProvider from '@/components/ExternalIntegration/Driver/Lti1p1/ManageProvider.vue'
+
+Vue.use(Vuetify)
+
+describe('ManageProvider', () => {
+    test('ManageProvider is a Vue instance', () => {
+        const wrapper = shallowMount(ManageProvider, {
+            vuetify: new Vuetify(),
+            mocks: defaultMocks,
+        })
+        expect(wrapper.vm).toBeTruthy()
+    })
+})

package/test/Components/ExternalIntegration/Lti1p1/ManageProviders.spec.js

@@ -0,0 +1,19 @@
+import { shallowMount } from '@vue/test-utils'
+
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+import { defaultMocks } from '@/test/mocks'
+
+import ManageProviders from '@/components/ExternalIntegration/Driver/Lti1p1/ManageProviders.vue'
+
+Vue.use(Vuetify)
+
+describe('ManageProviders', () => {
+    test('ManageProviders is a Vue instance', () => {
+        const wrapper = shallowMount(ManageProviders, {
+            vuetify: new Vuetify(),
+            mocks: defaultMocks,
+        })
+        expect(wrapper.vm).toBeTruthy()
+    })
+})

package/test/Components/ExternalIntegration/ManageLti1p1.spec.js

@@ -0,0 +1,19 @@
+import { shallowMount } from '@vue/test-utils'
+
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+import { defaultMocks } from '@/test/mocks'
+
+import ManageLti1p1 from '@/components/ExternalIntegration/Driver/ManageLti1p1.vue'
+
+Vue.use(Vuetify)
+
+describe('ManageLti1p1', () => {
+    test('ManageLti1p1 is a Vue instance', () => {
+        const wrapper = shallowMount(ManageLti1p1, {
+            vuetify: new Vuetify(),
+            mocks: defaultMocks,
+        })
+        expect(wrapper.vm).toBeTruthy()
+    })
+})

package/test/Pages/Course/ExternalIntegration/index.spec.js

@@ -0,0 +1,19 @@
+import { shallowMount } from '@vue/test-utils'
+
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+import { defaultMocks } from '@/test/mocks'
+
+import ExternalIntegrationIndexPage from '@/pages/course/externalIntegration/index.vue'
+
+Vue.use(Vuetify)
+
+describe('ExternalIntegrationIndexPage', () => {
+    test('ExternalIntegrationIndexPage is a Vue instance', () => {
+        const wrapper = shallowMount(ExternalIntegrationIndexPage, {
+            vuetify: new Vuetify(),
+            mocks: defaultMocks,
+        })
+        expect(wrapper.vm).toBeTruthy()
+    })
+})

package/test/Pages/Login/Lti/error.spec.js

@@ -0,0 +1,19 @@
+import { shallowMount } from '@vue/test-utils'
+
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+import { defaultMocks } from '@/test/mocks'
+
+import LtiErrorPage from '@/pages/login/lti/error.vue'
+
+Vue.use(Vuetify)
+
+describe('LtiErrorPage', () => {
+    test('LtiErrorPage is a Vue instance', () => {
+        const wrapper = shallowMount(LtiErrorPage, {
+            vuetify: new Vuetify(),
+            mocks: defaultMocks,
+        })
+        expect(wrapper.vm).toBeTruthy()
+    })
+})

package/test/__mocks__/modelMock.js

@@ -7,7 +7,10 @@ mockModel.$http = axios
 jest.mock('axios')
 
 // Define any new model mocks here. The imports / mocks will be auto-generated below
-const mockVirtualModels = []
+const mockVirtualModels = [
+    { path: '~/models/Role', resource: 'roles' },
+    { path: '~/models/Organization', resource: 'organizations' },
+]
 
 const mockModels = [
     { path: '../../models/Organization', resource: 'organizations' },

package/test/mocks.js

@@ -14,5 +14,6 @@ mocks.$Integration = {
         })
     },
 }
+mocks.$PermissionService = { userHasAccessTo: () => true }
 
 export const defaultMocks = mocks