From 1447509699f8299468eee270464be4ec7a4b634b Mon Sep 17 00:00:00 2001 From: L-Nafaryus Date: Tue, 19 Mar 2024 01:45:20 +0500 Subject: [PATCH] base frontend structure, client router, base and login views --- crates/frontend/askama.toml | 2 +- crates/frontend/index.html | 8 +- crates/frontend/package-lock.json | 22 ++++- crates/frontend/package.json | 3 +- crates/frontend/src/App.vue | 33 +------ crates/frontend/src/assets/logo.svg | 1 - crates/frontend/src/components/HelloWorld.vue | 16 ---- crates/frontend/src/components/Login.vue | 57 +++++------- crates/frontend/src/components/NavBar.vue | 10 +++ crates/frontend/src/components/TheWelcome.vue | 87 ------------------- .../frontend/src/components/WelcomeItem.vue | 14 --- .../frontend/src/components/icons/Meerkat.vue | 84 ++++++++++++++++++ crates/frontend/src/lib.rs | 10 ++- crates/frontend/src/main.ts | 13 +-- crates/frontend/src/router.ts | 11 +++ crates/frontend/src/views/Base.vue | 33 +++++++ crates/frontend/src/views/Home.vue | 9 ++ crates/frontend/src/views/SignIn.vue | 10 +++ crates/frontend/templates/base.html | 14 +++ crates/frontend/tsconfig.app.json | 21 +++++ crates/frontend/tsconfig.json | 3 + crates/frontend/vite.config.ts | 10 +-- src/main.rs | 7 +- 23 files changed, 272 insertions(+), 206 deletions(-) delete mode 100644 crates/frontend/src/assets/logo.svg delete mode 100644 crates/frontend/src/components/HelloWorld.vue create mode 100644 crates/frontend/src/components/NavBar.vue delete mode 100644 crates/frontend/src/components/TheWelcome.vue delete mode 100644 crates/frontend/src/components/WelcomeItem.vue create mode 100644 crates/frontend/src/components/icons/Meerkat.vue create mode 100644 crates/frontend/src/router.ts create mode 100644 crates/frontend/src/views/Base.vue create mode 100644 crates/frontend/src/views/Home.vue create mode 100644 crates/frontend/src/views/SignIn.vue create mode 100644 crates/frontend/templates/base.html create mode 100644 crates/frontend/tsconfig.app.json diff --git a/crates/frontend/askama.toml b/crates/frontend/askama.toml index 0279753..6661c6c 100644 --- a/crates/frontend/askama.toml +++ b/crates/frontend/askama.toml @@ -1,2 +1,2 @@ [general] -dirs = ["dist"] +dirs = ["templates"] diff --git a/crates/frontend/index.html b/crates/frontend/index.html index fc17358..ca5262b 100644 --- a/crates/frontend/index.html +++ b/crates/frontend/index.html @@ -1,13 +1,13 @@ - + - Vite App + Elnafo Dev - -
+ +
diff --git a/crates/frontend/package-lock.json b/crates/frontend/package-lock.json index 228bfdc..1113e01 100644 --- a/crates/frontend/package-lock.json +++ b/crates/frontend/package-lock.json @@ -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", diff --git a/crates/frontend/package.json b/crates/frontend/package.json index 9bbcea4..0afdd4f 100644 --- a/crates/frontend/package.json +++ b/crates/frontend/package.json @@ -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", diff --git a/crates/frontend/src/App.vue b/crates/frontend/src/App.vue index bb722fa..c8e2d75 100644 --- a/crates/frontend/src/App.vue +++ b/crates/frontend/src/App.vue @@ -1,36 +1,7 @@ diff --git a/crates/frontend/src/assets/logo.svg b/crates/frontend/src/assets/logo.svg deleted file mode 100644 index 7565660..0000000 --- a/crates/frontend/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/crates/frontend/src/components/HelloWorld.vue b/crates/frontend/src/components/HelloWorld.vue deleted file mode 100644 index 6e1c5f3..0000000 --- a/crates/frontend/src/components/HelloWorld.vue +++ /dev/null @@ -1,16 +0,0 @@ - - - diff --git a/crates/frontend/src/components/Login.vue b/crates/frontend/src/components/Login.vue index 5ad0ae3..82bf279 100644 --- a/crates/frontend/src/components/Login.vue +++ b/crates/frontend/src/components/Login.vue @@ -1,6 +1,6 @@ - - - - + diff --git a/crates/frontend/src/components/NavBar.vue b/crates/frontend/src/components/NavBar.vue new file mode 100644 index 0000000..815415b --- /dev/null +++ b/crates/frontend/src/components/NavBar.vue @@ -0,0 +1,10 @@ + diff --git a/crates/frontend/src/components/TheWelcome.vue b/crates/frontend/src/components/TheWelcome.vue deleted file mode 100644 index 0b12dba..0000000 --- a/crates/frontend/src/components/TheWelcome.vue +++ /dev/null @@ -1,87 +0,0 @@ - - - diff --git a/crates/frontend/src/components/WelcomeItem.vue b/crates/frontend/src/components/WelcomeItem.vue deleted file mode 100644 index 8dfe312..0000000 --- a/crates/frontend/src/components/WelcomeItem.vue +++ /dev/null @@ -1,14 +0,0 @@ - diff --git a/crates/frontend/src/components/icons/Meerkat.vue b/crates/frontend/src/components/icons/Meerkat.vue new file mode 100644 index 0000000..196c922 --- /dev/null +++ b/crates/frontend/src/components/icons/Meerkat.vue @@ -0,0 +1,84 @@ + diff --git a/crates/frontend/src/lib.rs b/crates/frontend/src/lib.rs index a6192fd..d15bb29 100644 --- a/crates/frontend/src/lib.rs +++ b/crates/frontend/src/lib.rs @@ -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()); } diff --git a/crates/frontend/src/main.ts b/crates/frontend/src/main.ts index 0b7c95f..46e69d3 100644 --- a/crates/frontend/src/main.ts +++ b/crates/frontend/src/main.ts @@ -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') diff --git a/crates/frontend/src/router.ts b/crates/frontend/src/router.ts new file mode 100644 index 0000000..b753aef --- /dev/null +++ b/crates/frontend/src/router.ts @@ -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; diff --git a/crates/frontend/src/views/Base.vue b/crates/frontend/src/views/Base.vue new file mode 100644 index 0000000..94b60ee --- /dev/null +++ b/crates/frontend/src/views/Base.vue @@ -0,0 +1,33 @@ + + + diff --git a/crates/frontend/src/views/Home.vue b/crates/frontend/src/views/Home.vue new file mode 100644 index 0000000..d8582fe --- /dev/null +++ b/crates/frontend/src/views/Home.vue @@ -0,0 +1,9 @@ + + + diff --git a/crates/frontend/src/views/SignIn.vue b/crates/frontend/src/views/SignIn.vue new file mode 100644 index 0000000..cce5bcb --- /dev/null +++ b/crates/frontend/src/views/SignIn.vue @@ -0,0 +1,10 @@ + + + diff --git a/crates/frontend/templates/base.html b/crates/frontend/templates/base.html new file mode 100644 index 0000000..8c1d427 --- /dev/null +++ b/crates/frontend/templates/base.html @@ -0,0 +1,14 @@ + + + + + + + Elnafo + + + + +
+ + diff --git a/crates/frontend/tsconfig.app.json b/crates/frontend/tsconfig.app.json new file mode 100644 index 0000000..a97c073 --- /dev/null +++ b/crates/frontend/tsconfig.app.json @@ -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/*" + ] + } + } +} diff --git a/crates/frontend/tsconfig.json b/crates/frontend/tsconfig.json index 6598bdb..2c52d48 100644 --- a/crates/frontend/tsconfig.json +++ b/crates/frontend/tsconfig.json @@ -3,6 +3,9 @@ "references": [ { "path": "./tsconfig.vite.json" + }, + { + "path": "./tsconfig.app.json" } ] } diff --git a/crates/frontend/vite.config.ts b/crates/frontend/vite.config.ts index 7261a11..a2f594d 100644 --- a/crates/frontend/vite.config.ts +++ b/crates/frontend/vite.config.ts @@ -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' } } }, diff --git a/src/main.rs b/src/main.rs index 6c20a1a..8c0e44e 100644 --- a/src/main.rs +++ b/src/main.rs @@ -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(