Merge pull request 'feature/add-vue-frontend' (#3) from feature/add-vue-frontend into develop

Reviewed-on: #3

.gitignore

@@ -1 +1,2 @@
 /Frontend/public/images/*
+/Frontend/vue/node_modules

Api/Auth/Login.go

@@ -2,11 +2,13 @@ package Auth
 
 import (
 	"encoding/json"
+	"log"
 	"net/http"
 	"time"
 
 	"git.tovijaeschke.xyz/tovi/SuddenImpactRecords/Database"
 	"git.tovijaeschke.xyz/tovi/SuddenImpactRecords/Models"
+	"git.tovijaeschke.xyz/tovi/SuddenImpactRecords/Util"
 
 	"github.com/gofrs/uuid"
 )
@@ -22,6 +24,7 @@ func Login(w http.ResponseWriter, r *http.Request) {
 		userData     Models.User
 		sessionToken uuid.UUID
 		expiresAt    time.Time
+		returnJson   []byte
 		err          error
 	)
 
@@ -62,5 +65,15 @@ func Login(w http.ResponseWriter, r *http.Request) {
 		Expires: expiresAt,
 	})
 
+	userData.Password = ""
+
+	returnJson, err = json.MarshalIndent(userData, "", "  ")
+	if err != nil {
+		log.Printf("An error occured: %s\n", err.Error())
+		Util.JsonReturn(w, 500, "An error occured")
+		return
+	}
+
 	w.WriteHeader(http.StatusOK)
+	w.Write(returnJson)
 }

Api/Auth/Me.go

@@ -0,0 +1,36 @@
+package Auth
+
+import (
+	"encoding/json"
+	"log"
+	"net/http"
+
+	"git.tovijaeschke.xyz/tovi/SuddenImpactRecords/Models"
+	"git.tovijaeschke.xyz/tovi/SuddenImpactRecords/Util"
+)
+
+func Me(w http.ResponseWriter, r *http.Request) {
+	var (
+		userData   Models.User
+		returnJson []byte
+		err        error
+	)
+
+	userData, err = CheckCookieCurrentUser(w, r)
+	if err != nil {
+		Util.JsonReturn(w, 401, "NO ERROR")
+		return
+	}
+
+	returnJson, err = json.MarshalIndent(userData, "", "  ")
+	if err != nil {
+		log.Printf("An error occured: %s\n", err.Error())
+		Util.JsonReturn(w, 500, "An error occured")
+		return
+	}
+
+	// Return updated json
+	w.WriteHeader(http.StatusOK)
+	w.Write(returnJson)
+
+}

Api/Auth/Session.go

@@ -5,8 +5,8 @@ import (
 	"net/http"
 	"time"
 
+	"git.tovijaeschke.xyz/tovi/SuddenImpactRecords/Database"
 	"git.tovijaeschke.xyz/tovi/SuddenImpactRecords/Models"
-	"git.tovijaeschke.xyz/tovi/SuddenImpactRecords/Util"
 )
 
 var (
@@ -66,7 +66,7 @@ func CheckCookieCurrentUser(w http.ResponseWriter, r *http.Request) (Models.User
 		return userData, err
 	}
 
-	userData, err = Util.GetUserById(w, r)
+	userData, err = Database.GetUserById(userSession.UserID)
 	if err != nil {
 		return userData, err
 	}

Api/JsonSerialization/DeserializeUserJson.go

@@ -13,7 +13,7 @@ import (
 
 func DeserializeUser(data []byte, allowMissing []string, allowAllMissing bool) (Models.User, error) {
 	var (
-		postData                 Models.User            = Models.User{}
+		userData                 Models.User            = Models.User{}
 		jsonStructureTest        map[string]interface{} = make(map[string]interface{})
 		jsonStructureTestResults *schema.CompareResults
 		field                    schema.FieldMissing
@@ -26,18 +26,18 @@ func DeserializeUser(data []byte, allowMissing []string, allowAllMissing bool) (
 	// Verify the JSON has the correct structure
 	json.Unmarshal(data, &jsonStructureTest)
 	jsonStructureTestResults, err = schema.CompareMapToStruct(
-		&postData,
+		&userData,
 		jsonStructureTest,
 		&schema.CompareOpts{
 			ConvertibleFunc: CanConvert,
 			TypeNameFunc:    schema.DetailedTypeName,
 		})
 	if err != nil {
-		return postData, err
+		return userData, err
 	}
 
 	if len(jsonStructureTestResults.MismatchedFields) > 0 {
-		return postData, errors.New(fmt.Sprintf(
+		return userData, errors.New(fmt.Sprintf(
 			"MismatchedFields found when deserializing data: %s",
 			jsonStructureTestResults.Errors().Error(),
 		))
@@ -60,17 +60,17 @@ func DeserializeUser(data []byte, allowMissing []string, allowAllMissing bool) (
 			missingFields = append(missingFields, field.String())
 		}
 
-		return postData, errors.New(fmt.Sprintf(
+		return userData, errors.New(fmt.Sprintf(
 			"MissingFields found when deserializing data: %s",
 			strings.Join(missingFields, ", "),
 		))
 	}
 
 	// Deserialize the JSON into the struct
-	err = json.Unmarshal(data, &postData)
+	err = json.Unmarshal(data, &userData)
 	if err != nil {
-		return postData, err
+		return userData, err
 	}
 
-	return postData, err
+	return userData, err
 }

Api/Routes.go

@@ -8,40 +8,39 @@ import (
 	"github.com/gorilla/mux"
 )
 
-func InitApiEndpoints() *mux.Router {
+func InitApiEndpoints(router *mux.Router) {
 	var (
-		router *mux.Router
+		api *mux.Router
 	)
 
 	log.Println("Initializing API routes...")
 
-	router = mux.NewRouter()
+	api = router.PathPrefix("/api/v1/").Subrouter()
 
 	// Define routes for posts api
-	router.HandleFunc("/post", getPosts).Methods("GET")
-	router.HandleFunc("/post", createPost).Methods("POST")
-	router.HandleFunc("/post/{postID}", getPost).Methods("GET")
-	router.HandleFunc("/post/{postID}", updatePost).Methods("PUT")
-	router.HandleFunc("/post/{postID}", deletePost).Methods("DELETE")
+	api.HandleFunc("/post", getPosts).Methods("GET")
+	api.HandleFunc("/post", createPost).Methods("POST")
+	api.HandleFunc("/post/{postID}", getPost).Methods("GET")
+	api.HandleFunc("/post/{postID}", updatePost).Methods("PUT")
+	api.HandleFunc("/post/{postID}", deletePost).Methods("DELETE")
 
-	router.HandleFunc("/frontPagePosts", getFrontPagePosts).Methods("GET")
+	api.HandleFunc("/frontPagePosts", getFrontPagePosts).Methods("GET")
 
-	router.HandleFunc("/post/{postID}/image", createPostImage).Methods("POST")
-	router.HandleFunc("/post/{postID}/image/{imageID}", deletePostImage).Methods("DELETE")
+	api.HandleFunc("/post/{postID}/image", createPostImage).Methods("POST")
+	api.HandleFunc("/post/{postID}/image/{imageID}", deletePostImage).Methods("DELETE")
 
 	// Define routes for users api
-	router.HandleFunc("/admin/user", getUsers).Methods("GET")
-	router.HandleFunc("/admin/user", createUser).Methods("POST")
-	router.HandleFunc("/admin/user/{userID}", getUser).Methods("GET")
-	router.HandleFunc("/admin/user/{userID}", updatePost).Methods("PUT")
-	router.HandleFunc("/admin/user/{userID}", deletePost).Methods("DELETE")
-	router.HandleFunc("/admin/user/{userID}/update-password", Auth.UpdatePassword).Methods("PUT")
+	api.HandleFunc("/admin/user", getUsers).Methods("GET")
+	api.HandleFunc("/admin/user", createUser).Methods("POST")
+	api.HandleFunc("/admin/user/{userID}", getUser).Methods("GET")
+	api.HandleFunc("/admin/user/{userID}", updateUser).Methods("PUT")
+	api.HandleFunc("/admin/user/{userID}", deletePost).Methods("DELETE")
+	api.HandleFunc("/admin/user/{userID}/update-password", Auth.UpdatePassword).Methods("PUT")
 
 	// Define routes for authentication
-	router.HandleFunc("/admin/login", Auth.Login).Methods("POST")
-	router.HandleFunc("/admin/logout", Auth.Logout).Methods("GET")
+	api.HandleFunc("/admin/login", Auth.Login).Methods("POST")
+	api.HandleFunc("/admin/logout", Auth.Logout).Methods("GET")
+	api.HandleFunc("/admin/me", Auth.Me).Methods("GET")
 
 	//router.PathPrefix("/").Handler(http.StripPrefix("/images/", http.FileServer(http.Dir("./uploads"))))
-
-	return router
 }

Api/Users.go

@@ -21,6 +21,7 @@ func getUsers(w http.ResponseWriter, r *http.Request) {
 		returnJson     []byte
 		values         url.Values
 		page, pageSize int
+		search         string
 		err            error
 	)
 
@@ -39,19 +40,27 @@ func getUsers(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	page, err = strconv.Atoi(values.Get("pageSize"))
+	pageSize, err = strconv.Atoi(values.Get("pageSize"))
 	if err != nil {
 		log.Println("Could not parse pageSize url argument")
 		Util.JsonReturn(w, 500, "An error occured")
 		return
 	}
-	users, err = Database.GetUsers(page, pageSize)
+
+	search = values.Get("search")
+
+	users, err = Database.GetUsers(page, pageSize, search)
 	if err != nil {
 		log.Printf("An error occured: %s\n", err.Error())
 		Util.JsonReturn(w, 500, "An error occured")
 		return
 	}
 
+	if len(users) == 0 {
+		Util.JsonReturn(w, 404, "No more data")
+		return
+	}
+
 	returnJson, err = json.MarshalIndent(users, "", "  ")
 	if err != nil {
 		Util.JsonReturn(w, 500, "An error occured")
@@ -96,6 +105,7 @@ func createUser(w http.ResponseWriter, r *http.Request) {
 	var (
 		userData    Models.User
 		requestBody []byte
+		returnJson  []byte
 		err         error
 	)
 
@@ -116,8 +126,17 @@ func createUser(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	if userData.FirstName == "" ||
+		userData.LastName == "" ||
+		userData.Email == "" ||
+		userData.Password == "" ||
+		userData.ConfirmPassword == "" {
+		Util.JsonReturn(w, http.StatusUnprocessableEntity, "Invalid data")
+		return
+	}
+
 	err = Database.CheckUniqueEmail(userData.Email)
-	if err != nil {
+	if err != nil || !Util.IsEmailValid(userData.Email) {
 		Util.JsonReturn(w, 405, "invalid_email")
 		return
 	}
@@ -139,8 +158,15 @@ func createUser(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	returnJson, err = json.MarshalIndent(userData, "", "  ")
+	if err != nil {
+		Util.JsonReturn(w, 500, "An error occured")
+		return
+	}
+
 	// Return updated json
 	w.WriteHeader(http.StatusOK)
+	w.Write(returnJson)
 }
 
 func updateUser(w http.ResponseWriter, r *http.Request) {

Api/Users_test.go

@@ -190,7 +190,7 @@ func Test_getUsers(t *testing.T) {
 		createTestUser(true)
 	}
 
-	req, err := http.NewRequest("GET", ts.URL+"/user?page=1&pageSize=10", nil)
+	req, err := http.NewRequest("GET", ts.URL+"/user?page=0&pageSize=10", nil)
 
 	if err != nil {
 		t.Errorf("Expected nil, recieved %s", err.Error())

Database/Seeder/Seed.go

@@ -0,0 +1,8 @@
+package Seeder
+
+import "log"
+
+func Seed() {
+	log.Println("Seeding users...")
+	SeedUsers()
+}

Database/Seeder/UserSeeder.go

@@ -0,0 +1,97 @@
+package Seeder
+
+import (
+	"fmt"
+	"math/rand"
+	"time"
+
+	"git.tovijaeschke.xyz/tovi/SuddenImpactRecords/Api/Auth"
+	"git.tovijaeschke.xyz/tovi/SuddenImpactRecords/Database"
+	"git.tovijaeschke.xyz/tovi/SuddenImpactRecords/Models"
+	"git.tovijaeschke.xyz/tovi/SuddenImpactRecords/Util"
+)
+
+var (
+	firstNames = []string{
+		"John",
+		"Mark",
+		"Annie",
+		"Hannah",
+		"Shane",
+		"Joe",
+		"Katara",
+		"Zuko",
+		"Aang",
+		"Sokka",
+	}
+	lastNames = []string{
+		"Smith",
+		"Johnson",
+		"Williams",
+		"Brown",
+		"Jones",
+		"Garcia",
+		"Miller",
+		"Davis",
+		"Lopez",
+	}
+)
+
+func randName(last bool) string {
+	var (
+		choices []string
+	)
+
+	choices = firstNames
+	if last {
+		choices = lastNames
+	}
+
+	return choices[rand.Intn(len(choices))]
+}
+
+func createUser() (Models.User, error) {
+	var (
+		userData            Models.User
+		now                 time.Time
+		firstName, lastName string
+		email, password     string
+		err                 error
+	)
+	now = time.Now()
+
+	firstName = randName(false)
+	lastName = randName(true)
+
+	email = fmt.Sprintf("%s%s+%s@email.com", firstName, lastName, Util.RandomString(4))
+
+	password, err = Auth.HashPassword("password")
+	if err != nil {
+		return Models.User{}, err
+	}
+
+	userData = Models.User{
+		Email:     email,
+		Password:  password,
+		LastLogin: &now,
+		FirstName: firstName,
+		LastName:  lastName,
+	}
+
+	err = Database.CreateUser(&userData)
+	return userData, err
+}
+
+func SeedUsers() {
+	var (
+		i   int
+		err error
+	)
+
+	for i = 0; i <= 20; i++ {
+		_, err = createUser()
+		if err != nil {
+			panic(err)
+		}
+	}
+}

Database/Users.go

@@ -2,6 +2,7 @@ package Database
 
 import (
 	"errors"
+	"fmt"
 
 	"git.tovijaeschke.xyz/tovi/SuddenImpactRecords/Models"
 
@@ -37,17 +38,15 @@ func GetUserByEmail(email string) (Models.User, error) {
 	return userData, err
 }
 
-func GetUsers(page, pageSize int) ([]Models.User, error) {
+func GetUsers(page, pageSize int, search string) ([]Models.User, error) {
 	var (
-		users []Models.User
-		i     int
-		err   error
+		users  []Models.User
+		query  *gorm.DB
+		offset int
+		i      int
+		err    error
 	)
 
-	if page == 0 {
-		page = 1
-	}
-
 	switch {
 	case pageSize > 100:
 		pageSize = 100
@@ -55,8 +54,22 @@ func GetUsers(page, pageSize int) ([]Models.User, error) {
 		pageSize = 10
 	}
 
-	err = DB.Offset(page).
+	offset = page * pageSize
+
+	search = fmt.Sprintf("%%%s%%", search)
+
+	query = DB.Model(Models.User{}).
+		Offset(offset).
 		Limit(pageSize).
+		Order("created_at desc")
+
+	if search != "" {
+		query = query.
+			Where("CONCAT_WS(' ', first_name, last_name) LIKE ?", search).
+			Or("email LIKE ?", search)
+	}
+
+	err = query.
 		Find(&users).
 		Error
 
@@ -108,8 +121,7 @@ func UpdateUser(id string, userData *Models.User) error {
 	var (
 		err error
 	)
-	err = DB.Model(&Models.User{}).
-		Select("*").
+	err = DB.Model(&userData).
 		Omit("id", "created_at", "updated_at", "deleted_at").
 		Where("id = ?", id).
 		Updates(userData).

Frontend/GetFrontendAssets_dev.go

@@ -0,0 +1,13 @@
+//go:build !prod
+// +build !prod
+
+package Frontend
+
+import (
+	"io/fs"
+	"os"
+)
+
+func GetFrontendAssets() fs.FS {
+	return os.DirFS("Frontend/vue/dist")
+}

Frontend/GetFrontendAssets_prod.go

@@ -0,0 +1,26 @@
+//go:build prod
+// +build prod
+
+package Frontend
+
+import (
+	"embed"
+	"io/fs"
+	"log"
+)
+
+//go:embed Frontend/vue/dist
+var frontend embed.FS
+
+func GetFrontendAssets() fs.FS {
+	var (
+		stripped fs.FS
+		err      error
+	)
+	stripped, err = fs.Sub(frontend, "Frontend/vue/dist")
+	if err != nil {
+		log.Fatalln(err)
+	}
+
+	return stripped
+}

Frontend/Routes.go

@@ -0,0 +1,51 @@
+package Frontend
+
+import (
+	"io/fs"
+	"net/http"
+
+	"github.com/gorilla/mux"
+)
+
+const (
+	indexPath = "Frontend/vue/dist/index.html"
+)
+
+var (
+	routes []string = []string{
+		"/admin/login",
+		"/admin/signup",
+		"/admin/users",
+		"/admin/users/new",
+		"/admin/users/{id}",
+	}
+)
+
+func indexHandler(entrypoint string) func(w http.ResponseWriter, r *http.Request) {
+	fn := func(w http.ResponseWriter, r *http.Request) {
+		http.ServeFile(w, r, entrypoint)
+	}
+
+	return http.HandlerFunc(fn)
+}
+
+func InitFrontendRoutes(router *mux.Router) {
+	var (
+		frontendFS http.Handler
+		stripped   fs.FS
+		route      string
+	)
+
+	stripped = GetFrontendAssets()
+
+	frontendFS = http.FileServer(http.FS(stripped))
+
+	for _, route = range routes {
+		router.
+			PathPrefix(route).
+			HandlerFunc(indexHandler(indexPath))
+	}
+
+	router.PathPrefix("/").Handler(frontendFS)
+
+}

Frontend/vue/.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

Frontend/vue/README.md

@@ -0,0 +1,24 @@
+# vue
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

Frontend/vue/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

Frontend/vue/jsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}

Frontend/vue/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "vue",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "watch": "vue-cli-service build --watch"
+  },
+  "dependencies": {
+    "@meforma/vue-toaster": "^1.3.0",
+    "@vee-validate/rules": "^4.5.10",
+    "@vuepic/vue-datepicker": "^3.0.0",
+    "axios": "^0.26.1",
+    "bootstrap": "^5.1.3",
+    "core-js": "^3.8.3",
+    "vee-validate": "^4.5.10",
+    "vue": "^3.2.13",
+    "vue-axios": "^3.4.1",
+    "vue-router": "^4.0.13",
+    "vue-toastification": "^2.0.0-rc.5",
+    "vue3-cookies": "^1.0.6",
+    "vuex": "^4.0.2",
+    "vuex-persistedstate": "^4.1.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.5.0"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
+  ]
+}

Frontend/vue/public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

Frontend/vue/src/App.vue

@@ -0,0 +1,12 @@
+<template>
+    <router-view />
+</template>
+
+<script>
+export default {
+  name: 'App',
+}
+</script>
+
+<style>
+</style>

Frontend/vue/src/assets/css/admin.css

@@ -0,0 +1,116 @@
+body {
+    min-height: 100vh;
+}
+
+#app, #admin-page-container {
+    min-height: 100vh;
+    height: 100%;
+}
+
+#admin-page-container {
+    background-color: #ccc;
+}
+
+.background-color {
+    background-color: #ccc;
+}
+
+.card-registration {
+    border-radius: 1.5rem !important;
+}
+
+.card-registration .select-input.form-control[readonly]:not([disabled]) {
+    font-size: 1rem;
+    line-height: 2.15;
+    padding-left: .75em;
+    padding-right: .75em;
+}
+
+.card-registration .select-arrow {
+    top: 13px;
+}
+
+.center-align {
+    text-align: center;
+}
+.center-align * {
+    display: inline-block;
+}
+
+.right-align {
+    text-align: right;
+}
+
+
+.right-align * {
+    margin-left: 1rem;
+}
+
+.page-nav-container {
+    background-color: #FFF;
+    border-radius: 1.5rem;
+    height: 3.4rem;
+    padding: 0.5rem;
+}
+
+.page-nav-container .btn-rounded {
+    border-radius: 1rem;
+}
+
+.page-nav-container input {
+    border-radius: 1rem;
+}
+
+.page-nav-container .input-group-append button {
+    border-radius: 0 1rem 1rem 0;
+}
+
+.float-right {
+    float: right;
+}
+
+table th,
+table td {
+    text-align: center;
+}
+
+table td {
+    text-align: center;
+}
+
+input.invalid {
+    border-color: var(--bs-danger);
+}
+
+label[role=alert] {
+    color: var(--bs-danger);
+}
+
+.dp__input.dp__input_icon_pad {
+    min-height: calc(1.5em + 1rem + 2px);
+    padding: .5rem 1rem;
+    padding-left: 35px !important;
+    font-size: 1.25rem;
+    border-radius: .3rem;
+
+    display: block;
+    width: 100%;
+    padding: .375rem .75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #212529;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ced4da;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border-radius: .25rem;
+    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+}
+
+.dp__input.dp__input_icon_pad:disabled {
+    background-color: #e9ecef;
+    opacity: 1;
+}

Frontend/vue/src/components/HelloWorld.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

Frontend/vue/src/components/admin/AdminLogin.vue

@@ -0,0 +1,105 @@
+<template>
+<section class="vh-100 background-color">
+    <div class="container py-5 h-100">
+        <div class="row justify-content-center align-items-center h-100">
+            <div class="col-12 col-lg-9 col-xl-7">
+                <div class="card shadow-2-strong card-registration border-2" style="border-radius: 15px;">
+                    <div class="card-body p-4 p-md-5">
+                        <h3 class="mb-4 pb-2 pb-md-0 mb-md-5">Login</h3>
+                        <Form @submit="login" v-slot="{ meta, errors }">
+                            <div class="row">
+                                <div class="col-md-12 mb-4 pb-2">
+                                    <div class="form-outline">
+                                        <Field 
+                                            v-model="email" 
+                                            type="email" 
+                                            id="emailAddress" 
+                                            name="Email" 
+                                            class="form-control form-control-lg"
+                                            :class="errors['Email'] ? 'invalid' : ''"
+                                            rules="required|email"/>
+                                        <label v-if="!errors['Email']" class="form-label" for="email">Email</label>
+                                        <ErrorMessage name="Email" as="label" class="form-label" for="email"/>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <div class="col-md-12 mb-4 pb-2">
+                                    <div class="form-outline">
+                                        <Field 
+                                            v-model="password" 
+                                            type="password" 
+                                            id="emailAddress" 
+                                            name="Password"
+                                            class="form-control form-control-lg"
+                                            :class="errors['Password'] ? 'invalid' : ''"
+                                            rules="required|min:8"/>
+                                        <label v-if="!errors['Password']" class="form-label" for="password">Password</label>
+                                        <ErrorMessage name="Password" as="label" class="form-label" for="password"/>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="mt-2 pt-2 center-align">
+                                <button 
+                                    :disabled="!meta.touched || !meta.valid"
+                                    class="btn btn-primary btn-lg" 
+                                    type="submit"
+                                >
+                                    Login
+                                </button>
+                            </div>
+
+                            <div class="mt-2 pt-2 center-align">
+                                <p style="padding-right: 10px;">Don't have an account? </p><router-link :to='{"name": "AdminSignup"}'>Sign up</router-link>
+                            </div>
+                        </Form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+</template>
+
+<script>
+import { Form, Field, ErrorMessage } from 'vee-validate'
+
+export default {
+    name: 'AdminLogin',
+    data() {
+        return {
+            email: '',
+            password: '',
+        }
+    },
+
+    components: {
+        Form,
+        Field,
+        ErrorMessage,
+    },
+
+    methods: {
+        async login () {
+            try {
+                const response = await this.axios.post(
+                    '/admin/login',
+                    {
+                        email: this.email,
+                        password: this.password,
+                    }
+                )
+
+                if (response.status === 200) {
+                    this.$store.dispatch('setUser', response.data)
+                    this.$router.push({ name: 'AdminUsersList' })
+                }
+            } catch (error) {
+                this.$toast.error('An error occured')
+            }
+        }
+    }
+}
+</script>

Frontend/vue/src/components/admin/AdminNavbar.vue

@@ -0,0 +1,89 @@
+<template>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+        <div class="container-fluid px-5">
+
+            <!-- TODO: Replace with logo -->
+            <router-link 
+                :to="{ name: 'AdminUsersList' }" 
+                class="nav-item"
+            >
+                Sudden Impact
+            </router-link>
+
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-md-auto gap-2">
+
+                    <li class="nav-item rounded">
+                        <router-link 
+                            :to="{ name: 'AdminUsersList' }"
+                            class="nav-link"
+                            aria-current="page"
+                        >
+                            <i class="bi bi-house-fill me-2"></i>
+                            Users
+                        </router-link>
+                    </li>
+
+                    <li class="nav-item dropdown rounded">
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="bi bi-person-fill me-2"></i>Profile</a>
+
+                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
+                            <li>
+                                <router-link 
+                                    :to="{ name: 'AdminUsersForm', params: { id: $store.getters.getUser.id } }" 
+                                    class="dropdown-item"
+                                >
+                                    Account
+                                </router-link>
+                            </li>
+                            <li>
+                                <hr class="dropdown-divider">
+                            </li>
+                            <li>
+                                <div v-on:click="logout" class="dropdown-item">Logout</div>
+                            </li>
+                        </ul>
+
+                    </li>
+
+                </ul>
+            </div>
+        </div>
+    </nav>
+</template>
+
+<script>
+export default {
+    methods: {
+        async logout () {
+            try {
+                const response = await this.axios.get('/admin/logout');
+
+                if (response.status === 200) {
+                    this.$store.dispatch('setUser', null);
+                    this.$router.push({ name: 'AdminLogin' })
+                }
+            } catch (error) {
+                console.log(error)
+            }
+        }
+    }
+}
+</script>
+
+<style>
+body {
+  font-family: Montserrat, sans-serif;
+}
+.navbar-nav .nav-item:hover {
+  background-color: rgba(180, 190, 203, 0.4);
+}
+
+.navbar-dark .navbar-nav .nav-link.router-link-active {
+    color: #fff;
+}
+</style>

Frontend/vue/src/components/admin/AdminSignup.vue

@@ -0,0 +1,166 @@
+<template>
+<section class="vh-100 background-color">
+    <div class="container py-5 h-100">
+        <div class="row justify-content-center align-items-center h-100">
+            <div class="col-12 col-lg-9 col-xl-7">
+                <div class="card shadow-2-strong card-registration border-2" style="border-radius: 15px;">
+                    <div class="card-body p-4 p-md-5">
+                        <h3 class="mb-4 pb-2 pb-md-0 mb-md-5">Sign Up</h3>
+                        <Form @submit="signup" v-slot="{ errors, meta }">
+
+                            <div class="row">
+                                <div class="col-md-6 mb-4">
+
+                                    <div class="form-outline">
+                                        <Field 
+                                            v-model="first_name"
+                                            type="text" 
+                                            id="firstName" 
+                                            name="First Name"
+                                            class="form-control form-control-lg"
+                                            :class="errors['First Name'] ? 'invalid' : ''"
+                                            rules="required"/>
+                                        <label v-if="!errors['First Name']" class="form-label" for="firstName">First Name</label>
+                                        <ErrorMessage name="First Name" as="label" class="form-label" for="firstName"/>
+                                    </div>
+
+                                </div>
+                                <div class="col-md-6 mb-4">
+                                    <div class="form-outline">
+                                        <Field 
+                                            v-model="last_name"
+                                            type="text" 
+                                            id="lastName" 
+                                            name="Last Name"
+                                            class="form-control form-control-lg"
+                                            :class="errors['Last Name'] ? 'invalid' : ''"
+                                            rules="required"/>
+                                        <label v-if="!errors['Last Name']" class="form-label" for="lastName">Last Name</label>
+                                        <ErrorMessage name="Last Name" as="label" class="form-label" for="lastName"/>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="row">
+                                <div class="col-md-12 mb-4 pb-2">
+                                    <div class="form-outline">
+                                        <Field 
+                                            v-model="email"
+                                            type="text" 
+                                            id="email" 
+                                            name="Email"
+                                            class="form-control form-control-lg"
+                                            :class="errors['Email'] ? 'invalid' : ''"
+                                            rules="required|email"/>
+                                        <label v-if="!errors['Email']" class="form-label" for="email">Email</label>
+                                        <ErrorMessage name="Email" as="label" class="form-label" for="email"/>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="row">
+                                <div class="col-md-12 mb-4 pb-2">
+                                    <div class="form-outline">
+                                        <Field 
+                                            v-model="password"
+                                            type="password" 
+                                            id="password" 
+                                            name="Password"
+                                            class="form-control form-control-lg"
+                                            :class="errors['Password'] ? 'invalid' : ''"
+                                            rules="required|min:8"/>
+                                        <label v-if="!errors['Password']" class="form-label" for="password">Password</label>
+                                        <ErrorMessage name="Password" as="label" class="form-label" for="password"/>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="row">
+                                <div class="col-md-12 mb-4 pb-2">
+                                    <div class="form-outline">
+                                        <Field 
+                                            v-model="confirm_password"
+                                            type="password" 
+                                            id="confirm_password" 
+                                            name="Confirm Password"
+                                            class="form-control form-control-lg"
+                                            :class="errors['Confirm Password'] ? 'invalid' : ''"
+                                            rules="required|min:8"/>
+                                        <label v-if="!errors['Confirm Password']" class="form-label" for="password">Confirm Password</label>
+                                        <ErrorMessage name="Confirm Password" as="label" class="form-label" for="password"/>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="mt-2 pt-2 center-align">
+                                <button 
+                                    :disabled="!meta.touched || !meta.valid"
+                                    class="btn btn-primary btn-lg"
+                                    type="submit"
+                                >
+                                    Sign Up
+                                </button>
+                            </div>
+
+                            <div class="mt-2 pt-2 center-align">
+                            <p style="padding-right: 10px;">Already have an account? </p><router-link :to='{"name": "AdminLogin"}'>Login</router-link>
+                            </div>
+
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+</template>
+
+<script>
+import { Form, Field, ErrorMessage } from 'vee-validate'
+
+export default {
+    name: 'AdminSignup',
+    data() {
+        return {
+            first_name: '',
+            last_name: '',
+            email: '',
+            password: '',
+            confirm_password: ''
+        }
+    },
+
+    components: {
+        Form,
+        Field,
+        ErrorMessage,
+    },
+
+    methods: {
+        async signup () {
+            try {
+                const response = await this.axios.post(
+                    '/admin/user',
+                    {
+                        first_name: this.first_name,
+                        last_name: this.last_name,
+                        email: this.email,
+                        password: this.password,
+                        confirm_password: this.confirm_password,
+                    }
+                )
+
+                if (response.status === 200) {
+                    this.$router.push({ name: 'AdminLogin' })
+                }
+            } catch (error) {
+                if (error.response.data.message === 'invalid_email') {
+                    this.$toast.error('Email already exists.')
+                    return
+                }
+                this.$toast.error('An error occured.')
+            }
+        }
+    }
+}
+</script>

Frontend/vue/src/components/admin/users/AdminUsersCreate.vue

@@ -0,0 +1,165 @@
+<template>
+    <div id="admin-page-container">
+        <admin-navbar/>
+        <section class="container mt-5">
+            <div class="row mb-3">
+                <div class="col-12">
+                    <div class="page-nav-container">
+                        <div class="btn-group" role="group">
+                            <button 
+                                type="button"
+                                class="btn btn-rounded"
+                                :class="tab === 'details' ? 'btn-dark' : 'btn-outline-dark'"
+                            >
+                                User Details
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card shadow-2-strong card-registration">
+                <div class="card-body p-4 p-md-5" v-if="tab === 'details'">
+                    <h3 class="mb-4 pb-2 pb-md-0 mb-md-5">Create User</h3>
+                    <Form @submit="createUser" v-slot="{ meta, errors }">
+
+                        <div class="row">
+                            <div class="col-md-6 mb-4">
+
+                                <div class="form-outline">
+                                    <Field 
+                                        v-model="user.first_name"
+                                        type="text"
+                                        id="firstName"
+                                        name="First Name"
+                                        class="form-control form-control-lg"
+                                        :class="errors['First Name'] ? 'invalid' : ''"
+                                        rules="required"/>
+                                    <label v-if="!errors['First Name']" class="form-label" for="firstName">First Name</label>
+                                    <ErrorMessage name="First Name" as="label" class="form-label" for="firstName"/>
+                                </div>
+
+                            </div>
+                            <div class="col-md-6 mb-4">
+
+                                <div class="form-outline">
+                                    <Field
+                                        v-model="user.last_name"
+                                        type="text"
+                                        id="lastName"
+                                        name="Last Name"
+                                        class="form-control form-control-lg"
+                                        :class="errors['Last Name'] ? 'invalid' : ''"
+                                        rules="required"/>
+                                    <label v-if="!errors['Last Name']" class="form-label" for="lastName">Last Name</label>
+                                    <ErrorMessage name="Last Name" as="label" class="form-label" for="lastName"/>
+                                </div>
+
+                            </div>
+                        </div>
+
+                        <div class="row">
+                            <div class="col-md-12 mb-4 pb-2">
+                                <div class="form-outline">
+                                    <Field
+                                        v-model="user.email"
+                                        type="email"
+                                        id="email"
+                                        name="Email"
+                                        class="form-control form-control-lg"
+                                        :class="errors['Email'] ? 'invalid' : ''"
+                                        rules="required|email"/>
+                                    <label v-if="!errors['Email']" class="form-label" for="email">Email</label>
+                                    <ErrorMessage name="Email" as="label" class="form-label" for="email"/>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="row">
+                            <div class="col-12 col-md-6 mb-4 pb-2">
+                                <div class="form-outline">
+                                    <Field
+                                        v-model="user.password"
+                                        type="password"
+                                        id="password"
+                                        name="Password"
+                                        class="form-control form-control-lg"
+                                        :class="errors['Password'] ? 'invalid' : ''"
+                                        rules="required|min:8"/>
+                                    <label v-if="!errors['Password']" class="form-label" for="password">Password</label>
+                                    <ErrorMessage name="Password" as="label" class="form-label" for="email"/>
+                                </div>
+                            </div>
+
+                            <div class="col-12 col-md-6 mb-4 pb-2">
+                                <div class="form-outline">
+                                    <Field
+                                        v-model="user.confirm_password"
+                                        type="password"
+                                        id="confirm_password"
+                                        name="Confirm Password"
+                                        class="form-control form-control-lg"
+                                        :class="errors['Confirm Password'] ? 'invalid' : ''"
+                                        rules="required|min:8"/>
+                                    <label v-if="!errors['Confirm Password']" class="form-label" for="confirm_password">Confirm Password</label>
+                                    <ErrorMessage name="Confirm Password" as="label" class="form-label" for="confirm_password"/>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="mt-2 pt-2 right-align">
+                            <button :disabled="!meta.touched || !meta.valid" class="btn btn-primary btn-md" type="submit">
+                                Create
+                            </button>
+                        </div>
+
+                    </Form>
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script>
+import AdminNavbar from '@/components/admin/AdminNavbar'
+import { Form, Field, ErrorMessage } from 'vee-validate'
+
+export default {
+    data() {
+        return {
+            tab: 'details',
+            user: {
+                first_name: null,
+                last_name: null,
+                email: null,
+                password: null,
+                confirm_password: null,
+            }
+        }
+    },
+
+    components: {
+        AdminNavbar,
+        Form,
+        Field,
+        ErrorMessage,
+    },
+
+    methods: {
+        async createUser () {
+            try {
+                let response = await this.axios.post(
+                    '/admin/user',
+                    this.user,
+                )
+
+                if (response.status === 200) {
+                    this.$router.push({ name: 'AdminUsersForm', params: { id: response.data.id } })
+                    this.$toast.success('Successfully created user details.');
+                }
+            } catch (error) {
+                this.$toast.error('An error occured');
+            }
+        },
+}
+}
+</script>

Frontend/vue/src/components/admin/users/AdminUsersForm.vue

@@ -0,0 +1,252 @@
+<template>
+    <div id="admin-page-container">
+        <admin-navbar/>
+        <section class="container mt-5">
+            <div class="row mb-3">
+                <div class="col-12">
+                    <div class="page-nav-container">
+                        <div class="btn-group" role="group">
+                            <button 
+                                type="button"
+                                class="btn btn-rounded"
+                                :class="tab === 'details' ? 'btn-dark' : 'btn-outline-dark'"
+                                @click="tab = 'details'"
+                            >
+                                User Details
+                            </button>
+
+                            <button
+                                type="button"
+                                class="btn btn-rounded"
+                                :class="tab === 'change_password' ? 'btn-dark' : 'btn-outline-dark'"
+                                @click="tab = 'change_password'"
+                            >
+                                Change Password
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card shadow-2-strong card-registration">
+                <div class="card-body p-4 p-md-5" v-if="tab === 'details'">
+                    <h3 class="mb-4 pb-2 pb-md-0 mb-md-5">Update User</h3>
+                    <Form @submit="updateUser" v-slot="{ meta, errors }">
+
+                        <div class="row">
+                            <div class="col-md-6 mb-4">
+
+                                <div class="form-outline">
+                                    <Field 
+                                        v-model="user.first_name"
+                                        type="text"
+                                        id="firstName"
+                                        name="First Name"
+                                        class="form-control form-control-lg"
+                                        :class="errors['First Name'] ? 'invalid' : ''"
+                                        rules="required"/>
+                                    <label v-if="!errors['First Name']" class="form-label" for="firstName">First Name</label>
+                                    <ErrorMessage name="First Name" as="label" class="form-label" for="firstName"/>
+                                </div>
+
+                            </div>
+                            <div class="col-md-6 mb-4">
+
+                                <div class="form-outline">
+                                    <Field
+                                        v-model="user.last_name"
+                                        type="text"
+                                        id="lastName"
+                                        name="Last Name"
+                                        class="form-control form-control-lg"
+                                        :class="errors['Last Name'] ? 'invalid' : ''"
+                                        rules="required"/>
+                                    <label v-if="!errors['Last Name']" class="form-label" for="lastName">Last Name</label>
+                                    <ErrorMessage name="Last Name" as="label" class="form-label" for="lastName"/>
+                                </div>
+
+                            </div>
+                        </div>
+
+                        <div class="row">
+                            <div class="col-md-12 mb-4 pb-2">
+                                <div class="form-outline">
+                                    <Field
+                                        v-model="user.email"
+                                        type="email"
+                                        id="email"
+                                        name="Email"
+                                        class="form-control form-control-lg"
+                                        :class="errors['Email'] ? 'invalid' : ''"
+                                        rules="required|email"/>
+                                    <label v-if="!errors['Email']" class="form-label" for="email">Email</label>
+                                    <ErrorMessage name="Email" as="label" class="form-label" for="email"/>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="row">
+                            <div class="col-md-6 mb-4 pb-2">
+                                <div class="form-outline">
+                                    <date-picker 
+                                        v-model="user.last_login"
+                                        format="dd/MM/yyyy, HH:mm"
+                                        disabled="disabled"
+                                        id="last_login"/>
+                                    <label class="form-label" for="last_login">Last Login</label>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="mt-2 pt-2 right-align">
+                            <button class="btn btn-danger btn-md" type="button">
+                                Delete
+                            </button>
+                            <button :disabled="!meta.touched || !meta.valid" class="btn btn-primary btn-md" type="submit">
+                                Update
+                            </button>
+                        </div>
+
+                    </Form>
+                </div>
+                <div class="card-body p-4 p-md-5" v-if="tab === 'change_password'">
+                    <h3 class="mb-4 pb-2 pb-md-0 mb-md-5">Change Password</h3>
+                    <Form @submit="updatePassword" v-slot="{ meta, errors }">
+
+                        <div class="row">
+                            <div class="col-12 col-md-6 mb-4 pb-2">
+                                <div class="form-outline">
+                                    <Field
+                                        v-model="password.password"
+                                        type="password"
+                                        id="password"
+                                        name="Password"
+                                        class="form-control form-control-lg"
+                                        :class="errors['Password'] ? 'invalid' : ''"
+                                        rules="required|min:8"/>
+                                    <label v-if="!errors['Password']" class="form-label" for="password">Password</label>
+                                    <ErrorMessage name="Password" as="label" class="form-label" for="email"/>
+                                </div>
+                            </div>
+
+                            <div class="col-12 col-md-6 mb-4 pb-2">
+                                <div class="form-outline">
+                                    <Field
+                                        v-model="password.confirm_password"
+                                        type="password"
+                                        id="confirm_password"
+                                        name="Confirm Password"
+                                        class="form-control form-control-lg"
+                                        :class="errors['Confirm Password'] ? 'invalid' : ''"
+                                        rules="required|min:8"/>
+                                    <label v-if="!errors['Confirm Password']" class="form-label" for="confirm_password">Confirm Password</label>
+                                    <ErrorMessage name="Confirm Password" as="label" class="form-label" for="confirm_password"/>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="mt-2 pt-2 right-align">
+
+                            <button 
+                                type="submit"
+                                :disabled="!meta.touched || !meta.valid"
+                                class="btn btn-primary btn-md"
+                            >
+                                Update Password
+                            </button>
+                        </div>
+
+                    </Form>
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script>
+import AdminNavbar from '@/components/admin/AdminNavbar'
+import { Form, Field, ErrorMessage } from 'vee-validate'
+
+export default {
+    data() {
+        return {
+            tab: 'details',
+            user: {
+                first_name: null,
+                last_name: null,
+                email: null,
+                last_login: null,
+            },
+            password: {
+                password: null,
+                confirm_password: null,
+            }
+        }
+    },
+
+    components: {
+        AdminNavbar,
+        Form,
+        Field,
+        ErrorMessage,
+    },
+
+    mounted () {
+        this.getUser()
+    },
+
+    methods: {
+        setUserFromResponse (response) {
+            this.user = {
+                first_name: response.data.first_name,
+                last_name: response.data.last_name,
+                email: response.data.email,
+                last_login: response.data.last_login,
+            }
+        },
+
+        async getUser () {
+            try {
+                const response = await this.axios.get(`/admin/user/${this.$route.params.id}`)
+
+                if (response.status === 200) {
+                    this.setUserFromResponse(response)
+                }
+            } catch (error) {
+                console.log(error)
+            }
+        },
+
+        async updateUser () {
+            try {
+                let response = await this.axios.put(
+                        `/admin/user/${this.$route.params.id}`,
+                        this.user,
+                        )
+
+                    if (response.status === 200) {
+                        this.$toast.success('Successfully updated user details.');
+                        this.setUserFromResponse(response)
+                    }
+            } catch (error) {
+                this.$toast.error('An error occured');
+            }
+        },
+
+        async updatePassword () {
+            try {
+                let response = await this.axios.put(
+                        `/admin/user/${this.$route.params.id}/update-password`,
+                        this.password,
+                        )
+
+                    if (response.status === 200) {
+                        this.$toast.success('Successfully updated user password.');
+                    }
+            } catch (error) {
+                this.$toast.error('An error occured');
+            }
+        }
+
+    }
+}
+</script>

Frontend/vue/src/components/admin/users/AdminUsersList.vue

@@ -0,0 +1,168 @@
+<template>
+    <div id="admin-page-container">
+        <admin-navbar/>
+        <div class="container table-responsive mt-5 pb-5"> 
+            <div class="row mb-3">
+                <div class="col-12">
+                    <div class="page-nav-container">
+
+                        <div class="row">
+                            <div class="col-sm-6 col-9">
+                                <div class="input-group">
+                                    <input 
+                                        type="text" 
+                                        class="form-control" 
+                                        placeholder="Search..."
+                                        ref="search"
+                                    >
+                                    <div class="input-group-append">
+                                        <button 
+                                            class="btn btn-dark"
+                                            type="button"
+                                            @click="searchUsers"
+                                        >
+                                            Search
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="col-sm-6 float-right col-3">
+                                <div class="btn-group float-right" role="group">
+                                    <router-link :to="{ name: 'AdminUsersCreate' }">
+                                        <button
+                                            type="button"
+                                            class="btn btn-rounded btn-dark"
+                                        >
+                                            <!-- TODO: Change this to + sign on small screens -->
+                                            Add User
+                                        </button>
+                                    </router-link>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card shadow-2-strong card-registration">
+
+                <table class="table table-striped">
+                    <thead class="thead-dark">
+                        <tr>
+                            <th scope="col">Name</th>
+                            <th scope="col" class="d-none d-sm-table-cell">Email</th>
+                            <th scope="col" class="d-none d-sm-table-cell">Last Login</th>
+                            <th scope="col"></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="user in users" :key="user.id">
+                            <td class="align-middle">{{ user.first_name }} {{ user.last_name }}</td>
+                            <td class="align-middle d-none d-sm-table-cell">{{ user.email }}</td>
+                            <td class="align-middle d-none d-sm-table-cell">{{ formatDate(user.last_login) }}</td>
+                            <td class="align-middle">
+                                <router-link
+                                    :to="{ name: 'AdminUsersForm', params: { id: user.id } }"
+                                >
+                                    <button 
+                                        class="btn btn-outline-dark"
+                                    >
+                                        Open
+                                    </button>
+                                </router-link>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+
+                <p v-if="dataEnd" class="py-2 center-align text-muted">No more data</p>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import AdminNavbar from '@/components/admin/AdminNavbar'
+
+export default {
+    data() {
+        return {
+            users: {},
+            pageSize: 15,
+            page: 0,
+            search: '',
+            dataEnd: false,
+        }
+    },
+
+    components: {
+        AdminNavbar,
+    },
+
+    beforeMount () {
+        this.getInitialUsers()
+    },
+
+    mounted () {
+        this.getNextUsers()
+    },
+
+    methods: {
+        formatDate (dateString) {
+            const d = new Date(dateString)
+            let hours = d.getHours();
+            let minutes = d.getMinutes();
+            const ampm = hours >= 12 ? 'pm' : 'am';
+            hours = hours % 12;
+            hours = hours ? hours : 12; // the hour '0' should be '12'
+            minutes = minutes < 10 ? '0'+minutes : minutes;
+            const strTime = hours + ':' + minutes + ' ' + ampm;
+            return d.getDate() + "/" + (d.getMonth()+1) + "/" + d.getFullYear() + "  " + strTime;
+        },
+
+        async getInitialUsers () {
+            try {
+                const response = await this.axios.get(
+                    `/admin/user?page=${this.page}&pageSize=${this.pageSize}&search=${this.search}`
+                )
+
+                if (response.status === 200) {
+                    this.users = response.data
+                }
+            } catch (error) {
+                if (error.response.status === 404) {
+                    this.users = {}
+                    this.dataEnd = true
+                }
+            }
+        },
+
+        async getNextUsers () {
+            window.onscroll = async () => {
+                let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight;
+                if (bottomOfWindow) {
+                    try {
+                        this.page += 1
+                        const response = await this.axios.get(
+                            `/admin/user?page=${this.page}&pageSize=${this.pageSize}&search=${this.search}`
+                        )
+
+                        if (response.status === 200) {
+                            this.users.push(...response.data)
+                        }
+                    } catch (error) {
+                        if (error.response.status === 404) {
+                            this.dataEnd = true
+                        }
+                    }
+                }
+            }
+        },
+
+        searchUsers () {
+            this.search = this.$refs.search.value
+            this.getInitialUsers()
+        }
+    }
+}
+</script>

Frontend/vue/src/main.js

@@ -0,0 +1,37 @@
+import { createApp } from 'vue'
+import axios from './utils/http'
+import VueAxios from 'vue-axios'
+import VueCookies from "vue3-cookies";
+import { defineRule } from 'vee-validate';
+import AllRules from '@vee-validate/rules';
+import Toaster from "@meforma/vue-toaster";
+import Datepicker from '@vuepic/vue-datepicker';
+import '@vuepic/vue-datepicker/dist/main.css'
+
+import App from './App.vue'
+import router from './router'
+import admin from './store/admin/index.js'
+
+import 'bootstrap/dist/css/bootstrap.min.css'
+import 'bootstrap/dist/js/bootstrap.bundle.js'
+// Import the CSS or use your own!
+import "vue-toastification/dist/index.css";
+
+import './assets/css/admin.css'
+
+const app = createApp(App)
+router.app = app
+
+app.use(router)
+app.use(VueAxios, axios)
+app.use(VueCookies)
+app.use(admin)
+app.use(Toaster, { position: 'top-right' })
+
+Object.keys(AllRules).forEach(rule => {
+  defineRule(rule, AllRules[rule]);
+});
+
+app.component('date-picker', Datepicker);
+
+app.mount('#app')

Frontend/vue/src/router/index.js

@@ -0,0 +1,79 @@
+import { createWebHistory, createRouter } from "vue-router";
+import HelloWorld from "@/components/HelloWorld.vue";
+import AdminLogin from "@/components/admin/AdminLogin.vue";
+import AdminSignup from "@/components/admin/AdminSignup.vue";
+import AdminUsersList from "@/components/admin/users/AdminUsersList.vue";
+import AdminUsersCreate from "@/components/admin/users/AdminUsersCreate.vue";
+import AdminUsersForm from "@/components/admin/users/AdminUsersForm.vue";
+
+import admin from '@/store/admin/index.js'
+
+const routes = [
+    {
+        path: "/",
+        name: "Home",
+        component: HelloWorld,
+    },
+    {
+        path: "/admin/login",
+        name: "AdminLogin",
+        component: AdminLogin,
+    },
+    {
+        path: "/admin/signup",
+        name: "AdminSignup",
+        component: AdminSignup,
+    },
+    {
+        path: "/admin/users",
+        name: "AdminUsersList",
+        component: AdminUsersList,
+        meta: {
+            requiresAuth: true,
+        },
+    },
+    {
+        path: '/admin/users/new',
+        name: 'AdminUsersCreate',
+        component: AdminUsersCreate,
+        meta: {
+            requiresAuth: true,
+        },
+    },
+    {
+        path: '/admin/users/:id',
+        name: 'AdminUsersForm',
+        component: AdminUsersForm,
+        meta: {
+            requiresAuth: true,
+        },
+    },
+];
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes,
+});
+
+router.beforeEach((to, from, next) => {
+    const user = admin.getters.getUser;
+
+    if ((to.name == 'AdminLogin' || to.name == 'AdminSignup') && user !== null && !to.params.unauthorized) {
+        next({ name: 'AdminUsersList' });
+        return;
+    }
+
+    if (!to.meta.requiresAuth) {
+        next();
+        return;
+    }
+
+    if (user === null) {
+        next({ name: 'AdminLogin' });
+        return;
+    }
+
+    next();
+});
+
+export default router;

Frontend/vue/src/store/admin/index.js

@@ -0,0 +1,28 @@
+import { createStore } from 'vuex';
+import createPersistedState from "vuex-persistedstate";
+
+export default createStore({
+    plugins: [createPersistedState()],
+
+    state: {
+        user: {},
+    },
+
+    mutations: {
+        UPDATE_USER(state, user ){
+            state.user = user
+        }
+    },
+
+    actions: {
+        setUser(context, user) {
+            context.commit('UPDATE_USER', user)
+        }
+    },
+
+    getters: {
+        getUser (state) {
+            return state.user;
+        }
+    }
+})

Frontend/vue/src/utils/http/index.js

@@ -0,0 +1,29 @@
+import axios from 'axios'
+import router from '@/router'
+
+import admin from '@/store/admin/index.js'
+
+const instance = axios.create({
+  baseURL: "http://localhost:8080/api/v1/",
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+instance.interceptors.response.use(
+    function (response) {
+        return response;
+    },
+
+    function (error) {
+        if (error.response.status === 401) {
+            admin.dispatch('setUser', null)
+            router.push({ name: 'AdminLogin', params: { unauthorized: true } })
+            return
+        }
+
+        return Promise.reject(error);
+    }
+);
+
+export default instance

Frontend/vue/vue.config.js

@@ -0,0 +1,4 @@
+const { defineConfig } = require('@vue/cli-service')
+module.exports = defineConfig({
+  transpileDependencies: true
+})

Models/Users.go

@@ -2,8 +2,19 @@ package Models
 
 import (
 	"time"
+
+	"gorm.io/gorm"
 )
 
+// Prevent updating the email if it has not changed
+// This stops a unique constraint error
+func (u *User) BeforeUpdate(tx *gorm.DB) (err error) {
+	if !tx.Statement.Changed("Email") {
+		tx.Statement.Omit("Email")
+	}
+	return nil
+}
+
 type User struct {
 	Base
 	Email           string     `gorm:"not null;unique" json:"email"`

Util/EmailValidation.go

@@ -0,0 +1,10 @@
+package Util
+
+import (
+	"net/mail"
+)
+
+func IsEmailValid(email string) bool {
+	_, err := mail.ParseAddress(email)
+	return err == nil
+}

Util/Strings.go

@@ -0,0 +1,21 @@
+package Util
+
+import (
+	"math/rand"
+)
+
+var (
+	letterRunes = []rune("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ")
+)
+
+func RandomString(n int) string {
+	var (
+		b []rune
+		i int
+	)
+	b = make([]rune, n)
+	for i = range b {
+		b[i] = letterRunes[rand.Intn(len(letterRunes))]
+	}
+	return string(b)
+}

main.go

@@ -1,24 +1,43 @@
 package main
 
 import (
+	"flag"
 	"net/http"
 
 	"git.tovijaeschke.xyz/tovi/SuddenImpactRecords/Api"
 	"git.tovijaeschke.xyz/tovi/SuddenImpactRecords/Database"
+	"git.tovijaeschke.xyz/tovi/SuddenImpactRecords/Database/Seeder"
+	"git.tovijaeschke.xyz/tovi/SuddenImpactRecords/Frontend"
 
 	"github.com/gorilla/mux"
 )
 
+var (
+	seed bool
+)
+
+func init() {
+	Database.Init()
+
+	flag.BoolVar(&seed, "seed", false, "Seed database for development")
+
+	flag.Parse()
+}
+
 func main() {
 	var (
 		router *mux.Router
 	)
 
-	Database.Init()
+	if seed {
+		Seeder.Seed()
+		return
+	}
+
+	router = mux.NewRouter()
 
-	router = Api.InitApiEndpoints()
+	Api.InitApiEndpoints(router)
+	Frontend.InitFrontendRoutes(router)
 
-	// TODO: Run this within goroutine when running vue application
-	// Start and listen to requests
-	http.ListenAndServe(":8081", router)
+	http.ListenAndServe(":8080", router)
 }