user login WIP

www/src/App.svelte

@@ -1,8 +1,8 @@
 <script>
   import 'papercss/dist/paper.min.css';
-
   import { Router, Route, Link } from 'svelte-navigator';
-  import Test3D from './components/test3D.svelte';
+
+  import Test3D from './pages/test3D.svelte';
   import Login from './pages/Login.svelte';
 </script>
 

www/src/functions/request.ts

@@ -0,0 +1,37 @@
+enum Methods {
+  'GET' = 'GET',
+  'POST' = 'POST',
+  'PUT' = 'PUT',
+}
+
+export async function get<T>(route: string): Promise<T | null> {
+  return request<T>('GET', route);
+}
+
+export async function post<T>(route: string, data: unknown): Promise<T | null> {
+  return request<T>('POST', route, data);
+}
+
+export async function put<T>(route: string, data: unknown): Promise<T | null> {
+  return request<T>('PUT', route, data);
+}
+
+async function request<T>(
+  method: keyof typeof Methods,
+  route: string,
+  data?: unknown,
+): Promise<T | null> {
+  const response = await fetch(`${process.env.APIURL}${route}`, {
+    headers: {
+      'content-type': 'application/json',
+    },
+    mode: process.env.CORS ? 'cors' : 'same-origin',
+    method: method,
+    body: data ? JSON.stringify(data) : null,
+  });
+
+  if (response.ok) {
+    return response.json() as T;
+  }
+  return null;
+}

www/src/functions/user.ts

@@ -0,0 +1,7 @@
+import type { LoginUserBody, UserInfo } from '@core';
+import { post } from './request';
+
+export async function login(raw: LoginUserBody) {
+  const user = await post<UserInfo>('/user/login', raw);
+  console.debug(user);
+}

www/src/pages/Login.svelte

@@ -1,14 +1,35 @@
 <script lang="ts">
+  import type { LoginUserBody } from '@core';
   import { Form, Input, Button } from 'spaper';
+  import { login } from '../functions/user';
+
+  const user: LoginUserBody = {
+    username: '',
+    password: '',
+  };
 </script>
 
 <main>
   <div class="row" id="container">
-    <Form class="">
-      <Input placeholder="email" class="row" />
-      <Input placeholder="password" type="password" class="row" />
+    <Form>
+      <Input
+        placeholder="username"
+        class="row col-8"
+        bind:value={user.username}
+      />
+      <Input
+        placeholder="password"
+        type="password"
+        class="row col-8"
+        bind:value={user.password}
+      />
 
-      <Button type="secondary" class="row" id="button">Sign in</Button>
+      <Button
+        type="secondary"
+        class="row sm-2 col-4"
+        block
+        on:click={() => login(user)}>Sign in</Button
+      >
     </Form>
   </div>
 </main>
@@ -17,9 +38,6 @@
   main {
     height: 100%;
   }
-  #button {
-    display: flex;
-  }
   #container {
     height: inherit;
     display: flex;

www/src/pages/test3D.svelte

@@ -3,52 +3,49 @@
   import { beforeUpdate, afterUpdate } from 'svelte';
   import * as Three from 'three';
 
-//#region variables
+  //#region variables
   let innerWidth: number = 0;
   let innerHeight: number = 0;
   let maxInnerWidth: number = 0;
   let maxInnerHeight: number = 0;
 
   let portrait: boolean = true;
-  let focalLength: number = (540/Math.atan(70*Math.PI / 180));
+  let focalLength: number = 540 / Math.atan((70 * Math.PI) / 180);
   let fov = 75;
   //let baseHorizontalFOV: number = 2.0*Math.atan(baseAspectRation*Math.tan(baseVerticalFOV*0.5));
-//#endregion
+  //#endregion
 
-
-//#region functions
-  function updateVerticalFOV(){
-    fov = (180/Math.PI)*Math.tan(innerHeight/(focalLength*2));
+  //#region functions
+  function updateVerticalFOV() {
+    fov = (180 / Math.PI) * Math.tan(innerHeight / (focalLength * 2));
   }
 
-
-  function resetMaxDimensions(){
+  function resetMaxDimensions() {
     maxInnerWidth = 0;
     maxInnerHeight = 0;
   }
 
-  function updateMaxInnerDimensions(){
-    if(maxInnerWidth < innerWidth){
+  function updateMaxInnerDimensions() {
+    if (maxInnerWidth < innerWidth) {
       maxInnerWidth = innerWidth;
     }
-    if(maxInnerHeight < innerHeight){
+    if (maxInnerHeight < innerHeight) {
       maxInnerHeight = innerHeight;
     }
   }
 
-  function checkOrientation(oldPortrait: boolean){
-    if (innerWidth > innerHeight){
+  function checkOrientation(oldPortrait: boolean) {
+    if (innerWidth > innerHeight) {
       portrait = false;
     } else {
       portrait = true;
     }
 
-    if (oldPortrait != portrait){
+    if (oldPortrait != portrait) {
       resetMaxDimensions();
     }
   }
-//#endregion
-
+  //#endregion
 
   let scene: Three.Scene = new Three.Scene();
   let camera: Three.PerspectiveCamera = new Three.PerspectiveCamera(
@@ -97,7 +94,7 @@
     updateVerticalFOV();
 
     camera.aspect = innerWidth / innerHeight;
-    camera.fov = fov
+    camera.fov = fov;
     camera.setViewOffset(
       window.innerWidth,
       window.innerHeight,
@@ -111,9 +108,7 @@
     //renderer.setClearColor(0x000000, (innerHeight/(maxInnerHeight))/2 + 0.5);
   });
 
-  afterUpdate(() => {
-
-  });
+  afterUpdate(() => {});
 </script>
 
 <svelte:window bind:innerWidth bind:innerHeight />
@@ -130,6 +125,5 @@
   }
 
   body {
-    
   }
 </style>