Update frontend designs and call new caldav endpoint

Author: davinotdavid

frontend/src/assets/svg/icons/mail.svg

@@ -57,7 +57,7 @@
     "connectCalendarGoogle": "Mit Google Kalender verbinden",
     "connectCalendarGoogleInfo": "Synchronisiere Thunderbird Appointment mit deinem Google Kalender. Du kannst auswählen, welche Kalender eingeschlossen werden sollen.",
     "connectCalendarTBPro": "Mit Thunderbird Pro verbinden",
-    "connectCalendarTBProInfo": "Synchronisiere Thunderbird Appointment mit deinem Thunderbird Pro Kalender. Du kannst auswählen, welche Kalender eingeschlossen werden sollen.",
+    "connectCalendarTBProInfo": "Synchronisiere deinen Appointment Kalender mit deinem Thunderbird Pro Kalender (CalDAV).",
     "connectWithCalDav": "Mit CalDAV verbinden",
     "calendarUrl": "Kalender URL",
     "calendarUrlPlaceholder": "Vollständige URL eingeben",

frontend/src/locales/de.json

@@ -57,7 +57,7 @@
     "connectCalendarGoogle": "Connect with Google Calendar",
     "connectCalendarGoogleInfo": "Sync Thunderbird Appointment with your Google Calendar. You'll be able to choose which calendars to include.",
     "connectCalendarTBPro": "Connect with Thunderbird Pro",
-    "connectCalendarTBProInfo": "Sync Thunderbird Appointment with your Thunderbird Pro calendar. You'll be able to choose which calendars to include.",
+    "connectCalendarTBProInfo": "Sync your Appointment calendar with your Thundermail calendar (CalDAV).",
     "connectWithCalDav": "Connect with CalDav",
     "calendarUrl": "Calendar URL",
     "calendarUrlPlaceholder": "Enter full URL",

frontend/src/locales/en.json

@@ -38,6 +38,10 @@ export const useCalendarStore = defineStore('calendars', () => {
     window.location.href = googleUrl.data.value.slice(1, -1);
   };
 
+  const connectOIDCCalendar = async () => {
+    await call.value('caldav/oidc/auth').post();
+  };
+
   /**
    * Retrieve the calendar object by id
    * @param id
@@ -142,6 +146,7 @@ export const useCalendarStore = defineStore('calendars', () => {
     $reset,
     connectGoogleCalendar,
     connectCalendar,
+    connectOIDCCalendar,
     disconnectCalendar,
     updateCalendar,
     syncCalendars,

frontend/src/stores/calendar-store.ts

@@ -4,6 +4,7 @@ defineProps<{
   description: string;
   iconSrc: string;
   iconAlt: string;
+  showDescription?: boolean;
 }>();
 </script>
 
@@ -13,7 +14,7 @@ defineProps<{
 
     <div>
       <h3>{{ title }}</h3>
-      <p>{{ description }}</p>
+      <p v-if="showDescription">{{ description }}</p>
     </div>
   </button>
 </template>
@@ -27,6 +28,7 @@ button {
   border-radius: 0.5rem;
   text-align: left;
   align-items: center;
+  width: 100%;
 
   img { 
     width: 2.25rem;

frontend/src/views/FTUEView/components/ProviderCardButton.vue

@@ -55,6 +55,7 @@ const handleKeydown = (event: KeyboardEvent) => {
       :iconSrc="iconSrc"
       :iconAlt="iconAlt"
       tabindex="-1"
+      :showDescription="isSelected"
     />
   </label>
 </template>
@@ -63,7 +64,7 @@ const handleKeydown = (event: KeyboardEvent) => {
 label {
   display: block;
   cursor: pointer;
-  border: 2px solid transparent;
+  border: 1px solid transparent;
   border-radius: 0.5rem;
   outline: none;
 
@@ -73,7 +74,8 @@ label {
   }
 
   &.selected {
-    border-color: color-mix(in srgb, var(--colour-ti-highlight) 30%, transparent);
+    border-color: var(--colour-primary-default);
+    background-color: var(--colour-primary-soft);
   }
 }
 

frontend/src/views/FTUEView/components/RadioProviderCardButton.vue

@@ -4,7 +4,9 @@ import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
 import { PrimaryButton, NoticeBar, NoticeBarTypes } from '@thunderbirdops/services-ui';
 import { useFTUEStore } from '@/stores/ftue-store';
+import { useCalendarStore } from '@/stores/calendar-store';
 import calendarIcon from '@/assets/svg/icons/calendar.svg';
+import mailIcon from '@/assets/svg/icons/mail.svg';
 import googleCalendarLogo from '@/assets/svg/google-calendar-logo.svg';
 import { FtueStep } from '@/definitions';
 
@@ -13,11 +15,12 @@ import RadioProviderCardButton from '../components/RadioProviderCardButton.vue';
 
 const { t } = useI18n();
 
+const calendarStore = useCalendarStore();
 const ftueStore = useFTUEStore();
 const { errorMessage } = storeToRefs(ftueStore);
 
 type CalendarProvider = 'caldav' | 'google' | 'oidc';
-const calendarProvider = ref<CalendarProvider | null>(null);
+const calendarProvider = ref<CalendarProvider | null>('oidc');
 
 const onBackButtonClick = () => {
   ftueStore.moveToStep(FtueStep.SetupProfile, true);
@@ -28,7 +31,7 @@ const onContinueButtonClick = async () => {
 
   switch (calendarProvider.value) {
     case 'oidc':
-      // TODO: Implement OIDC flow (get the token and try to authenticate)
+      await calendarStore.connectOIDCCalendar();
       break;
     case 'caldav':
       await ftueStore.moveToStep(FtueStep.ConnectCalendarsCalDav);
@@ -51,16 +54,15 @@ const onContinueButtonClick = async () => {
   </notice-bar>
 
   <div class="radio-group" role="radiogroup" :aria-label="t('ftue.connectYourCalendar')">
-    <!-- TODO: Implement OIDC / TB Pro Calendar auto-connect through token -->
-    <!-- <radio-provider-card-button
+    <radio-provider-card-button
       :title="t('ftue.connectCalendarTBPro')"
       :description="t('ftue.connectCalendarTBProInfo')"
-      :iconSrc="calendarIcon"
+      :iconSrc="mailIcon"
       :iconAlt="t('ftue.appointmentLogo')"
       value="oidc"
       name="calendar-provider"
       v-model="calendarProvider"
-    /> -->
+    />
 
     <radio-provider-card-button
       :title="t('ftue.connectCalendarCalDav')"

frontend/src/views/FTUEView/steps/ConnectYourCalendarStep.vue

@@ -100,6 +100,7 @@ onMounted(async () => {
       :iconSrc="zoomLogo"
       :iconAlt="t('ftue.zoomIcon')"
       @click="onZoomButtonClick()"
+      :showDescription="true"
     />
   </div>