-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathapp.vue
97 lines (86 loc) · 2.16 KB
/
app.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<template>
<Html lang="en-US" class="bg-black">
<div class="flex justify-center text-white px-5 pb-5 min-h-full">
<div
class="max-w-container w-full flex flex-col items-center md:items-end justify-between relative"
>
<AppNavigation />
<NuxtPage />
<AppFooter />
</div>
</div>
<app-toasts />
</Html>
</template>
<script lang="ts" setup>
import {
getAdditionalUserInfo,
GoogleAuthProvider,
signInWithPopup
} from "firebase/auth";
import { doc, setDoc } from "firebase/firestore";
import { generateRandomString } from "matija-utils";
const router = useRouter();
const route = useRoute();
const { createToast } = useToast();
const loginTrigger = useLoginTrigger();
const { $firebaseAuth, $firebaseFirestore } = useNuxtApp();
const userData = useUserData();
const signIn = async () => {
try {
const provider = new GoogleAuthProvider();
const result = await signInWithPopup($firebaseAuth, provider);
const { isNewUser } = getAdditionalUserInfo(result);
if (isNewUser) {
const shortId = generateRandomString(6);
const docRef = doc($firebaseFirestore, "profile", shortId);
const username = generateRandomString(11);
await setDoc(docRef, {
username,
shortId,
uid: result.user.uid,
quests: {
activeQuests: [],
marks: {}
},
collection: {
st: {},
ut: {},
bp: {}
}
});
userData.value = {
shortId,
username
};
} else {
const { username, shortId } = await $fetch(
`/api/${result.user.uid}?property=uid`
);
userData.value = {
shortId,
username
};
}
createToast("Signed in!", "green-vue");
if (route.name === "index") {
router.push(userData.value.shortId);
} else {
loginTrigger.value = false;
}
} catch (e) {
createToast(e.message, "error");
loginTrigger.value = false;
}
};
watch(loginTrigger, (val) => {
if (val) signIn();
});
const { setMeta } = useMetadata();
setMeta("Realm trove");
</script>
<style scoped>
.max-w-container {
max-width: 1165px;
}
</style>