diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 85902ef94..09877ff0d 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -98,7 +98,7 @@ const call = createFetch({ data.detail?.message || 'Please re-connect with Google', url, ); - } else if (response.status === 401 && data?.detail?.id === 'INVALID_TOKEN') { + } else if (response && response.status === 401 && data?.detail?.id === 'INVALID_TOKEN') { // Clear current user data, and ship them to the login screen! await currentUser.$reset(); await router.push('/login'); diff --git a/frontend/src/components/ScheduleCreation.vue b/frontend/src/components/ScheduleCreation.vue index 1408100b9..3fb1c1979 100644 --- a/frontend/src/components/ScheduleCreation.vue +++ b/frontend/src/components/ScheduleCreation.vue @@ -284,22 +284,36 @@ - -
- -
-
-
+ + + +
+

{{ t('text.scheduleSettings.noCalendars') }}

+ {{ t('text.scheduleSettings.clickHereToConnect') }}
- -
-
-
-
+ + + +
+

{{ t('text.scheduleSettings.create') }}

+ +
+
+ + +

{{ t('text.scheduleSettings.notActive') }}

+
+ + +
+

{{ t('text.scheduleSettings.formDirty') }}

+
-
-
+
+
state.value === firstStep); const activeStep2 = computed(() => state.value === scheduleCreationState.settings); const activeStep3 = computed(() => state.value === scheduleCreationState.details); const visitedStep1 = ref(false); -const nextStep = () => { - state.value += 1; -}; // calculate calendar titles const calendarTitles = computed(() => { @@ -404,8 +418,8 @@ const calendarTitles = computed(() => { // default schedule object (for start and reset) and schedule form data const defaultSchedule = { - active: true, - name: '', + active: calendarStore.hasConnectedCalendars, + name: `${user.data.name}'s Availability`, calendar_id: props.calendars[0]?.id, location_type: locationTypes.inPerson, location_url: '', diff --git a/frontend/src/elements/AlertBox.vue b/frontend/src/elements/AlertBox.vue index c17754933..7088b8d09 100644 --- a/frontend/src/elements/AlertBox.vue +++ b/frontend/src/elements/AlertBox.vue @@ -23,7 +23,7 @@ - +
@@ -35,6 +35,10 @@ import { alertSchemes } from '@/definitions'; defineProps({ title: String, + canClose: { + type: Boolean, + default: true, + }, scheme: { type: Number, default: alertSchemes.error, diff --git a/frontend/src/elements/SnackishBar.vue b/frontend/src/elements/SnackishBar.vue new file mode 100644 index 000000000..460ec0709 --- /dev/null +++ b/frontend/src/elements/SnackishBar.vue @@ -0,0 +1,20 @@ + + diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json index 090dad3d6..7f427babb 100644 --- a/frontend/src/locales/en.json +++ b/frontend/src/locales/en.json @@ -283,6 +283,9 @@ }, "nameIsInvitingYou": "{name} is inviting you", "scheduleSettings": { + "create": "Select a calendar under Scheduling Details and click save to get started!", + "noCalendars": "Scheduling requires at least one connected calendar.", + "clickHereToConnect": "Click here to connect a calendar!", "notActive": "Schedule is not active, turn on the toggle to edit or share.", "formDirty": "You have unsaved changes." }, diff --git a/frontend/src/stores/calendar-store.js b/frontend/src/stores/calendar-store.js index 6e616fecb..92882ca72 100644 --- a/frontend/src/stores/calendar-store.js +++ b/frontend/src/stores/calendar-store.js @@ -11,6 +11,8 @@ export const useCalendarStore = defineStore('calendars', () => { const unconnectedCalendars = computed(() => calendars.value.filter((cal) => !cal.connected)); const connectedCalendars = computed(() => calendars.value.filter((cal) => cal.connected)); + const hasConnectedCalendars = computed(() => connectedCalendars.value.length > 0); + /** * Get all calendars for current user * @param {function} call preconfigured API fetch function @@ -37,6 +39,6 @@ export const useCalendarStore = defineStore('calendars', () => { }; return { - isLoaded, calendars, unconnectedCalendars, connectedCalendars, fetch, $reset, + isLoaded, hasConnectedCalendars, calendars, unconnectedCalendars, connectedCalendars, fetch, $reset, }; });