Skip to content

Commit 2aea89a

Browse files
authored
Merge pull request #214 from buggregator/issue/#210-fix-sso
2 parents a09f349 + 05c3e6f commit 2aea89a

File tree

9 files changed

+95
-72
lines changed

9 files changed

+95
-72
lines changed

app.vue

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@
55
<script lang="ts" setup>
66
import "./src/assets/index.css";
77
import "./src/assets/vendor";
8-
import { useEventsStore, useSettingsStore } from "~/src/shared/stores";
8+
import { useEventsStore } from "~/src/shared/stores";
99
10-
useSettingsStore().initialize();
1110
useEventsStore().initialize();
1211
</script>

middleware/auth.global.ts

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,32 @@
11
import { navigateTo, defineNuxtRouteMiddleware } from "#app";
2-
import { useSettings } from "~/src/shared/lib/use-settings";
32
import {useSettingsStore, useProfileStore} from "~/src/shared/stores";
43

54
export default defineNuxtRouteMiddleware(async (to) => {
6-
const { auth} = storeToRefs(useSettingsStore())
5+
const settingsStore = useSettingsStore()
6+
const {isFetched, isAuthEnabled } = storeToRefs(settingsStore)
77

8-
if (!auth.value.isEnabled) {
8+
if (!isFetched.value) {
9+
await settingsStore.fetchSettings()
10+
}
11+
12+
if (!isAuthEnabled.value) {
913
return undefined
1014
}
1115

12-
const store = useProfileStore()
13-
store.fetchToken()
16+
const profileStore = useProfileStore()
17+
const { isAuthenticated} = storeToRefs(profileStore)
18+
await profileStore.getStoredToken()
1419

15-
if (store.isAuthenticated) {
16-
const {api: {getProfile}} = useSettings();
17-
const profile = await getProfile();
18-
store.setProfile(profile)
19-
return undefined
20+
if (isAuthenticated.value) {
21+
await profileStore.getProfile();
2022
}
2123

22-
if (to.name !== 'login' && !store.isAuthenticated) {
24+
if (to.name !== 'login' && !isAuthenticated.value) {
2325
return navigateTo('/login')
2426
}
2527

2628
if (to.name === 'login' && to?.query?.token) {
27-
store.setToken(String(to.query.token))
29+
profileStore.setToken(String(to.query.token))
2830
return navigateTo('/')
2931
}
3032

pages/login.vue

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,14 @@ import { IconSvg } from "~/src/shared/ui";
99
setPageLayout("blank");
1010
1111
const store = useProfileStore();
12-
const { auth } = storeToRefs(useSettingsStore());
12+
const { authLogicUrl } = storeToRefs(useSettingsStore());
1313
1414
if (store.isAuthenticated) {
15+
setPageLayout("default");
1516
await navigateTo("/");
1617
}
1718
18-
const loginUrl = computed(() => `${REST_API_URL}/${auth.value.loginUrl}`);
19+
const loginUrl = computed(() => `${REST_API_URL}/${authLogicUrl.value}`);
1920
2021
const redirect = async () => {
2122
await navigateTo(loginUrl.value, {
@@ -42,11 +43,11 @@ const redirect = async () => {
4243
</div>
4344
<div
4445
class="login-form-right-block"
45-
style="
46-
background: url('/bg.jpg');
47-
background-size: cover;
48-
background-position: center center;
49-
"
46+
:style="{
47+
background: `url('/bg.jpg')`,
48+
backgroundSize: 'cover',
49+
backgroundPosition: 'center center',
50+
}"
5051
></div>
5152
</div>
5253
</div>
@@ -91,7 +92,7 @@ const redirect = async () => {
9192
}
9293
9394
.login-form--title {
94-
@apply text-4xl text-center font-thin;
95+
@apply text-4xl text-center font-thin text-black;
9596
@apply my-10;
9697
}
9798

src/shared/lib/use-events/use-events-api.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,8 +86,8 @@ export const useEventsApi = (): TUseEventsApi => {
8686
// NOTE: clear cached events hardly
8787
eventsStore.removeAll();
8888
}
89-
}).catch((err) => {
90-
console.error('getAll err', err);
89+
}).catch((e) => {
90+
console.error(e);
9191
})
9292
}
9393

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,17 @@
11
import {useProfileStore} from "../../stores/profile/profile-store";
2-
import type {TProfile, TSettings, TProjects} from "../../types";
2+
import type { TProjects} from "../../types";
33
import { REST_API_URL } from "../io/constants";
44

55

66
type TUseSettings = {
77
api: {
8-
getProfile: () => Promise<TProfile>
9-
getSettings: () => Promise<TSettings>
108
getProjects: () => Promise<TProjects>
119
}
1210
}
1311

1412
export const useSettings = (): TUseSettings => {
1513
const { token } = storeToRefs(useProfileStore())
1614

17-
const getAppSettings = () => fetch(`${REST_API_URL}/api/settings`)
18-
.then((response) => response.json())
19-
.catch((e) => {
20-
console.error(e);
21-
22-
return null
23-
});
24-
25-
const getProfile = () => fetch(`${REST_API_URL}/api/me`, {
26-
headers: {"X-Auth-Token": token.value || ""}
27-
})
28-
.then((response) => response.json())
29-
.catch((e) => {
30-
console.error(e);
31-
32-
return null
33-
});
3415
const getProjects = () => fetch(`${REST_API_URL}/api/projects`, {
3516
headers: {"X-Auth-Token": token.value || ""}
3617
})
@@ -43,9 +24,7 @@ export const useSettings = (): TUseSettings => {
4324

4425
return {
4526
api: {
46-
getProfile,
4727
getProjects,
48-
getSettings: getAppSettings
4928
}
5029
}
5130
}

src/shared/stores/profile/profile-store.ts

Lines changed: 39 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import { defineStore } from "pinia";
2+
import {navigateTo} from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
3+
import {REST_API_URL} from "../../lib/io/constants";
24
import type {TProfile} from "../../types";
35
import {getStoredToken, removeStoredToken, setStoredToken} from "./local-storage-actions";
46

@@ -10,19 +12,53 @@ export const useProfileStore = defineStore("profileStore", {
1012
}),
1113
getters: {
1214
isAuthenticated(): boolean {
13-
return this.token !== undefined && this.token !== null && this.token !== "null";
15+
return !!this.token && this.token !== "null";
1416
},
1517
},
1618
actions: {
1719
setToken(token: string): void {
1820
this.token = token;
1921
setStoredToken(token);
2022
},
23+
async getProfile(): Promise<TProfile> {
24+
// TODO: need to remove fetch out of the store
25+
const profile = await fetch(`${REST_API_URL}/api/me`, {
26+
headers: {"X-Auth-Token": this.token || ""}
27+
})
28+
.then((response) => {
29+
if (!response.ok && response.status === 403) {
30+
this.removeToken();
31+
32+
// TODO: add toast to show error
33+
console.error('Auth Error', response.status, response.statusText)
34+
35+
navigateTo('/login')
36+
}
37+
38+
return response
39+
})
40+
.then((response) => response.json())
41+
.catch((e) => {
42+
console.error(e);
43+
44+
return null
45+
});
46+
47+
this.setProfile(profile)
48+
49+
return profile
50+
},
2151
setProfile(profile: TProfile): void {
2252
this.profile = profile;
2353
},
24-
fetchToken(): void {
25-
this.setToken(getStoredToken() || '');
54+
getStoredToken(): string {
55+
const token = getStoredToken()
56+
57+
if (token) {
58+
this.setToken(token);
59+
}
60+
61+
return token
2662
},
2763
removeToken(): void {
2864
this.token = '';

src/shared/stores/settings/settings-store.ts

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {defineStore} from "pinia";
2-
import {useSettings} from "../../lib/use-settings";
2+
import {REST_API_URL} from "../../lib/io/constants";
33
import type { TSettings } from "../../types";
44
import {THEME_MODES} from "./constants";
55
import {
@@ -16,29 +16,37 @@ import {
1616
export const useSettingsStore = defineStore("settingsStore", {
1717
state: () => ({
1818
apiVersion: '',
19-
auth: {
20-
isEnabled: false,
21-
loginUrl: '/login',
22-
},
19+
isFetched: false,
20+
isAuthEnabled: false,
21+
authLogicUrl: '/login',
2322
codeEditor: getStoredPrimaryCodeEditor() || 'phpstorm',
2423
themeType: getStoredActiveTheme(),
2524
isFixedHeader: getStoredFixedHeader(),
2625
isVisibleEventCounts: getStoredEventsCountVisibility(),
2726
}),
2827
actions: {
29-
initialize() {
30-
const {api: { getSettings }} = useSettings();
28+
async fetchSettings() {
29+
// TODO: need to remove fetch out of the store
30+
const settings: TSettings = await fetch(`${REST_API_URL}/api/settings`)
31+
.then((response) => response.json())
32+
.catch((e) => {
33+
console.error(e);
34+
35+
return null
36+
});
37+
38+
if (settings.version) {
39+
this.apiVersion = settings.version
40+
}
41+
42+
if (settings.auth) {
43+
this.isAuthEnabled = settings.auth.enabled;
44+
this.authLogicUrl = settings.auth.login_url;
45+
}
3146

32-
getSettings().then(({ version, auth } = {} as TSettings) => {
33-
if (version) {
34-
this.apiVersion = version
35-
}
47+
this.isFetched = true
3648

37-
if (auth) {
38-
this.auth.isEnabled = auth.enabled;
39-
this.auth.loginUrl = auth.login_url;
40-
}
41-
})
49+
return settings
4250
},
4351
changeTheme() {
4452
this.themeType = this.themeType === THEME_MODES.DARK

src/widgets/ui/layout-sidebar/layout-sidebar.vue

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { version } from "../../../../package.json";
1717
import { EVENTS_LINKS_MAP, EVENTS_NAV_ORDER } from "./constants";
1818
1919
const { isConnectedWS } = storeToRefs(useConnectionStore());
20-
const { isVisibleEventCounts, auth } = storeToRefs(useSettingsStore());
20+
const { isVisibleEventCounts, isAuthEnabled } = storeToRefs(useSettingsStore());
2121
const eventsStore = useEventsStore();
2222
const { availableProjects, isMultipleProjects, activeProject } =
2323
storeToRefs(eventsStore);
@@ -104,8 +104,6 @@ const logout = () => {
104104
105105
const path = computed(() => useRoute().path);
106106
107-
const isAuthEnabled = computed(() => auth.value.isEnabled);
108-
109107
const { apiVersion } = storeToRefs(useSettingsStore());
110108
111109
const clientVersion = ref(

src/widgets/ui/page-layout/page-layout.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const props = withDefaults(defineProps<Props>(), {
1919
const { events, cachedEvents } = useEvents();
2020
2121
const isEventsPaused = computed(
22-
() => cachedEvents.idsByType.value[props.type]?.length > 0
22+
() => cachedEvents.idsByType.value[props.type]?.length > 0,
2323
);
2424
2525
const allEvents = computed(() => {
@@ -35,13 +35,13 @@ const visibleEvents = computed(() => {
3535
}
3636
3737
return allEvents.value.filter(({ uuid }) =>
38-
cachedEvents.idsByType.value[props.type]?.includes(uuid)
38+
cachedEvents.idsByType.value[props.type]?.includes(uuid),
3939
);
4040
});
4141
4242
watchEffect(() => {
4343
useTitle(
44-
`${props.title || "Events"}: ${allEvents.value.length} | Buggregator`
44+
`${props.title || "Events"}: ${allEvents.value.length} | Buggregator`,
4545
);
4646
});
4747
</script>
@@ -67,7 +67,7 @@ watchEffect(() => {
6767
@import "src/assets/mixins";
6868
6969
.page-layout {
70-
@apply flex flex-col h-full
70+
@apply flex flex-col h-full w-full;
7171
}
7272
7373
.page-layout__events {

0 commit comments

Comments
 (0)