Initial commit

5c7e8eb0 · erlendoeien · 5c7e8eb0 · 5c7e8eb0 · 5c7e8eb0 · 5c7e8eb0
Commit 5c7e8eb0 authored Jan 07, 2022 by erlendoeien
--- a/.gitignore
+++ b/.gitignore
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
+{
+  "recommendations": ["johnsoncodehk.volar"]
+}
--- a/README.md
+++ b/README.md
+# Vue 3 + Typescript + Vite
+
+This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
+
+## Type Support For `.vue` Imports in TS
+
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's `.vue` type support plugin by running `Volar: Switch TS Plugin on/off` from VSCode command palette.
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
+{
+  "name": "clouds-movies",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "firebase": "^9.6.1",
+    "vue": "^3.2.25",
+    "vue-router": "4"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^2.0.0",
+    "typescript": "^4.4.4",
+    "vite": "^2.7.2",
+    "vue-tsc": "^0.29.8"
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.vue
+++ b/src/App.vue
+<script setup lang="ts">
+// This starter template is using Vue 3 <script setup> SFCs
+// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
+// import HelloWorld from './components/HelloWorld.vue'
+import { onBeforeUnmount, ref } from "vue";
+import { getAuth } from "firebase/auth";
+import { useRouter } from "vue-router";
+const auth = getAuth();
+const router = useRouter();
+const loginName = ref("");
+
+// const currentUser = ref(await getCurrentUser())
+const authListener = auth.onAuthStateChanged(function (user) {
+  if (user) {
+    loginName.value = user.displayName || "Unknown name"; // if we have a user
+  } else {
+    loginName.value = ""; // if we do not
+  }
+});
+
+const signOut = () => {
+  auth.signOut();
+  router.push("/");
+};
+
+// Clean up
+onBeforeUnmount(() => authListener());
+</script>
+
+<template>
+  <div>
+    <nav>
+      <span v-if="loginName">
+        <!-- Movies shall be the logo -->
+        <router-link to="/movies"> Movies </router-link> |
+        <router-link to="/favorites">Favorites </router-link> |
+        <span>{{ loginName }}</span> |
+
+        <button @click="signOut">Log out</button>
+      </span>
+    </nav>
+
+    <router-view />
+  </div>
+</template>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/env.d.ts
+++ b/src/env.d.ts
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
--- a/src/main.ts
+++ b/src/main.ts
+import { createApp } from "vue";
+import App from "./App.vue";
+import router from "./router";
+import { initializeApp } from "firebase/app";
+import { getAuth, User } from "@firebase/auth";
+import { getAnalytics } from "firebase/analytics";
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+// For Firebase JS SDK v7.20.0 and later, measurementId is optional
+const firebaseConfig = {
+  apiKey: "AIzaSyDFmp4FBhsaMZfpAcvYdA7MMGGIy3kM80k",
+  authDomain: "clouds-movies.firebaseapp.com",
+  projectId: "clouds-movies",
+  storageBucket: "clouds-movies.appspot.com",
+  messagingSenderId: "814442811620",
+  appId: "1:814442811620:web:9369b30eb3594f1b9adcf1",
+  measurementId: "G-QN8WD1N9KW",
+};
+
+// Initialize Firebase
+const firebaseApp = initializeApp(firebaseConfig);
+// const analytics = getAnalytics(firebaseApp);
+export const getCurrentUser = (): Promise<User | null> => {
+  const auth = getAuth();
+  return new Promise((resolve, reject) => {
+    if (auth.currentUser) {
+      resolve(auth.currentUser);
+    }
+    const unsubscribe = auth.onAuthStateChanged((user) => {
+      unsubscribe();
+      resolve(user);
+    }, reject);
+  });
+};
+
+const app = createApp(App);
+app.use(router);
+app.mount("#app");
--- a/src/router/index.ts
+++ b/src/router/index.ts
+import { createRouter, createWebHistory } from "vue-router";
+import getCurrentUser from "../tools/getCurrentUser"
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: "/",
+      name: "root",
+      component: () => import("../views/Dashboard.vue"),
+    },
+    {
+      path: "/movies",
+      name: "movies",
+      component: () => import("../views/Movies.vue"),
+      meta: {
+        requiresAuth: true,
+      },
+    },
+    {
+      path: "/favorites",
+      name: "favorites",
+      component: () => import("../views/Favorites.vue"),
+      meta: {
+        requiresAuth: true,
+      },
+    },
+  ],
+});
+
+router.beforeEach(async (to, from, next) => {
+  const requiresAuth = to.matched.some((record) => record.meta.requiresAuth);
+  const currentUser = await getCurrentUser()
+  if (currentUser && to.name === "root") next({ name: "movies" });
+  else if (requiresAuth && !currentUser) {
+    next({ name: "root" });
+  } else {
+    next();
+  }
+});
+
+export default router;
--- a/src/tools/getCurrentUser.ts
+++ b/src/tools/getCurrentUser.ts
+import { getAuth, User } from "@firebase/auth";
+
+export default function getCurrentUser(): Promise<User | null> {
+  const auth = getAuth();
+  return new Promise((resolve, reject) => {
+    if (auth.currentUser) {
+      resolve(auth.currentUser);
+    }
+    const unsubscribe = auth.onAuthStateChanged((user) => {
+      unsubscribe();
+      resolve(user);
+    }, reject);
+  });
+}
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
+<template>
+  <h1>Dashboard</h1>
+  <div>
+    <h2>Sign in</h2>
+    <button @click="signIn">Sign in with Google</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { GoogleAuthProvider } from "firebase/auth";
+const provider = new GoogleAuthProvider();
+import { getAuth, signInWithPopup } from "firebase/auth";
+import { useRouter } from "vue-router";
+
+const auth = getAuth();
+const router = useRouter();
+const signIn = () =>
+  signInWithPopup(auth, provider)
+    .then((result) => {
+      // This gives you a Google Access Token. You can use it to access the Google API.
+      const credential = GoogleAuthProvider.credentialFromResult(result);
+      const token = credential?.accessToken;
+      // The signed-in user info.
+      const user = result.user;
+      console.log(user);
+      router.push("/movies");
+      // ...
+    })
+    .catch((error) => {
+      // Handle Errors here.
+      const errorCode = error.code;
+      const errorMessage = error.message;
+      // The email of the user's account used.
+      const email = error.email;
+      // The AuthCredential type that was used.
+      const credential = GoogleAuthProvider.credentialFromError(error);
+      // ...
+    });
+</script>
+
+<style></style>
--- a/src/views/Favorites.vue
+++ b/src/views/Favorites.vue
+<template>
+  <h1>Favorites</h1>
+</template>
--- a/src/views/Movies.vue
+++ b/src/views/Movies.vue
+<template>
+  <h1>Movies</h1>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style></style>
--- a/tsconfig.json
+++ b/tsconfig.json
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()]
+})
--- a/yarn.lock
+++ b/yarn.lock