From 450f6873a680975f832d7e384b4e0cdc009d9269 Mon Sep 17 00:00:00 2001
From: Me <me@Philip.local>
Date: Mon, 5 Dec 2022 03:15:57 +0100
Subject: [PATCH] ok so it still works, the settings work more or less
 properly, and they look better, tho still kinda shit

---
 .../api_back/src/users/users.controller.ts    |   2 +
 .../api_front/src/pages/SplashPage.svelte     |  54 +----
 .../src/pages/profile/ProfileDisplay.svelte   |   5 +-
 .../src/pages/profile/ProfilePage.svelte      |  14 +-
 .../src/pages/profile/ProfileSettings.svelte  | 194 +++++++++++-------
 .../svelte/api_front/src/pieces/Button.svelte |  48 +++++
 .../svelte/api_front/src/pieces/Header.svelte |   4 +-
 .../api_front/src/stores/loginStatusStore.js  |   7 -
 8 files changed, 196 insertions(+), 132 deletions(-)
 create mode 100644 srcs/requirements/svelte/api_front/src/pieces/Button.svelte

diff --git a/srcs/requirements/nestjs/api_back/src/users/users.controller.ts b/srcs/requirements/nestjs/api_back/src/users/users.controller.ts
index 55d9dc61..eaa71624 100644
--- a/srcs/requirements/nestjs/api_back/src/users/users.controller.ts
+++ b/srcs/requirements/nestjs/api_back/src/users/users.controller.ts
@@ -38,6 +38,8 @@ export class UsersController {
 	@UseGuards(TwoFactorGuard)
 	@Get()
 	findOne(@Req() req) {
+		console.log("Backend Getting current user");
+		// console.log(this.usersService.findOne(req.user.id));
 		return this.usersService.findOne(req.user.id);
 	}
 
diff --git a/srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte b/srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte
index d17c1cc3..d6901b2b 100644
--- a/srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte
@@ -6,19 +6,7 @@
 
 
 	onMount(async () => {
-    console.log('SplashPage testing if logged in')
-    // let user = await fetch('http://transcendance:8080/api/v2/user')
-		//   .then((resp) => resp.json())
-		// if (user) {
-    //   if (!user.isEnabledTwoFactorAuth) {
-    //     loginStatus.update( (old) => ({...old, tfa: true}) );
-    //   }
-    //   // because the User will only exist if they're logged in to 42?
-    //   loginStatus.update( (old) => ({...old, fortyTwo: true}) );
-    //   if (user.isEnabledTwoFactorAuth && $loginStatus.tfa)
-    //     push('/profile');
-    //   // They have to click Login if using tfa and tfa no already done
-    // }
+    // console.log('SplashPage testing if logged in')
 
     // hold on, maybe this is all i need?
     let user = await fetch('http://transcendance:8080/api/v2/user')
@@ -39,17 +27,7 @@
       //   console.log('we have a user');
       // }
 
-
-  // for some reason unlike in ProfileDisplay here the user is never undefined...
-  // ok i think it's because here i declare the user in the call whereas in ProfileDisplay i declare user before...
-    // if (user !== undefined) {
-    //   console.log('user not undefined')
-    // }
-    // else
-    //   console.log('user undefined')
-
-    // to clean up local storage... as a precaution
-    // this condition isn't good enough...
+    // user === undefined doesn't work cuz we declared user in the scope of onMount
     // if (user === undefined) {
     if (user && user.statusCode && user.statusCode === 403) {
       console.log('on mount no user, returned status code 403 so logging out of userStore')
@@ -63,24 +41,13 @@
     window.location.href = 'http://transcendance:8080/api/v2/auth';
     // await fetch ('http://transcendance:8080/api/v2/auth');
     console.log('you are now logged in');
-    push('/profile')
-
-    // ok giving our new local storage and store combo a go
-    // what i need is to set the store to the user when this button get's pressed
-    // since there's no apparent return i guess i'll just fetch the user?
 
     await fetch('http://transcendance:8080/api/v2/user')
       .then((resp) => resp.json())
       .then((data) => void userStore.set(data));
 
-    // loginStatus.allTrue();
-    // this is redundant if TFA is on because they would only get back here after going through the TFA which sets it to True
-    // $loginStatus.tfa = true; // also it doesn't do anything cuz no .update()
-
-    // leave this out for now cuz causing problems
+    // decide if do this here on in backend
     // push('/profile');
-    // idk why this doesn't work, seems really weird, maybe it's an awit thing?
-    // Maybe it would be better to do it in the Backend?
   }
 
 // i could prolly put this in it's own compoent, i seem to use it in several places... or maybe just some JS? like no need for html
@@ -97,21 +64,8 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <header class="grid-container">
-
-  <!-- <div on:mouseenter={enter} on:mouseleave={leave} class:active > -->
-    <h1>Potato Pong</h1>
-  <!-- </div> -->
-
-  <!-- <nav>
-    {#if ($loginStatus.fortyTwo && $loginStatus.tfa) === false}
-      <div on:click={login}>Login</div>
-    {:else}
-      <div on:click={ () => (push('/profile')) }>Profile</div>
-      <div on:click={logout}>Logout</div>
-    {/if}
-  </nav> -->
+  <h1>Potato Pong</h1>
   <nav>
-    <!-- seems redundant but let's give it a try yea ok it still doesn't work, hate that... -->
     {#if $userStore !== null}
       <div on:click={ () => (push('/profile')) }>Profile</div>
       <div on:click={logout}>Logout</div>
diff --git a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileDisplay.svelte b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileDisplay.svelte
index f0da080f..b80a8572 100644
--- a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileDisplay.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileDisplay.svelte
@@ -23,7 +23,6 @@
   let rank = '';
   let avatar;
 
-
   // i think i don't need to do this once i sort out the {wrap} conditions: in theory i could pass values to the Route
   // once the async authentication check is done
   onMount( async() => {
@@ -47,6 +46,10 @@
 		  	avatar = url;
 	  	});
 
+    // tmp
+    // console.log('mounted Profile Display')
+    // console.log(user);
+
 
   })
 
diff --git a/srcs/requirements/svelte/api_front/src/pages/profile/ProfilePage.svelte b/srcs/requirements/svelte/api_front/src/pages/profile/ProfilePage.svelte
index d3860ebb..72549c81 100644
--- a/srcs/requirements/svelte/api_front/src/pages/profile/ProfilePage.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/profile/ProfilePage.svelte
@@ -22,14 +22,24 @@
 <!-- The Wave -->
 <!-- <div class="spacer layer1"></div> -->
 
-<Router routes={profileRoutes} {prefix} />
-
+<div>
+  <Router routes={profileRoutes} {prefix} />
+</div>
 
 <!-- <Footer /> -->
 
 
 <style>
 
+  div {
+    max-width: 960px;
+    margin: 40px auto;
+  }
+
+
+
+
+
 /* from Haikei */
   /* for any Haikei image */
 
diff --git a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte
index 8ae03bf0..124a32c0 100644
--- a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte
@@ -3,33 +3,60 @@
   import Card from '../../pieces/Card.svelte';
   import {onMount} from 'svelte';
   import { push } from 'svelte-spa-router';
+  import Button from '../../pieces/Button.svelte';
 
   let user;
-  let avatar, postVar, newAvatar, fileinput;
+  let avatar, postVar, newAvatar;
+  // postVar means nothing can i get rid of it or do i need it to do something...
   let uploadAvatarSuccess = false;
 
   // tbh i might not need this...
-  let set = {
-    username: '',
-    isChecked: false,
-  }
+  let set = { username: '', tfa: false };
+  let nameTmp;  // annoying...
   const errors = { username: '', checkbox: '', avatar: ''};
-  // let isChecked;
-  let testChecked = true;
 
   onMount( async() => {
     user = await fetch('http://transcendance:8080/api/v2/user')
       .then( (x) => x.json() );
+    // do a .catch? 
 
-    set.isChecked = user.isEnabledTwoFactorAuth;
-  })
+    if (user === undefined) {
+      console.log('User did not load, something more official should prolly happen')
+    }
+    // i don't unerstand why this is necessary but it really doesn't like it otherwise
+    nameTmp = user.username;
+    // console.log(user.username)
+
+    set.tfa = user.isEnabledTwoFactorAuth;
+
+    // tmp
+    console.log('this is what is in the avatar before fetch')
+    console.log(avatar)
+
+    await fetch("http://transcendance:8080/api/v2/user/avatar", {method: "GET"})
+		  .then(response => {return response.blob()})
+		  .then(data => {
+		  	const url = URL.createObjectURL(data);
+		  	avatar = url;
+	  	})
+      .catch(() => errors.avatar = 'Sorry your avatar could not be loaded' );
+
+      // .then(() => errors.avatar = '' ) // unnecessary i think cuz in on mount...
+
+      // tmp
+      console.log('this is what is in the avatar')
+      console.log(avatar)
+      console.log('this is what is in the NEW Avatar')
+      console.log(newAvatar)
+    })
 
   const settingsHandler = async() => {
-
     let valid = false;
 
-    if (set.username === user.username) {
-      errors.username = "You picked the same username, you're supposesd to change it";
+    // I don't really care which i use at this point...
+    // if (set.username === nameTmp) {
+    if (set.username === user.username || set.username.trim() === '') {
+      errors.username = 'Invalid new username';
       valid = false;
     } else {
       errors.username = '';
@@ -43,81 +70,90 @@
             'Content-Type': 'application/json'
           },
           body: JSON.stringify({
-            username: set.username,
-            isEnabledTwoFactorAuth:  set.isChecked,
+            "username": set.username,
+            "isEnabledTwoFactorAuth":  set.tfa
           })
         })
         .then(response => response.json())
-        .then(result => console.log(result));
-
-      push('/profile');
+        // .then((result) => console.log(result))
+        // .then(() => console.log('successful sub of new settings'))
+        .then(() => push('/profile'));
     }
 
   };
 
   const uploadAvatar = async() => {
+    errors.avatar = '';
+    if (newAvatar === undefined) {
+      errors.avatar = 'You need to pick a file.'
+      return;
+    }
 		const data = new FormData();
 		data.append("file", newAvatar[0]);
+    
+    // tmp
 		console.log(data);
+
 		await fetch("http://transcendance:8080/api/v2/user/avatar",
-		{
-			method : 'POST',
-			body : data,
-		})
-		.then(() => uploadAvatarSuccess = true) // for some reason it needs to be a function, i think a TS thing, not a promis otherwise 
-		.catch(() => errors.avatar = "Something went wrong." )
-	}
-
-
-
-
-
+      {
+        method : 'POST',
+        body : data,
+      })
+      .then(() => uploadAvatarSuccess = true ) // for some reason it needs to be a function, i think a TS thing, not a promis otherwise
+      .then(() => push('/profile') )
+      .catch(() => errors.avatar = 'Sorry failed to upload your new Avatar' )
+      // some of this shit is unnecessary...
+      // also i'm not convinced the .catch works...
+    }
 
 </script>
 
 
 <main>
-  <!-- <div class="outter"> -->
-  <h2>Look, you can change stuff</h2>
-  <!-- maybe ues a card? -->
-  <!-- a form? -->
+  <h2>Look! You can change stuff</h2>
+  <div class="cards">
+    <Card>
+      <form on:submit|preventDefault={settingsHandler}>
+        <div class="form-field">
+          <div class="label">New Username</div>
+          <!-- it really hates {user.username} and ${user.username} -->
+          <!-- <input type="text" placeholder="current username: ${user.username}" bind:value={set.username}> -->
+          <input type="text" placeholder="current username: {nameTmp}" bind:value={set.username}>
+          <div class="error">{errors.username}</div>
+        </div>
+        <div class="form-field">
+          <div class="label inline-check">Set Two Factor Authentication</div>
+          <input class="inline-check" type="checkbox" bind:checked={set.tfa}>
+          <div class="error">{errors.checkbox}</div>
+        </div>
+        <Button type="secondary">Update Settings</Button>
+      </form>
+    </Card>
 
-  <Card>
-    <form on:submit|preventDefault={settingsHandler}>
-      <div class="form-field">
-        <div class="label">New Username</div>
-        <!-- <input type="text" placeholder={user.username} bind:value={set.username}> -->
-        <input type="text" placeholder="new username" bind:value={set.username}>
-        <div class="error">{errors.username}</div>
-      </div>
-      <div class="form-field">
-        <div class="label">Set Two Factor Authentication</div>
-        <input type="checkbox" bind:checked={set.isChecked}>
-        <div class="error">{errors.checkbox}</div>
-      </div>
-      <!-- <div class="form-field">
-        <div class="label">Test</div>
-        <input type="checkbox" bind:checked={testChecked}>
-      </div> -->
-      <button>Update Settings</button>
-    </form>
-
-  </Card>
-
-  <Card>
-    <form on:submit|preventDefault={uploadAvatar}>
-      {#if avatar}
+    <Card>
+      <!-- ok so it can't actually show us the file we upload until we've uploaded it... -->
+      <!-- {#if newAvatar !== undefined}
+        <img class="avatar" src={newAvatar} alt="your new avatar"/>
+      {:else if avatar !== undefined}
+        <img class="avatar" src={avatar} alt="your avatar"/>
+      {:else}
+        <p class="error">{errors.avatar}</p>
+      {/if} -->
+      {#if avatar !== undefined}
         <img class="avatar" src={avatar} alt="your avatar"/>
       {/if}
-        <input type="text" bind:value={postVar} placeholder={"choose your file"}/>
-        <br />
-        <input type="file" bind:files={newAvatar}/>
-        <br />
-        <button type="submit">Choose avatar</button>
-    </form>
-  </Card>
-
-  <!-- </div> -->
+      <form on:submit|preventDefault={uploadAvatar}>
+        <!-- not convinced this has any utility. -->
+        <!-- <input type="text" bind:value={postVar} placeholder={"choose your file"}/> -->
+        <div class="form-field">
+          <div class="label">Pick a new Avatar</div>
+          <input type="file" bind:files={newAvatar}/>
+          <div class="error">{errors.avatar}</div>
+        </div>
+        <Button type={newAvatar === undefined ? "primary" : "secondary"}>Upload Avatar</Button>
+      </form>
+    </Card>
+  </div>
 
 </main>
 
@@ -127,10 +163,26 @@
 
   main {
     text-align: center;
+    /* display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 20px; */
   }
 
-  div.outter{
-    max-width: 500px;
+  div.cards{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 20px;
+    /* text-align: center; */
+  }
+
+  img {
+    /* we want the image to display as the same size no matter the resolution */
+    /* max-width: fit-content; */
+    /* max-width: 100px; */
+    width: 60px;
+    /* ok this works but i'm guessing i'll need to add some @media ... */
+    /* padding: 10px; */
+    /* this doesn't work either when nothing loads and it's just the words... don't love that */
   }
 
   form {
@@ -146,6 +198,10 @@
     font-weight: bold;
   }
 
+  .inline-check{
+    display: inline;
+  }
+
 
   .error{
     font-size: 0.8em;
diff --git a/srcs/requirements/svelte/api_front/src/pieces/Button.svelte b/srcs/requirements/svelte/api_front/src/pieces/Button.svelte
new file mode 100644
index 00000000..a7df2e5b
--- /dev/null
+++ b/srcs/requirements/svelte/api_front/src/pieces/Button.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+  // things to make the button more generic, modifable and reusable
+  export let type:string = 'primary';
+  export let flat:boolean = false;
+  export let inverse:boolean = false;
+
+
+</script>
+
+<!-- the class is not conditional as in class:type={some condition}, no it's just the value of type -->
+<!-- but class:flat and class:inverse are conditionally dependant, not a function tho, just a var -->
+<!-- we could do class={flat} but it would just be true or false, what would we do with class:inverse then? -->
+<!-- basically we are naming the classes flat and inverse directly since the var value can't name them -->
+<button class={type} class:flat={flat} class:inverse={inverse} on:click>
+  <slot></slot>
+</button>
+
+<style>
+  button{
+    border: 0;
+    cursor: pointer;
+    border-radius: 6px;
+    padding: 8px 12px;
+    font-weight: bold;
+    box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
+  }
+  .primary{
+    background: #d91b42;
+    color: white;
+  }
+  .secondary{
+    background: #45c496;
+    color: white;
+  }
+  .flat{
+    box-shadow: none;
+  }
+  .primary.inverse{
+    color: #d91b42;
+    background: white;
+    border: 2px solid #d91b42;
+  }
+  .secondary.inverse{
+    color: #45c496;
+    background: white;
+    border: 2px solid #45c496;
+  }
+</style>
\ No newline at end of file
diff --git a/srcs/requirements/svelte/api_front/src/pieces/Header.svelte b/srcs/requirements/svelte/api_front/src/pieces/Header.svelte
index 62a461fb..89346a0d 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/Header.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/Header.svelte
@@ -21,12 +21,10 @@
 </script>
 
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <header>
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
   <img src="/img/potato_logo.png" alt="Potato Pong Logo" on:click={() => (push('/'))}>
-  <!-- /profile or / ? not sure -->
   <h1>Potato Pong</h1>
-
   <nav>
     {#if $location !== '/profile'}
       <button on:click={() => (push('/profile'))}>My Profile</button>
diff --git a/srcs/requirements/svelte/api_front/src/stores/loginStatusStore.js b/srcs/requirements/svelte/api_front/src/stores/loginStatusStore.js
index d89a9d57..4ef25d24 100644
--- a/srcs/requirements/svelte/api_front/src/stores/loginStatusStore.js
+++ b/srcs/requirements/svelte/api_front/src/stores/loginStatusStore.js
@@ -15,11 +15,4 @@ userStore.subscribe((value) => {
   else localStorage.removeItem('42User'); // for logout
 });
 
-
 export const userLogout = () => userStore.set(null);
-
-// ok this is the part where i need to use our API rather than Auth
-// export async function signUp(username, password, email) {
-//   return Auth.signUp(username, password, email)
-//           .then((data) => void store.set(data));
-// }
\ No newline at end of file