Merge pull request #18 from whos-evan/login

Login feature, rest of the features still need to be added.

README.md

@@ -20,6 +20,7 @@ Check out our [wiki](https://github.com/whos-evan/kazwire/wiki) for development
 ## Roadmap
 
 - Splitting of games assets and website code with different repositories.
+- Login system is currently being worked on!
 
 ## Screenshots!
 ![brave_ssPQIyRguI](https://user-images.githubusercontent.com/72959444/212424732-bd5f40bf-0f2e-4bb7-ab52-2f5834f49a0a.png)

src/components/nav.svelte

@@ -2,6 +2,13 @@
 	import { darkMode } from '../dark';
 	import { onMount } from 'svelte';
 
+	import { auth } from '../firebase';
+	import { authState } from 'rxfire/auth';
+
+	let user;
+
+	const unsubscribe = authState(auth).subscribe((usr) => (user = usr));
+
 	onMount(() => {
 		if ('serviceWorker' in navigator) {
 			navigator.serviceWorker.register(window.location.origin + '/sw.js');
@@ -88,6 +95,20 @@
 					</li>
 				</ul>
 			</div>
+			<div class="text-white ml-auto mr-3 text-xl">
+				{#if user}
+					<a href="/account/profile">
+						<img
+							src={user.photoURL}
+							class="transition duration-100 hover:scale-[105%] h-8 rounded-full"
+							alt="Profile"
+							referrerpolicy="no-referrer"
+						/>
+					</a>
+				{:else}
+					<a href="/account" class="text-md transition duration-100 hover:scale-[105%]">Login</a>
+				{/if}
+			</div>
 			<div class="float-right text-white text-xl mr-10">
 				<button
 					id="theme-selector"

src/firebase.ts

@@ -0,0 +1,21 @@
+import firebase from "firebase/compat/app";
+import "firebase/compat/auth";
+import "firebase/compat/firestore";
+import { initializeApp } from "firebase/app";
+
+const firebaseConfig = {
+    apiKey: "AIzaSyDdeaj5DFXkKDJOjFsCFkbwXFq_06njxbo",
+    authDomain: "mystical-being-372905.firebaseapp.com",
+    projectId: "mystical-being-372905",
+    storageBucket: "mystical-being-372905.appspot.com",
+    messagingSenderId: "208620925125",
+    appId: "1:208620925125:web:38cf525729d9df823480ac",
+    measurementId: "G-KS0SQ3ZEY8"
+  };
+
+// Initialize Firebase
+firebase.initializeApp(firebaseConfig);
+
+export const auth = firebase.auth();
+export const googleProvider = new firebase.auth.GoogleAuthProvider();
+export const db = firebase.firestore();

src/routes/account/+page.svelte

@@ -0,0 +1,35 @@
+<script>
+	import { auth, googleProvider } from '../../firebase';
+	import { authState } from 'rxfire/auth';
+
+	let user;
+
+	const unsubscribe = authState(auth).subscribe((usr) => (user = usr));
+
+	function login() {
+		auth.signInWithPopup(googleProvider);
+	}
+
+	function logout() {
+		auth.signOut();
+	}
+
+	import Nav from '../../components/nav.svelte';
+	import Footer from '../../components/footer.svelte';
+</script>
+
+<Nav />
+<div class="text-white h-[80vh] w-full text-center">
+	<h1 class="font-bold text-5xl">Login</h1>
+	<p class="text-lg mb-5">Login with Google to get access to more features in the future.</p>
+	{#if user}
+		Logged in as {user.email}
+		<br>
+		<button on:click={logout} class="px-4 py-2 bg-white text-secondary font-bold">Logout</button>
+	{:else}
+		<button on:click={login}>
+			<img src="/assets/google-signin.png" alt="signin">
+		</button>
+	{/if}
+</div>
+<Footer />

src/routes/account/profile/+page.svelte

@@ -0,0 +1,36 @@
+<script>
+	import { auth, googleProvider } from '../../../firebase';
+	import { authState } from 'rxfire/auth';
+
+	let user;
+
+	const unsubscribe = authState(auth).subscribe((usr) => (user = usr));
+
+	function login() {
+		auth.signInWithPopup(googleProvider);
+	}
+
+	function logout() {
+		auth.signOut();
+	}
+
+	import Nav from '../../../components/nav.svelte';
+	import Footer from '../../../components/footer.svelte';
+</script>
+
+<Nav />
+<div class="text-white h-[80vh] w-full text-center">
+	<h1 class="font-bold text-5xl">Profile Settings (Coming soon)</h1>
+
+	{#if user}
+		Logged in as {user.email}
+		<br />
+		<button on:click={logout} class="px-4 py-2 bg-white text-secondary font-bold">Logout</button>
+	{:else}
+		<br />
+		<button on:click={login}>
+			<img src="/assets/google-signin.png" alt="signin" />
+		</button>
+	{/if}
+</div>
+<Footer />