From 4cac39e83f1aadb60eccb5963bb82a397c816a6b Mon Sep 17 00:00:00 2001
From: Damillora <damillora@damillora.com>
Date: Fri, 21 May 2021 18:39:00 +0700
Subject: [PATCH] feat: register page

---
 pkg/models/responses.go            |  2 +-
 web/app/src/App.svelte             |  2 +
 web/app/src/api.js                 | 21 +++++++--
 web/app/src/routes/Register.svelte | 68 ++++++++++++++++++++++++++++++
 4 files changed, 89 insertions(+), 4 deletions(-)
 create mode 100644 web/app/src/routes/Register.svelte

diff --git a/pkg/models/responses.go b/pkg/models/responses.go
index 0c02492..cab45ca 100644
--- a/pkg/models/responses.go
+++ b/pkg/models/responses.go
@@ -11,7 +11,7 @@ type ErrorResponse struct {
 
 type UserProfileResponse struct {
 	Email    string `json:"email"`
-	Username string `json:"password"`
+	Username string `json:"username"`
 }
 
 type BlobResponse struct {
diff --git a/web/app/src/App.svelte b/web/app/src/App.svelte
index c8ca6f6..d7d8242 100644
--- a/web/app/src/App.svelte
+++ b/web/app/src/App.svelte
@@ -11,6 +11,7 @@
 	import Upload from "./routes/Upload.svelte";
 	import Edit from "./routes/Edit.svelte";
 	import Tags from "./routes/Tags.svelte";
+	import Register from "./routes/Register.svelte";
 
 	export let url = "";
 	let baseURL = window.BASE_URL;
@@ -27,6 +28,7 @@
 		<Route path="/auth/logout" component={Logout} />
 		<Route path="/upload" component={Upload} />
 		<Route path="/tags" component={Tags} />
+		<Route path="/auth/register" component={Register} />
 	</div>
 </Router>
 
diff --git a/web/app/src/api.js b/web/app/src/api.js
index 8d425c6..3d4273e 100644
--- a/web/app/src/api.js
+++ b/web/app/src/api.js
@@ -21,6 +21,21 @@ export async function login({ username, password }) {
     return response.data;
 }
 
+export async function register({ email, username, password }) {
+    const endpoint = url + "/api/user/register";
+    const response = await axios({
+        url: endpoint,
+        method: "POST",
+        data: JSON.stringify({
+            email,
+            username,
+            password,
+        }),
+    })
+    token.set(response.data.token);
+    return response.data;
+}
+
 export async function getTags() {
     const endpoint = url + "/api/tag";
     const response = await axios.get(endpoint);
@@ -89,7 +104,7 @@ export async function postCreate({ blob_id, source_url, tags }) {
 }
 
 export async function postUpdate(id, { source_url, tags }) {
-    const endpoint = url + "/api/post/"+id;
+    const endpoint = url + "/api/post/" + id;
     const response = await axios({
         url: endpoint,
         method: "POST",
@@ -103,8 +118,8 @@ export async function postUpdate(id, { source_url, tags }) {
     })
     return response.data;
 }
-export async function postDelete({id}) {
-    const endpoint = url + "/api/post/"+id;
+export async function postDelete({ id }) {
+    const endpoint = url + "/api/post/" + id;
     const response = await axios({
         url: endpoint,
         method: "DELETE",
diff --git a/web/app/src/routes/Register.svelte b/web/app/src/routes/Register.svelte
new file mode 100644
index 0000000..83703f2
--- /dev/null
+++ b/web/app/src/routes/Register.svelte
@@ -0,0 +1,68 @@
+<script>
+    import { register } from "../api.js";
+    import { navigate } from "svelte-routing";
+
+    let username = "";
+    let password = "";
+    let email = "";
+
+    const doRegister = async () => {
+        const tokenData = await register({ email, username, password });
+        navigate("/");
+    };
+</script>
+
+<section class="hero is-primary">
+    <div class="hero-body">
+        <p class="title">Register</p>
+    </div>
+</section>
+
+<div class="container">
+    <form on:submit|preventDefault={doRegister}>
+        <div class="field">
+            <label for="email" class="label">Email</label>
+            <div class="control">
+                <input
+                    id="email"
+                    class="input"
+                    type="text"
+                    placeholder="Email"
+                    bind:value={email}
+                    required
+                />
+            </div>
+        </div>
+        <div class="field">
+            <label for="username" class="label">Username</label>
+            <div class="control">
+                <input
+                    id="username"
+                    class="input"
+                    type="text"
+                    placeholder="Username"
+                    bind:value={username}
+                    required
+                />
+            </div>
+        </div>
+        <div class="field">
+            <label for="password" class="label">Password</label>
+            <div class="control">
+                <input
+                    id="password"
+                    class="input"
+                    type="password"
+                    placeholder="Password"
+                    bind:value={password}
+                    required
+                />
+            </div>
+        </div>
+        <div class="field">
+            <div class="control">
+                <button class="button is-link">Login</button>
+            </div>
+        </div>
+    </form>
+</div>