diff options
author | Santo Cariotti <santo@dcariotti.me> | 2022-11-12 11:37:43 +0100 |
---|---|---|
committer | Santo Cariotti <santo@dcariotti.me> | 2022-11-12 11:37:59 +0100 |
commit | 190259bb0f512d881a1dc852ff0c68dd41aeb434 (patch) | |
tree | a69841d83fcb7df6809b0389e88e0dcb20c2fd7d /app/src | |
parent | 35c2260f3b23de24a8fdc4c4a96151124ae7ccdf (diff) |
Init
Diffstat (limited to 'app/src')
-rw-r--r-- | app/src/App.vue | 22 | ||||
-rw-r--r-- | app/src/components/Footer.vue | 76 | ||||
-rw-r--r-- | app/src/components/Header.vue | 17 | ||||
-rw-r--r-- | app/src/main.ts | 32 | ||||
-rw-r--r-- | app/src/router/index.ts | 18 | ||||
-rw-r--r-- | app/src/sass/main.sass | 36 | ||||
-rw-r--r-- | app/src/shims-vue.d.ts | 6 | ||||
-rw-r--r-- | app/src/theme/variables.css | 78 | ||||
-rw-r--r-- | app/src/views/HomePage.vue | 26 |
9 files changed, 311 insertions, 0 deletions
diff --git a/app/src/App.vue b/app/src/App.vue new file mode 100644 index 0000000..9f44f85 --- /dev/null +++ b/app/src/App.vue @@ -0,0 +1,22 @@ +<template> + <ion-app> + <ion-router-outlet /> + </ion-app> +</template> + +<script lang="ts"> +import { IonApp, IonRouterOutlet } from '@ionic/vue'; +import { defineComponent } from 'vue'; + +export default defineComponent({ + name: 'App', + components: { + IonApp, + IonRouterOutlet + } +}); +</script> + +<style lang="sass"> +@import 'sass/main.sass' +</style> diff --git a/app/src/components/Footer.vue b/app/src/components/Footer.vue new file mode 100644 index 0000000..9ca60cb --- /dev/null +++ b/app/src/components/Footer.vue @@ -0,0 +1,76 @@ +<template> + <ion-tabs> + <ion-router-outlet></ion-router-outlet> + <ion-tab-bar slot="bottom"> + <ion-tab-button tab="home" href="/"> + <div class="t"> + <svg + xmlns="http://www.w3.org/2000/svg" + fill="none" + viewBox="0 0 24 24" + stroke-width="1.5" + stroke="currentColor" + class="w-6 h-6" + > + <path + stroke-linecap="round" + stroke-linejoin="round" + d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" + /> + </svg> + </div> + </ion-tab-button> + <ion-tab-button tab="sign" href="/sign"> + <div class="t"> + <svg + xmlns="http://www.w3.org/2000/svg" + fill="none" + viewBox="0 0 24 24" + stroke-width="1.5" + stroke="currentColor" + class="w-6 h-6" + > + <path + stroke-linecap="round" + stroke-linejoin="round" + d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" + /> + </svg> + </div> + </ion-tab-button> + <ion-tab-button tab="me" href="/me"> + <div class="t"> + <svg + xmlns="http://www.w3.org/2000/svg" + fill="none" + viewBox="0 0 24 24" + stroke-width="1.5" + stroke="currentColor" + class="w-6 h-6" + > + <path + stroke-linecap="round" + stroke-linejoin="round" + d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5zm6-10.125a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0zm1.294 6.336a6.721 6.721 0 01-3.17.789 6.721 6.721 0 01-3.168-.789 3.376 3.376 0 016.338 0z" + /> + </svg> + </div> + </ion-tab-button> + </ion-tab-bar> + </ion-tabs> +</template> + +<script lang="ts"> +import { defineComponent } from "vue"; +import { IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from "@ionic/vue"; + +export default defineComponent({ + name: "Footer", + components: { + IonTabBar, + IonTabButton, + IonTabs, + IonRouterOutlet, + }, +}); +</script> diff --git a/app/src/components/Header.vue b/app/src/components/Header.vue new file mode 100644 index 0000000..d5de19c --- /dev/null +++ b/app/src/components/Header.vue @@ -0,0 +1,17 @@ +<template> + <ion-header> + <h1>M6: Insecure Authorization</h1> + </ion-header> +</template> + +<script lang="ts"> +import { defineComponent } from "vue"; +import { IonHeader } from "@ionic/vue"; + +export default defineComponent({ + name: "Header", + components: { + IonHeader, + }, +}); +</script> diff --git a/app/src/main.ts b/app/src/main.ts new file mode 100644 index 0000000..ce30a3f --- /dev/null +++ b/app/src/main.ts @@ -0,0 +1,32 @@ +import { createApp } from 'vue' +import App from './App.vue' +import router from './router'; + +import { IonicVue } from '@ionic/vue'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/vue/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/vue/css/normalize.css'; +import '@ionic/vue/css/structure.css'; +import '@ionic/vue/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/vue/css/padding.css'; +import '@ionic/vue/css/float-elements.css'; +import '@ionic/vue/css/text-alignment.css'; +import '@ionic/vue/css/text-transformation.css'; +import '@ionic/vue/css/flex-utils.css'; +import '@ionic/vue/css/display.css'; + +/* Theme variables */ +import './theme/variables.css'; + +const app = createApp(App) + .use(IonicVue) + .use(router); + +router.isReady().then(() => { + app.mount('#app'); +});
\ No newline at end of file diff --git a/app/src/router/index.ts b/app/src/router/index.ts new file mode 100644 index 0000000..86cf89f --- /dev/null +++ b/app/src/router/index.ts @@ -0,0 +1,18 @@ +import { createRouter, createWebHistory } from "@ionic/vue-router"; +import { RouteRecordRaw } from "vue-router"; +import HomePage from "../views/HomePage.vue"; + +const routes: Array<RouteRecordRaw> = [ + { + path: "/", + component: HomePage, + name: "HomePage", + }, +]; + +const router = createRouter({ + history: createWebHistory(process.env.BASE_URL), + routes, +}); + +export default router; diff --git a/app/src/sass/main.sass b/app/src/sass/main.sass new file mode 100644 index 0000000..84bab38 --- /dev/null +++ b/app/src/sass/main.sass @@ -0,0 +1,36 @@ +#container + text-align: center + position: absolute + left: 0 + right: 0 + top: 50% + transform: translateY(-50%) + +#container strong + font-size: 20px + line-height: 26px + +#container p + font-size: 16px + line-height: 22px + color: #8c8c8c + margin: 0 + +#container a + text-decoration: none + + +ion-tab-bar + background-color: #4bd786 + +ion-tab-button + background-color: #4bd786 + color: #19703e + &.tab-selected + color: #fff + +.t + width: 30px + +ion-page + margin: 10px diff --git a/app/src/shims-vue.d.ts b/app/src/shims-vue.d.ts new file mode 100644 index 0000000..3804a43 --- /dev/null +++ b/app/src/shims-vue.d.ts @@ -0,0 +1,6 @@ +/* eslint-disable */ +declare module '*.vue' { + import type { DefineComponent } from 'vue' + const component: DefineComponent<{}, {}, any> + export default component +} diff --git a/app/src/theme/variables.css b/app/src/theme/variables.css new file mode 100644 index 0000000..e807a80 --- /dev/null +++ b/app/src/theme/variables.css @@ -0,0 +1,78 @@ +/* Ionic Variables and Theming. For more info, please see: +http://ionicframework.com/docs/theming/ */ + +/** Ionic CSS Variables **/ +:root { + /** primary **/ + --ion-color-primary: #3880ff; + --ion-color-primary-rgb: 56, 128, 255; + --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast-rgb: 255, 255, 255; + --ion-color-primary-shade: #3171e0; + --ion-color-primary-tint: #4c8dff; + + /** secondary **/ + --ion-color-secondary: #3dc2ff; + --ion-color-secondary-rgb: 61, 194, 255; + --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast-rgb: 255, 255, 255; + --ion-color-secondary-shade: #36abe0; + --ion-color-secondary-tint: #50c8ff; + + /** tertiary **/ + --ion-color-tertiary: #5260ff; + --ion-color-tertiary-rgb: 82, 96, 255; + --ion-color-tertiary-contrast: #ffffff; + --ion-color-tertiary-contrast-rgb: 255, 255, 255; + --ion-color-tertiary-shade: #4854e0; + --ion-color-tertiary-tint: #6370ff; + + /** success **/ + --ion-color-success: #2dd36f; + --ion-color-success-rgb: 45, 211, 111; + --ion-color-success-contrast: #ffffff; + --ion-color-success-contrast-rgb: 255, 255, 255; + --ion-color-success-shade: #28ba62; + --ion-color-success-tint: #42d77d; + + /** warning **/ + --ion-color-warning: #ffc409; + --ion-color-warning-rgb: 255, 196, 9; + --ion-color-warning-contrast: #000000; + --ion-color-warning-contrast-rgb: 0, 0, 0; + --ion-color-warning-shade: #e0ac08; + --ion-color-warning-tint: #ffca22; + + /** danger **/ + --ion-color-danger: #eb445a; + --ion-color-danger-rgb: 235, 68, 90; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255, 255, 255; + --ion-color-danger-shade: #cf3c4f; + --ion-color-danger-tint: #ed576b; + + /** dark **/ + --ion-color-dark: #222428; + --ion-color-dark-rgb: 34, 36, 40; + --ion-color-dark-contrast: #ffffff; + --ion-color-dark-contrast-rgb: 255, 255, 255; + --ion-color-dark-shade: #1e2023; + --ion-color-dark-tint: #383a3e; + + /** medium **/ + --ion-color-medium: #92949c; + --ion-color-medium-rgb: 146, 148, 156; + --ion-color-medium-contrast: #ffffff; + --ion-color-medium-contrast-rgb: 255, 255, 255; + --ion-color-medium-shade: #808289; + --ion-color-medium-tint: #9d9fa6; + + /** light **/ + --ion-color-light: #f4f5f8; + --ion-color-light-rgb: 244, 245, 248; + --ion-color-light-contrast: #000000; + --ion-color-light-contrast-rgb: 0, 0, 0; + --ion-color-light-shade: #d7d8da; + --ion-color-light-tint: #f5f6f9; +} + diff --git a/app/src/views/HomePage.vue b/app/src/views/HomePage.vue new file mode 100644 index 0000000..e952dd2 --- /dev/null +++ b/app/src/views/HomePage.vue @@ -0,0 +1,26 @@ +<template> + <ion-page> + <m6-header /> + <ion-content :fullscreen="true"> + <h6>Make login and test.</h6> + </ion-content> + <m6-footer /> + </ion-page> +</template> + +<script lang="ts"> +import { defineComponent } from "vue"; +import { IonPage, IonContent } from "@ionic/vue"; +import Header from "@/components/Header.vue"; +import Footer from "@/components/Footer.vue"; + +export default defineComponent({ + name: "HomePage", + components: { + IonContent, + IonPage, + "m6-header": Header, + "m6-footer": Footer, + }, +}); +</script> |