@windward/integrations 0.17.0 → 0.19.0

package/components/ExternalIntegration/Driver/Scorm/ManageProviders.vue

@@ -0,0 +1,299 @@
+<template>
+    <div>
+        <DialogBox
+            color="primary"
+            action-save
+            action-save-new
+            @click:save="onSaved"
+            @click:save-new="onSaved"
+        >
+            <template #title>{{
+                $t(
+                    'windward.integrations.components.external_integration.driver.scorm.new'
+                )
+            }}</template>
+            <template #trigger>{{ $t('shared.forms.new') }}</template>
+            <template #form="{ on, attrs }"
+                ><ManageProvider v-bind="attrs" v-on="on"></ManageProvider
+            ></template>
+        </DialogBox>
+
+        <v-data-table
+            :headers="headers"
+            :items="providers"
+            :items-per-page="10"
+            class="elevation-1"
+        >
+            <template #[`item.target`]="{ item }">
+                <ProviderTargetViewer
+                    class="field--target text-truncate"
+                    :target="item.target"
+                ></ProviderTargetViewer>
+            </template>
+            <template #[`item.download_package`]="{ item }">
+                <v-btn
+                    color="primary"
+                    :loading="isDownloading"
+                    @click="onClickDownload(item)"
+                    >{{
+                        $t(
+                            'windward.integrations.components.external_integration.driver.scorm.download_package'
+                        )
+                    }}</v-btn
+                >
+            </template>
+
+            <template #[`item.enabled`]="{ item }">
+                <v-icon :color="item.enabled ? 'success' : 'error'"
+                    >{{ item.enabled ? 'mdi-check' : 'mdi-close' }}
+                </v-icon>
+                <span v-if="!item.enabled" class="sr-only">{{
+                    $t('shared.forms.enabled')
+                }}</span>
+            </template>
+
+            <template #[`item.created_at`]="{ item }">
+                {{ $d(new Date(item.created_at), 'short') }}
+            </template>
+            <template #[`item.actions`]="{ index, item }">
+                <SpeedDial
+                    direction="left"
+                    color="primary"
+                    transition="slide-x-reverse-transition"
+                >
+                    <v-btn
+                        color="error"
+                        outlined
+                        elevation="0"
+                        class="outlined"
+                        @click="onConfirmDelete(item)"
+                    >
+                        {{ $t('shared.forms.delete') }}
+                        <span class="sr-only">{{
+                            $t('shared.forms.delete')
+                        }}</span>
+                    </v-btn>
+                    <DialogBox
+                        color="primary"
+                        outlined
+                        :class-prop="'outlined'"
+                        action-save
+                        @click:save="onSaved"
+                    >
+                        <template #title>{{
+                            $t(
+                                'windward.integrations.components.external_integration.driver.scorm.edit'
+                            )
+                        }}</template>
+                        <template #trigger>
+                            {{
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.scorm.edit_display'
+                                )
+                            }}
+                            <span class="sr-only">{{
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.scorm.edit'
+                                )
+                            }}</span>
+                        </template>
+                        <template #form="{ on, attrs }"
+                            ><ManageProvider
+                                v-model="providers[index]"
+                                v-bind="attrs"
+                                v-on="on"
+                            ></ManageProvider
+                        ></template>
+                    </DialogBox>
+                </SpeedDial>
+            </template>
+        </v-data-table>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import { mapGetters } from 'vuex'
+import Provider from '../../../../models/ExternalIntegration/Provider'
+import SecretField from '../../../SecretField.vue'
+import ProviderTargetViewer from '../../ProviderTargetViewer.vue'
+import ManageProvider from './ManageProvider.vue'
+import DialogBox from '~/components/Core/DialogBox.vue'
+import Organization from '~/models/Organization'
+import Course from '~/models/Course'
+import SpeedDial from '~/components/Core/SpeedDial.vue'
+
+export default {
+    name: 'ManageScormProvidersDriver',
+    components: {
+        SecretField,
+        DialogBox,
+        ManageProvider,
+        ProviderTargetViewer,
+        SpeedDial,
+    },
+    data() {
+        return {
+            providers: [],
+            headers: [
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.target'
+                    ),
+                    value: 'target',
+                },
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.version'
+                    ),
+                    value: 'version',
+                },
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.driver.scorm.download_package'
+                    ),
+                    value: 'download_package',
+                },
+                {
+                    text: this.$t('shared.forms.enabled'),
+                    value: 'enabled',
+                },
+                { text: this.$t('shared.forms.created'), value: 'created_at' },
+                {
+                    text: this.$t('shared.forms.actions'),
+                    value: 'actions',
+                    sortable: false,
+                },
+            ],
+            isDownloading: false,
+        }
+    },
+
+    async fetch() {
+        if (
+            !this.$PermissionService.userHasAccessTo(
+                'plugin.windward.integrations.course.externalIntegration',
+                'readable'
+            ) ||
+            _.isEmpty(this.organization.id) ||
+            _.isEmpty(this.course.id)
+        ) {
+            // Display an angry error that they can't view this driver
+            this.$dialog.error(this.$t('shared.error.description_401'), {
+                duration: null,
+                action: {
+                    text: this.$t('shared.forms.close'),
+                    onClick: (_e, toastObject) => {
+                        toastObject.goAway(0)
+                    },
+                },
+            })
+            if (_.isEmpty(this.organization.id) || _.isEmpty(this.course.id)) {
+                // eslint-disable-next-line no-console
+                console.error(
+                    'Cannot load external integrations because organization or course is not set!'
+                )
+            } else {
+                // eslint-disable-next-line no-console
+                console.error(
+                    'You do not have access to this external integration!'
+                )
+            }
+
+            // Return so we don't even attempt loading
+            return false
+        }
+
+        await this.loadProviders()
+    },
+    computed: {
+        ...mapGetters({
+            organization: 'organization/get',
+            course: 'course/get',
+        }),
+    },
+    methods: {
+        onSaved() {
+            this.loadProviders()
+        },
+        async loadProviders() {
+            this.providers = await new Provider()
+                .for(
+                    new Organization({ id: this.organization.id }),
+                    new Course({ id: this.course.id })
+                )
+                .where('type', 'scorm')
+                .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)
+                        },
+                    },
+                ],
+            })
+        },
+        async deleteProvider(provider) {
+            await provider.delete()
+            this.$dialog.success(this.$t('shared.response.deleted'))
+            // Reload providers now that we deleted one
+            this.loadProviders()
+        },
+        async onClickDownload(provider) {
+            this.isDownloading = true
+
+            try {
+                const result = await Provider.config({
+                    method: 'GET',
+                })
+                    .custom(
+                        new Organization(this.organization),
+                        new Course(this.course),
+                        new Provider(provider),
+                        'download'
+                    )
+                    .file()
+
+                let filename = `${this.organization.name}_${this.course.name}_${provider.type}_${provider.version}_provider_${provider.id}`
+                // Replace all non letter/numbers with _
+                filename = filename.replaceAll(/[^a-zA-Z0-9\_\-]/gi, '_')
+                // Replace all double+ underscores with single
+                filename = filename.replaceAll(/_+/gi, '_')
+                filename += '.zip'
+
+                const url = URL.createObjectURL(result)
+                const link = document.createElement('a')
+                link.href = url
+                link.download = filename
+                link.click()
+                URL.revokeObjectURL(url)
+            } catch (e) {
+                console.error('Error getting download', e)
+            }
+
+            this.isDownloading = false
+        },
+    },
+}
+</script>
+
+<style scoped>
+.field--target {
+    max-width: 15em;
+    display: inline-block;
+}
+</style>

package/components/Integration/Driver/LoginSamlButton.vue

@@ -0,0 +1,119 @@
+<template>
+    <div v-if="samlEnabled">
+        <v-btn
+            color="primary"
+            elevation="0"
+            large
+            block
+            @click="loginWithSaml"
+            :loading="ssoLoading || loading"
+            :disabled="loading"
+        >
+            <v-icon class="pr-2">{{ samlButtonIcon }}</v-icon>
+            {{ samlButtonLabel }}
+        </v-btn>
+    </div>
+</template>
+
+<script>
+import Saml from '../../../models/Auth/Saml'
+
+export default {
+    name: 'LoginSamlButton',
+    props: {
+        loading: {
+            type: Boolean,
+            default: false,
+        },
+        valid: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    data() {
+        return {
+            ssoLoading: false,
+            samlEnabled: false,
+            samlButtonLabel: 'Sign in with SSO',
+            samlButtonIcon: 'mdi-login',
+            organizationId: null,
+        }
+    },
+    mounted() {
+        this.checkSamlStatus()
+    },
+    methods: {
+        async checkSamlStatus() {
+            try {
+                // Get organization from store or context
+                const organization = this.$store.getters['organization/get']
+
+                // If no organization in store, try to use the hostname
+                let orgIdentifier = null
+
+                if (organization && organization.id) {
+                    // Prefer using the organization ID if available
+                    orgIdentifier = organization.id
+                } else {
+                    // Fallback to using the hostname (full base_url)
+                    orgIdentifier = window.location.hostname
+                }
+
+                if (!orgIdentifier) {
+                    return
+                }
+
+                // Check if SAML is enabled for this organization
+                const response = await Saml.custom('saml/status').get()
+
+                // The API returns an array, so we need to get the first element
+                const samlData = Array.isArray(response)
+                    ? response[0]
+                    : response
+
+                if (samlData && samlData.enabled && samlData.configured) {
+                    this.samlEnabled = true
+                    this.organizationId = samlData.organization_id
+
+                    // Use button settings from the integration configuration
+                    this.samlButtonLabel =
+                        samlData.button_label || 'Sign in with SSO'
+                    this.samlButtonIcon = samlData.button_icon || 'mdi-login'
+                }
+            } catch (error) {
+                // SAML not configured or error checking status
+                // Silently fail - SSO button won't show
+            }
+        },
+        async loginWithSaml() {
+            this.ssoLoading = true
+            try {
+                // Get the SSO URL from the backend
+                const response = await Saml.custom('users/saml-login').get()
+
+                // The API returns an array, so we need to get the first element
+                const loginData = Array.isArray(response)
+                    ? response[0]
+                    : response
+
+                if (loginData && loginData.sso_url) {
+                    // Redirect to the IdP for authentication
+                    window.location.href = loginData.sso_url
+                } else {
+                    this.$dialog.error('Unable to initiate SSO login')
+                }
+            } catch (error) {
+                // Only log error in development mode
+                if (process.env.NODE_ENV === 'development') {
+                    console.error('SSO login failed:', error)
+                }
+                this.$dialog.error(
+                    'SSO login failed. Please try again or use standard login.'
+                )
+            } finally {
+                this.ssoLoading = false
+            }
+        },
+    },
+}
+</script>