From facdc009c214f56ae0dd1785d7c192e3ff6051f5 Mon Sep 17 00:00:00 2001
From: Hubert Van De Walle <hubv@protonmail.com>
Date: Sun, 12 Apr 2020 14:32:37 +0200
Subject: [PATCH 01/12] Add Signup component

---
 web/src/components/SignupForm.vue | 73 +++++++++++++++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 web/src/components/SignupForm.vue

diff --git a/web/src/components/SignupForm.vue b/web/src/components/SignupForm.vue
new file mode 100644
index 0000000..ec17ca9
--- /dev/null
+++ b/web/src/components/SignupForm.vue
@@ -0,0 +1,73 @@
+<template>
+    <div>
+        <b-form @submit.prevent="handleSubmit">
+            <b-form-group
+                    id="email-group"
+                    label="Email address:"
+                    label-for="email"
+                    description="We'll never share your email with anyone else."
+            >
+                <b-form-input
+                        id="email"
+                        v-model="form.email"
+                        type="email"
+                        required
+                        placeholder="Enter email"
+                ></b-form-input>
+            </b-form-group>
+
+            <b-form-group id="username-group" label="Username:" label-for="username">
+                <b-form-input
+                        id="username"
+                        v-model="form.username"
+                        required
+                        placeholder="Enter a username"
+                ></b-form-input>
+            </b-form-group>
+
+            <b-form-group id="password-group" label="Password:" label-for="password">
+                <b-form-input
+                        id="password"
+                        v-model="form.password"
+                        required
+                        placeholder="Enter a password"
+                ></b-form-input>
+            </b-form-group>
+
+            <b-form-group id="password-confirm-group" label="Confirm password:" label-for="password-confirm">
+                <b-form-input
+                        id="password-confirm"
+                        v-model="form.passwordConfirm"
+                        required
+                        placeholder="Confirm your password"
+                ></b-form-input>
+            </b-form-group>
+
+            <b-button type="submit" variant="primary">Submit</b-button>
+        </b-form>
+        <b-card class="mt-3" header="Form Data Result">
+            <pre class="m-0">{{ form }}</pre>
+        </b-card>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "SignupForm",
+        data() {
+            return {
+                form: {
+                    username: '',
+                    email: '',
+                    password: '',
+                    passwordConfirm: ''
+                }
+            }
+        },
+        methods: {
+            handleSubmit(){
+                
+            }
+        }
+    }
+</script>

From 3cdd4efd36a4a32f37f13294da388dab3460c711 Mon Sep 17 00:00:00 2001
From: Hubert Van De Walle <hubv@protonmail.com>
Date: Sun, 12 Apr 2020 14:33:28 +0200
Subject: [PATCH 02/12] Add Signup View

---
 web/src/views/Signup.vue | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 web/src/views/Signup.vue

diff --git a/web/src/views/Signup.vue b/web/src/views/Signup.vue
new file mode 100644
index 0000000..e3b3c74
--- /dev/null
+++ b/web/src/views/Signup.vue
@@ -0,0 +1,21 @@
+<template>
+    <div id="app">
+        <Navbar/>
+        <b-container class="mt-5">
+            <SignupForm/>
+        </b-container>
+    </div>
+</template>
+
+<script>
+    import Navbar from "@/components/Navbar";
+    import SignupForm from "@/components/SignupForm";
+
+    export default {
+        name: 'Home',
+        components: {
+            Navbar,
+            SignupForm
+        }
+    }
+</script>
\ No newline at end of file

From 719a3a9f4fc3d81db7ea45594283249eb8a72f46 Mon Sep 17 00:00:00 2001
From: Hubert Van De Walle <hubv@protonmail.com>
Date: Sun, 12 Apr 2020 14:33:39 +0200
Subject: [PATCH 03/12] Add Signup route

---
 web/src/router/index.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/web/src/router/index.js b/web/src/router/index.js
index 15b81f4..5f43ce0 100644
--- a/web/src/router/index.js
+++ b/web/src/router/index.js
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../views/Home.vue'
+import Signup from '../views/Signup.vue'
 
 Vue.use(VueRouter)
 
@@ -9,6 +10,11 @@ const routes = [
         path: '/',
         name: 'Home',
         component: Home
+    },
+    {
+        path: '/signup',
+        name: 'Signup',
+        component: Signup
     }
 ]
 

From c1abc028e1122f57aec1c70dddef65f005d2e09f Mon Sep 17 00:00:00 2001
From: Hubert Van De Walle <hubv@protonmail.com>
Date: Sun, 12 Apr 2020 15:03:52 +0200
Subject: [PATCH 04/12] Add Signup validation and feedback

---
 web/src/components/SignupForm.vue | 120 +++++++++++++++++++-----------
 1 file changed, 76 insertions(+), 44 deletions(-)

diff --git a/web/src/components/SignupForm.vue b/web/src/components/SignupForm.vue
index ec17ca9..d747aeb 100644
--- a/web/src/components/SignupForm.vue
+++ b/web/src/components/SignupForm.vue
@@ -1,50 +1,65 @@
 <template>
     <div>
-        <b-form @submit.prevent="handleSubmit">
-            <b-form-group
-                    id="email-group"
-                    label="Email address:"
-                    label-for="email"
-                    description="We'll never share your email with anyone else."
-            >
-                <b-form-input
-                        id="email"
-                        v-model="form.email"
-                        type="email"
-                        required
-                        placeholder="Enter email"
-                ></b-form-input>
-            </b-form-group>
+        <b-card class="mt-3" header="Signup">
+            <b-form @submit.prevent="handleSubmit">
+                <b-form-group
+                        id="email-group"
+                        label="Email address:"
+                        label-for="email"
+                        description="We'll never share your email with anyone else."
+                >
+                    <b-form-input
+                            id="email"
+                            v-model="form.email"
+                            type="email"
+                            required
+                            placeholder="Enter email"
+                    ></b-form-input>
+                </b-form-group>
 
-            <b-form-group id="username-group" label="Username:" label-for="username">
-                <b-form-input
-                        id="username"
-                        v-model="form.username"
-                        required
-                        placeholder="Enter a username"
-                ></b-form-input>
-            </b-form-group>
+                <b-form-group id="username-group" label="Username:" label-for="username">
+                    <b-form-input
+                            id="username"
+                            v-model="form.username"
+                            required
+                            placeholder="Enter a username"
+                            :state="validUsername"
+                    ></b-form-input>
+                    <b-form-invalid-feedback :state="validUsername">
+                        Your username must be at least 5 characters long.
+                    </b-form-invalid-feedback>
+                </b-form-group>
 
-            <b-form-group id="password-group" label="Password:" label-for="password">
-                <b-form-input
-                        id="password"
-                        v-model="form.password"
-                        required
-                        placeholder="Enter a password"
-                ></b-form-input>
-            </b-form-group>
+                <b-form-group id="password-group" label="Password:" label-for="password">
+                    <b-form-input
+                            id="password"
+                            v-model="form.password"
+                            required
+                            placeholder="Enter a password"
+                            :state="validPassword"
+                    ></b-form-input>
+                    <b-form-invalid-feedback :state="validPassword">
+                        Your password must be at least 6 characters long.
+                    </b-form-invalid-feedback>
+                </b-form-group>
 
-            <b-form-group id="password-confirm-group" label="Confirm password:" label-for="password-confirm">
-                <b-form-input
-                        id="password-confirm"
-                        v-model="form.passwordConfirm"
-                        required
-                        placeholder="Confirm your password"
-                ></b-form-input>
-            </b-form-group>
+                <b-form-group id="password-confirm-group" label="Confirm password:" label-for="password-confirm">
+                    <b-form-input
+                            id="password-confirm"
+                            v-model="form.passwordConfirm"
+                            required
+                            placeholder="Confirm your password"
+                            :state="passwordEquals"
+                    ></b-form-input>
+                    <b-form-invalid-feedback :state="passwordEquals">
+                        Your password must be at least 6 characters long.
+                    </b-form-invalid-feedback>
+                </b-form-group>
+
+                <b-button type="submit" variant="primary">Submit</b-button>
+            </b-form>
+        </b-card>
 
-            <b-button type="submit" variant="primary">Submit</b-button>
-        </b-form>
         <b-card class="mt-3" header="Form Data Result">
             <pre class="m-0">{{ form }}</pre>
         </b-card>
@@ -61,12 +76,29 @@
                     email: '',
                     password: '',
                     passwordConfirm: ''
-                }
+                },
+            }
+        },
+        computed: {
+            passwordEquals: function () {
+                return this.form.password === this.form.passwordConfirm
+            },
+            validUsername: function () {
+                return this.form.username.length >= 5
+            },
+            validPassword: function () {
+                return this.form.password.length >= 6
+            },
+            validInput() {
+                return this.validUsername && this.passwordEquals && this.validPassword;
             }
         },
         methods: {
-            handleSubmit(){
-                
+            handleSubmit() {
+                console.log("submitted")
+                if (this.validInput) {
+                    console.log("Valid")
+                }
             }
         }
     }

From 135775cfc6bc9d0d4456a9b23f6e3940aeac592d Mon Sep 17 00:00:00 2001
From: Hubert Van De Walle <hubv@protonmail.com>
Date: Sun, 12 Apr 2020 15:06:26 +0200
Subject: [PATCH 05/12] Fix a few things with the form

---
 web/src/components/SignupForm.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/web/src/components/SignupForm.vue b/web/src/components/SignupForm.vue
index d747aeb..c4f9881 100644
--- a/web/src/components/SignupForm.vue
+++ b/web/src/components/SignupForm.vue
@@ -37,6 +37,7 @@
                             required
                             placeholder="Enter a password"
                             :state="validPassword"
+                            type="password"
                     ></b-form-input>
                     <b-form-invalid-feedback :state="validPassword">
                         Your password must be at least 6 characters long.
@@ -50,9 +51,10 @@
                             required
                             placeholder="Confirm your password"
                             :state="passwordEquals"
+                            type="password"
                     ></b-form-input>
                     <b-form-invalid-feedback :state="passwordEquals">
-                        Your password must be at least 6 characters long.
+                        Both passwords must be equals.
                     </b-form-invalid-feedback>
                 </b-form-group>
 
@@ -95,7 +97,6 @@
         },
         methods: {
             handleSubmit() {
-                console.log("submitted")
                 if (this.validInput) {
                     console.log("Valid")
                 }

From aef5da0f850097d8d7e2430e45b81e40e2d11d7a Mon Sep 17 00:00:00 2001
From: Hubert Van De Walle <hubv@protonmail.com>
Date: Sun, 12 Apr 2020 15:17:38 +0200
Subject: [PATCH 06/12] Add axios

---
 web/package.json |  1 +
 web/yarn.lock    | 21 +++++++++++++++++++++
 2 files changed, 22 insertions(+)

diff --git a/web/package.json b/web/package.json
index 197ac43..a1cb737 100644
--- a/web/package.json
+++ b/web/package.json
@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.19.2",
     "bootstrap-vue": "^2.11.0",
     "bootswatch": "^4.4.1",
     "core-js": "^3.6.4",
diff --git a/web/yarn.lock b/web/yarn.lock
index 0713e8f..cee04a9 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -1580,6 +1580,13 @@ aws4@^1.8.0:
   resolved "https://registry.npm.taobao.org/aws4/download/aws4-1.9.1.tgz?cache=0&sync_timestamp=1578958168482&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Faws4%2Fdownload%2Faws4-1.9.1.tgz#7e33d8f7d449b3f673cd72deb9abdc552dbe528e"
   integrity sha1-fjPY99RJs/ZzzXLeuavcVS2+Uo4=
 
+axios@^0.19.2:
+  version "0.19.2"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.2.tgz#3ea36c5d8818d0d5f8a8a97a6d36b86cdc00cb27"
+  integrity sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==
+  dependencies:
+    follow-redirects "1.5.10"
+
 babel-eslint@^10.1.0:
   version "10.1.0"
   resolved "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232"
@@ -2706,6 +2713,13 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
   dependencies:
     ms "2.0.0"
 
+debug@=3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
+  dependencies:
+    ms "2.0.0"
+
 debug@^3.0.0, debug@^3.1.1, debug@^3.2.5:
   version "3.2.6"
   resolved "https://registry.npm.taobao.org/debug/download/debug-3.2.6.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
@@ -3614,6 +3628,13 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+follow-redirects@1.5.10:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
+  integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
+  dependencies:
+    debug "=3.1.0"
+
 follow-redirects@^1.0.0:
   version "1.11.0"
   resolved "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.11.0.tgz#afa14f08ba12a52963140fe43212658897bc0ecb"

From 03a190ddd59a94d99bb061d594ba5ebb3fc2d57f Mon Sep 17 00:00:00 2001
From: Hubert Van De Walle <hubv@protonmail.com>
Date: Sun, 12 Apr 2020 15:31:17 +0200
Subject: [PATCH 07/12] Add health check controller

---
 api/src/controllers/Controllers.kt           |  1 +
 api/src/controllers/HealthCheckController.kt | 21 ++++++++++++++++++++
 2 files changed, 22 insertions(+)
 create mode 100644 api/src/controllers/HealthCheckController.kt

diff --git a/api/src/controllers/Controllers.kt b/api/src/controllers/Controllers.kt
index 20003b9..b46c5b0 100644
--- a/api/src/controllers/Controllers.kt
+++ b/api/src/controllers/Controllers.kt
@@ -13,4 +13,5 @@ val controllerModule = Kodein.Module(name = "Controller") {
     bind() from setBinding<KodeinController>()
 
     bind<KodeinController>().inSet() with singleton { UserController(this.kodein) }
+    bind<KodeinController>().inSet() with singleton { HealthCheckController(this.kodein) }
 }
\ No newline at end of file
diff --git a/api/src/controllers/HealthCheckController.kt b/api/src/controllers/HealthCheckController.kt
new file mode 100644
index 0000000..311ece3
--- /dev/null
+++ b/api/src/controllers/HealthCheckController.kt
@@ -0,0 +1,21 @@
+package be.vandewalleh.controllers
+
+import io.ktor.application.call
+import io.ktor.locations.Location
+import io.ktor.locations.get
+import io.ktor.response.respondText
+import io.ktor.routing.Routing
+import org.kodein.di.Kodein
+
+class HealthCheckController(kodein: Kodein) : KodeinController(kodein) {
+    override fun Routing.registerRoutes() {
+        get<Routes.Ping> {
+            call.respondText("pong")
+        }
+    }
+
+    object Routes {
+        @Location("/ping")
+        class Ping
+    }
+}
\ No newline at end of file

From 5b079999bb7ba81e3405862d7108033f13fd1e30 Mon Sep 17 00:00:00 2001
From: Hubert Van De Walle <hubv@protonmail.com>
Date: Sun, 12 Apr 2020 15:50:16 +0200
Subject: [PATCH 08/12] Add ContentType header to CORS feature

---
 api/src/features/CorsFeature.kt | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/api/src/features/CorsFeature.kt b/api/src/features/CorsFeature.kt
index 55c4d4e..04484be 100644
--- a/api/src/features/CorsFeature.kt
+++ b/api/src/features/CorsFeature.kt
@@ -3,9 +3,11 @@ package be.vandewalleh.features
 import io.ktor.application.Application
 import io.ktor.application.install
 import io.ktor.features.CORS
+import io.ktor.http.HttpHeaders
 
 fun Application.corsFeature() {
     install(CORS) {
         anyHost()
+        header(HttpHeaders.ContentType)
     }
 }
\ No newline at end of file

From c95b335e3c52bdaa638756b89b9e21b088b244c6 Mon Sep 17 00:00:00 2001
From: Hubert Van De Walle <hubv@protonmail.com>
Date: Sun, 12 Apr 2020 15:55:27 +0200
Subject: [PATCH 09/12] Add axios api

---
 web/src/api/index.js | 9 +++++++++
 web/src/main.js      | 3 +++
 2 files changed, 12 insertions(+)
 create mode 100644 web/src/api/index.js

diff --git a/web/src/api/index.js b/web/src/api/index.js
new file mode 100644
index 0000000..e8c1751
--- /dev/null
+++ b/web/src/api/index.js
@@ -0,0 +1,9 @@
+import axios from 'axios'
+
+export default axios.create({
+    baseURL: 'http://localhost:8081',
+    timeout: 4000,
+    headers: {
+        'Content-Type': 'application/json'
+    }
+})
diff --git a/web/src/main.js b/web/src/main.js
index ef74ccd..46b46c9 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -2,6 +2,8 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import Api from './api'
+
 import BootstrapVue from 'bootstrap-vue'
 
 import 'bootswatch/dist/minty/bootstrap.css'
@@ -15,5 +17,6 @@ Vue.config.productionTip = false
 new Vue({
   router,
   store,
+  Api,
   render: h => h(App)
 }).$mount('#app')
\ No newline at end of file

From 214f64dd9493216feefe4157a00a84999da141c8 Mon Sep 17 00:00:00 2001
From: Hubert Van De Walle <hubv@protonmail.com>
Date: Sun, 12 Apr 2020 15:56:37 +0200
Subject: [PATCH 10/12] Add post /signup when creating account

---
 web/src/components/SignupForm.vue | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/web/src/components/SignupForm.vue b/web/src/components/SignupForm.vue
index c4f9881..8ab569a 100644
--- a/web/src/components/SignupForm.vue
+++ b/web/src/components/SignupForm.vue
@@ -61,14 +61,12 @@
                 <b-button type="submit" variant="primary">Submit</b-button>
             </b-form>
         </b-card>
-
-        <b-card class="mt-3" header="Form Data Result">
-            <pre class="m-0">{{ form }}</pre>
-        </b-card>
     </div>
 </template>
 
 <script>
+    import Api from '@/api'
+
     export default {
         name: "SignupForm",
         data() {
@@ -98,8 +96,15 @@
         methods: {
             handleSubmit() {
                 if (this.validInput) {
-                    console.log("Valid")
+                    this.signup()
                 }
+            },
+            signup() {
+                Api.post('/signup', {
+                    username: this.form.username,
+                    email: this.form.email,
+                    password: this.form.password
+                }).then(response => console.log(response.data))
             }
         }
     }

From d5f014b3d58c7238f927e86357098b1afeba5db0 Mon Sep 17 00:00:00 2001
From: Hubert Van De Walle <hubv@protonmail.com>
Date: Sun, 12 Apr 2020 16:06:59 +0200
Subject: [PATCH 11/12] Add ExistingUser handling

---
 api/src/controllers/UserController.kt | 21 ++++++++++++---------
 api/src/errors/Errors.kt              |  3 ++-
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/api/src/controllers/UserController.kt b/api/src/controllers/UserController.kt
index df03540..f8800f8 100644
--- a/api/src/controllers/UserController.kt
+++ b/api/src/controllers/UserController.kt
@@ -13,10 +13,7 @@ import io.ktor.request.receive
 import io.ktor.response.respond
 import io.ktor.routing.Routing
 import me.liuwj.ktorm.database.Database
-import me.liuwj.ktorm.dsl.eq
-import me.liuwj.ktorm.dsl.from
-import me.liuwj.ktorm.dsl.select
-import me.liuwj.ktorm.dsl.where
+import me.liuwj.ktorm.dsl.*
 import me.liuwj.ktorm.entity.add
 import me.liuwj.ktorm.entity.sequenceOf
 import org.kodein.di.Kodein
@@ -39,11 +36,11 @@ class UserController(kodein: Kodein) : KodeinController(kodein) {
                 .where { Users.username eq credential.username }
                 .map { row -> row[Users.email]!! to row[Users.password]!! }
                 .firstOrNull()
-                ?: return@post call.respond(HttpStatusCode.BadRequest, ApiError.InvalidCredentialError())
+                ?: return@post call.respond(HttpStatusCode.BadRequest, ApiError.InvalidCredentialError)
 
 
             if (!BCrypt.checkpw(credential.password, password)) {
-                return@post call.respond(HttpStatusCode.BadRequest, ApiError.InvalidCredentialError())
+                return@post call.respond(HttpStatusCode.BadRequest, ApiError.InvalidCredentialError)
             }
 
             return@post call.respond(Response(simpleJwt.sign(email)))
@@ -54,8 +51,14 @@ class UserController(kodein: Kodein) : KodeinController(kodein) {
 
             val user = call.receive<SignUpInfo>()
 
-            // TODO check if user does not already exists
-            // db won't let you insert it anyway
+            val exists = db.from(Users)
+                .select()
+                .where { (Users.username eq user.username) or (Users.email eq user.email) }
+                .any()
+
+            if (exists) {
+                return@post call.respond(HttpStatusCode.Conflict, ApiError.ExistingUserError)
+            }
 
             val hashedPassword = BCrypt.hashpw(user.password, BCrypt.gensalt())
 
@@ -68,7 +71,7 @@ class UserController(kodein: Kodein) : KodeinController(kodein) {
 
             db.sequenceOf(Users).add(newUser)
 
-            call.respond(HttpStatusCode.Created, Response("User created successfully"))
+            return@post call.respond(HttpStatusCode.Created, Response("User created successfully"))
         }
     }
 
diff --git a/api/src/errors/Errors.kt b/api/src/errors/Errors.kt
index 8363139..8f6af26 100644
--- a/api/src/errors/Errors.kt
+++ b/api/src/errors/Errors.kt
@@ -1,5 +1,6 @@
 package be.vandewalleh.errors
 
 sealed class ApiError(val message: String){
-    class InvalidCredentialError : ApiError("Invalid credentials")
+    object InvalidCredentialError : ApiError("Invalid credentials")
+    object ExistingUserError : ApiError("User already exists")
 }

From e1a421c9c29b47a7473a7f2e7c4cded1cab972c6 Mon Sep 17 00:00:00 2001
From: Hubert Van De Walle <hubv@protonmail.com>
Date: Sun, 12 Apr 2020 16:34:42 +0200
Subject: [PATCH 12/12] Add api error handling while creating an account

---
 web/src/components/SignupForm.vue | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/web/src/components/SignupForm.vue b/web/src/components/SignupForm.vue
index 8ab569a..6227c72 100644
--- a/web/src/components/SignupForm.vue
+++ b/web/src/components/SignupForm.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <b-card class="mt-3" header="Signup">
+        <b-card class="mt-3" header="Create an account">
             <b-form @submit.prevent="handleSubmit">
                 <b-form-group
                         id="email-group"
@@ -60,6 +60,14 @@
 
                 <b-button type="submit" variant="primary">Submit</b-button>
             </b-form>
+
+            <b-alert :show="exists" variant="danger" dismissible class="mt-3">
+                A user with that username or email already exists
+            </b-alert>
+            <b-alert :show="error" variant="danger" dismissible class="mt-3">
+                An error occurred while attempting to create your account
+            </b-alert>
+
         </b-card>
     </div>
 </template>
@@ -77,6 +85,8 @@
                     password: '',
                     passwordConfirm: ''
                 },
+                error: false,
+                exists: false,
             }
         },
         computed: {
@@ -96,6 +106,8 @@
         methods: {
             handleSubmit() {
                 if (this.validInput) {
+                    this.error = false
+                    this.exists = false
                     this.signup()
                 }
             },
@@ -104,7 +116,14 @@
                     username: this.form.username,
                     email: this.form.email,
                     password: this.form.password
-                }).then(response => console.log(response.data))
+                })
+                    .then(response => console.log(response.data))
+                    .catch(error => {
+                        if (error.response && error.response.status === 409)
+                            this.exists = true
+                        else
+                            this.error = true
+                    })
             }
         }
     }