Proyecto-Titulo/alai-server
3
0
Fork 0
Code Issues Pull Requests Releases Activity

Login finished

Browse Source
This commit is contained in:
Martin Araneda 2023-01-31 23:09:14 -03:00
parent 0726a31ad5
commit 8e9288f7f1
15 changed files with 183 additions and 290 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
frontend/src/components/HelloWorld.vue
View File

@ -1,54 +0,0 @@
<script setup>
defineProps({
msg: {
type: String,
required: true
}
});
</script>
<template>
<div class="greetings">
<h1 class="green">{{ msg }}</h1>
<h3>
You’ve successfully created a project with
<a
href="https://vitejs.dev/"
target="_blank"
rel="noopener"
>Vite</a
>
+
<a
href="https://vuejs.org/"
target="_blank"
rel="noopener"
>Vue 3</a
>.
</h3>
</div>
</template>
<style scoped>
h1 {
font-weight: 500;
font-size: 2.6rem;
top: -10px;
}
h3 {
font-size: 1.2rem;
}
.greetings h1,
.greetings h3 {
text-align: center;
}
@media (min-width: 1024px) {
.greetings h1,
.greetings h3 {
text-align: left;
}
}
</style>

179
frontend/src/components/TheWelcome.vue
View File

@ -1,179 +0,0 @@
<script setup>
import WelcomeItem from './WelcomeItem.vue';
import DocumentationIcon from './icons/IconDocumentation.vue';
import ToolingIcon from './icons/IconTooling.vue';
import EcosystemIcon from './icons/IconEcosystem.vue';
import CommunityIcon from './icons/IconCommunity.vue';
import SupportIcon from './icons/IconSupport.vue';
</script>
<template>
<!-- <div data-testid="greetings"><h1>You did it!</h1></div>
<WelcomeItem>
<template #icon>
<DocumentationIcon />
</template>
<template #heading>Documentation</template>
Vue’s
<a
href="https://vuejs.org/"
target="_blank"
class="font-medium text-primary hover:underline"
rel="noopener"
>official documentation</a
>
provides you with all information you need to get started.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<ToolingIcon />
</template>
<template #heading>Tooling</template>
This project is served and bundled with
<a
href="https://vitejs.dev/guide/features.html"
target="_blank"
class="font-medium text-primary hover:underline"
rel="noopener"
>Vite</a
>. The recommended IDE setup is
<a
href="https://code.visualstudio.com/"
target="_blank"
class="font-medium text-primary hover:underline"
rel="noopener"
>VSCode</a
>
+
<a
href="https://github.com/johnsoncodehk/volar"
target="_blank"
class="font-medium text-primary hover:underline"
rel="noopener"
>Volar</a
>. If you need to test your components and web pages, check out
<a
href="https://www.cypress.io/"
target="_blank"
class="font-medium text-primary hover:underline"
rel="noopener"
>Cypress</a
>
and
<a
href="https://on.cypress.io/component"
target="_blank"
class="font-medium text-primary hover:underline"
>Cypress Component Testing</a
>.
<br />
More instructions are available in <code>README.md</code>.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<EcosystemIcon />
</template>
<template #heading>Ecosystem</template>
Get official tools and libraries for your project:
<a
href="https://pinia.vuejs.org/"
target="_blank"
class="font-medium text-primary hover:underline"
rel="noopener"
>Pinia</a
>,
<a
href="https://router.vuejs.org/"
target="_blank"
class="font-medium text-primary hover:underline"
rel="noopener"
>Vue Router</a
>,
<a
href="https://test-utils.vuejs.org/"
target="_blank"
class="font-medium text-primary hover:underline"
rel="noopener"
>Vue Test Utils</a
>, and
<a
href="https://github.com/vuejs/devtools"
target="_blank"
class="font-medium text-primary hover:underline"
rel="noopener"
>Vue Dev Tools</a
>. If you need more resources, we suggest paying
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
class="font-medium text-primary hover:underline"
rel="noopener"
>Awesome Vue</a
>
a visit.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<CommunityIcon />
</template>
<template #heading>Community</template>
Got stuck? Ask your question on
<a
href="https://chat.vuejs.org"
target="_blank"
class="font-medium text-primary hover:underline"
rel="noopener"
>Vue Land</a
>, our official Discord server, or
<a
href="https://stackoverflow.com/questions/tagged/vue.js"
target="_blank"
class="font-medium text-primary hover:underline"
rel="noopener"
>StackOverflow</a
>. You should also subscribe to
<a
href="https://news.vuejs.org"
target="_blank"
class="font-medium text-primary hover:underline"
rel="noopener"
>our mailing list</a
>
and follow the official
<a
href="https://twitter.com/vuejs"
target="_blank"
class="font-medium text-primary hover:underline"
rel="noopener"
>@vuejs</a
>
twitter account for latest news in the Vue world.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<SupportIcon />
</template>
<template #heading>Support Vue</template>
As an independent project, Vue relies on community backing for its sustainability. You can help us by
<a
href="https://vuejs.org/sponsor/"
target="_blank"
class="font-medium text-primary hover:underline"
rel="noopener"
>becoming a sponsor</a
>.
</WelcomeItem> -->
</template>

15
frontend/src/components/WelcomeItem.vue
View File

@ -1,15 +0,0 @@
<template>
<div class="item">
<i>
<slot name="icon"></slot>
</i>
<div class="details">
<h3>
<slot name="heading"></slot>
</h3>
<slot></slot>
</div>
</div>
</template>
<style scoped></style>

1
frontend/src/layout/AppLayout.vue
View File

@ -68,7 +68,6 @@ const isOutsideClicked = (event) => {
</div>
<app-footer></app-footer>
</div>
<app-config></app-config>
<div class="layout-mask"></div>
</div>
</template>

1
frontend/src/layout/AppMenu.vue
View File

@ -9,7 +9,6 @@ const model = ref([
items: [
{ label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/home' },
{ label: 'Chart', icon: 'pi pi-fw pi-chart-bar', to: '/charts' }]
}
]);
</script>

5
frontend/src/main.js
View File

@ -10,6 +10,8 @@ import Chart from 'primevue/chart';
import Dropdown from 'primevue/dropdown';
import InputText from 'primevue/inputtext';
import Password from 'primevue/password';
import Ripple from 'primevue/ripple';
import StyleClass from 'primevue/styleclass';
import '@/assets/styles.scss';
const app = createApp(App);
@ -19,6 +21,9 @@ app.use(router);
app.use(PrimeVue, { ripple: true });
app.directive('ripple', Ripple);
app.directive('styleclass', StyleClass);
app.component('Button', Button);
app.component('Chart', Chart);
app.component('Dropdown', Dropdown);

7
frontend/src/router/index.js
View File

@ -3,6 +3,7 @@ import AppLayout from '@/layout/AppLayout.vue';
import HomeView from '../views/HomeView.vue';
import Landing from '../views/Landing.vue';
import Login from '../views/Login.vue';
import Chart from '@/views/menu/Chart.vue';
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
@ -27,8 +28,8 @@ const router = createRouter({
{
path: '/charts',
name: 'charts',
component: () => import('@/views/menu/Chart.vue')
},
component: Chart
}/* ,
{
path: '/about',
name: 'about',
@ -37,7 +38,7 @@ const router = createRouter({
// which is lazy-loaded when the route is visited.
component: () => import('../views/AboutView.vue')
}
} */
]
}
]

55
frontend/src/utils/Auth.js Normal file
View File

@ -0,0 +1,55 @@
import { useRouter } from 'vue-router';
import axios from 'axios';
var auth = {
getTokenHeader() {
const token = localStorage.getItem('token');
var config = {
headers: { Authorization: `Bearer ${token}` }
};
return config;
},
checkToken(redirect = true, callback = null) {
const url = new URL(window.location.href);
const api = (url.port == "5173") ? "http://localhost:3001" : "/api";
const config = this.getTokenHeader();
const router = useRouter();
axios
.get(api + "/auth",
config
)
.then((response) => {
if (response.status === 204) {
if (callback !== null) {
callback(false);
}
}
else {
if (callback !== null) {
callback(true);
}
}
})
.catch((err) => {
if (err || !err) {
if (redirect === true) {
if (callback !== null) {
callback(false);
}
router.replace("/");
}
else {
if (callback !== null) {
callback(false);
}
}
}
});
}
}
export default auth;

15
frontend/src/views/AboutView.vue
View File

@ -1,15 +0,0 @@
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
<style>
@media (min-width: 1024px) {
.about {
min-height: 100vh;
display: flex;
align-items: center;
}
}
</style>

13
frontend/src/views/HomeView.vue
View File

@ -1,9 +1,18 @@
<script setup>
import TheWelcome from '../components/TheWelcome.vue';
import auth from '../utils/Auth';
import { onMounted } from 'vue';
onMounted(() => {
checkAuth();
})
const checkAuth = () => {
auth.checkToken(true);
};
</script>
<template>
<main>
<TheWelcome />
</main>
</template>

24
frontend/src/views/Landing.vue
View File

@ -1,8 +1,4 @@
<script setup>
import { useLayout } from '@/layout/composables/layout';
import { computed } from 'vue';
const { layoutConfig, contextPath } = useLayout();
const smoothScroll = (id) => {
document.querySelector(id).scrollIntoView({
@ -10,9 +6,6 @@ const smoothScroll = (id) => {
});
};
const logoUrl = computed(() => {
return `${contextPath}layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
});
</script>
<template>
@ -30,11 +23,10 @@ const logoUrl = computed(() => {
<ul
class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row cursor-pointer">
<li>
<a @click="smoothScroll('#hero')"
class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 p-ripple" v-ripple
href="home">
<router-link to="/home"
class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 p-ripple" v-ripple>
<span>Home</span>
</a>
</router-link>
</li>
<li>
<a @click="smoothScroll('#features')"
@ -58,11 +50,11 @@ const logoUrl = computed(() => {
</ul>
<div
class="flex justify-content-between lg:block border-top-1 lg:border-top-none surface-border py-3 lg:py-0 mt-3 lg:mt-0">
<a href="/login">
<router-link to="/login">
<Button label="Login"
class="p-button-text p-button-rounded border-none font-light text-white line-height-2 bg-blue-500">
</Button>
</a>
</router-link>
</div>
</div>
@ -105,8 +97,8 @@ const logoUrl = computed(() => {
<h2 class="line-height-1 text-900 text-4xl font-normal">Alai</h2>
<span class="text-700 text-2xl line-height-3 ml-0 md:ml-2" style="max-width: 650px">Alai is a
2D-based platform videogame made with a friendly and easy-to-use game engine called
"Godot". Alai contains within the game a player registration menu and recollection of data
for each playthrough so the data can be analyzed for future use</span>
"Godot". Alai contains within the game a data harvest trait
for each playthrough, with the purpose to analyze the information for future use</span>
</div>
</div>
@ -119,7 +111,7 @@ const logoUrl = computed(() => {
<h2 class="line-height-1 text-900 text-4xl font-normal">Obelisk</h2>
<span class="text-700 text-2xl line-height-3 mr-0 md:mr-2" style="max-width: 650px">A compiled
and declarative self-made language with the purpose of the creation of an Artifitial
Intelligence, inspired on the logical language "Prolog"</span>
Intelligence, inspired by the logical language "Prolog"</span>
</div>
<div class="flex justify-content-end flex-order-1 sm:flex-order-2 col-12 lg:col-6 bg-yellow-100 p-0"

28
frontend/src/views/Login.vue
View File

@ -1,9 +1,31 @@
<script setup>
import { ref } from 'vue';
import axios from 'axios';
const username = ref('');
const password = ref('');
async function onLoginClick() {
var login =
{
username: username.value,
password: password.value
};
try {
const response = await axios.post(`http://localhost:3001/login`, login);
console.log(response);
if (response.status === 200) {
localStorage.setItem('token', response.data.token);
}
}
catch (error) {
console.error(error);
}
}
</script>
<template>
@ -27,7 +49,9 @@ const password = ref('');
<Password id="password1" v-model="password" placeholder="Password" :toggleMask="true"
class="w-full mb-3" inputClass="w-full" inputStyle="padding:1rem" :feedback="false">
</Password>
<Button label="Log In" class="w-full p-3 text-xl"></Button>
<router-link to="/home">
<Button label="Log In" class="w-full p-3 text-xl" @click="onLoginClick()"></Button>
</router-link>
</div>
</div>
</div>

11
frontend/src/views/menu/Chart.vue
View File

@ -1,6 +1,7 @@
<script setup>
import { ref, watch } from 'vue';
import { ref, watch, onMounted } from 'vue';
import { useLayout } from '@/layout/composables/layout';
import auth from '../../utils/Auth';
const { layoutConfig } = useLayout();
let documentStyle = getComputedStyle(document.documentElement);
@ -11,7 +12,6 @@ let surfaceBorder = documentStyle.getPropertyValue('--surface-border');
const lineData = ref(null);
const lineOptions = ref(null);
const setColorOptions = () => {
documentStyle = getComputedStyle(document.documentElement);
textColor = documentStyle.getPropertyValue('--text-color');
@ -80,6 +80,13 @@ watch(
{ immediate: true }
);
onMounted(() => {
checkAuth();
})
const checkAuth = () => {
auth.checkToken(true);
};
</script>
<template>

5
package.json Normal file
View File

@ -0,0 +1,5 @@
{
"dependencies": {
"axios": "^1.2.6"
}
}

60
yarn.lock Normal file
View File

@ -0,0 +1,60 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
asynckit@^0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
axios@^1.2.6:
version "1.2.6"
resolved "https://registry.yarnpkg.com/axios/-/axios-1.2.6.tgz#eacb6d065baa11bad5959e7ffa0cb6745c65f392"
integrity sha512-rC/7F08XxZwjMV4iuWv+JpD3E0Ksqg9nac4IIg6RwNuF0JTeWoCo/mBNG54+tNhhI11G3/VDRbdDQTs9hGp4pQ==
dependencies:
follow-redirects "^1.15.0"
form-data "^4.0.0"
proxy-from-env "^1.1.0"
combined-stream@^1.0.8:
version "1.0.8"
resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
dependencies:
delayed-stream "~1.0.0"
delayed-stream@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
follow-redirects@^1.15.0:
version "1.15.2"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
form-data@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
dependencies:
asynckit "^0.4.0"
combined-stream "^1.0.8"
mime-types "^2.1.12"
mime-db@1.52.0:
version "1.52.0"
resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
mime-types@^2.1.12:
version "2.1.35"
resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
dependencies:
mime-db "1.52.0"
proxy-from-env@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==