I have a problem editing the 'email' field. When I click change mail, the email changes correctly, but when I want to log in again, the new email is not working, only the old one is still working. How to do it so that after clicking on change email it will change in the database so that after logging in again the new email will work. I do not know how to do this. I have this code.
<template>
<div class="editemail">
<div class="container">
<form class="form" #submit.prevent>
<!-- email -->
<label for="email" class="form__label">Email</label>
<input
class="form__input"
type="text"
id="email"
name="email"
:placeholder="userProfile.email"
v-model.trim="email"
/>
<button class="form__button" type="submit" #click="editEmail()">
Zmień email
</button>
</form>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex';
import * as firebase from '../firebase';
export default {
data() {
return {
email: '',
};
},
computed: {
...mapState(['userProfile']),
},
methods: {
editEmail() {
firebase.usersCollection.doc(firebase.auth.currentUser.uid).update({
email: this.email,
});
},
},
};
</script>
If you're using Firebase Authentication to sign the user in, then the email address that it uses has nothing to do with the value you store in the database.
To update the email address that Firebase uses to sign in, you'll also want to call firebase.auth().currentUser.updateEmail(this.email) to update the user's email address.
Related
How do we do this in angular, make button disabled by default if email address is invalid , If email is invalid get started button will enable and the user can click get started button ,
after the user click get started button it will disabled again and will only enable again if user changes the email input and if the new email input is valid , vice versa.
I already have the checked and the form controls , but is there a cleaner way to do this in angular? Thanks.
#html code
<mat-form-field class="full-width" appearance="fill" style="margin-top: 20px;">
<mat-label>Email</mat-label>
<input type="email" matInput autocomplete="emailAddress" matInput formControlName="emailAddress" />
<mat-error *ngIf="modelForm.get('emailAddress').hasError('email')">
Email is in invalid format.
</mat-error>
<mat-error *ngIf="modelForm.get('emailAddress').hasError('required')">
Email is required.
</mat-error>
</mat-form-field>
</div>
<div style="text-align:right;margin-top: 19.0px;">
<button click)="getStarted()" [disabled]="!modelForm.get('emailAddress')?.valid" mat-flat-button color="primary"
class="v-btn-sml" id="get-started-button">
Get Started
</button>
</div>
#ts validation code
ngOnInit(): void {
this.initFormGroup();
}
initFormGroup() {
this.modelForm = this.formBuilder.group({
id: [this.model.id || 0],
emailAddress:[this.model.emailAddress,[Validators.required, Validators.email]],
});
}
Angular has built in validators you can use, combining it with the ReactiveFormsModule you have to import in your app.module.ts.
In your typescript file you can do it like:
formGroup: FormGroup;
private model: { id: number; emailAddress: string } = {
id: 1,
emailAddress: ''
};
ngOnInit() {
this.formGroup = new FormGroup({
id: new FormControl(this.model.id),
email: new FormControl(this.model.emailAddress, [Validators.email])
});
}
And than in your html file you can access this formControls valid/invalid state.
<form [formGroup]="formGroup">
<input type="text" formControlName="email">
<button type="button" [disable]="form?.get('emailAddress').invalid">
</form>
I just started using the Vue2Editor with the intention to replace the many forms that I use to send text and image data to my Firebase database.
My problem is that I cannot get it to add the data entered in the editor.
When using forms, I would just attach an event handler to the form itself and make a function that allowed the transfer.
Example:
<form #submit.prevent="addText">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" v-model="fname">
</form>
<button type="submit" variant="success">Save</button>
But when using the Vue2Editor, I do not get any form tags.
I just get a "vue-editor" tag. I tried adding the event handler inside this tag, but nothing happens.
I don't get any errors, but the data is not transferred to the database upon submitting it.
This is the code:
<template>
<div class="container">
<div class="text_editor">
<h2>Add new content</h2>
<vue-editor #submit.prevent="addText" v-model="textblock" />
<button type="submit" class="textblock_btn" variant="success">Save</button>
</div>
</div>
</template>
<script>
import db from '#/firebase/init'
import Vue from "vue";
import Vue2Editor from "vue2-editor";
Vue.use(Vue2Editor);
export default {
name: 'textblock',
data () {
return {
textblock: null
}
},
methods: {
addText(){
db.collection('textblock').add({
textblock: this.textblock
}).then(() => {
this.$router.push({ name: 'Index' })
}).catch(err => {
console.log(err)
})
}
}
}
</script>
You can still wrap the component in a form as the WYSIWYG editor's data is bound to the v-model property.
<form #submit.prevent="addText">
<div class="text_editor">
<h2>Add new content</h2>
<vue-editor v-model="textblock" />
<button type="submit" class="textblock_btn" variant="success">Save</button>
</div>
</form>
Within the addText method you now have this.textblock with the appropriate data on form submission.
I am using vuelidate to validate input field, the input field is dynamic i.e the value in input field is filled dynamically with jsonData using v-model
What I am trying to do is
On blur I want to show error if there is any, but here when I type anything inside my input field it shows nothing
what I am doing:- my input field
<div v-for="data in displayProfileData" :key="data.email" >
<p>{{data}}</p>
<div class="row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="phoneNo">Name</label>
<input v-model="data.businessname"
#blur="$v.form.name.$touch()"
type="text"
class="form-control" name="name"
id="name">
<div v-if="$v.form.name.$error" class="form-error">
<span v-if="!$v.form.name.required" class="text-danger">nameis required</span>
</div>
</div>
<p>{{$v}}</p>
</div>
</div>
I am displaying $v on UI to check but when I type in input field no changes is been detected
My script code :-
<script>
import { required,minLength } from 'vuelidate/lib/validators'
import axios from '../../services/base-api'
export default {
data (){
return{
form :{
name:''
},
displayProfileData:[]
}
},
validations: {
form: {
name:{required},
}
},
created(){
this.userId = localStorage.getItem('user-Id')
axios().post('/api/v1/Profile/getProfileData',this.userId)
.then(res=>{
console.log(res.data)
this.displayProfileData=res.data
})
.catch(err=>{
this.$toasted.error(err,{duration:2000})
})
}
}
</script>
My data from server is in format like this { "businessid": "8126815643", "businessname": "manish",}
Issue
Initially when page loads in input field it shows manish so when I change it to something else and focus out it shows error that name is required I don't what is going wrong
2:Dynamic Form- Check Here
please check this
According to vuelidate's documentation, you should make the following changes:
<div v-for="data in $v.displayProfileData.$each.$iter" :key="data.email">
...
<input v-model="data.businessname.$model"
#blur="data.businessname.$touch()"
type="text"
class="form-control"
name="name"
id="name"
>
<div v-if="data.businessname.$error" class="form-error">
<span v-if="!data.businessname.required" class="text-danger">name is required</span>
</div>
...
</div>
validations: {
displayProfileData: {
//required,
//minLength: minLength(1),
$each: {
businessname: { required }
}
}
}
Attach my codesandbox example link
Introduction
I've set up a vue-component on my app, this vue-component is a contact form, it is imported to the header component, and wrapped inside of a modal.
This contact form must submit an acknowledge message and event that this information will send an email to receiving#email.com on the end.
Question 1
Question: How to trigger an event in vuejs that when this button is triggered, a new HTML block shows with acknowledgment information? My partner and I experienced with Jquery right here, and I am looking for the same results in Vuejs: https://codepen.io/anon/pen/WLJwxo?editors=1010
We've set up https://logima.io on Vue Storefront, for practicality reasons (Since we're in the business of building webshops for clients, we want to get more in depth and create more groundbreaking results)
You can click on the "Get your App!" A button on the top right corner of the nav.
Question 2
What's the best approach/practice to make Vue-storefront contact form connect with Magento contact form through API?
Since Vue-storefront works as a shell for Magento through its API, it should, in theory, be possible to setup up a form on Magento, configure API and make a bridge between the Vue APP and Magento so that you don't need to set up SMTP or other stuff directly for the instance your Storefront is on.
To be more clear:
The user fills out a contact form on logima.io > API connects to email form on Magento > Magento form is filled out > Sends an email to receiving address.
This already works with products and orders. We've set up a couple of shops on Vue-storefront using Magento external checkout and the API works perfectly. I'm just wondering how to actually modify or create new strings of code so that shell contact form can fill out Magento form through existing API.
HTML
<div id="app">
<form class="vue-form" #submit.prevent="submit">
<div class="error-message">
<p v-show="!email.valid">Oh, please enter a valid email address.</p>
</div>
<fieldset>
<legend>
<b>
We will build you a fast PWA, just let us know your details
</b>
</legend>
<GetBackToYou/>
<div>
<label class="label" for="name">Name</label>
<input type="text" name="name" id="name" required="" v-model="name">
</div>
<div>
<label class="label" for="email">Email</label>
<input type="email" name="email" id="email" required=""
:class="{ email , error: !email.valid }"
v-model="email.value">
</div>
<div>
<h4>Your budget</h4>
<p class="select">
<select class="budget" v-model="selection.member">
<option value="0">$1500 > $4500</option>
<option value="0">$4500 > $10.000</option>
<option value="0">$10.000 > $20.000</option>
<option value="0">$20.000 > $50.000</option>
</select>
</p>
</div>
<div>
<h4>Select your package</h4>
<ul class="vue-form-list">
<li>
<input type="radio" name="radio-1" id="radio-1" value="angular"
v-model="selection.framework">
<label for="radio-1">PWA for Proprietor</label>
</li>
<li>
<input type="radio" name="radio-2" id="radio-2" value="react"
v-model="selection.framework">
<label for="radio-2">PWA for Business</label>
</li>
<li>
<input type="radio" name="radio-3" id="radio-3" value="vue"
v-model="selection.framework">
<label for="radio-3">PWA for LLC</label>
</li>
<li>
<input type="radio" name="radio-3" id="radio-3" value="vue"
v-model="selection.framework">
<label for="radio-3">PWA for INC</label>
</li>
</ul>
</div>
<div>
<h4>Features</h4>
<ul class="vue-form-list">
<li v-for="(feature, index) in features">
<input type="checkbox"
:value="feature"
:id="'cb-feature-'+index"
v-model="selection.features">
<label :for="'cb-feature-'+index">{{feature}}</label>
</li>
<li>
<input type="checkbox" id="checkbox-all" #click="checkAll">
<label for="checkbox-all">Check All</label>
</li>
</ul>
</div>
<div>
<label class="label" for="textarea">Message with Counter</label>
<textarea class="message" name="textarea" id="textarea" required=""
v-model="message.text"
:maxlength="message.maxlength"></textarea>
<span class="counter">{{ message.text.length }} / {{ message.maxlength }}</span>
</div>
<div>
<input type="submit" value="Send Form">
</div>
</fieldset>
</form>
<div class="debug">
<pre><code>{{ $data }}</code></pre>
</div>
</div>
</template>
Script
export default {
data: function () {
return {
name: '',
email: {
value: '',
valid: true
},
features: ['Payment Gateway', 'Magento External Checkout', 'Logima Cloud Hosting', 'Google tracking', 'CSM extension', 'Other (Please specify in message)'],
selection: {
member: '0',
framework: 'vue',
features: []
},
message: {
text: ``,
maxlength: 1000
},
submitted: false
}
},
methods: {
// submit form handler
submit: function () {
this.submitted = true
},
// validate by type and value
validate: function (type, value) {
if (type === 'email') {
}
},
// check for valid email adress
isEmail: function (value) {
},
// check or uncheck all
checkAll: function (event) {
this.selection.features = event.target.checked ? this.features : []
}
},
watch: {
// watching nested property
'email.value': function (value) {
this.validate('email', value)
}
}
}
this should be two questions and not one. But since I know Magento and how VueSF works with it, I can help with point 2:
There is no API endpoint for magento contact form and there are few ways to do this:
Create a magento plugin which provides API for sending requests to and connect vueSF to it (probably the hardest to create for non-magento dev)
Create a simple script (separate from magento) which will accept vueSF requests and use the reuest data to send the emails with (probably the easiest to implement since you don't even have to have magento installed anywhere for this)
Use an external service like https://formspree.io/ (just the first one I found on google, not advertising this particular one here)
This question already has answers here:
Can I use HTML5 to send a client-side email?
(6 answers)
Closed 4 years ago.
Hi guys I would like to create a form that costumers fill out with their contact info and then send it to my email, I have this code so far:
import React, { Component } from 'react';
import kontakthornavlnka
from'../../assets/svg/kontakt-horna.svg';
import kontaktdolnavlnka
from'../../assets/svg/kontakt-dolna.svg';
class Kontaktformular extends Component {
state = {
menoPriezvisko:'',
email:'',
telephone:'',
message:'',
}
change = e => {
this.setState({
[e.target.name]: e.target.value
});
};
onSubmit = (e) => {
e.preventDefault();
console.log(this.state)
};
render() {
{}
return (
<div className="kontaktformular" >
<img src={kontakthornavlnka} alt="kontakthornavlnka" />
<center>
<h3>Zaujal Vás niektorý produkt ?<br />Kontaktujte nás.</h3>
</center>
<form>
<div className="tabulka">
<div className="tabulkaleft">
<div><input name="menoPriezvisko" value={this.state.menoPriezvisko} onChange={e => this.change(e)} className="form-control" placeholder="Meno a priezvysko"/></div>
<div><input name="email" value={this.state.email} onChange={e => this.change(e)} className="form-control required email" placeholder="E-mail"/></div>
<div><input name="telephone" value={this.state.telephone} onChange={e => this.change(e)} className="form-control required mobile" placeholder="Telefón"/></div>
</div>
<div className="tabulkaright">
<div><textarea name="message" value={this.state.message} onChange={e => this.change(e)} className="form-control textarea required">Dobrý deň chcel by som sa spýtať </textarea></div>
</div>
</div>
<input onClick={e => this.onSubmit(e)} id="button" type="submit" name="send_contact" data-loading-text="Please wait..." value="Odoslať" />
<img id="img" src={kontaktdolnavlnka} alt="kontaktdolnavlnka" />
<p>Vytvoril: Sebastián Danáč</p>
</div>
);
}
}
export default Kontaktformular;
The React console is showing the new values and it is recognized but I do not know how to send the values to my email, I am guessing that I will have to write something under onSummit
You have to send request to your web server, where you will send email. Sending email directly from browser - impossible, what you can do - is to use next trick:
window.open('mailto:your#email.here.com');
Also, you can use some tricks to put there subject, body, etc. But it will not work stable on all OS, and probably even differently in different browsers.
P.S.
Source of answear
I would suggest sending a POST request - fetch will work - from your client component to your server. Then use a module such as Nodemailer within your server to send the information to your email address.
https://nodemailer.com/
You will need to write out some basic HTML for the body of the email within your server but this should be simple to do. Just save the HTML in a string and store it in a variable; then throw this variable into your Nodemailer instance. Have a look at the documentation in the link provided.