Skip to content

Commit 6881638

Browse files
dvcoldvcol
committed
feat(web): fix web routing, create app state, add loading route
1 parent 5933d69 commit 6881638

11 files changed

+361
-16
lines changed

‎src/components/AppComponent.vue

+6-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Transition } from 'vue';
33
import { RouterView } from 'vue-router';
44
55
import { NavbarComponent } from '~/components/common';
6+
import PageLoading from '~/components/common/loading/PageLoading.vue';
67
import { useAuthSettingsStoreRefs } from '~/stores/settings/auth.store';
78
89
const { isAuthenticated } = useAuthSettingsStoreRefs();
@@ -15,7 +16,7 @@ const { isAuthenticated } = useAuthSettingsStoreRefs();
1516
<main>
1617
<RouterView v-slot="{ Component, route }">
1718
<Transition name="scale" mode="out-in">
18-
<component :is="Component" :key="route.path" />
19+
<component :is="Component ?? PageLoading" :key="route.path" />
1920
</Transition>
2021
</RouterView>
2122
</main>
@@ -24,13 +25,16 @@ const { isAuthenticated } = useAuthSettingsStoreRefs();
2425
<style lang="scss" scoped>
2526
@use '~/styles/z-index' as layers;
2627
28+
$header-height: 2.75rem;
29+
2730
header {
2831
position: sticky;
2932
top: 0;
3033
z-index: layers.$layer-ui;
3134
display: flex;
3235
flex-direction: column;
3336
justify-content: center;
37+
height: $header-height;
3438
background: var(--bg-blur-black);
3539
backdrop-filter: blur(var(--bg-blur));
3640
transition: background 0.5s;
@@ -45,6 +49,7 @@ main {
4549
display: flex;
4650
align-items: center;
4751
justify-content: center;
52+
min-height: calc(100% - #{$header-height});
4853
padding: 0 2rem;
4954
}
5055

‎src/components/common/loading/PageLoading.vue

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script setup lang="ts">
2+
import { NIcon } from 'naive-ui';
3+
4+
import IconLoadingMatrix from '~/components/icons/IconLoadingMatrix.vue';
5+
</script>
6+
7+
<template>
8+
<NIcon class="loading-container" size="6rem">
9+
<IconLoadingMatrix />
10+
</NIcon>
11+
</template>
12+
13+
<style lang="scss" scoped>
14+
.loading-container {
15+
display: flex;
16+
align-items: center;
17+
justify-content: center;
18+
width: 100%;
19+
height: 100%;
20+
}
21+
</style>

‎src/components/icons/IconLoadingDots.vue

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
3+
<circle cx="4" cy="12" r="3" fill="currentColor">
4+
<animate
5+
id="svgSpinners3DotsBounce0"
6+
attributeName="cy"
7+
begin="0;svgSpinners3DotsBounce1.end+0.25s"
8+
calcMode="spline"
9+
dur="0.6s"
10+
keySplines=".33,.66,.66,1;.33,0,.66,.33"
11+
values="12;6;12"
12+
/>
13+
</circle>
14+
<circle cx="12" cy="12" r="3" fill="currentColor">
15+
<animate
16+
attributeName="cy"
17+
begin="svgSpinners3DotsBounce0.begin+0.1s"
18+
calcMode="spline"
19+
dur="0.6s"
20+
keySplines=".33,.66,.66,1;.33,0,.66,.33"
21+
values="12;6;12"
22+
/>
23+
</circle>
24+
<circle cx="20" cy="12" r="3" fill="currentColor">
25+
<animate
26+
id="svgSpinners3DotsBounce1"
27+
attributeName="cy"
28+
begin="svgSpinners3DotsBounce0.begin+0.2s"
29+
calcMode="spline"
30+
dur="0.6s"
31+
keySplines=".33,.66,.66,1;.33,0,.66,.33"
32+
values="12;6;12"
33+
/>
34+
</circle>
35+
</svg>
36+
</template>

‎src/components/icons/IconLoadingMatrix.vue

+240
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
<template>
2+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
3+
<rect width="7.33" height="7.33" x="1" y="1" fill="currentColor">
4+
<animate
5+
id="svgSpinnersBlocksWave0"
6+
attributeName="x"
7+
begin="0;svgSpinnersBlocksWave1.end+0.2s"
8+
dur="0.6s"
9+
values="1;4;1"
10+
/>
11+
<animate
12+
attributeName="y"
13+
begin="0;svgSpinnersBlocksWave1.end+0.2s"
14+
dur="0.6s"
15+
values="1;4;1"
16+
/>
17+
<animate
18+
attributeName="width"
19+
begin="0;svgSpinnersBlocksWave1.end+0.2s"
20+
dur="0.6s"
21+
values="7.33;1.33;7.33"
22+
/>
23+
<animate
24+
attributeName="height"
25+
begin="0;svgSpinnersBlocksWave1.end+0.2s"
26+
dur="0.6s"
27+
values="7.33;1.33;7.33"
28+
/>
29+
</rect>
30+
<rect width="7.33" height="7.33" x="8.33" y="1" fill="currentColor">
31+
<animate
32+
attributeName="x"
33+
begin="svgSpinnersBlocksWave0.begin+0.1s"
34+
dur="0.6s"
35+
values="8.33;11.33;8.33"
36+
/>
37+
<animate
38+
attributeName="y"
39+
begin="svgSpinnersBlocksWave0.begin+0.1s"
40+
dur="0.6s"
41+
values="1;4;1"
42+
/>
43+
<animate
44+
attributeName="width"
45+
begin="svgSpinnersBlocksWave0.begin+0.1s"
46+
dur="0.6s"
47+
values="7.33;1.33;7.33"
48+
/>
49+
<animate
50+
attributeName="height"
51+
begin="svgSpinnersBlocksWave0.begin+0.1s"
52+
dur="0.6s"
53+
values="7.33;1.33;7.33"
54+
/>
55+
</rect>
56+
<rect width="7.33" height="7.33" x="1" y="8.33" fill="currentColor">
57+
<animate
58+
attributeName="x"
59+
begin="svgSpinnersBlocksWave0.begin+0.1s"
60+
dur="0.6s"
61+
values="1;4;1"
62+
/>
63+
<animate
64+
attributeName="y"
65+
begin="svgSpinnersBlocksWave0.begin+0.1s"
66+
dur="0.6s"
67+
values="8.33;11.33;8.33"
68+
/>
69+
<animate
70+
attributeName="width"
71+
begin="svgSpinnersBlocksWave0.begin+0.1s"
72+
dur="0.6s"
73+
values="7.33;1.33;7.33"
74+
/>
75+
<animate
76+
attributeName="height"
77+
begin="svgSpinnersBlocksWave0.begin+0.1s"
78+
dur="0.6s"
79+
values="7.33;1.33;7.33"
80+
/>
81+
</rect>
82+
<rect width="7.33" height="7.33" x="15.66" y="1" fill="currentColor">
83+
<animate
84+
attributeName="x"
85+
begin="svgSpinnersBlocksWave0.begin+0.2s"
86+
dur="0.6s"
87+
values="15.66;18.66;15.66"
88+
/>
89+
<animate
90+
attributeName="y"
91+
begin="svgSpinnersBlocksWave0.begin+0.2s"
92+
dur="0.6s"
93+
values="1;4;1"
94+
/>
95+
<animate
96+
attributeName="width"
97+
begin="svgSpinnersBlocksWave0.begin+0.2s"
98+
dur="0.6s"
99+
values="7.33;1.33;7.33"
100+
/>
101+
<animate
102+
attributeName="height"
103+
begin="svgSpinnersBlocksWave0.begin+0.2s"
104+
dur="0.6s"
105+
values="7.33;1.33;7.33"
106+
/>
107+
</rect>
108+
<rect width="7.33" height="7.33" x="8.33" y="8.33" fill="currentColor">
109+
<animate
110+
attributeName="x"
111+
begin="svgSpinnersBlocksWave0.begin+0.2s"
112+
dur="0.6s"
113+
values="8.33;11.33;8.33"
114+
/>
115+
<animate
116+
attributeName="y"
117+
begin="svgSpinnersBlocksWave0.begin+0.2s"
118+
dur="0.6s"
119+
values="8.33;11.33;8.33"
120+
/>
121+
<animate
122+
attributeName="width"
123+
begin="svgSpinnersBlocksWave0.begin+0.2s"
124+
dur="0.6s"
125+
values="7.33;1.33;7.33"
126+
/>
127+
<animate
128+
attributeName="height"
129+
begin="svgSpinnersBlocksWave0.begin+0.2s"
130+
dur="0.6s"
131+
values="7.33;1.33;7.33"
132+
/>
133+
</rect>
134+
<rect width="7.33" height="7.33" x="1" y="15.66" fill="currentColor">
135+
<animate
136+
attributeName="x"
137+
begin="svgSpinnersBlocksWave0.begin+0.2s"
138+
dur="0.6s"
139+
values="1;4;1"
140+
/>
141+
<animate
142+
attributeName="y"
143+
begin="svgSpinnersBlocksWave0.begin+0.2s"
144+
dur="0.6s"
145+
values="15.66;18.66;15.66"
146+
/>
147+
<animate
148+
attributeName="width"
149+
begin="svgSpinnersBlocksWave0.begin+0.2s"
150+
dur="0.6s"
151+
values="7.33;1.33;7.33"
152+
/>
153+
<animate
154+
attributeName="height"
155+
begin="svgSpinnersBlocksWave0.begin+0.2s"
156+
dur="0.6s"
157+
values="7.33;1.33;7.33"
158+
/>
159+
</rect>
160+
<rect width="7.33" height="7.33" x="15.66" y="8.33" fill="currentColor">
161+
<animate
162+
attributeName="x"
163+
begin="svgSpinnersBlocksWave0.begin+0.3s"
164+
dur="0.6s"
165+
values="15.66;18.66;15.66"
166+
/>
167+
<animate
168+
attributeName="y"
169+
begin="svgSpinnersBlocksWave0.begin+0.3s"
170+
dur="0.6s"
171+
values="8.33;11.33;8.33"
172+
/>
173+
<animate
174+
attributeName="width"
175+
begin="svgSpinnersBlocksWave0.begin+0.3s"
176+
dur="0.6s"
177+
values="7.33;1.33;7.33"
178+
/>
179+
<animate
180+
attributeName="height"
181+
begin="svgSpinnersBlocksWave0.begin+0.3s"
182+
dur="0.6s"
183+
values="7.33;1.33;7.33"
184+
/>
185+
</rect>
186+
<rect width="7.33" height="7.33" x="8.33" y="15.66" fill="currentColor">
187+
<animate
188+
attributeName="x"
189+
begin="svgSpinnersBlocksWave0.begin+0.3s"
190+
dur="0.6s"
191+
values="8.33;11.33;8.33"
192+
/>
193+
<animate
194+
attributeName="y"
195+
begin="svgSpinnersBlocksWave0.begin+0.3s"
196+
dur="0.6s"
197+
values="15.66;18.66;15.66"
198+
/>
199+
<animate
200+
attributeName="width"
201+
begin="svgSpinnersBlocksWave0.begin+0.3s"
202+
dur="0.6s"
203+
values="7.33;1.33;7.33"
204+
/>
205+
<animate
206+
attributeName="height"
207+
begin="svgSpinnersBlocksWave0.begin+0.3s"
208+
dur="0.6s"
209+
values="7.33;1.33;7.33"
210+
/>
211+
</rect>
212+
<rect width="7.33" height="7.33" x="15.66" y="15.66" fill="currentColor">
213+
<animate
214+
id="svgSpinnersBlocksWave1"
215+
attributeName="x"
216+
begin="svgSpinnersBlocksWave0.begin+0.4s"
217+
dur="0.6s"
218+
values="15.66;18.66;15.66"
219+
/>
220+
<animate
221+
attributeName="y"
222+
begin="svgSpinnersBlocksWave0.begin+0.4s"
223+
dur="0.6s"
224+
values="15.66;18.66;15.66"
225+
/>
226+
<animate
227+
attributeName="width"
228+
begin="svgSpinnersBlocksWave0.begin+0.4s"
229+
dur="0.6s"
230+
values="7.33;1.33;7.33"
231+
/>
232+
<animate
233+
attributeName="height"
234+
begin="svgSpinnersBlocksWave0.begin+0.4s"
235+
dur="0.6s"
236+
values="7.33;1.33;7.33"
237+
/>
238+
</rect>
239+
</svg>
240+
</template>

‎src/components/views/login/LoginComponent.vue

+7-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script lang="ts" setup>
22
import { NButton, NFlex } from 'naive-ui';
33
4-
import { onMounted } from 'vue';
4+
import { onMounted, watch } from 'vue';
55
66
import { useRoute, useRouter } from 'vue-router';
77
@@ -17,11 +17,13 @@ const router = useRouter();
1717
const { isAuthenticated } = useAuthSettingsStoreRefs();
1818
1919
onMounted(() => {
20-
const { redirect } = route.query;
21-
if (redirect) router.push(route.query.redirect as string);
20+
watch(isAuthenticated, authenticated => {
21+
const { redirect } = route.query;
22+
if (authenticated && redirect) router.push(route.query.redirect as string);
23+
});
2224
});
2325
24-
const redirect = async () => {
26+
const onRedirect = async () => {
2527
try {
2628
await TraktService.approve();
2729
} catch (error) {
@@ -34,7 +36,7 @@ const redirect = async () => {
3436
<NFlex vertical justify="space-around" align="center">
3537
<img alt="Vue logo" class="logo" src="/assets/logo.svg" width="125" height="125" />
3638
<span>This is a login component</span>
37-
<NButton @click="redirect">Redirect Url</NButton>
39+
<NButton @click="onRedirect">Redirect Url</NButton>
3840
</NFlex>
3941
</template>
4042

0 commit comments

Comments
 (0)