diff --git a/package-lock.json b/package-lock.json
index dbf5f9de0a1d20297cd28d732de29ab81aa5bb28..a99a0fcada44bfff40f2878b23f8f6291f2cba02 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
"name": "vue-project-poc",
"version": "0.0.0",
"dependencies": {
- "@sangarajuguptanisum/vue-custom-components": "^0.0.1",
+ "@sangarajuguptanisum/vue-custom-components": "^0.0.3",
"axios": "^1.6.2",
"vue": "^3.3.10",
"vue-router": "^4.2.5",
@@ -3157,10 +3157,11 @@
"dev": true
},
"node_modules/@sangarajuguptanisum/vue-custom-components": {
- "version": "0.0.1",
- "resolved": "https://registry.npmjs.org/@sangarajuguptanisum/vue-custom-components/-/vue-custom-components-0.0.1.tgz",
- "integrity": "sha512-R3T/F1KKwVvDPOjYM6k/kCxBLygOz2vjmGWaEbpwV9+jE/RSPhZlVt9kxofjrip/LhDoSRz348o2J69xHcJDUg==",
+ "version": "0.0.3",
+ "resolved": "https://registry.npmjs.org/@sangarajuguptanisum/vue-custom-components/-/vue-custom-components-0.0.3.tgz",
+ "integrity": "sha512-qPM0Z7iMEGZ7LRnd7ztcltiLOfhfNB3mkZ0PcM4Pna9PLh1hedodc64XMG2499Xk0TaOD9LyerqKVzjUMDxrRQ==",
"dependencies": {
+ "axios": "^1.6.2",
"pinia": "^2.1.7",
"vue": "^3.3.11",
"vue-router": "^4.2.5"
diff --git a/package.json b/package.json
index 265a104f3f2b254543ec8aabc11ccc7442c86318..b07079a5f4bdebc5da9a6092e2dce3d8afdbe871 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
"test": "jest"
},
"dependencies": {
- "@sangarajuguptanisum/vue-custom-components": "^0.0.1",
+ "@sangarajuguptanisum/vue-custom-components": "^0.0.3",
"axios": "^1.6.2",
"vue": "^3.3.10",
"vue-router": "^4.2.5",
diff --git a/src/components/CustomInput/CustomInput.vue b/src/components/CustomInput/CustomInput.vue
new file mode 100644
index 0000000000000000000000000000000000000000..527195844155b35bf89f4fbc7b4a489bfcf56d95
--- /dev/null
+++ b/src/components/CustomInput/CustomInput.vue
@@ -0,0 +1,38 @@
+<template>
+ <label>
+ {{ label }}
+ <input
+ class="border w-full py-2 px-2 rounded shadow hover:border-teal-600 ring-1 ring-inset ring-gray-300 font-mono"
+ :name="name" :type="type" :value="value" @input="updateValue" />
+ </label>
+</template>
+
+<script >
+
+
+export default {
+ name: "CustomInput",
+ props: {
+ label: String,
+ name: String,
+ type: {
+ type: String,
+ default: 'text',
+ },
+ value: String
+
+ },
+ methods: {
+ updateValue(event) {
+ console.log("testttt custim", event.target.value)
+ this.$emit('input-test', event.target.value)
+ },
+ },
+ data() {
+ return {
+
+ }
+ }
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Header/Header.vue b/src/components/Header/Header.vue
index ef756471a674deba7b0c05f2950aee5dcb6397c7..71ed4b54f4a27ff68212defeddcd7032235713ec 100644
--- a/src/components/Header/Header.vue
+++ b/src/components/Header/Header.vue
@@ -1,13 +1,13 @@
<template>
<nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6 sticky top-0">
- <div class="flex items-center flex-shrink-0 text-white mr-6">
+ <!-- <div class="flex items-center flex-shrink-0 text-white mr-6">
<span class="font-semibold text-xl tracking-tight">Shopping Cart</span>
- </div>
+ </div> -->
<div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
<div class="text-sm lg:flex-grow text-white ">
- <router-link class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4" to="/">
- Home
+ <router-link class="block mt-4 text-3xl lg:inline-block lg:mt-0 text-white hover:text-teal-200 mr-4" to="/">
+ Shopping Cart
</router-link>
<router-link class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4" to="/about">
About
@@ -15,18 +15,36 @@
<router-link class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4" to="/contact">
Contact
</router-link>
- </div>
- <div>
<router-link
class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0" to="/cart" >Cart{{$store.state.cart.length>0? $store.state.cart.length:""}}</router-link>
</div>
+ <div>
+ <p class="text-xl text-white" v-if="user">{{ user }}</p>
+ <SLogin v-else loginText="CustomLogin Button" @user-login="setUserInfo"></SLogin>
+ </div>
</div>
</nav>
</template>
<script>
+// import Login from '../Login/Login.vue'
+import {SLogin} from '@sangarajuguptanisum/vue-custom-components';
export default{
- name:"Header"
+ name:"Header",
+ data(){
+ return{
+ user:""
+ }
+ },
+ components:{
+ // Login
+ },
+ methods:{
+ setUserInfo(data){
+ this.user = data.user.name;
+ console.log(data);
+ }
+ }
}
</script>
\ No newline at end of file
diff --git a/src/components/Login-not-used/Login-not-used.vue b/src/components/Login-not-used/Login-not-used.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3b105425dd0b0edf0744aad71967e2f1b852743b
--- /dev/null
+++ b/src/components/Login-not-used/Login-not-used.vue
@@ -0,0 +1,125 @@
+<template>
+ <div class="fixed right-0 inline-block " @mouseover="isVisible = true" @mouseleave="isVisible = false"
+ @keydown.enter="isVisible = !isVisible">
+ <button type="button"
+ class="inline-block relative -top-4 right-2 text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">
+ <span class="flex-shrink-0">Login</span>
+ </button>
+ <transition enter-active-class="transition duration-300 ease-out transform"
+ enter-class="-translate-y-3 scale-95 opacity-0" enter-to-class="translate-y-0 scale-100 opacity-100"
+ leave-active-class="transition duration-150 ease-in transform" leave-class="translate-y-0 opacity-100"
+ leave-to-class="-translate-y-3 opacity-0">
+ <div v-show="isVisible" class="fixed right-0 pt-2">
+ <div class="relative py-1 bg-white border border-gray-200 rounded-md shadow-xl">
+
+ <div class="relative">
+ <div class='flyout-width flex items-center justify-center min-h-screen'>
+ <div class='w-full max-w-lg px-10 py-8 mx-auto bg-teal-500 border rounded-lg shadow-2xl'>
+ <div class='max-w-md mx-auto space-y-3'>
+ <h3 class="text-lg font-semibold">Account {{ this.buttonName.toLowerCase() ==='proceed'? '':this.buttonName }} Form</h3>
+ <div>
+ <form>
+
+ <CustomInput label="Email:" name="email" :value="email"
+ @input-test="updateEmail">
+ </CustomInput>
+ <CustomInput v-if="userRegistration === true" label="username" name="username"
+ :value="username" @input-test="updateuserName"></CustomInput>
+ <CustomInput v-if="userLogin === true || userRegistration === true " label="Password" name="password"
+ :value="password" type="password" @input-test="updatePassword"></CustomInput>
+ </form>
+ </div>
+ <div class="flex gap-3 pt-3 items-center">
+ <button
+ class="border hover:border-teal-600 px-4 py-2 rounded-lg shadow ring-1 ring-inset ring-gray-300"
+ @click="handle_function_call(buttonName)">{{ buttonName }}</button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </transition>
+ </div>
+</template>
+
+<script>
+import CustomInput from '../CustomInput/CustomInput.vue'
+
+export default {
+ name: "Login",
+ components: {
+ CustomInput
+ },
+ data() {
+ return {
+ buttonName: "proceed",
+ isVisible: false,
+ email: "",
+ password: "",
+ password1:"",
+ username: "",
+ userLogin: false,
+ userRegistration: false,
+ testingEmails: ['sanga@gmail.com', 'raju@gmail.com', 'gupta@gmail.com']
+ }
+
+ },
+ methods: {
+ updateEmail(val) {
+ this.email = val;
+ console.log("email", this.email);
+
+ },
+ updatePassword(val) {
+ this.password = val;
+ },
+ updateuserName(val){
+ this.username = val
+ },
+ proceed() {
+ console.log("proceed entered",this.email)
+ if (this.testingEmails.includes(this.email)) {
+ this.buttonName = "Login"
+ this.userLogin = true;
+ this.userRegistration = false;
+ }
+ else {
+ this.buttonName = "Register"
+ this.userLogin = false;
+ this.userRegistration = true;
+ }
+ },
+ register(){
+ this.password = "";
+ this.email="";
+ this.username = ""
+ },
+ login(){
+ this.password = "";
+ this.email="";
+ },
+
+ handle_function_call(function_name) {
+ console.log(function_name, "function_name",function_name.toLowerCase() == 'proceed');
+ const fun = function_name.toLowerCase();
+ if (fun === 'proceed') {
+ this.proceed();
+ }
+ else if(fun === 'register'){
+ this.register();
+ console.log("resgister",this.username,this.email,this.password)
+ }
+ else if(fun === 'login'){
+ console.log("login")
+ }
+ },
+ },
+
+}
+</script>
+
+<style scoped>.flyout-width {
+ width: 35rem;
+}</style>
\ No newline at end of file