feat: register page

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 {

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>
 

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);

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>