everything still works, trying to add 2fa and figure out Custom Stores

2022-11-25 00:30:55 +00:00
parent b4240f48f7
commit 214d2cee49
8 changed files with 257 additions and 36 deletions
--- a/srcs/requirements/svelte/api_front/src/ProfileDisplay.svelte
+++ b/srcs/requirements/svelte/api_front/src/ProfileDisplay.svelte
@@ -38,6 +38,30 @@

  })

+  // Glittery Stars and such for Rank
+
+  let index = 0, interval = 1000;
+
+  const rand = (min, max) => 
+    Math.floor(Math.random() * (max - min + 1)) + min;
+
+  const animate = star => {
+    star.style.setProperty("--star-left", `${rand(-10, 100)}%`);
+    star.style.setProperty("--star-top", `${rand(-40, 80)}%`);
+
+    star.style.animation = "none";
+    star.offsetHeight;
+    star.style.animation = "";
+  }
+
+  // for(const star of document.getElementsByClassName("glitter-star")) {
+  //   setTimeout(() => {
+  //     animate(star);
+      
+  //     setInterval(() => animate(star), 1000);
+  //   }, index++ * (interval / 3))
+  // }
+



@@ -54,7 +78,26 @@
  <div>{user.image_url}</div>
  <img class="icon" src="{user.image_url}" alt="default user icon">
  <div>{user.username}</div>
-  <div class="rank">Rank: <span class="glitter">{rank}</span></div>
+  <div class="rank">Rank: 
+    <span class="glitter">
+      <span class="glitter-star">
+        <svg viewBox="0 0 512 512">
+        <path d="M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" />
+        </svg>
+      </span>
+      <span class="glitter-star">
+        <svg viewBox="0 0 512 512">
+        <path d="M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" />
+        </svg>
+      </span>
+      <span class="glitter-star">
+        <svg viewBox="0 0 512 512">
+        <path d="M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" />
+        </svg>
+      </span>
+      <span class="glitter-text">{rank}</span>
+    </span>
+  </div>
  <section class="main-stats">
    <h4>Match Statistics</h4>
    <p>Total: {user.stats.totalGame}</p>
@@ -67,20 +110,6 @@

 <style>

-/* very clearly redo all this */
-
-  div.main-grid{
-    display: grid;
-    grid-template-columns: repeat(12, 1fr);
-    /* max-height: calc(100vh - 30vh); */
-    height: 85vh;
-  }
-
-  section.sidebar{
-    grid-column: 1 / span 2;
-    background: white;
-  }
-
 /* The main part */
  main{
    max-width: 960px;
@@ -114,15 +143,6 @@
    grid-column: 1 / span 3;
  }

-  @keyframes background-pan {
-    from {
-      background-position: 0% center;
-    }
-    to {
-      background-position: -200% center;
-    }
-  }
-
  div.rank {
    /* color: black; */
    font-size: 1.5em;
@@ -133,11 +153,68 @@
    --purple: rgb(123, 31, 162);
    --violet: rgb(103, 58, 183);
    --pink: rgb(244, 143, 177);
+    /* make shit gold? */
+  }
+
+  @keyframes background-pan {
+    from {
+      background-position: 0% center;
+    }
+    
+    to {
+      background-position: -200% center;
+    }
+  }
+
+  @keyframes scale {
+    from, to {
+      transform: scale(0);
+    }
+    
+    50% {
+      transform: scale(1);
+    }
+  }
+
+  @keyframes rotate {
+    from {
+      transform: rotate(0deg);
+    }
+    
+    to {
+      transform: rotate(180deg);
+    }
  }


-
  div > .glitter {
+    display: inline-block;
+    position: relative;
+  }
+
+  div > .glitter > .glitter-star {
+    --size: clamp(20px, 1.5vw, 30px);
+
+    animation: scale 700ms ease forwards;
+    display: block;
+    height: var(--size);
+    left: var(--star-left);
+    position: absolute;
+    top: var(--star-top);
+    width: var(--size);
+  }
+
+  div > .glitter > .glitter-star > svg {
+    animation: rotate 1000ms linear infinite;
+    display: block;
+    opacity: 0.7;
+  }
+
+  div > .glitter > .glitter-star > svg > path {
+    fill: var(--violet);
+  }
+
+  div > .glitter > .glitter-text {
    animation: background-pan 3s linear infinite;
    /* background-image: linear-gradient( */
    background: linear-gradient(
--- a/srcs/requirements/svelte/api_front/src/ProfilePage.svelte
+++ b/srcs/requirements/svelte/api_front/src/ProfilePage.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">

-  // import { loginStatus } from "./stores/loginStatusStore.js";
  import Header from "./components/Header.svelte";
  import Footer from "./components/Footer.svelte";
  // import { createEventDispatcher } from "svelte";
--- a/srcs/requirements/svelte/api_front/src/SplashPage.svelte
+++ b/srcs/requirements/svelte/api_front/src/SplashPage.svelte
@@ -5,6 +5,7 @@
  import { loginStatus } from './stores/loginStatusStore.js';

  // tmp for testing
+  // this is fucking retarded, pardon my offensive language.
  let aData = {
    username: '',
  }
@@ -20,7 +21,7 @@
 	  	})
    console.log(aData);
 		// if (data) {
-		// 	$loginStatus = true;
+		// 	$loginStatus.42 = true;
    //  //push('/user');
    // }
 	});
@@ -40,7 +41,8 @@
 		await fetch('http://transcendance:8080/api/v2/auth/logout', {
        method: 'POST',
      });
-		$loginStatus = false;
+		// $loginStatus.42 = false;
+    // you're an idiot, the reason this didn't work is because you didn't use update. duh
 	};

 </script>
@@ -55,11 +57,12 @@
    <!-- placeholder links -->
    <a href="/">Somewhere</a>
    <!-- <a href="/">SomewhereElse</a> -->
-    {#if $loginStatus == false}
-      <div on:click={login}>Login {$loginStatus}</div>
-    {:else}
-      <div on:click={logout}>Logout {$loginStatus}</div>
-    {/if}
+    <!-- {#if $loginStatus == false} -->
+      <!-- <div on:click={login}>Login {$loginStatus}</div> -->
+      <div on:click={login}>Login</div>
+    <!-- {:else} -->
+      <!-- <div on:click={logout}>Logout {$loginStatus}</div> -->
+    <!-- {/if} -->
    <!-- one of these will be login and it will scroll you down to the login part -->
  </nav>
  <h2>
--- a/srcs/requirements/svelte/api_front/src/TwoFactorAuthentication.svelte
+++ b/srcs/requirements/svelte/api_front/src/TwoFactorAuthentication.svelte
@@ -0,0 +1,36 @@
+
+
+<script lang="ts">
+
+  import { onMount } from 'svelte';
+  import { loginStatus } from './stores/loginStatusStore';
+
+
+  onMount( async() => {
+    // ok no idea what goes in here...
+  })
+
+  // testing loginStatus Custom Store
+
+  const toggleTFA = () => {
+    loginStatus.toggleTFA;
+    console.log($loginStatus.tfa);
+  }
+
+
+</script>
+
+<h1>2FA Test</h1>
+
+<p>FortyTwo: {$loginStatus.fortyTwo}</p>
+<p>TFA: {$loginStatus.tfa}</p>
+<p>isLogged: {loginStatus.isLogged}</p>
+
+<div>
+  <button on:click={toggleTFA}>toggleTFA</button>
+</div>
+
+
+<style>
+
+</style>
--- a/srcs/requirements/svelte/api_front/src/components/Header.svelte
+++ b/srcs/requirements/svelte/api_front/src/components/Header.svelte
@@ -24,7 +24,7 @@
        method: 'POST',
      });
    console.log('clicked logout header')
-		$loginStatus = false;
+		// $loginStatus = false;

    push('/');
  };
--- a/srcs/requirements/svelte/api_front/src/old_unused/UserPage.svelte
+++ b/srcs/requirements/svelte/api_front/src/old_unused/UserPage.svelte
@@ -35,7 +35,7 @@
  let clickedLogout = async() => {
    console.log('clicked logout');
    await fetch('http://transcendance:8080/api/v2/auth/logout',);
-		$loginStatus = false;
+		// $loginStatus = false;
    // maybe use replace() ?
    push('/');
  };
--- a/srcs/requirements/svelte/api_front/src/routes/primaryRoutes.js
+++ b/srcs/requirements/svelte/api_front/src/routes/primaryRoutes.js
@@ -2,6 +2,7 @@ import NotFound from "../NotFound.svelte";
 import ProfilePage from "../ProfilePage.svelte";
 import SplashPage from "../SplashPage.svelte";
 import TmpTest from '../TmpTest.svelte';
+import TwoFactorAuthentication from '../TwoFactorAuthentication.svelte';


 //   "/article/:title": Article, // this is how you would do parameters!
@@ -9,6 +10,7 @@ import TmpTest from '../TmpTest.svelte';

 export const primaryRoutes = {
  '/': SplashPage,
+  '/2fa': TwoFactorAuthentication,
  '/profile': ProfilePage,
  '/profile/*': ProfilePage,
  '*': NotFound
--- a/srcs/requirements/svelte/api_front/src/stores/loginStatusStore.js
+++ b/srcs/requirements/svelte/api_front/src/stores/loginStatusStore.js
@@ -13,4 +13,108 @@ import { writable } from "svelte/store";
 // }
 // export const loginStatus = createLogin();

-export const loginStatus = writable(false);
+// export const loginStatus = writable({
+//   42: false,
+//   tfa: false,
+// });
+
+// function createLoginStatus() {
+
+//   //ok it really hated all this
+
+//   // const store = writable({
+//   //   fortyTwo: false,
+//   //   tfa: false,
+//   // });
+
+//   // return {
+//   //   ...store,
+//   //   subscribe,
+//   //   // toggle42: () => update( l => l.fortyTwo = !l.fortyTwo ),
+//   //   toggle42: () => store.update( fortyTwo => !fortyTwo ),
+//   //   // toggleTFA: () => update( l => l.tfa = !l.tfa ),
+//   //   toggleTFA: () => store.update( tfa => !tfa ),
+//   //   isLogged: () => store.fortyTwo && store.tfa,
+//   //   // isLogged: this.fortyTwo && this.tfa,
+//   //   // it really doesn't like "this."
+//   //   // isLogged: () => (this.tfa && this.fortyTwo),
+//   //   // this. ? or (l) => l.tfa ... ?
+//   // }
+
+
+//   //  doesn't seem to work...
+//   const { subscribe, update } = writable({
+//     fortyTwo: false,
+//     tfa: false,
+//   });
+
+//   return {
+//     subscribe,
+//     // toggle42: () => update( l => l.fortyTwo = !l.fortyTwo ),
+//     toggle42: () => update( fortyTwo => !fortyTwo ),
+//     // toggleTFA: () => update( l => l.tfa = !l.tfa ),
+//     toggleTFA: () => update( tfa => !tfa ),
+//     // isLogged: () => fortyTwo && tfa,
+//     // isLogged: this.fortyTwo && this.tfa,
+//     // it really doesn't like "this."
+//     // isLogged: () => (this.tfa && this.fortyTwo),
+//     // this. ? or (l) => l.tfa ... ?
+//     isLogged() {
+//       return fortyTwo && tfa;
+//     },
+//   }
+
+//   // possible other way of doing this
+
+//   // const store = writable({
+//   //   fortyTwo: false,
+//   //   tfa: false,
+//   // });
+
+//   // return {
+//   //   ...store,
+//   //   subscribe,
+//   //   // toggle42: () => update( l => l.fortyTwo = !l.fortyTwo ),
+//   //   toggle42: () => store.update( l.fortyTwo => !l.fortyTwo ),
+//   //   toggleTFA: () => store.update( l => l.tfa = !l.tfa ),
+//   //   isLogged: store.fortyTwo && store.tfa,
+//   //   // isLogged: () => (this.tfa && this.fortyTwo),
+//   //   // this. ? or (l) => l.tfa ... ?
+//   // }
+
+// }
+
+function createLoginStatus() {
+  // const store = writable({
+  //   fortyTwo: false,
+  //   tfa: false,
+  // });
+
+  const { subscribe, update } = writable({
+    fortyTwo: false,
+    tfa: false,
+  });
+
+  function toggle42() {
+    update( (l) => {
+      l.fortyTwo = !l.fortyTwo;
+      return l;
+    })
+  };
+
+  function toggleTFA() {
+    update( (l) => {
+      l.tfa = !l.tfa;
+      return l;
+    })
+  };
+
+  function isLogged() {
+    // return (l) => {l.fortyTwo && l.tfa};
+    return fortyTwo && tfa;
+  };
+
+  return { subscribe, update, toggle42, toggleTFA, isLogged };
+}
+
+export const loginStatus = createLoginStatus();