@windward/integrations 0.17.0 → 0.19.0

package/components/Integration/Driver/ManageSaml.vue

@@ -0,0 +1,327 @@
+<template>
+    <div>
+        <div v-if="!render" class="integration-loading">
+            <v-progress-circular size="128" indeterminate />
+        </div>
+        <div v-if="render">
+            <v-row justify="center" align="center" class="mt-5">
+                <v-col cols="12">
+                    <v-switch
+                        v-model="integration.enabled"
+                        :label="
+                            $t(
+                                'windward.integrations.components.integration.driver.enabled'
+                            )
+                        "
+                    />
+
+                    <v-text-field
+                        id="saml-entity-id"
+                        v-model="integration.metadata.config.idp_entity_id"
+                        :label="
+                            $t(
+                                'windward.integrations.components.integration.driver.saml_sso.idp_entity_id'
+                            )
+                        "
+                        :hint="
+                            $t(
+                                'windward.integrations.components.integration.driver.saml_sso.idp_entity_id_hint'
+                            )
+                        "
+                        :rules="$Validation.getRule('exists')"
+                    ></v-text-field>
+
+                    <v-text-field
+                        id="saml-sso-url"
+                        v-model="integration.metadata.config.idp_sso_url"
+                        :label="
+                            $t(
+                                'windward.integrations.components.integration.driver.saml_sso.idp_sso_url'
+                            )
+                        "
+                        :hint="
+                            $t(
+                                'windward.integrations.components.integration.driver.saml_sso.idp_sso_url_hint'
+                            )
+                        "
+                        :rules="$Validation.getRule('url')"
+                    ></v-text-field>
+
+                    <v-text-field
+                        id="saml-slo-url"
+                        v-model="integration.metadata.config.idp_slo_url"
+                        autocomplete="off"
+                        :label="
+                            $t(
+                                'windward.integrations.components.integration.driver.saml_sso.idp_slo_url'
+                            )
+                        "
+                        :hint="
+                            $t(
+                                'windward.integrations.components.integration.driver.saml_sso.idp_slo_url_hint'
+                            )
+                        "
+                        :rules="$Validation.getRule('url')"
+                    ></v-text-field>
+
+                    <SecretField
+                        id="saml-certificate"
+                        v-model="integration.metadata.config.idp_x509_cert"
+                        tag="v-textarea"
+                        autocomplete="off"
+                        :label="
+                            $t(
+                                'windward.integrations.components.integration.driver.saml_sso.idp_x509_cert'
+                            )
+                        "
+                        :hint="
+                            $t(
+                                'windward.integrations.components.integration.driver.saml_sso.idp_x509_cert_hint'
+                            )
+                        "
+                        :append-icon="
+                            showCertificate ? 'mdi-eye' : 'mdi-eye-off'
+                        "
+                        rows="4"
+                        :rules="$Validation.getRule('exists')"
+                        :readonly="!showCertificate"
+                        :hidden="!showCertificate"
+                        :type="showCertificate ? 'text' : 'password'"
+                        @click:append="showCertificate = !showCertificate"
+                    ></SecretField>
+
+                    <v-alert
+                        v-if="integration.metadata.config.idp_x509_cert"
+                        type="success"
+                        text
+                        dense
+                        class="mt-2"
+                    >
+                        <v-icon small left>mdi-lock</v-icon>
+                        {{
+                            $t(
+                                'windward.integrations.components.integration.driver.saml_sso.cert_stored'
+                            )
+                        }}
+                    </v-alert>
+
+                    <v-divider class="my-4" />
+
+                    <h3 class="mb-3">
+                        {{
+                            $t(
+                                'windward.integrations.components.integration.driver.saml_sso.button_settings'
+                            )
+                        }}
+                    </h3>
+
+                    <v-text-field
+                        id="saml-button-label"
+                        v-model="integration.metadata.config.button_label"
+                        :label="
+                            $t(
+                                'windward.integrations.components.integration.driver.saml_sso.button_label'
+                            )
+                        "
+                        :hint="
+                            $t(
+                                'windward.integrations.components.integration.driver.saml_sso.button_label_hint'
+                            )
+                        "
+                        :placeholder="
+                            $t(
+                                'windward.integrations.components.integration.driver.saml_sso.button_label_default'
+                            )
+                        "
+                    ></v-text-field>
+
+                    <v-text-field
+                        id="saml-button-icon"
+                        v-model="integration.metadata.config.button_icon"
+                        :label="
+                            $t(
+                                'windward.integrations.components.integration.driver.saml_sso.button_icon'
+                            )
+                        "
+                        :hint="
+                            $t(
+                                'windward.integrations.components.integration.driver.saml_sso.button_icon_hint'
+                            )
+                        "
+                        placeholder="mdi-login"
+                    >
+                        <template #prepend>
+                            <v-icon>{{
+                                integration.metadata.config.button_icon ||
+                                'mdi-login'
+                            }}</v-icon>
+                        </template>
+                    </v-text-field>
+
+                    <v-divider class="my-4" />
+
+                    <v-alert type="info" outlined>
+                        <div class="font-weight-bold mb-2">
+                            {{
+                                $t(
+                                    'windward.integrations.components.integration.driver.saml_sso.sp_details'
+                                )
+                            }}
+                        </div>
+                        <div class="text--secondary">
+                            {{
+                                $t(
+                                    'windward.integrations.components.integration.driver.saml_sso.sp_details_description'
+                                )
+                            }}
+                        </div>
+                        <div class="mt-3">
+                            <div>
+                                <strong
+                                    >{{
+                                        $t(
+                                            'windward.integrations.components.integration.driver.saml_sso.sp_entity_id_label'
+                                        )
+                                    }}:</strong
+                                >
+                                {{ spEntityId }}
+                            </div>
+                            <div>
+                                <strong
+                                    >{{
+                                        $t(
+                                            'windward.integrations.components.integration.driver.saml_sso.acs_url_label'
+                                        )
+                                    }}:</strong
+                                >
+                                {{ acsUrl }}
+                            </div>
+                            <div>
+                                <strong
+                                    >{{
+                                        $t(
+                                            'windward.integrations.components.integration.driver.saml_sso.slo_url_label'
+                                        )
+                                    }}:</strong
+                                >
+                                {{ sloUrl }}
+                            </div>
+                        </div>
+                    </v-alert>
+
+                    <TestConnection
+                        :disabled="
+                            !integration.metadata.config.idp_entity_id ||
+                            !integration.metadata.config.idp_sso_url ||
+                            !integration.metadata.config.idp_slo_url ||
+                            !integration.metadata.config.idp_x509_cert
+                        "
+                        :loading="testConnectionLoading"
+                        :errors="errorMessage"
+                        @click="onTestConnection"
+                    ></TestConnection>
+                </v-col>
+            </v-row>
+        </div>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import TestConnection from '../TestConnection.vue'
+import ManageBaseVue from './ManageBase.vue'
+import SecretField from '../../SecretField.vue'
+import Uuid from '~/helpers/Uuid'
+
+export default {
+    name: 'ManageSamlDriver',
+    components: { TestConnection, SecretField },
+    extends: ManageBaseVue,
+    data() {
+        return {
+            // formValid: true|false If this form is "complete" and passed validation on THIS component. Defined and watched in ManageBase.vue
+            // render: true|false If we should show the form aka when validation has passed. Defined and managed in ManageBase.vue
+            // integration: { metadata: {...} } The integration object to write to. Defined and loaded in ManageBase.vue
+            showCertificate: false,
+            errorMessage: '',
+            testConnectionLoading: false,
+        }
+    },
+    computed: {
+        spEntityId() {
+            return `${process.env.BASE_URL}/saml/metadata`
+        },
+        acsUrl() {
+            return `${process.env.BASE_URL}/saml/acs`
+        },
+        sloUrl() {
+            return `${process.env.BASE_URL}/saml/slo`
+        },
+    },
+    methods: {
+        /**
+         * Lifecycle event called from ManageBase.vue when async fetch() completes.
+         * Once called this.integration will be available containing the integration model (or a new one)
+         */
+        onIntegrationLoaded() {
+            // Initialize SAML config if not exists
+            if (!this.integration.metadata.config) {
+                this.integration.metadata.config = {
+                    idp_entity_id: '',
+                    idp_sso_url: '',
+                    idp_slo_url: '',
+                    idp_x509_cert: '',
+                    button_label: '',
+                    button_icon: 'mdi-login',
+                }
+            }
+
+            // Set defaults for button settings if not present
+            if (!this.integration.metadata.config.button_label) {
+                this.integration.metadata.config.button_label = ''
+            }
+            if (!this.integration.metadata.config.button_icon) {
+                this.integration.metadata.config.button_icon = 'mdi-login'
+            }
+
+            // Show the certificate by default if this is a new integration without a cert
+            this.showCertificate = _.isEmpty(
+                _.get(this.integration, 'metadata.config.idp_x509_cert', null)
+            )
+        },
+        async onTestConnection() {
+            this.testConnectionLoading = true
+            let response = { result: false }
+            try {
+                response = await this.testConnection(this.integration.metadata)
+
+                if (response.result) {
+                    this.errorMessage = ''
+                    this.$dialog.success(
+                        this.$t(
+                            'windward.integrations.shared.error.connect_success'
+                        )
+                    )
+                } else {
+                    this.errorMessage = response.message
+                    this.$dialog.error(
+                        this.$t(
+                            'windward.integrations.shared.error.connect_fail'
+                        )
+                    )
+                }
+            } catch (e) {
+                console.error(e)
+                this.$dialog.error(
+                    this.$t('windward.integrations.shared.error.unknown')
+                )
+            }
+
+            // We will indirectly validate the form via connection tests
+            // That way we can 100% confirm that the integration is valid
+            this.formValid = response.result
+            this.testConnectionLoading = false
+        },
+    },
+}
+</script>

package/components/LLM/GenerateContent/BlockQuestionGenerateButton.vue

@@ -105,7 +105,8 @@ export default {
                 this.value.tag === 'plugin-games-bucket' ||
                 this.value.tag === 'plugin-games-wordjumble-game' ||
                 this.value.tag === 'plugin-games-multiple-choice' ||
-                this.value.tag === 'plugin-games-seven-strikes-game',
+                this.value.tag === 'plugin-games-seven-strikes-game' ||
+                this.value.tag === 'plugin-games-crossword-puzzle-game',
         }
     },
     computed: {
@@ -119,7 +120,8 @@ export default {
                 this.isSortingGameType ||
                 this.isWordJumbleType ||
                 this.isMultipleChoiceType ||
-                this.isSevenStrikesType
+                this.isSevenStrikesType ||
+                this.isCrosswordType
             )
         },
         isFlashcardType() {
@@ -148,6 +150,9 @@ export default {
         isMultipleChoiceType() {
             return this.value.tag === 'plugin-games-multiple-choice'
         },
+        isCrosswordType() {
+            return this.value.tag === 'plugin-games-crossword-puzzle-game'
+        },
         replaceExistingLabel() {
             if (this.isBucketGameType) {
                 return this.$t(
@@ -174,6 +179,11 @@ export default {
                     'windward.integrations.components.llm.generate_content.generate_questions.replace_existing_multiple_choice'
                 )
             }
+            if (this.isCrosswordType) {
+                return this.$t(
+                    'windward.integrations.components.llm.generate_content.generate_questions.replace_existing_crossword'
+                )
+            }
             if (this.isFlashcardType) {
                 return this.$t(
                     'windward.integrations.components.llm.generate_content.generate_questions.replace_existing_flashcard'
@@ -190,11 +200,17 @@ export default {
                 (!this.isFlashcardType &&
                     !this.isBucketGameType &&
                     !this.isMatchingGameType &&
-                    !this.isSevenStrikesType)
+                    !this.isSevenStrikesType &&
+                    !this.isWordJumbleType &&
+                    !this.isCrosswordType &&
+                    !this.isMultipleChoiceType)
 
             return supportsAdvancedTaxonomy
         },
         taxonomyLevels() {
+            if (this.isCrosswordType) {
+                return ['None', 'Remember', 'Understand', 'Apply']
+            }
             // For word jumble games, only show None, Remember, Understand, Apply
             if (this.isWordJumbleType) {
                 return ['None', 'Remember', 'Understand', 'Apply']
@@ -254,6 +270,10 @@ export default {
                 return this.$t(
                     'windward.integrations.components.llm.generate_content.generate_questions.button_label_multiple_choice'
                 )
+            } else if (this.value.tag === 'plugin-games-crossword-puzzle-game') {
+                return this.$t(
+                    'windward.integrations.components.llm.generate_content.generate_questions.button_label_crossword'
+                )
             } else {
                 return this.$t(
                     'windward.integrations.components.llm.generate_content.generate_questions.button_label'
@@ -422,6 +442,17 @@ export default {
                         this.$t(
                             `${basePath}.content_mismatch_word_jumble_support`
                         )
+                } else if (
+                    (errorMessage === 'activity.error.content_mismatch' ||
+                        errorType === 'content_mismatch') &&
+                    this.isCrosswordType
+                ) {
+                    errorText =
+                        this.$t(`${basePath}.content_mismatch_crossword`) +
+                        '\n\n' +
+                        this.$t(
+                            `${basePath}.content_mismatch_crossword_support`
+                        )
                 } else if (
                     errorType === 'insufficient_content' &&
                     error.response?.data?.error?.details

package/components/SecretField.vue

@@ -1,28 +1,68 @@
 <template>
-    <v-text-field
-        id="secret-field"
-        :value="value"
-        readonly
-        :type="fieldType"
-        :placeholder="placeholder"
-        :label="label"
-    >
-        <template #append>
-            <v-btn icon elevation="0" @click="toggleClear">
-                <v-icon>{{ showClear ? 'mdi-eye-off' : 'mdi-eye' }}</v-icon>
-            </v-btn>
-            <v-btn v-if="copy" icon elevation="0" @click="copyText(value)">
-                <v-icon>mdi-content-copy</v-icon>
-                <span class="sr-only">{{ $t('shared.forms.copy') }}</span>
-            </v-btn>
-        </template>
-    </v-text-field>
+    <div>
+        <v-text-field
+            v-show="activeTag === 'v-text-field'"
+            :id="'secret-field-' + key"
+            :name="'secret-field-' + key"
+            :value="value"
+            :readonly="readonly"
+            :autocomplete="autocomplete"
+            :type="fieldType"
+            :placeholder="placeholder"
+            :label="label"
+            :hint="hint"
+            :append-icon="appendIcon"
+            :rules="rules"
+            :rows="rows"
+            @input="$emit('input', $event)"
+        >
+            <template #append>
+                <v-btn icon elevation="0" @click="toggleClear">
+                    <v-icon>{{ showClear ? 'mdi-eye-off' : 'mdi-eye' }}</v-icon>
+                </v-btn>
+                <v-btn v-if="copy" icon elevation="0" @click="copyText(value)">
+                    <v-icon>mdi-content-copy</v-icon>
+                    <span class="sr-only">{{ $t('shared.forms.copy') }}</span>
+                </v-btn>
+            </template>
+        </v-text-field>
+        <v-textarea
+            v-show="activeTag === 'v-textarea'"
+            :id="'secret-field-' + key"
+            :name="'secret-field-' + key"
+            :value="value"
+            :readonly="readonly"
+            :autocomplete="autocomplete"
+            :type="fieldType"
+            :placeholder="placeholder"
+            :label="label"
+            :hint="hint"
+            :append-icon="appendIcon"
+            :rules="rules"
+            :rows="rows"
+            @input="$emit('input', $event)"
+        >
+            <template #append>
+                <v-btn icon elevation="0" @click="toggleClear">
+                    <v-icon>{{ showClear ? 'mdi-eye-off' : 'mdi-eye' }}</v-icon>
+                </v-btn>
+                <v-btn v-if="copy" icon elevation="0" @click="copyText(value)">
+                    <v-icon>mdi-content-copy</v-icon>
+                    <span class="sr-only">{{ $t('shared.forms.copy') }}</span>
+                </v-btn>
+            </template>
+        </v-textarea>
+    </div>
 </template>
 
 <script>
+import Crypto from '~/helpers/Crypto'
+
 export default {
     name: 'SecretField',
+    components: {},
     props: {
+        tag: { type: String, required: false, default: 'v-text-field' },
         value: { type: String, required: false, default: '' },
         hidden: { type: Boolean, required: false, default: true },
         copy: { type: Boolean, required: false, default: true },
@@ -34,14 +74,53 @@ export default {
             type: String,
             required: false,
         },
+        hint: {
+            type: String,
+            required: false,
+        },
+        autocomplete: {
+            type: String,
+            required: false,
+        },
+        appendIcon: {
+            type: String,
+            required: false,
+        },
+        rules: {
+            type: Array,
+            required: false,
+            default: () => [],
+        },
+        rows: {
+            type: [String, Number],
+            required: false,
+            default: 5,
+        },
+        readonly: {
+            type: Boolean,
+            required: false,
+            default: true,
+        },
     },
     data() {
         return {
             showClear: false,
         }
     },
-
     computed: {
+        activeTag() {
+            let tag = this.tag
+
+            // If the field type is password we need to hard-change to textfield since other components don't support password text
+            if (this.fieldType === 'password') {
+                tag = 'v-text-field'
+            }
+
+            return tag
+        },
+        key() {
+            return Crypto.id()
+        },
         fieldType() {
             if (this.showClear) {
                 return 'text'
@@ -56,6 +135,7 @@ export default {
     methods: {
         toggleClear() {
             this.showClear = !this.showClear
+            this.$emit('click:append', this.showClear)
         },
         copyText(text) {
             navigator.clipboard.writeText(text || '')

package/components/Settings/ExternalIntegration/LtiConsumerSettings.vue

@@ -74,7 +74,7 @@ import BaseContentSettings from '~/components/Content/Settings/BaseContentSettin
 import Course from '~/models/Course'
 import Organization from '~/models/Organization'
 import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentBlockSettings.vue'
-import LtiConsumer from '../../../models/ExternalIntegration/LtiConsumer'
+import Consumer from '../../../models/ExternalIntegration/Consumer'
 
 export default {
     name: 'ContentBlockExternalIntegrationLti1p1ConsumerSettings',
@@ -138,7 +138,7 @@ export default {
         }
     },
     async fetch() {
-        this.consumers = await new LtiConsumer()
+        this.consumers = await new Consumer()
             .for(
                 new Organization({ id: this.organization.id }),
                 new Course({ id: this.course.id })

package/components/Settings/ExternalIntegration/ManageCourseIntegrationSettings.vue

@@ -19,10 +19,10 @@
                 }}
             </v-tab>
 
-            <v-tab v-if="ltiReady">
+            <v-tab>
                 {{
                     $t(
-                        'windward.integrations.pages.course.external_integration.scorm_1p2'
+                        'windward.integrations.pages.course.external_integration.scorm'
                     )
                 }}
             </v-tab>
@@ -30,13 +30,13 @@
 
         <v-tabs-items v-model="tab">
             <v-tab-item>
-                <ManageLti1p1></ManageLti1p1>
+                <ManageLti1p1 />
             </v-tab-item>
             <v-tab-item>
                 <ManageLti1p3 />
             </v-tab-item>
             <v-tab-item>
-                <p class="ma-5">SCORM 1.2 Not yet implemented</p>
+                <ManageScorm />
             </v-tab-item>
         </v-tabs-items>
     </div>
@@ -45,13 +45,13 @@
 <script>
 import ManageLti1p1 from '../../ExternalIntegration/Driver/ManageLti1p1.vue'
 import ManageLti1p3 from '../../ExternalIntegration/Driver/ManageLti1p3.vue'
+import ManageScorm from '../../ExternalIntegration/Driver/ManageScorm.vue'
 export default {
     name: 'PluginIntegrationsExternalIntegrationManageCourseIntegrationSettings',
-    components: { ManageLti1p1, ManageLti1p3 },
+    components: { ManageLti1p1, ManageLti1p3, ManageScorm },
     data() {
         return {
             tab: 0,
-            ltiReady: false,
         }
     },
 }

package/components/Settings/ExternalIntegration/ScormConsumerSettings.vue

@@ -0,0 +1,42 @@
+<template>
+    <v-container>
+        <BaseContentBlockSettings
+            v-if="false"
+            v-model="block.metadata.config"
+            :disabled="render"
+        ></BaseContentBlockSettings>
+        <v-alert type="warning">Not implemented</v-alert>
+    </v-container>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
+import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentBlockSettings.vue'
+
+export default {
+    name: 'ContentBlockExternalIntegrationScormConsumerSettings',
+    components: {
+        BaseContentBlockSettings,
+    },
+    extends: BaseContentSettings,
+    props: {
+        settings: { type: Object, required: false, default: null },
+        context: { type: String, required: false, default: 'block' },
+    },
+    data() {
+        return {}
+    },
+    async fetch() {},
+    computed: {
+        ...mapGetters({
+            organization: 'organization/get',
+            course: 'course/get',
+        }),
+    },
+    watch: {},
+    beforeMount() {},
+    mounted() {},
+    methods: {},
+}
+</script>