base frontend structure, client router, base and login views
This commit is contained in:
parent
721b1963a1
commit
1447509699
GPG Key ID:
582F8B0866B294A1
@ -1,2 +1,2 @@
|
||||
[general]
|
||||
dirs = ["dist"]
|
||||
dirs = ["templates"]
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="en" class="h-full">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vite App</title>
|
||||
<title>Elnafo Dev</title>
|
||||
</head>
|
||||
<body class="bg-zinc-900 text-zinc-200 font-sans min-h-60 flex place-items-center">
|
||||
<div id="app" class="max-w-7xl ml-auto mr-auto grid grid-cols-2"></div>
|
||||
<body class="h-full bg-zinc-900 text-zinc-200 font-sans">
|
||||
<div id="app" class="flex flex-col h-full"></div>
|
||||
<script type="module" src="src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
22
crates/frontend/package-lock.json
generated
22
crates/frontend/package-lock.json
generated
@ -11,7 +11,8 @@
|
||||
"autoprefixer": "^10.4.18",
|
||||
"postcss": "^8.4.35",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"vue": "^3.3.11"
|
||||
"vue": "^3.3.11",
|
||||
"vue-router": "^4.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tsconfig/node18": "^18.2.2",
|
||||
@ -1293,6 +1294,11 @@
|
||||
"@vue/shared": "3.4.21"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/devtools-api": {
|
||||
"version": "6.6.1",
|
||||
"resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.1.tgz",
|
||||
"integrity": "sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA=="
|
||||
},
|
||||
"node_modules/@vue/language-core": {
|
||||
"version": "1.8.27",
|
||||
"resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-1.8.27.tgz",
|
||||
@ -3057,6 +3063,20 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/vue-router": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.3.0.tgz",
|
||||
"integrity": "sha512-dqUcs8tUeG+ssgWhcPbjHvazML16Oga5w34uCUmsk7i0BcnskoLGwjpa15fqMr2Fa5JgVBrdL2MEgqz6XZ/6IQ==",
|
||||
"dependencies": {
|
||||
"@vue/devtools-api": "^6.5.1"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/posva"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-template-compiler": {
|
||||
"version": "2.7.16",
|
||||
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz",
|
||||
|
||||
@ -14,7 +14,8 @@
|
||||
"autoprefixer": "^10.4.18",
|
||||
"postcss": "^8.4.35",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"vue": "^3.3.11"
|
||||
"vue": "^3.3.11",
|
||||
"vue-router": "^4.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tsconfig/node18": "^18.2.2",
|
||||
|
||||
@ -1,36 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
import TheWelcome from './components/TheWelcome.vue'
|
||||
import Login from './components/Login.vue'
|
||||
|
||||
import { ref, watchEffect } from 'vue'
|
||||
const count = ref(0)
|
||||
|
||||
//const url = `http://127.0.0.1:8000/api/hello`
|
||||
//const response = ref(null)
|
||||
|
||||
//watchEffect(async () => {
|
||||
// response.value = await (await fetch(url)).json()
|
||||
//})
|
||||
import { RouterLink, RouterView } from 'vue-router';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!--<header class="flex flex-wrap place-items-center">
|
||||
<img alt="Vue logo" class="block ml-auto mr-auto w-32 h-32" src="./assets/logo.svg" />
|
||||
|
||||
<div class="wrapper">
|
||||
<HelloWorld msg="You did it!" />
|
||||
</div>
|
||||
|
||||
<button class="font-bold" @click="count++">Count is: {{ count }}</button>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<TheWelcome />
|
||||
|
||||
<p>{{ response }}</p>
|
||||
</main>-->
|
||||
<main>
|
||||
<Login />
|
||||
</main>
|
||||
<RouterView />
|
||||
</template>
|
||||
|
||||
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||
|
Before Width: | Height: | Size: 276 B |
@ -1,16 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
msg: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="text-center">
|
||||
<h1 class="text-green-500 relative text-4xl">{{ msg }}</h1>
|
||||
<h3 class="text-xl">
|
||||
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>
|
||||
@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
const email = defineModel("email")
|
||||
const password = defineModel("password")
|
||||
const email = defineModel("email");
|
||||
const password = defineModel("password");
|
||||
|
||||
async function login() {
|
||||
const response = await fetch(
|
||||
@ -8,9 +8,7 @@ async function login() {
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
//Accept: 'application/json',
|
||||
"Content-Type": "application/json",
|
||||
//"Access-Control-Allow-Origin": "http://0.0.0.0"
|
||||
},
|
||||
credentials: "include",
|
||||
mode: "cors",
|
||||
@ -20,35 +18,28 @@ async function login() {
|
||||
|
||||
let { status, token } = await response.json();
|
||||
console.log(status);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form @submit.prevent>
|
||||
<input v-model="email" type="email" placeholder="Email" required>
|
||||
<input v-model="password" placeholder="password" type="password" required>
|
||||
<button @click="login">Log in</button>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<!--
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const emit = defineEmits<{
|
||||
(e: "create", payload: { body: string; title: string }): void;
|
||||
}>();
|
||||
const title = ref("");
|
||||
const body = ref("");
|
||||
const handleSubmit = () => {
|
||||
emit("create", { body, title });
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<form @submit="handleSubmit">
|
||||
<input v-model="title" />
|
||||
<textarea v-model="body"></textarea>
|
||||
<button>Create Post</button>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
-->
|
||||
<template>
|
||||
<div class="ml-auto mr-auto w-1/2 pt-5 pb-5">
|
||||
<h4 class="text-center pt-5 pb-5 border-b border-zinc-500">Sign In</h4>
|
||||
<form @submit.prevent class="m-auto pt-5 pb-5">
|
||||
<div class="mb-5 ml-auto mr-auto">
|
||||
<label for="email" class="text-right w-64 inline-block mr-5">Email Address</label>
|
||||
<input v-model="email" type="email" placeholder="" name="email" required
|
||||
class="w-1/2 bg-zinc-800 pl-3 pr-3 pt-2 pb-2 outline-none rounded border border-zinc-500 hover:border-zinc-400 focus:border-green-800">
|
||||
</div>
|
||||
<div class="mb-5 ml-auto mr-auto">
|
||||
<label for="password" class="text-right w-64 inline-block mr-5">Password</label>
|
||||
<input v-model="password" placeholder="" type="password" name="password" required
|
||||
class="w-1/2 bg-zinc-800 pl-3 pr-3 pt-2 pb-2 outline-none rounded border border-zinc-500 hover:border-zinc-400 focus:border-green-800">
|
||||
</div>
|
||||
<div class="mb-5 ml-auto mr-auto">
|
||||
<label class="text-right w-64 inline-block mr-5"></label>
|
||||
<button @click="login" class="rounded bg-zinc-500 hover:bg-zinc-400 pb-2 pt-2 pl-5 pr-5">Sign
|
||||
In</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
10
crates/frontend/src/components/NavBar.vue
Normal file
10
crates/frontend/src/components/NavBar.vue
Normal file
@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<nav class="flex justify-between items-center m-0 pl-3 pr-3 bg-zinc-800 border-b border-b-zinc-500">
|
||||
<div class="items-center m-0 flex">
|
||||
<slot name="left"></slot>
|
||||
</div>
|
||||
<div class="items-center m-0 flex">
|
||||
<slot name="right"></slot>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
@ -1,87 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
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>
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<DocumentationIcon />
|
||||
</template>
|
||||
<template #heading>Documentation</template>
|
||||
|
||||
Vue’s
|
||||
<a href="https://vuejs.org/" target="_blank" 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" rel="noopener">Vite</a>. The
|
||||
recommended IDE setup is
|
||||
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
|
||||
<a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
|
||||
you need to test your components and web pages, check out
|
||||
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
|
||||
<a href="https://on.cypress.io/component" target="_blank" rel="noopener">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" rel="noopener">Pinia</a>,
|
||||
<a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
|
||||
<a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
|
||||
<a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
|
||||
you need more resources, we suggest paying
|
||||
<a href="https://github.com/vuejs/awesome-vue" target="_blank" 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" rel="noopener">Vue Land</a>, our official
|
||||
Discord server, or
|
||||
<a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener">StackOverflow</a>.
|
||||
You
|
||||
should also subscribe to
|
||||
<a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
|
||||
the official
|
||||
<a href="https://twitter.com/vuejs" target="_blank" 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" rel="noopener">becoming a sponsor</a>.
|
||||
</WelcomeItem>
|
||||
|
||||
</template>
|
||||
@ -1,14 +0,0 @@
|
||||
<template>
|
||||
<div class="flex relative mt-8">
|
||||
<i
|
||||
class="flex place-items-center place-content-center w-8 h-8 text-zinc-100 border rounded-lg border-zinc-100 before:border-l before:absolute before:left-0 before:bottom-1 before:h-16 top-16">
|
||||
<slot name="icon"></slot>
|
||||
</i>
|
||||
<div class="flex-1 ml-4">
|
||||
<h3 class="text-white text-xl mb-2 font-medium">
|
||||
<slot name="heading"></slot>
|
||||
</h3>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
84
crates/frontend/src/components/icons/Meerkat.vue
Normal file
84
crates/frontend/src/components/icons/Meerkat.vue
Normal file
@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<svg width="48" height="48" viewBox="0 0 140.29886 97.999847" version="1.1" id="svg1" xml:space="preserve"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs id="defs1" />
|
||||
<g id="layer1" transform="translate(150.42321,20.813087)">
|
||||
<g id="g58" transform="matrix(1.8454162,0,0,1.8454162,-242.5425,-75.057662)">
|
||||
<g id="g45" transform="translate(-17.037401,-18.956659)">
|
||||
<path
|
||||
style="fill:#caa65b;fill-opacity:1;stroke:none;stroke-width:0.499602;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 149.89789,64.676766 c -0.6765,-1.565544 -1.35299,-3.499358 -3.00045,-4.762659 -1.64747,-1.263301 -4.26572,-3.148925 -6.37046,-4.299347 -2.10475,-1.150421 -3.69573,-2.490161 -5.36394,-3.66554 -1.66821,-1.17538 -3.41343,-2.186257 -6.16428,-3.13209 -2.75085,-0.945833 -6.50701,-1.82651 -10.67447,-2.24453 -4.16746,-0.418019 -8.74583,-0.373339 -13.32429,-0.328649 -4.57846,-0.04469 -9.156826,-0.08937 -13.324289,0.328649 -4.167463,0.41802 -7.923617,1.298697 -10.67447,2.24453 -2.750853,0.945833 -4.496076,1.95671 -6.164282,3.13209 -1.668206,1.175379 -3.259191,2.515119 -5.363936,3.66554 -2.104745,1.150422 -4.722995,3.036046 -6.370459,4.299347 -1.647464,1.263301 -2.323955,3.197115 -3.000459,4.762659 l 6.856918,3.293368 h 76.100127 z"
|
||||
id="path23" transform="matrix(0.82368967,0,0,0.91193657,18.512585,6.5794302)" />
|
||||
<path id="path33" style="fill:#f6eaca;fill-opacity:1;stroke:none;stroke-width:0.499999"
|
||||
d="m 89.645271,100.95535 c 7.677364,0 23.032089,0 30.709449,0 7.67737,0 7.67737,0 7.67737,0 2.85182,-5.673356 5.12763,-10.200825 6.76769,-16.689792 1.64005,-6.488966 1.54198,-10.577877 1.41909,-15.701677 0,0 0,0 -0.92288,-1.756611 -0.92287,-1.75661 -2.76862,-5.269827 -7.82717,-7.506991 -5.05854,-2.237164 -10.2366,-2.165312 -14.51039,-1.1889 -4.27378,0.976412 -6.1161,2.780155 -7.95843,2.798806 -1.84233,0.01865 -3.68465,-1.747787 -7.958428,-2.724197 -4.273778,-0.97641 -10.650225,-1.101805 -14.922532,0.768792 -4.272307,1.870598 -6.305108,5.739849 -8.337908,9.609101 0,0 0,0 0,0 -0.07678,5.1238 -0.138053,9.212711 1.502,15.701677 1.640053,6.488965 3.879072,11.016436 6.684778,16.689792 0,0 -2e-6,0 7.677361,0 z" />
|
||||
<path
|
||||
style="fill:#764d3c;fill-opacity:1;stroke:#260d02;stroke-width:1.15381;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 67.35977,76.543165 c -2.414103,-0.851341 -5.148126,-1.70268 -6.611426,-4.165251 -1.463299,-2.462571 -1.855697,-5.243411 -0.646239,-7.701148 1.209458,-2.457738 4.072368,-3.145027 7.00378,-3.986704 z m 75.36019,0 c 2.4141,-0.851341 4.8282,-1.70268 6.2915,-4.165251 1.4633,-2.462571 2.09589,-5.243411 0.88643,-7.701148 -1.20945,-2.457738 -4.01268,-3.145027 -6.9441,-3.986704 z"
|
||||
id="path21" transform="matrix(0.82368967,0,0,0.91193657,18.512585,6.5794302)" />
|
||||
<path
|
||||
style="fill:#613723;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 73.89157,69.153428 -0.10456,-7.228512 c -2.192267,0.905974 -4.384535,1.811949 -5.365122,3.343097 -0.980587,1.531148 -0.749495,3.68747 -0.518402,5.843792 0.36662,-0.673067 0.733241,-1.346133 1.372028,-1.854518 0.638788,-0.508384 1.549742,-0.852087 2.364446,-0.841949 0.814704,0.01014 1.533157,0.374113 2.25161,0.73809 z m 62.21686,0 0.10456,-7.228512 c 2.19227,0.905974 4.38454,1.811949 5.36512,3.343097 0.98059,1.531148 0.7495,3.68747 0.5184,5.843792 -0.36662,-0.673067 -0.73324,-1.346133 -1.37202,-1.854518 -0.63879,-0.508384 -1.54975,-0.852087 -2.36445,-0.841949 -0.8147,0.01014 -1.53316,0.374113 -2.25161,0.73809 z"
|
||||
id="path54" />
|
||||
<path
|
||||
style="fill:#e2ce9a;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 99.414974,77.197367 C 101.27665,74.319538 103.13829,71.441764 105,71.441763 c 1.86171,0 3.72335,2.877775 5.58503,5.755604 z"
|
||||
id="path51" />
|
||||
<path id="path52"
|
||||
style="fill:#d7b774;fill-opacity:1;stroke-width:2.03025;stroke-linecap:round;stroke-linejoin:round"
|
||||
d="m 110.58503,77.197369 c 0,0.899566 -0.66849,3.330336 -1.70087,4.783905 -1.03237,1.453569 -2.42863,1.929938 -3.88416,1.929938 -1.45553,0 -2.85179,-0.476369 -3.88416,-1.929938 -1.03238,-1.45357 -1.70087,-3.884339 -1.70087,-4.783905 0,-1.799132 2.5005,-1.562812 5.58503,-1.562812 3.08453,0 5.58503,-0.23632 5.58503,1.562812 z" />
|
||||
<path id="path27" style="fill:#260d02;fill-opacity:1;stroke:none;stroke-width:0.499999"
|
||||
d="m 110.58503,77.197369 c 0,1.542263 -2.5005,3.209678 -5.58503,3.209677 -3.08452,-10e-7 -5.585025,-1.667416 -5.585025,-3.209677 0,-1.542261 2.500505,-2.375348 5.585025,-2.375349 3.08453,-10e-7 5.58503,0.833086 5.58503,2.375349 z" />
|
||||
<path
|
||||
style="fill:#764d3c;fill-opacity:1;stroke:none;stroke-width:0.499999;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 112.7133,67.416323 c 0.0638,2.364566 1.27095,5.236409 3.24083,6.787235 2.08535,1.641729 5.16848,2.064956 7.78963,1.648409 3.35389,-0.532993 7.76222,-2.193587 8.8223,-5.095203 1.06007,-2.901617 -1.16598,-7.671931 -4.64597,-8.875533 -3.47998,-1.203602 -8.2135,-1.131007 -11.16124,-0.03745 -2.94774,1.093556 -4.10939,3.207976 -4.04555,5.572542 z m -15.4266,0 c -0.06384,2.364566 -1.353158,4.979171 -3.240829,6.787235 -1.88767,1.808065 -4.37348,2.80942 -7.78963,1.648409 -3.41615,-1.16101 -7.762222,-2.193587 -8.822297,-5.095203 -1.060075,-2.901617 1.165977,-7.671931 4.645961,-8.875533 3.479985,-1.203602 8.213505,-1.131007 11.161247,-0.03745 2.947743,1.093556 4.109387,3.207976 4.045548,5.572542 z"
|
||||
id="path28" />
|
||||
<path
|
||||
style="fill:#260d02;fill-opacity:1;stroke:none;stroke-width:0.589188;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 114.94392,69.780609 c 0,2.655366 1.87253,4.042592 4.52791,4.042592 2.65536,0 5.08803,-1.387226 5.08803,-4.042592 0,-2.655368 -2.1526,-4.807967 -4.80797,-4.807967 -2.65537,0 -4.80797,2.152599 -4.80797,4.807967 z"
|
||||
id="path53" />
|
||||
<path
|
||||
style="fill:#260d02;fill-opacity:1;stroke:none;stroke-width:0.578499;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 94.968852,69.722679 c 0,2.607195 -2.113549,4.720744 -4.720744,4.720744 -2.607195,0 -4.720744,-2.113549 -4.720744,-4.720744 0,-2.607195 2.113549,-4.720744 4.720744,-4.720744 2.607195,0 4.720744,2.113549 4.720744,4.720744 z"
|
||||
id="path29" />
|
||||
<path style="fill:none;stroke:#260d02;stroke-width:1;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 105.65276,83.392427 c 0,1.174279 0,2.348558 0,3.522837" id="path15"
|
||||
transform="translate(-0.65276,-3.0040522)" />
|
||||
<path
|
||||
style="fill:none;stroke:#260d02;stroke-width:1;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 94.045889,87.659756 c 2.556754,0.59495 3.956812,0.47748 5.921244,0.266356 1.725607,-0.185456 3.487697,-0.595661 5.032867,-1.33388 1.54517,0.738219 3.09034,1.476437 5.03287,1.33388 1.94252,-0.142556 5.38536,-0.936201 6.62226,-3.822913"
|
||||
id="path31" transform="translate(0,-2.6810205)" />
|
||||
<path id="path45" transform="translate(0,-0.58955077)"
|
||||
d="m 92.829198,68.313416 c 0,0.463928 -0.376088,0.840016 -0.840016,0.840016 -0.463929,0 -0.840017,-0.376088 -0.840017,-0.840016 0,-0.463929 0.376088,-0.840017 0.840017,-0.840017 0.463928,0 0.840016,0.376088 0.840016,0.840017 z m 24.341602,0 c 0,0.463928 0.37609,0.840016 0.84002,0.840016 0.46393,0 0.84001,-0.376088 0.84001,-0.840016 0,-0.463929 -0.37608,-0.840017 -0.84001,-0.840017 -0.46393,0 -0.84002,0.376088 -0.84002,0.840017 z"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.433001;stroke-dasharray:none;stroke-opacity:1" />
|
||||
<path
|
||||
style="fill:#e2ce9a;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 80.264904,54.03489 c 3.14633,-1.696538 6.29266,-3.393076 10.415177,-4.273728 4.122516,-0.880652 9.221217,-0.945417 14.368409,-0.92669 5.14719,0.01873 10.34287,0.120947 14.4837,0.988087 4.14083,0.86714 7.22681,2.499202 10.31279,4.131263 -4.13167,-1.127737 -8.26335,-2.255476 -12.39502,-2.549174 -4.13167,-0.293699 -8.26334,0.246639 -12.39502,0.253395 -4.13168,0.0068 -8.263344,-0.520071 -12.395017,-0.212861 -4.131674,0.307211 -8.263346,1.448459 -12.395019,2.589708 z"
|
||||
id="path56" />
|
||||
<path
|
||||
style="fill:none;fill-opacity:1;stroke:#260d02;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 68.018066,65.560537 c 0.823817,-1.447748 1.647633,-2.895493 2.934106,-4.272836 1.286473,-1.377343 3.035529,-2.684226 4.646461,-3.894816 1.610931,-1.210591 3.083641,-2.324816 4.666271,-3.357993 1.582629,-1.033178 3.27508,-1.985248 5.586761,-2.802444 2.311681,-0.817197 5.242439,-1.499472 8.537063,-1.890569 3.294625,-0.391097 6.952912,-0.490998 10.611302,-0.490997 3.6584,1e-6 7.31669,0.0999 10.61131,0.491005 3.29462,0.391103 6.22537,1.073378 8.53704,1.890577 2.31167,0.8172 4.00412,1.769271 5.58675,2.802448 1.58262,1.033178 3.05534,2.147406 4.66627,3.357995 1.61093,1.210588 3.35999,2.517474 4.64646,3.89482 1.28646,1.377345 2.11026,2.82506 2.93407,4.27281"
|
||||
id="path46" />
|
||||
<path
|
||||
style="fill:none;fill-opacity:1;stroke:#260d02;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 73.996131,76.38194 c 0.429,3.8539 0.857991,7.707726 2.186647,11.803376 1.328656,4.09565 3.55687,8.432797 5.78513,12.770034"
|
||||
id="path47" />
|
||||
<path
|
||||
style="fill:none;fill-opacity:1;stroke:#260d02;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 136.06954,76.38194 c -0.39825,4.12443 -0.79649,8.248778 -2.13609,12.344427 -1.3396,4.095649 -3.62046,8.162278 -5.90136,12.228983"
|
||||
id="path48" />
|
||||
<ellipse
|
||||
style="fill:#4d2f24;fill-opacity:1;stroke:none;stroke-width:0.774066;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="path49" cx="104.96773" cy="76.749893" rx="3.82424" ry="0.85318637" />
|
||||
<path
|
||||
style="fill:none;fill-opacity:1;stroke:#caa65b;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 102.22569,90.834343 c 0,0 1.83164,0.285232 2.77431,0.285232 0.94267,0 2.77431,-0.285232 2.77431,-0.285232"
|
||||
id="path50" />
|
||||
<path
|
||||
style="fill:none;fill-opacity:1;stroke:#260d02;stroke-width:1.15381;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 67.35977,76.543165 c -2.414103,-0.851341 -5.148126,-1.70268 -6.611426,-4.165251 -1.463299,-2.462571 -1.855697,-5.243411 -0.646239,-7.701148 1.209458,-2.457738 4.072368,-3.145027 7.00378,-3.986704 z m 75.36019,0 c 2.4141,-0.851341 4.8282,-1.70268 6.2915,-4.165251 1.4633,-2.462571 2.09589,-5.243411 0.88643,-7.701148 -1.20945,-2.457738 -4.01268,-3.145027 -6.9441,-3.986704 z"
|
||||
id="path55" transform="matrix(0.82368967,0,0,0.91193657,18.512585,6.5794302)" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
@ -5,11 +5,15 @@ use rust_embed::RustEmbed;
|
||||
#[folder = "dist/assets/"]
|
||||
pub struct Assets;
|
||||
|
||||
// TODO: parse assets and add paths to templates
|
||||
|
||||
#[derive(Template)]
|
||||
#[template(path = "index.html")]
|
||||
pub struct HomeTemplate;
|
||||
#[template(path = "base.html")]
|
||||
pub struct BaseTemplate<'a> {
|
||||
pub view: &'a str,
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn test_render() {
|
||||
println!("{}", HomeTemplate.render().unwrap());
|
||||
println!("{}", BaseTemplate { view: "home" }.render().unwrap());
|
||||
}
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import './assets/style.css'
|
||||
import { createApp } from 'vue';
|
||||
import App from '@/App.vue';
|
||||
import router from '@/router';
|
||||
|
||||
import '@/assets/style.css';
|
||||
|
||||
createApp(App)
|
||||
.use(router)
|
||||
.mount('#app');
|
||||
|
||||
const app = createApp(App)
|
||||
app.mount('#app')
|
||||
|
||||
11
crates/frontend/src/router.ts
Normal file
11
crates/frontend/src/router.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes: [
|
||||
{ path: '/', component: () => import('./views/Home.vue') },
|
||||
{ path: '/user/login', component: () => import('./views/SignIn.vue') }
|
||||
]
|
||||
});
|
||||
|
||||
export default router;
|
||||
33
crates/frontend/src/views/Base.vue
Normal file
33
crates/frontend/src/views/Base.vue
Normal file
@ -0,0 +1,33 @@
|
||||
<script setup lang="ts">
|
||||
import Meerkat from '@/components/icons/Meerkat.vue';
|
||||
import NavBar from '@/components/NavBar.vue';
|
||||
|
||||
function next() {
|
||||
window.location.pathname = "/me";
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex-grow pb-20">
|
||||
<NavBar>
|
||||
<template #left>
|
||||
<Meerkat />
|
||||
</template>
|
||||
<template #right>
|
||||
<RouterLink class="flex min-w-9 min-h-9 pt-1 pb-1 pl-3 pr-3 rounded hover:bg-zinc-600" to="/user/login">
|
||||
Sign In</RouterLink>
|
||||
<a class="flex min-w-9 min-h-9 pt-1 pb-1 pl-3 pr-3 rounded hover:bg-zinc-600" href="/user/register">Sign
|
||||
up</a>
|
||||
</template>
|
||||
</NavBar>
|
||||
|
||||
<main>
|
||||
<slot></slot>
|
||||
</main>
|
||||
</div>
|
||||
<footer class="flex justify-between pb-2 pt-2 pl-5 pr-5 bg-zinc-800 border-t border-t-zinc-500">
|
||||
<a href="/">Made with glove</a>
|
||||
<a href="/api/v1">API</a>
|
||||
</footer>
|
||||
|
||||
</template>
|
||||
9
crates/frontend/src/views/Home.vue
Normal file
9
crates/frontend/src/views/Home.vue
Normal file
@ -0,0 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import Base from '@/views/Base.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Base>
|
||||
Home
|
||||
</Base>
|
||||
</template>
|
||||
10
crates/frontend/src/views/SignIn.vue
Normal file
10
crates/frontend/src/views/SignIn.vue
Normal file
@ -0,0 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import Base from '@/views/Base.vue';
|
||||
import Login from '@/components/Login.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Base>
|
||||
<Login />
|
||||
</Base>
|
||||
</template>
|
||||
14
crates/frontend/templates/base.html
Normal file
14
crates/frontend/templates/base.html
Normal file
@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="h-full">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Elnafo</title>
|
||||
<script type="module" crossorigin src="/assets/index.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index.css">
|
||||
</head>
|
||||
<body class="h-full bg-zinc-900 text-zinc-200 font-sans">
|
||||
<div id="{{ view }}" class="flex flex-col h-full"></div>
|
||||
</body>
|
||||
</html>
|
||||
21
crates/frontend/tsconfig.app.json
Normal file
21
crates/frontend/tsconfig.app.json
Normal file
@ -0,0 +1,21 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"include": [
|
||||
"env.d.ts",
|
||||
"src/**/*",
|
||||
"src/**/*.vue"
|
||||
],
|
||||
"exclude": [
|
||||
"src/**/__tests__/*"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./src/*"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -3,6 +3,9 @@
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.vite.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.app.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,25 +1,19 @@
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
import { resolve } from 'path'
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import vueJsx from '@vitejs/plugin-vue-jsx'
|
||||
|
||||
// TODO:move index.html to src
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
//base: '/',
|
||||
plugins: [
|
||||
vue(),
|
||||
vueJsx(),
|
||||
],
|
||||
//root: './src',
|
||||
build: {
|
||||
rollupOptions: {
|
||||
output: {
|
||||
entryFileNames: 'assets/[name].js',
|
||||
assetFileNames: 'assets/[name].css'
|
||||
assetFileNames: 'assets/[name].css',
|
||||
chunkFileNames: 'assets/[name].js'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -71,6 +71,7 @@ async fn main() {
|
||||
|
||||
let app = Router::new()
|
||||
.route("/", get(home))
|
||||
.route("/user/login", get(user_login))
|
||||
.route("/assets/*file", get(static_handler))
|
||||
.route("/api/v1/register_user", post(api::v1::register_user))
|
||||
.route("/api/v1/login_user", post(api::v1::login_user))
|
||||
@ -101,7 +102,11 @@ async fn main() {
|
||||
}
|
||||
|
||||
async fn home() -> impl IntoResponse {
|
||||
frontend::HomeTemplate
|
||||
frontend::BaseTemplate { view: "app" }
|
||||
}
|
||||
|
||||
async fn user_login() -> impl IntoResponse {
|
||||
frontend::BaseTemplate { view: "signin" }
|
||||
}
|
||||
|
||||
async fn users(
|
||||
|
||||
Loading…
Reference in New Issue
Block a user