Skip to content

V
vue-sample-test
Commit f4dc0a90 authored by Sanga Raju Gupta Bonagiri's avatar Sanga Raju Gupta Bonagiri
Browse files
Options

add login from from package

parent 2574590e
Hide whitespace changes
Inline Side-by-side
Showing with 194 additions and 12 deletions
package-lock.json
View file @ f4dc0a90
......@@ -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"
......
package.json
View file @ f4dc0a90
......@@ -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",
......
src/components/CustomInput/CustomInput.vue 0 → 100644
View file @ f4dc0a90
<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
src/components/Header/Header.vue
View file @ f4dc0a90
<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
src/components/Login-not-used/Login-not-used.vue 0 → 100644
View file @ f4dc0a90
<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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment