@icvdeveloper/common-module 0.0.125 → 0.0.127

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (100) hide show
  1. package/README.md +6 -6
  2. package/dist/module.json +1 -1
  3. package/dist/runtime/@types/components.d.ts +12 -0
  4. package/dist/runtime/assets/svg/answer.svg +14 -14
  5. package/dist/runtime/assets/svg/avatar.svg +1 -1
  6. package/dist/runtime/assets/svg/bell-icon.svg +3 -3
  7. package/dist/runtime/assets/svg/checkmark-icon.svg +1 -1
  8. package/dist/runtime/assets/svg/close-icon.svg +1 -1
  9. package/dist/runtime/assets/svg/icon-avatar.svg +1 -1
  10. package/dist/runtime/assets/svg/icon-chevron.svg +4 -4
  11. package/dist/runtime/assets/svg/icon-circle-plus.svg +1 -1
  12. package/dist/runtime/assets/svg/icon-close.svg +1 -1
  13. package/dist/runtime/assets/svg/icon-info.svg +2 -2
  14. package/dist/runtime/assets/svg/icon-new-window.svg +11 -11
  15. package/dist/runtime/assets/svg/icon-offline.svg +3 -3
  16. package/dist/runtime/assets/svg/icon-online.svg +3 -3
  17. package/dist/runtime/assets/svg/icon-person.svg +2 -2
  18. package/dist/runtime/assets/svg/icon-play.svg +2 -2
  19. package/dist/runtime/assets/svg/icon-star-filled.svg +29 -29
  20. package/dist/runtime/assets/svg/icon-star.svg +24 -24
  21. package/dist/runtime/assets/svg/icon-video-chat.svg +14 -14
  22. package/dist/runtime/assets/svg/icon-website.svg +2 -2
  23. package/dist/runtime/assets/svg/icon-zoom.svg +10 -10
  24. package/dist/runtime/assets/svg/notification-icon.svg +32 -32
  25. package/dist/runtime/assets/svg/offline-icon.svg +1 -1
  26. package/dist/runtime/assets/svg/online-icon.svg +3 -3
  27. package/dist/runtime/assets/svg/peer2peer.svg +3 -3
  28. package/dist/runtime/assets/svg/phone.svg +1 -1
  29. package/dist/runtime/assets/svg/plus-icon.svg +1 -1
  30. package/dist/runtime/assets/svg/red-icon.svg +3 -3
  31. package/dist/runtime/assets/svg/reject.svg +14 -14
  32. package/dist/runtime/assets/svg/search-icon.svg +3 -3
  33. package/dist/runtime/components/affiliates/AffiliatePage.vue +329 -17
  34. package/dist/runtime/components/agenda/AgendaList.vue +259 -259
  35. package/dist/runtime/components/agenda/AgendaTabbed.vue +305 -305
  36. package/dist/runtime/components/agenda/components/AgendaListAccordion.vue +67 -67
  37. package/dist/runtime/components/agenda/components/Calendar.vue +67 -67
  38. package/dist/runtime/components/agenda/components/InfoLink.vue +56 -56
  39. package/dist/runtime/components/agenda/components/PlayIcon.vue +49 -49
  40. package/dist/runtime/components/agenda/components/PresentationLink.vue +137 -137
  41. package/dist/runtime/components/agenda/components/Sponsor.vue +132 -132
  42. package/dist/runtime/components/auth/LoginFullWidth.vue +78 -78
  43. package/dist/runtime/components/auth/PasswordReset.vue +60 -60
  44. package/dist/runtime/components/auth/Registration.vue +27 -27
  45. package/dist/runtime/components/auth/Ucc.vue +129 -129
  46. package/dist/runtime/components/core/Accordion.vue +97 -97
  47. package/dist/runtime/components/core/CountdownTimer.vue +336 -336
  48. package/dist/runtime/components/core/DynamicHtml.vue +1 -1
  49. package/dist/runtime/components/core/Modal.vue +111 -111
  50. package/dist/runtime/components/core/Navbar.vue +154 -154
  51. package/dist/runtime/components/core/SvgIcon.vue +157 -157
  52. package/dist/runtime/components/core/ZoomModal.vue +37 -37
  53. package/dist/runtime/components/events/EventHeader.vue +133 -133
  54. package/dist/runtime/components/events/ListEvents.vue +554 -554
  55. package/dist/runtime/components/forms/AlertBox.vue +21 -21
  56. package/dist/runtime/components/forms/ErrorField.vue +17 -17
  57. package/dist/runtime/components/forms/Message.vue +27 -27
  58. package/dist/runtime/components/forms/SearchInput.vue +38 -38
  59. package/dist/runtime/components/forms/SupportForm.vue +112 -112
  60. package/dist/runtime/components/forms/SwitchInput.vue +42 -42
  61. package/dist/runtime/components/forms/TextArea.vue +26 -26
  62. package/dist/runtime/components/forms/TextInput.vue +28 -28
  63. package/dist/runtime/components/layouts/Accordion.vue +78 -78
  64. package/dist/runtime/components/media/ArchivePlayerAndContentContainer.vue +160 -160
  65. package/dist/runtime/components/media/ArchiveVideoPlayer.vue +186 -186
  66. package/dist/runtime/components/media/PlayerAndContentContainer.vue +183 -183
  67. package/dist/runtime/components/media/WebcastVideoPlayer.vue +140 -140
  68. package/dist/runtime/components/media/components/AgendaPanel.vue +43 -43
  69. package/dist/runtime/components/media/components/ArchiveMediaContainer.vue +91 -91
  70. package/dist/runtime/components/media/components/CeCreditNotification.vue +95 -95
  71. package/dist/runtime/components/media/components/ContentAccordion.vue +63 -63
  72. package/dist/runtime/components/media/components/ContentArea.vue +158 -158
  73. package/dist/runtime/components/media/components/ContentTabs.vue +231 -231
  74. package/dist/runtime/components/media/components/DocumentsPanel.vue +31 -31
  75. package/dist/runtime/components/media/components/JsonApi.vue +31 -31
  76. package/dist/runtime/components/media/components/MediaContainer.vue +63 -63
  77. package/dist/runtime/components/media/components/OverviewPanel.vue +52 -52
  78. package/dist/runtime/components/media/components/PresentersPanel.vue +52 -52
  79. package/dist/runtime/components/media/components/SessionReporting.vue +102 -102
  80. package/dist/runtime/components/media/components/SponsorsPanel.vue +71 -71
  81. package/dist/runtime/components/media/components/WindowContent.vue +92 -92
  82. package/dist/runtime/components/media/components/WindowSlide.vue +72 -72
  83. package/dist/runtime/components/presenters/PresenterListing.vue +164 -164
  84. package/dist/runtime/components/presenters/PresenterModal.vue +223 -223
  85. package/dist/runtime/components/profile/Profile.vue +149 -149
  86. package/dist/runtime/components/profile/components/Sidebar.vue +27 -27
  87. package/dist/runtime/components/profile/components/SidebarNavItem.vue +39 -39
  88. package/dist/runtime/components/profile/tabs/Favorites.vue +21 -21
  89. package/dist/runtime/components/profile/tabs/GeneralInformation.vue +122 -122
  90. package/dist/runtime/components/profile/tabs/ProfileImage.vue +75 -75
  91. package/dist/runtime/components/support/FAQAccordion.vue +140 -140
  92. package/dist/runtime/models/conference.d.ts +24 -0
  93. package/dist/runtime/models/document.d.ts +7 -0
  94. package/dist/runtime/models/link.d.ts +6 -0
  95. package/dist/runtime/models/link.mjs +0 -0
  96. package/dist/runtime/models/video.d.ts +6 -0
  97. package/dist/runtime/models/video.mjs +0 -0
  98. package/package.json +1 -1
  99. package/dist/runtime/models/affiliate.d.ts +0 -1
  100. /package/dist/runtime/models/{affiliate.mjs → document.mjs} +0 -0
@@ -1,78 +1,78 @@
1
- <script lang="ts" setup>
2
- import { toRefs } from "vue";
3
- import { storeToRefs } from "pinia";
4
- import { Conference } from "../../models/conference";
5
- import { useLogin } from "../../composables/useLogin";
6
- import { useTemplateConfigsStore } from "../../store";
7
-
8
- interface Props {
9
- conference?: Conference | null;
10
- }
11
-
12
- const props = withDefaults(defineProps<Props>(), {
13
- conference: null,
14
- });
15
-
16
- const { conference } = toRefs<Props>(props);
17
-
18
- const { globalConfigValue } = storeToRefs(useTemplateConfigsStore());
19
-
20
- // Methods
21
- const { loginError, handleLogin, email, password, tooManySessions, showReset } =
22
- useLogin(conference);
23
- </script>
24
-
25
- <template>
26
- <div class="px-2">
27
- <div class="flex flex-1 flex-col text-center pt-8">
28
- <h1 class="mb-3 heading-color-3">Log In</h1>
29
- <CommonMessage
30
- v-if="loginError"
31
- :success="false"
32
- class="w-full max-w-xs mx-auto"
33
- >
34
- Invalid email or password.
35
- <br />
36
- <a
37
- v-if="!globalConfigValue('secure_site_access_enabled', false)"
38
- href="/login/email"
39
- >Forgot Your Password?</a
40
- >
41
- <a
42
- v-if="globalConfigValue('secure_site_access_enabled', false)"
43
- class="cursor-pointer"
44
- @click="showReset"
45
- >Forgot Your Password?</a
46
- >
47
- </CommonMessage>
48
-
49
- <div class="max-w-xs mx-auto" @keyup.enter="handleLogin()">
50
- <input
51
- v-model="email"
52
- type="email"
53
- placeholder="Email"
54
- class="form-input contrast-border mb-2"
55
- />
56
- <input
57
- v-model="password"
58
- type="password"
59
- placeholder="password"
60
- class="form-input contrast-border mb-5"
61
- />
62
- <button v-if="!tooManySessions" class="btn" @click="handleLogin()">
63
- Log In
64
- </button>
65
- <CommonMessage
66
- v-if="tooManySessions"
67
- :success="false"
68
- class="w-full max-w-xs mx-auto"
69
- >
70
- This user access is logged in on another device!
71
- </CommonMessage>
72
- <button v-if="tooManySessions" class="btn" @click="handleLogin(true)">
73
- Sign out other Device
74
- </button>
75
- </div>
76
- </div>
77
- </div>
78
- </template>
1
+ <script lang="ts" setup>
2
+ import { toRefs } from "vue";
3
+ import { storeToRefs } from "pinia";
4
+ import { Conference } from "../../models/conference";
5
+ import { useLogin } from "../../composables/useLogin";
6
+ import { useTemplateConfigsStore } from "../../store";
7
+
8
+ interface Props {
9
+ conference?: Conference | null;
10
+ }
11
+
12
+ const props = withDefaults(defineProps<Props>(), {
13
+ conference: null,
14
+ });
15
+
16
+ const { conference } = toRefs<Props>(props);
17
+
18
+ const { globalConfigValue } = storeToRefs(useTemplateConfigsStore());
19
+
20
+ // Methods
21
+ const { loginError, handleLogin, email, password, tooManySessions, showReset } =
22
+ useLogin(conference);
23
+ </script>
24
+
25
+ <template>
26
+ <div class="px-2">
27
+ <div class="flex flex-1 flex-col text-center pt-8">
28
+ <h1 class="mb-3 heading-color-3">Log In</h1>
29
+ <CommonMessage
30
+ v-if="loginError"
31
+ :success="false"
32
+ class="w-full max-w-xs mx-auto"
33
+ >
34
+ Invalid email or password.
35
+ <br />
36
+ <a
37
+ v-if="!globalConfigValue('secure_site_access_enabled', false)"
38
+ href="/login/email"
39
+ >Forgot Your Password?</a
40
+ >
41
+ <a
42
+ v-if="globalConfigValue('secure_site_access_enabled', false)"
43
+ class="cursor-pointer"
44
+ @click="showReset"
45
+ >Forgot Your Password?</a
46
+ >
47
+ </CommonMessage>
48
+
49
+ <div class="max-w-xs mx-auto" @keyup.enter="handleLogin()">
50
+ <input
51
+ v-model="email"
52
+ type="email"
53
+ placeholder="Email"
54
+ class="form-input contrast-border mb-2"
55
+ />
56
+ <input
57
+ v-model="password"
58
+ type="password"
59
+ placeholder="password"
60
+ class="form-input contrast-border mb-5"
61
+ />
62
+ <button v-if="!tooManySessions" class="btn" @click="handleLogin()">
63
+ Log In
64
+ </button>
65
+ <CommonMessage
66
+ v-if="tooManySessions"
67
+ :success="false"
68
+ class="w-full max-w-xs mx-auto"
69
+ >
70
+ This user access is logged in on another device!
71
+ </CommonMessage>
72
+ <button v-if="tooManySessions" class="btn" @click="handleLogin(true)">
73
+ Sign out other Device
74
+ </button>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </template>
@@ -1,60 +1,60 @@
1
- <script lang="ts" setup>
2
- import { ref, toRefs } from "vue";
3
- import { useAuthStore } from "../../store/auth";
4
-
5
- interface Props {
6
- isCentered?: boolean;
7
- }
8
-
9
- const props = withDefaults(defineProps<Props>(), {
10
- isCentered: false,
11
- });
12
-
13
- // data
14
- const { isCentered } = toRefs(props);
15
- const loading = ref<boolean>(false);
16
- const email = ref<string>("");
17
- const message = ref<null | string>(null);
18
- const errors = ref<Array<any>>([]);
19
-
20
- // methods
21
- const { passwordReset } = useAuthStore();
22
- const submitPasswordReset = () => {
23
- loading.value = true;
24
- message.value = null;
25
- errors.value = [];
26
- passwordReset(email.value)
27
- .then((response) => {
28
- message.value = response.data.message;
29
- })
30
- .catch((error) => {
31
- if (error.response.status === 422) {
32
- errors.value = error.response.data.errors;
33
- } else {
34
- errors.value = ["Error requesting password reset."];
35
- }
36
- })
37
- .finally(() => {
38
- loading.value = false;
39
- });
40
- };
41
- </script>
42
-
43
- <template>
44
- <div :class="isCentered ? 'w-full max-w-xs mx-auto' : ''">
45
- <div class="mb-4">Enter your email address to reset your password.</div>
46
- <CommonMessage v-if="message" :success="true">
47
- {{ message }}
48
- </CommonMessage>
49
- <CommonMessage v-if="errors.length > 0" :success="false">
50
- {{ errors[0] }}
51
- </CommonMessage>
52
- <div @keyup.enter="submitPasswordReset()">
53
- <CommonTextInput v-model="email" placeholder="Email" type="email" />
54
- <button class="btn my-2" @click="submitPasswordReset()">
55
- <span v-if="loading">Processing...</span>
56
- <span v-else>Send Password Reset Link</span>
57
- </button>
58
- </div>
59
- </div>
60
- </template>
1
+ <script lang="ts" setup>
2
+ import { ref, toRefs } from "vue";
3
+ import { useAuthStore } from "../../store/auth";
4
+
5
+ interface Props {
6
+ isCentered?: boolean;
7
+ }
8
+
9
+ const props = withDefaults(defineProps<Props>(), {
10
+ isCentered: false,
11
+ });
12
+
13
+ // data
14
+ const { isCentered } = toRefs(props);
15
+ const loading = ref<boolean>(false);
16
+ const email = ref<string>("");
17
+ const message = ref<null | string>(null);
18
+ const errors = ref<Array<any>>([]);
19
+
20
+ // methods
21
+ const { passwordReset } = useAuthStore();
22
+ const submitPasswordReset = () => {
23
+ loading.value = true;
24
+ message.value = null;
25
+ errors.value = [];
26
+ passwordReset(email.value)
27
+ .then((response) => {
28
+ message.value = response.data.message;
29
+ })
30
+ .catch((error) => {
31
+ if (error.response.status === 422) {
32
+ errors.value = error.response.data.errors;
33
+ } else {
34
+ errors.value = ["Error requesting password reset."];
35
+ }
36
+ })
37
+ .finally(() => {
38
+ loading.value = false;
39
+ });
40
+ };
41
+ </script>
42
+
43
+ <template>
44
+ <div :class="isCentered ? 'w-full max-w-xs mx-auto' : ''">
45
+ <div class="mb-4">Enter your email address to reset your password.</div>
46
+ <CommonMessage v-if="message" :success="true">
47
+ {{ message }}
48
+ </CommonMessage>
49
+ <CommonMessage v-if="errors.length > 0" :success="false">
50
+ {{ errors[0] }}
51
+ </CommonMessage>
52
+ <div @keyup.enter="submitPasswordReset()">
53
+ <CommonTextInput v-model="email" placeholder="Email" type="email" />
54
+ <button class="btn my-2" @click="submitPasswordReset()">
55
+ <span v-if="loading">Processing...</span>
56
+ <span v-else>Send Password Reset Link</span>
57
+ </button>
58
+ </div>
59
+ </div>
60
+ </template>
@@ -1,27 +1,27 @@
1
- <script lang="ts" setup>
2
- import { storeToRefs } from "pinia";
3
- import { useAuthStore } from "../../store/auth";
4
- import { useRegistration } from "../../composables/useRegistration";
5
-
6
- // data
7
- const { isLoggedIn } = storeToRefs(useAuthStore());
8
-
9
- // methods
10
- const { isTownhallRegistration } = useRegistration();
11
- const submitRegistration = () => {};
12
- </script>
13
-
14
- <template>
15
- <div v-if="isLoggedIn">
16
- <CommonMessage :success="false">Already logged in.</CommonMessage>
17
- </div>
18
- <div v-else class="px-2">
19
- <div class="flex flex-1 flex-col text-center pt-8">
20
- <h1 class="mb-3 heading-color-3">Log In</h1>
21
-
22
- <div class="w-full max-w-xs mx-auto pb-12">
23
- <form class="w-full" @submit.prevent="submitRegistration"></form>
24
- </div>
25
- </div>
26
- </div>
27
- </template>
1
+ <script lang="ts" setup>
2
+ import { storeToRefs } from "pinia";
3
+ import { useAuthStore } from "../../store/auth";
4
+ import { useRegistration } from "../../composables/useRegistration";
5
+
6
+ // data
7
+ const { isLoggedIn } = storeToRefs(useAuthStore());
8
+
9
+ // methods
10
+ const { isTownhallRegistration } = useRegistration();
11
+ const submitRegistration = () => {};
12
+ </script>
13
+
14
+ <template>
15
+ <div v-if="isLoggedIn">
16
+ <CommonMessage :success="false">Already logged in.</CommonMessage>
17
+ </div>
18
+ <div v-else class="px-2">
19
+ <div class="flex flex-1 flex-col text-center pt-8">
20
+ <h1 class="mb-3 heading-color-3">Log In</h1>
21
+
22
+ <div class="w-full max-w-xs mx-auto pb-12">
23
+ <form class="w-full" @submit.prevent="submitRegistration"></form>
24
+ </div>
25
+ </div>
26
+ </div>
27
+ </template>
@@ -1,129 +1,129 @@
1
- <script lang="ts" setup>
2
- import { toRefs, computed, onMounted } from "vue";
3
- import { useUcc } from "../../composables/useUcc";
4
- import { Conference } from "../../models/conference";
5
- import { useConferencesStore } from "../../store/conferences";
6
- import { uccClassObj } from "../../@types/components";
7
- import { useClassBinding } from "../../composables/useClassBinding";
8
-
9
- const { loadUccScript, loginV3 } = useUcc();
10
-
11
- interface Props {
12
- conference: Conference;
13
- classObject?: uccClassObj;
14
- }
15
-
16
- const props = withDefaults(defineProps<Props>(), {
17
- classObject: () => {
18
- return {
19
- container: ""
20
- };
21
- },
22
- });
23
-
24
- const {
25
- classObject,
26
- } = toRefs(props);
27
-
28
- const { selectedConference } = useConferencesStore();
29
- const { classBinding } = useClassBinding();
30
-
31
- // reactive data
32
- const { conference } = toRefs(props);
33
-
34
- // methods
35
- const submitLogin = () => {
36
- let email = document.getElementById('uccEmail').value;
37
- loginV3({email: email});
38
- };
39
-
40
- // computed
41
- const loginHeader = computed(() => {
42
- return (conference.value.state == "live")
43
- ? "Live Web Event Streaming Now"
44
- : (conference.value.state == "archive")
45
- ? "Enter your email address to view event recording"
46
- : "Join us for a Free Live Web Event"; // fallback (handled by UCC)
47
- });
48
-
49
- const headerColorClass = computed(() => {
50
- return (conference.value.state == "live")
51
- ? "text-red-500"
52
- : "text-black-500";
53
- });
54
-
55
- const buttonText = computed(() => {
56
- return (conference.value.state == "live")
57
- ? "Join the Livestream"
58
- : (conference.value.state == "archive")
59
- ? "View Event"
60
- : "Register"; // fallback (handled by UCC)
61
- });
62
-
63
- const buttonColorClass = computed(() => {
64
- return (conference.value.state == "live")
65
- ? "v3-ucc-btn-black"
66
- : "ucc-btn-primary";
67
- });
68
-
69
- // on mount
70
- onMounted(() => {
71
- loadUccScript(props.conference);
72
- });
73
-
74
- </script>
75
-
76
- <template>
77
- <div>
78
- <!-- UCC Widget -->
79
- <div id="uccTarget"
80
- :class="
81
- classBinding(
82
- classObject,
83
- 'container',
84
- 'p-0 m-0 w-full'
85
- )
86
- "
87
- style="display:block;"
88
- >
89
- </div>
90
- <!-- V3 email login form -->
91
- <div id="uccEmailForm"
92
- class="ucc-form-container ucc-widgets-events"
93
- :class="(conference.state == 'live' || conference.state == 'archive') ? 'block' : 'hidden'"
94
- style="padding-bottom: 0px"
95
- >
96
- <div>
97
- <h1 class="scala-bold text-xl text-center mb-0" :class="headerColorClass">
98
- {{ loginHeader }}
99
- </h1>
100
- </div>
101
- <div class="text-center">
102
- <form @submit="submitLogin" action="javascript:void();">
103
- <div class="ucc-form-field">
104
- <div class="ucc-form-field-descr"></div>
105
- <div class="ucc-input-wrapper required">
106
- <input id="uccEmail" name="uccEmail" class="ucc-input" type="text" placeholder="Enter Email Address" autocomplete="off" maxlength="70">
107
- </div>
108
- <div class="ucc-error"></div>
109
- </div>
110
- <div class="ucc-form-field ucc-form-btn-row" style="margin-bottom: 0x; margin-top: 0px;">
111
- <a
112
- @click="submitLogin"
113
- class="ucc-btn"
114
- :class="buttonColorClass"
115
- style="margin-top: 0px;"><span class="btn-text">{{ buttonText }}</span></a>
116
- </div>
117
- </form>
118
- </div>
119
- </div>
120
- </div>
121
- </template>
122
-
123
- <style scoped>
124
- .v3-ucc-btn-black {
125
- background-color: #000;
126
- border: 1px solid #000;
127
- color: #fff;
128
- }
129
- </style>
1
+ <script lang="ts" setup>
2
+ import { toRefs, computed, onMounted } from "vue";
3
+ import { useUcc } from "../../composables/useUcc";
4
+ import { Conference } from "../../models/conference";
5
+ import { useConferencesStore } from "../../store/conferences";
6
+ import { uccClassObj } from "../../@types/components";
7
+ import { useClassBinding } from "../../composables/useClassBinding";
8
+
9
+ const { loadUccScript, loginV3 } = useUcc();
10
+
11
+ interface Props {
12
+ conference: Conference;
13
+ classObject?: uccClassObj;
14
+ }
15
+
16
+ const props = withDefaults(defineProps<Props>(), {
17
+ classObject: () => {
18
+ return {
19
+ container: ""
20
+ };
21
+ },
22
+ });
23
+
24
+ const {
25
+ classObject,
26
+ } = toRefs(props);
27
+
28
+ const { selectedConference } = useConferencesStore();
29
+ const { classBinding } = useClassBinding();
30
+
31
+ // reactive data
32
+ const { conference } = toRefs(props);
33
+
34
+ // methods
35
+ const submitLogin = () => {
36
+ let email = document.getElementById('uccEmail').value;
37
+ loginV3({email: email});
38
+ };
39
+
40
+ // computed
41
+ const loginHeader = computed(() => {
42
+ return (conference.value.state == "live")
43
+ ? "Live Web Event Streaming Now"
44
+ : (conference.value.state == "archive")
45
+ ? "Enter your email address to view event recording"
46
+ : "Join us for a Free Live Web Event"; // fallback (handled by UCC)
47
+ });
48
+
49
+ const headerColorClass = computed(() => {
50
+ return (conference.value.state == "live")
51
+ ? "text-red-500"
52
+ : "text-black-500";
53
+ });
54
+
55
+ const buttonText = computed(() => {
56
+ return (conference.value.state == "live")
57
+ ? "Join the Livestream"
58
+ : (conference.value.state == "archive")
59
+ ? "View Event"
60
+ : "Register"; // fallback (handled by UCC)
61
+ });
62
+
63
+ const buttonColorClass = computed(() => {
64
+ return (conference.value.state == "live")
65
+ ? "v3-ucc-btn-black"
66
+ : "ucc-btn-primary";
67
+ });
68
+
69
+ // on mount
70
+ onMounted(() => {
71
+ loadUccScript(props.conference);
72
+ });
73
+
74
+ </script>
75
+
76
+ <template>
77
+ <div>
78
+ <!-- UCC Widget -->
79
+ <div id="uccTarget"
80
+ :class="
81
+ classBinding(
82
+ classObject,
83
+ 'container',
84
+ 'p-0 m-0 w-full'
85
+ )
86
+ "
87
+ style="display:block;"
88
+ >
89
+ </div>
90
+ <!-- V3 email login form -->
91
+ <div id="uccEmailForm"
92
+ class="ucc-form-container ucc-widgets-events"
93
+ :class="(conference.state == 'live' || conference.state == 'archive') ? 'block' : 'hidden'"
94
+ style="padding-bottom: 0px"
95
+ >
96
+ <div>
97
+ <h1 class="scala-bold text-xl text-center mb-0" :class="headerColorClass">
98
+ {{ loginHeader }}
99
+ </h1>
100
+ </div>
101
+ <div class="text-center">
102
+ <form @submit="submitLogin" action="javascript:void();">
103
+ <div class="ucc-form-field">
104
+ <div class="ucc-form-field-descr"></div>
105
+ <div class="ucc-input-wrapper required">
106
+ <input id="uccEmail" name="uccEmail" class="ucc-input" type="text" placeholder="Enter Email Address" autocomplete="off" maxlength="70">
107
+ </div>
108
+ <div class="ucc-error"></div>
109
+ </div>
110
+ <div class="ucc-form-field ucc-form-btn-row" style="margin-bottom: 0x; margin-top: 0px;">
111
+ <a
112
+ @click="submitLogin"
113
+ class="ucc-btn"
114
+ :class="buttonColorClass"
115
+ style="margin-top: 0px;"><span class="btn-text">{{ buttonText }}</span></a>
116
+ </div>
117
+ </form>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </template>
122
+
123
+ <style scoped>
124
+ .v3-ucc-btn-black {
125
+ background-color: #000;
126
+ border: 1px solid #000;
127
+ color: #fff;
128
+ }
129
+ </style>