@icvdeveloper/common-module 0.0.68 → 0.0.70

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 (72) hide show
  1. package/README.md +6 -6
  2. package/dist/module.json +1 -1
  3. package/dist/runtime/@types/components.d.ts +1 -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 +17 -17
  34. package/dist/runtime/components/agenda/AgendaList.vue +104 -104
  35. package/dist/runtime/components/agenda/AgendaTabbed.vue +300 -300
  36. package/dist/runtime/components/agenda/components/AgendaListAccordion.vue +26 -26
  37. package/dist/runtime/components/agenda/components/InfoLink.vue +56 -56
  38. package/dist/runtime/components/agenda/components/PlayIcon.vue +49 -49
  39. package/dist/runtime/components/agenda/components/PresentationLink.vue +137 -137
  40. package/dist/runtime/components/agenda/components/Sponsor.vue +132 -132
  41. package/dist/runtime/components/auth/LoginFullWidth.vue +78 -78
  42. package/dist/runtime/components/auth/PasswordReset.vue +60 -60
  43. package/dist/runtime/components/auth/Registration.vue +27 -27
  44. package/dist/runtime/components/auth/Ucc.vue +52 -52
  45. package/dist/runtime/components/core/Accordion.vue +97 -97
  46. package/dist/runtime/components/core/CountdownTimer.vue +308 -308
  47. package/dist/runtime/components/core/DynamicHtml.vue +1 -1
  48. package/dist/runtime/components/core/Modal.vue +111 -111
  49. package/dist/runtime/components/core/Navbar.vue +154 -154
  50. package/dist/runtime/components/core/SvgIcon.vue +151 -151
  51. package/dist/runtime/components/core/ZoomModal.vue +37 -37
  52. package/dist/runtime/components/events/EventHeader.vue +133 -133
  53. package/dist/runtime/components/events/ListEvents.vue +507 -482
  54. package/dist/runtime/components/forms/AlertBox.vue +21 -21
  55. package/dist/runtime/components/forms/ErrorField.vue +17 -17
  56. package/dist/runtime/components/forms/Message.vue +27 -27
  57. package/dist/runtime/components/forms/SearchInput.vue +38 -38
  58. package/dist/runtime/components/forms/SupportForm.vue +112 -112
  59. package/dist/runtime/components/forms/SwitchInput.vue +42 -42
  60. package/dist/runtime/components/forms/TextArea.vue +26 -26
  61. package/dist/runtime/components/forms/TextInput.vue +28 -28
  62. package/dist/runtime/components/layouts/Accordion.vue +78 -78
  63. package/dist/runtime/components/presenters/PresenterListing.vue +164 -164
  64. package/dist/runtime/components/presenters/PresenterModal.vue +223 -223
  65. package/dist/runtime/components/profile/Profile.vue +149 -149
  66. package/dist/runtime/components/profile/components/Sidebar.vue +27 -27
  67. package/dist/runtime/components/profile/components/SidebarNavItem.vue +39 -39
  68. package/dist/runtime/components/profile/tabs/Favorites.vue +21 -21
  69. package/dist/runtime/components/profile/tabs/GeneralInformation.vue +122 -122
  70. package/dist/runtime/components/profile/tabs/ProfileImage.vue +75 -75
  71. package/dist/runtime/components/support/FAQAccordion.vue +137 -137
  72. package/package.json +59 -59
@@ -1,134 +1,134 @@
1
- <script lang="ts" setup>
2
- import { find } from "lodash-es";
3
- import { ref, toRefs } from "vue";
4
- import { Sponsor as SponsorModel } from "../../../models/conference";
5
- import { sponsorClassObj } from "../../../@types/components";
6
- import { useClassBinding } from "../../../composables/useClassBinding";
7
-
8
- type Props = {
9
- sponsor: SponsorModel;
10
- size?: string;
11
- inline?: boolean;
12
- hideLabel?: boolean;
13
- enabledSponsors?: SponsorModel[];
14
- classObject?: sponsorClassObj;
15
- };
16
-
17
- const props = withDefaults(defineProps<Props>(), {
18
- size: "default",
19
- inline: false,
20
- hideLabel: true,
21
- enabledSponsors: () => {
22
- return [];
23
- },
24
- classObject: () => {
25
- return {
26
- container: "",
27
- sponsorContainer: "",
28
- labelImageContainer: "",
29
- labelContainer: "",
30
- sponsorLabel: "",
31
- imageContainer: "",
32
- sponsorImage: "",
33
- };
34
- },
35
- });
36
-
37
- const { sponsor, size, inline, hideLabel, enabledSponsors, classObject } =
38
- toRefs(props);
39
- const { classBinding } = useClassBinding();
40
-
41
- // data
42
- const showModal = ref<boolean>(false);
43
- const enabledSponsor = ref<SponsorModel | null>(null);
44
-
45
- // methods
46
- const handleClick = () => {
47
- if (enabledSponsors.value.length > 0) {
48
- const sponsorResult = find(enabledSponsors.value, { id: sponsor.value.id });
49
-
50
- if (sponsorResult && sponsorResult.vanity === 1) {
51
- enabledSponsor.value = sponsorResult;
52
- showModal.value = true;
53
- return;
54
- }
55
- }
56
-
57
- window.open(sponsor.value.website, "_blank");
58
- };
59
- </script>
60
-
61
- <template>
62
- <div
63
- :class="
64
- classBinding(
65
- classObject,
66
- 'sponsorContainer',
67
- 'flex flex-col lg:flex-row flex-1 items-center'
68
- )
69
- "
70
- >
71
- <div :class="classBinding(classObject, 'labelImageContainer', size)">
72
- <div
73
- v-if="!hideLabel"
74
- :class="
75
- inline
76
- ? classBinding(classObject, 'labelContainer', 'flex-1 items-center')
77
- : classBinding(classObject, 'labelContainer', 'w-full')
78
- "
79
- >
80
- <h2
81
- :class="
82
- inline
83
- ? classBinding(
84
- classObject,
85
- 'sponsorLabel',
86
- 'inline-block lg:pr-5 pb-2 lg:pb-0'
87
- )
88
- : classBinding(classObject, 'sponsorLabel', 'pb-2')
89
- "
90
- class="text-center uppercase font-medium"
91
- >
92
- {{ sponsor.label }}
93
- </h2>
94
- </div>
95
- <div
96
- :class="
97
- inline
98
- ? classBinding(
99
- classObject,
100
- 'imageContainer',
101
- 'flex-1 items-center pb-2 lg:pb-0'
102
- )
103
- : classBinding(classObject, 'imageContainer', 'w-full')
104
- "
105
- >
106
- <img
107
- :class="[
108
- { block: !inline },
109
- classBinding(
110
- classObject,
111
- 'sponsorImage',
112
- 'sponsor-img m-auto cursor-pointer'
113
- ),
114
- ]"
115
- :src="sponsor.photo"
116
- @click="handleClick()"
117
- />
118
- </div>
119
- </div>
120
-
121
- <CommonModal :visible="showModal">
122
- <template #modal-body>
123
- <CommonAffiliatePage
124
- v-if="enabledSponsor"
125
- :affiliate="enabledSponsor"
126
- ></CommonAffiliatePage>
127
- </template>
128
- </CommonModal>
129
- </div>
130
- </template>
131
-
1
+ <script lang="ts" setup>
2
+ import { find } from "lodash-es";
3
+ import { ref, toRefs } from "vue";
4
+ import { Sponsor as SponsorModel } from "../../../models/conference";
5
+ import { sponsorClassObj } from "../../../@types/components";
6
+ import { useClassBinding } from "../../../composables/useClassBinding";
7
+
8
+ type Props = {
9
+ sponsor: SponsorModel;
10
+ size?: string;
11
+ inline?: boolean;
12
+ hideLabel?: boolean;
13
+ enabledSponsors?: SponsorModel[];
14
+ classObject?: sponsorClassObj;
15
+ };
16
+
17
+ const props = withDefaults(defineProps<Props>(), {
18
+ size: "default",
19
+ inline: false,
20
+ hideLabel: true,
21
+ enabledSponsors: () => {
22
+ return [];
23
+ },
24
+ classObject: () => {
25
+ return {
26
+ container: "",
27
+ sponsorContainer: "",
28
+ labelImageContainer: "",
29
+ labelContainer: "",
30
+ sponsorLabel: "",
31
+ imageContainer: "",
32
+ sponsorImage: "",
33
+ };
34
+ },
35
+ });
36
+
37
+ const { sponsor, size, inline, hideLabel, enabledSponsors, classObject } =
38
+ toRefs(props);
39
+ const { classBinding } = useClassBinding();
40
+
41
+ // data
42
+ const showModal = ref<boolean>(false);
43
+ const enabledSponsor = ref<SponsorModel | null>(null);
44
+
45
+ // methods
46
+ const handleClick = () => {
47
+ if (enabledSponsors.value.length > 0) {
48
+ const sponsorResult = find(enabledSponsors.value, { id: sponsor.value.id });
49
+
50
+ if (sponsorResult && sponsorResult.vanity === 1) {
51
+ enabledSponsor.value = sponsorResult;
52
+ showModal.value = true;
53
+ return;
54
+ }
55
+ }
56
+
57
+ window.open(sponsor.value.website, "_blank");
58
+ };
59
+ </script>
60
+
61
+ <template>
62
+ <div
63
+ :class="
64
+ classBinding(
65
+ classObject,
66
+ 'sponsorContainer',
67
+ 'flex flex-col lg:flex-row flex-1 items-center'
68
+ )
69
+ "
70
+ >
71
+ <div :class="classBinding(classObject, 'labelImageContainer', size)">
72
+ <div
73
+ v-if="!hideLabel"
74
+ :class="
75
+ inline
76
+ ? classBinding(classObject, 'labelContainer', 'flex-1 items-center')
77
+ : classBinding(classObject, 'labelContainer', 'w-full')
78
+ "
79
+ >
80
+ <h2
81
+ :class="
82
+ inline
83
+ ? classBinding(
84
+ classObject,
85
+ 'sponsorLabel',
86
+ 'inline-block lg:pr-5 pb-2 lg:pb-0'
87
+ )
88
+ : classBinding(classObject, 'sponsorLabel', 'pb-2')
89
+ "
90
+ class="text-center uppercase font-medium"
91
+ >
92
+ {{ sponsor.label }}
93
+ </h2>
94
+ </div>
95
+ <div
96
+ :class="
97
+ inline
98
+ ? classBinding(
99
+ classObject,
100
+ 'imageContainer',
101
+ 'flex-1 items-center pb-2 lg:pb-0'
102
+ )
103
+ : classBinding(classObject, 'imageContainer', 'w-full')
104
+ "
105
+ >
106
+ <img
107
+ :class="[
108
+ { block: !inline },
109
+ classBinding(
110
+ classObject,
111
+ 'sponsorImage',
112
+ 'sponsor-img m-auto cursor-pointer'
113
+ ),
114
+ ]"
115
+ :src="sponsor.photo"
116
+ @click="handleClick()"
117
+ />
118
+ </div>
119
+ </div>
120
+
121
+ <CommonModal :visible="showModal">
122
+ <template #modal-body>
123
+ <CommonAffiliatePage
124
+ v-if="enabledSponsor"
125
+ :affiliate="enabledSponsor"
126
+ ></CommonAffiliatePage>
127
+ </template>
128
+ </CommonModal>
129
+ </div>
130
+ </template>
131
+
132
132
  <style>
133
133
  .small h2 {
134
134
  font-size: 14px;
@@ -150,4 +150,4 @@ const handleClick = () => {
150
150
  .default img {
151
151
  max-height: 60px;
152
152
  }
153
- </style>
153
+ </style>
@@ -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>