first commit
This commit is contained in:
Sas Andy
25
login-coba/components/ComponentA.js
Normal file
25
login-coba/components/ComponentA.js
Normal file
@@ -0,0 +1,25 @@
|
||||
// components/ComponentA.js
|
||||
|
||||
const ComponentA = {
|
||||
template: `
|
||||
<div>
|
||||
<h2>Component A</h2>
|
||||
<p>Count: {{ count }}</p>
|
||||
<v-btn @click="increment">Increment</v-btn>
|
||||
<v-btn @click="decrement">Decrement</v-btn>
|
||||
</div>
|
||||
`,
|
||||
computed: {
|
||||
count() {
|
||||
return this.$store.state.count;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
increment() {
|
||||
this.$store.dispatch('increment');
|
||||
},
|
||||
decrement() {
|
||||
this.$store.dispatch('decrement');
|
||||
}
|
||||
}
|
||||
};
|
||||
21
login-coba/components/ComponentB.js
Normal file
21
login-coba/components/ComponentB.js
Normal file
@@ -0,0 +1,21 @@
|
||||
// components/ComponentB.js
|
||||
|
||||
const ComponentB = {
|
||||
template: `
|
||||
<div>
|
||||
<h2>Component B</h2>
|
||||
<p>Data: {{ data }}</p>
|
||||
<v-btn @click="fetchData">Fetch Data</v-btn>
|
||||
</div>
|
||||
`,
|
||||
computed: {
|
||||
data() {
|
||||
return this.$store.state.data;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async fetchData() {
|
||||
await this.$store.dispatch('fetchData');
|
||||
}
|
||||
}
|
||||
};
|
||||
116
login-coba/components/coba.vue
Normal file
116
login-coba/components/coba.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-container class="mb-6">
|
||||
<v-row align="end" style="min-height: 480px;" no-gutters justify="center">
|
||||
askldoisa
|
||||
{{ email }}
|
||||
<v-col>
|
||||
<div class="d-flex justify-center">
|
||||
<v-sheet class="pa-2 ma-2">
|
||||
<h2 class="text-h6 font-weight-black">
|
||||
{{ $t("message.login") }}
|
||||
</h2>
|
||||
</v-sheet>
|
||||
</div>
|
||||
<div class="d-flex justify-center mb-6">
|
||||
<v-card
|
||||
class="mx-auto pa-12 pb-8"
|
||||
elevation="0"
|
||||
min-width="400"
|
||||
rounded="lg"
|
||||
>
|
||||
<div class="text-subtitle-1 text-medium-emphasis">
|
||||
{{ $t("message.email") }}
|
||||
</div>
|
||||
<v-text-field
|
||||
density="compact"
|
||||
:placeholder="$t('message.placeholderEmail')"
|
||||
prepend-inner-icon="mdi-email-outline"
|
||||
variant="outlined"
|
||||
></v-text-field>
|
||||
<div
|
||||
class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
|
||||
>
|
||||
{{ $t("message.password") }}
|
||||
<a
|
||||
class="text-caption text-decoration-none text-blue"
|
||||
href="#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
{{ $t("message.forgotPassword") }}</a
|
||||
>
|
||||
</div>
|
||||
<v-text-field
|
||||
:append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'"
|
||||
:type="visible ? 'text' : 'password'"
|
||||
density="compact"
|
||||
:placeholder="$t('message.placeholderPassword')"
|
||||
prepend-inner-icon="mdi-lock-outline"
|
||||
variant="outlined"
|
||||
@click:append-inner="visible = !visible"
|
||||
></v-text-field>
|
||||
<div class="text-center">
|
||||
<v-btn
|
||||
:loading="loading"
|
||||
@click="login"
|
||||
class="mt-8 text-none"
|
||||
color="primary"
|
||||
size="large"
|
||||
variant="elevated"
|
||||
block
|
||||
>
|
||||
{{ $t("message.login") }}
|
||||
<template v-slot:loader>
|
||||
<v-progress-linear indeterminate></v-progress-linear>
|
||||
</template>
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="module">
|
||||
export default {
|
||||
name: "CobaComponent",
|
||||
computed: {
|
||||
// Akses state dari store
|
||||
count() {
|
||||
return this.$store.state.coba.count;
|
||||
},
|
||||
email() {
|
||||
return this.$store.state.coba.email;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// Dispatch action ke store
|
||||
increment() {
|
||||
this.$store.dispatch("increment");
|
||||
},
|
||||
},
|
||||
};
|
||||
// export default {
|
||||
// name: "HelloWorld",
|
||||
// // setup() {
|
||||
// // // const store = useStore();
|
||||
// // const email = computed(() => $store.state.email);
|
||||
// // },
|
||||
// computed: {
|
||||
// email: {
|
||||
// get() {
|
||||
// return this.$store.state.store.email;
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// };
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
h1 {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
49
login-coba/components/coba2.vue
Normal file
49
login-coba/components/coba2.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-container class="mb-6">
|
||||
<h1>Component 2</h1>
|
||||
<h2>{{ email }}</h2>
|
||||
</v-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="module">
|
||||
export default {
|
||||
name: "component2",
|
||||
computed: {
|
||||
// Akses state dari store
|
||||
count() {
|
||||
return this.$store.state.coba2.count;
|
||||
},
|
||||
email() {
|
||||
return this.$store.state.coba2.email;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// Dispatch action ke store
|
||||
increment() {
|
||||
this.$store.dispatch("increment");
|
||||
},
|
||||
},
|
||||
};
|
||||
// export default {
|
||||
// name: "HelloWorld",
|
||||
// // setup() {
|
||||
// // // const store = useStore();
|
||||
// // const email = computed(() => $store.state.email);
|
||||
// // },
|
||||
// computed: {
|
||||
// email: {
|
||||
// get() {
|
||||
// return this.$store.state.store.email;
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// };
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
h1 {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
50
login-coba/components/main.vue
Normal file
50
login-coba/components/main.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<v-app id="inspire">
|
||||
<one-navbar></one-navbar>
|
||||
<v-main>
|
||||
<div class="w-100 rounded-xl mb-6 bg-primary-lighten mr-2 pa-3">
|
||||
<h1 class="primary-lighten--text">Main component</h1>
|
||||
<h2>{{ email }}</h2>
|
||||
<v-btn color="primary" class="text-white">Secondary Button</v-btn>
|
||||
<v-btn
|
||||
class="text-white text-subtitle-1"
|
||||
color="primary"
|
||||
size="small"
|
||||
variant="flat"
|
||||
>
|
||||
Create Event
|
||||
</v-btn>
|
||||
<coba-component></coba-component>
|
||||
</div>
|
||||
</v-main>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script type="module">
|
||||
import CobaComponent from "./coba.vue";
|
||||
import NavbarComponent from "./one-navbar.vue";
|
||||
export default {
|
||||
name: "component2",
|
||||
components: {
|
||||
"coba-component": CobaComponent,
|
||||
"one-navbar": NavbarComponent,
|
||||
},
|
||||
computed: {
|
||||
// Akses state dari store
|
||||
count() {
|
||||
return this.$store.state.coba2.count;
|
||||
},
|
||||
email() {
|
||||
return this.$store.state.coba2.email;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// Dispatch action ke store
|
||||
increment() {
|
||||
this.$store.dispatch("increment");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
54
login-coba/components/one-navbar.vue
Normal file
54
login-coba/components/one-navbar.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- :location="$vuetify.display.mobile ? 'bottom' : undefined" -->
|
||||
<v-navigation-drawer style="border: 0;" v-model="drawer">
|
||||
<v-list-item class="ml-2 mt-3">
|
||||
<v-img
|
||||
:aspect-ratio="1"
|
||||
max-height="42px"
|
||||
max-width="132px"
|
||||
class="bg-white"
|
||||
src="images/logo.png"
|
||||
></v-img>
|
||||
</v-list-item>
|
||||
</v-navigation-drawer>
|
||||
|
||||
<v-app-bar class="elevation-0">
|
||||
<v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
|
||||
|
||||
<v-app-bar-title>Application</v-app-bar-title>
|
||||
</v-app-bar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="module">
|
||||
export default {
|
||||
name: "NavbarComponent",
|
||||
data() {
|
||||
return {
|
||||
drawer: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// Akses state dari store
|
||||
count() {
|
||||
return this.$store.state.coba2.count;
|
||||
},
|
||||
email() {
|
||||
return this.$store.state.coba2.email;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// Dispatch action ke store
|
||||
increment() {
|
||||
this.$store.dispatch("increment");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
h1 {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user