summaryrefslogtreecommitdiff
path: root/app/src
diff options
context:
space:
mode:
Diffstat (limited to 'app/src')
-rw-r--r--app/src/App.vue22
-rw-r--r--app/src/components/Footer.vue76
-rw-r--r--app/src/components/Header.vue17
-rw-r--r--app/src/main.ts32
-rw-r--r--app/src/router/index.ts18
-rw-r--r--app/src/sass/main.sass36
-rw-r--r--app/src/shims-vue.d.ts6
-rw-r--r--app/src/theme/variables.css78
-rw-r--r--app/src/views/HomePage.vue26
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>
generated by cgit v1.2.3-18-g5258 (git 2.32.0) at 2024-09-19 22:34:07 +0000