re-setup subproject kontor-vue
This commit is contained in:
@@ -0,0 +1,36 @@
|
||||
|
||||
<template>
|
||||
<div class="container">
|
||||
<header class="jumbotron">
|
||||
<h3>{{ content }}</h3>
|
||||
</header>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UserService from "../services/user.service";
|
||||
|
||||
export default {
|
||||
name: "Admin",
|
||||
data() {
|
||||
return {
|
||||
content: "",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
UserService.getAdminBoard().then(
|
||||
(response) => {
|
||||
this.content = response.data;
|
||||
},
|
||||
(error) => {
|
||||
this.content =
|
||||
(error.response &&
|
||||
error.response.data &&
|
||||
error.response.data.message) ||
|
||||
error.message ||
|
||||
error.toString();
|
||||
}
|
||||
);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,36 @@
|
||||
|
||||
<template>
|
||||
<div class="container">
|
||||
<header class="jumbotron">
|
||||
<h3>{{ content }}</h3>
|
||||
</header>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UserService from "../services/user.service";
|
||||
|
||||
export default {
|
||||
name: "Moderator",
|
||||
data() {
|
||||
return {
|
||||
content: "",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
UserService.getModeratorBoard().then(
|
||||
(response) => {
|
||||
this.content = response.data;
|
||||
},
|
||||
(error) => {
|
||||
this.content =
|
||||
(error.response &&
|
||||
error.response.data &&
|
||||
error.response.data.message) ||
|
||||
error.message ||
|
||||
error.toString();
|
||||
}
|
||||
);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<header class="jumbotron">
|
||||
<h3>{{ content }}</h3>
|
||||
</header>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UserService from "../services/user.service";
|
||||
|
||||
export default {
|
||||
name: "User",
|
||||
data() {
|
||||
return {
|
||||
content: "",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
UserService.getUserBoard().then(
|
||||
(response) => {
|
||||
this.content = response.data;
|
||||
},
|
||||
(error) => {
|
||||
this.content =
|
||||
(error.response &&
|
||||
error.response.data &&
|
||||
error.response.data.message) ||
|
||||
error.message ||
|
||||
error.toString();
|
||||
}
|
||||
);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,85 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import viteLogo from '../assets/vite.svg'
|
||||
import heroImg from '../assets/hero.png'
|
||||
import vueLogo from '../assets/vue.svg'
|
||||
|
||||
const count = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section id="center">
|
||||
<div class="hero">
|
||||
<img :src="heroImg" class="base" width="170" height="179" alt="" />
|
||||
<img :src="vueLogo" class="framework" alt="Vue logo" />
|
||||
<img :src="viteLogo" class="vite" alt="Vite logo" />
|
||||
</div>
|
||||
<div>
|
||||
<h1>Get started</h1>
|
||||
<p>Edit <code>src/App.vue</code> and save to test <code>HMR</code></p>
|
||||
</div>
|
||||
<button class="counter" @click="count++">Count is {{ count }}</button>
|
||||
</section>
|
||||
|
||||
<div class="ticks"></div>
|
||||
|
||||
<section id="next-steps">
|
||||
<div id="docs">
|
||||
<svg class="icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#documentation-icon"></use>
|
||||
</svg>
|
||||
<h2>Documentation</h2>
|
||||
<p>Your questions, answered</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://vite.dev/" target="_blank">
|
||||
<img class="logo" :src="viteLogo" alt="" />
|
||||
Explore Vite
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://vuejs.org/" target="_blank">
|
||||
<img class="button-icon" :src="vueLogo" alt="" />
|
||||
Learn more
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="social">
|
||||
<svg class="icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#social-icon"></use>
|
||||
</svg>
|
||||
<h2>Connect with us</h2>
|
||||
<p>Join the Vite community</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/vitejs/vite" target="_blank">
|
||||
<svg class="button-icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#github-icon"></use>
|
||||
</svg>
|
||||
GitHub
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://chat.vite.dev/" target="_blank">
|
||||
<svg class="button-icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#discord-icon"></use>
|
||||
</svg>
|
||||
Discord
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://x.com/vite_js" target="_blank">
|
||||
<svg class="button-icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#x-icon"></use>
|
||||
</svg>
|
||||
X.com
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="ticks"></div>
|
||||
<section id="spacer"></section>
|
||||
</template>
|
||||
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<header class="jumbotron">
|
||||
<h3>{{ content }}</h3>
|
||||
</header>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UserService from "../services/user.service";
|
||||
|
||||
export default {
|
||||
name: "Home",
|
||||
data() {
|
||||
return {
|
||||
content: "",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
UserService.getPublicContent().then(
|
||||
(response) => {
|
||||
this.content = response.data;
|
||||
},
|
||||
(error) => {
|
||||
this.content =
|
||||
(error.response &&
|
||||
error.response.data &&
|
||||
error.response.data.message) ||
|
||||
error.message ||
|
||||
error.toString();
|
||||
}
|
||||
);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<div class="col-md-12">
|
||||
<div class="card card-container">
|
||||
<img
|
||||
id="profile-img"
|
||||
src="//ssl.gstatic.com/accounts/ui/avatar_2x.png"
|
||||
class="profile-img-card"
|
||||
/>
|
||||
<Form @submit="handleLogin" :validation-schema="schema">
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<Field name="username" type="text" class="form-control" />
|
||||
<ErrorMessage name="username" class="error-feedback" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<Field name="password" type="password" class="form-control" />
|
||||
<ErrorMessage name="password" class="error-feedback" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<button class="btn btn-primary btn-block" :disabled="loading">
|
||||
<span
|
||||
v-show="loading"
|
||||
class="spinner-border spinner-border-sm"
|
||||
></span>
|
||||
<span>Login</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div v-if="message" class="alert alert-danger" role="alert">
|
||||
{{ message }}
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Form, Field, ErrorMessage } from "vee-validate";
|
||||
import * as yup from "yup";
|
||||
|
||||
export default {
|
||||
name: "Login",
|
||||
components: {
|
||||
Form,
|
||||
Field,
|
||||
ErrorMessage,
|
||||
},
|
||||
data() {
|
||||
const schema = yup.object().shape({
|
||||
username: yup.string().required("Username is required!"),
|
||||
password: yup.string().required("Password is required!"),
|
||||
});
|
||||
|
||||
return {
|
||||
loading: false,
|
||||
message: "",
|
||||
schema,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
loggedIn() {
|
||||
return this.$store.state.auth.status.loggedIn;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (this.loggedIn) {
|
||||
this.$router.push("/profile");
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleLogin(user) {
|
||||
this.loading = true;
|
||||
|
||||
this.$store.dispatch("auth/login", user).then(
|
||||
() => {
|
||||
this.$router.push("/profile");
|
||||
},
|
||||
(error) => {
|
||||
this.loading = false;
|
||||
this.message =
|
||||
(error.response &&
|
||||
error.response.data &&
|
||||
error.response.data.message) ||
|
||||
error.message ||
|
||||
error.toString();
|
||||
}
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
headerTitle: string
|
||||
}>()
|
||||
</script>
|
||||
<template>
|
||||
<div class="header">
|
||||
<h2>{{ headerTitle }}</h2>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="css" scoped>
|
||||
</style>
|
||||
@@ -1,14 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { RouterLink } from 'vue-router'
|
||||
</script>
|
||||
<template>
|
||||
<div class="topnav">
|
||||
<RouterLink to="/">Kontor</RouterLink>
|
||||
<RouterLink to="/comics">Comics</RouterLink>
|
||||
<RouterLink to="/tysc">TYSC</RouterLink>
|
||||
<RouterLink to="/media">Media</RouterLink>
|
||||
<RouterLink style="float: right;" to="/login">Login</RouterLink>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="css" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<header class="jumbotron">
|
||||
<h3>
|
||||
<strong>{{currentUser.username}}</strong> Profile
|
||||
</h3>
|
||||
</header>
|
||||
<p>
|
||||
<strong>Token:</strong>
|
||||
{{currentUser.accessToken.substring(0, 20)}} ... {{currentUser.accessToken.substr(currentUser.accessToken.length - 20)}}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Id:</strong>
|
||||
{{currentUser.id}}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Email:</strong>
|
||||
{{currentUser.email}}
|
||||
</p>
|
||||
<strong>Authorities:</strong>
|
||||
<ul>
|
||||
<li v-for="role in currentUser.roles" :key="role">{{role}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Profile',
|
||||
computed: {
|
||||
currentUser() {
|
||||
return this.$store.state.auth.user;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (!this.currentUser) {
|
||||
this.$router.push('/login');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<div class="col-md-12">
|
||||
<div class="card card-container">
|
||||
<img
|
||||
id="profile-img"
|
||||
src="//ssl.gstatic.com/accounts/ui/avatar_2x.png"
|
||||
class="profile-img-card"
|
||||
/>
|
||||
<Form @submit="handleRegister" :validation-schema="schema">
|
||||
<div v-if="!successful">
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<Field name="username" type="text" class="form-control" />
|
||||
<ErrorMessage name="username" class="error-feedback" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<Field name="email" type="email" class="form-control" />
|
||||
<ErrorMessage name="email" class="error-feedback" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<Field name="password" type="password" class="form-control" />
|
||||
<ErrorMessage name="password" class="error-feedback" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<button class="btn btn-primary btn-block" :disabled="loading">
|
||||
<span
|
||||
v-show="loading"
|
||||
class="spinner-border spinner-border-sm"
|
||||
></span>
|
||||
Sign Up
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
|
||||
<div
|
||||
v-if="message"
|
||||
class="alert"
|
||||
:class="successful ? 'alert-success' : 'alert-danger'"
|
||||
>
|
||||
{{ message }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Form, Field, ErrorMessage } from "vee-validate";
|
||||
import * as yup from "yup";
|
||||
|
||||
export default {
|
||||
name: "Register",
|
||||
components: {
|
||||
Form,
|
||||
Field,
|
||||
ErrorMessage,
|
||||
},
|
||||
data() {
|
||||
const schema = yup.object().shape({
|
||||
username: yup
|
||||
.string()
|
||||
.required("Username is required!")
|
||||
.min(3, "Must be at least 3 characters!")
|
||||
.max(20, "Must be maximum 20 characters!"),
|
||||
email: yup
|
||||
.string()
|
||||
.required("Email is required!")
|
||||
.email("Email is invalid!")
|
||||
.max(50, "Must be maximum 50 characters!"),
|
||||
password: yup
|
||||
.string()
|
||||
.required("Password is required!")
|
||||
.min(6, "Must be at least 6 characters!")
|
||||
.max(40, "Must be maximum 40 characters!"),
|
||||
});
|
||||
|
||||
return {
|
||||
successful: false,
|
||||
loading: false,
|
||||
message: "",
|
||||
schema,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
loggedIn() {
|
||||
return this.$store.state.auth.status.loggedIn;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (this.loggedIn) {
|
||||
this.$router.push("/profile");
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleRegister(user) {
|
||||
this.message = "";
|
||||
this.successful = false;
|
||||
this.loading = true;
|
||||
|
||||
this.$store.dispatch("auth/register", user).then(
|
||||
(data) => {
|
||||
this.message = data.message;
|
||||
this.successful = true;
|
||||
this.loading = false;
|
||||
},
|
||||
(error) => {
|
||||
this.message =
|
||||
(error.response &&
|
||||
error.response.data &&
|
||||
error.response.data.message) ||
|
||||
error.message ||
|
||||
error.toString();
|
||||
this.successful = false;
|
||||
this.loading = false;
|
||||
}
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,11 +0,0 @@
|
||||
import { describe, it, expect } from 'vitest'
|
||||
|
||||
import { mount } from '@vue/test-utils'
|
||||
import MainHeader from '../MainHeader.vue'
|
||||
|
||||
describe('MainHeader', () => {
|
||||
it('renders properly', () => {
|
||||
const wrapper = mount(MainHeader, { props: { headerTitle: 'Kontor' } })
|
||||
expect(wrapper.text()).toContain('Kontor')
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user