How to implement secure remember username and password in react.js - reactjs

<Formik
initialValues={LoginSchema}
validationSchema={LoginSchemaValidation}
onSubmit={(values, { setSubmitting, resetForm }) => {
this.handleSubmit(values);
setSubmitting(false);
resetForm();
}}
>
<Form>
<div className="input-group mb-3">
<Field name="username" type="email" className="form-control" placeholder="Email" />
<div className="input-group-append">
<div className="input-group-text">
<span>
<FontAwesomeIcon icon={faEnvelope} />
</span>
</div>
</div>
</div>
<p className="errors">
<ErrorMessage name="username" />
</p>
<div className="input-group mb-3">
<Field
name="password"
type="password"
className="form-control"
placeholder="Password"
/>
<div className="input-group-append">
<div className="input-group-text">
<span>
<FontAwesomeIcon icon={faLock} />
</span>
</div>
</div>
</div>
<p className="errors">
<ErrorMessage name="password" />
</p>
<div className="input-group mb-3">
<label>
<Field name="isRemember" type="checkbox"/> Remember Me
</label>
</div>
<div className="row">
<div className="col-12">
<button type="submit" className="btn btn-yellow btn-block">
Sign In
</button>
</div>
</div>
</Form>
</Formik>
This is my react form for user input, i used spring boot as backend.
Now i want to implement remember me feature at front-end
Is it secure to store username and password in local storage?
If not then how should i implement this functionality?

Related

How to add image to bootstrap card as a preview in react?

I am trying to create a bootstrap form and i want to show as a preview in bootstrap card what it will look like
Here is my code for form
<div className="container">
<div className="row">
<div className="col p-5">
<div className="card" style={{ width: "18rem" }}>
<img data-src={img} className="card-img-top" alt="any image"/>
<div className="card-body">
<h5 className="card-title">{title}</h5>
<p className="card-text">{place}</p>
<p className="card-text">{year}</p>
<a href="#" className="btn btn-primary">
Go somewhere
</a>
</div>
</div>
</div>
<div className="col p-5">
<form type="form">
<div className="form-group">
<label>Title</label>
<input
name="title"
type="text"
className="form-control mt-2"
placeholder="Enter name of car"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
</div>
<div className="form-group">
<label>Place</label>
<input
name="place"
type="text"
className="form-control mt-2"
placeholder="Enter city name"
value={place}
onChange={(e) => setPlace(e.target.value)}
/>
</div>
<div className="form-group">
<label>Year</label>
<input
name="year"
type="number"
className="form-control mt-2"
placeholder="Enter mfg year"
value={year}
onChange={(e) => setYear(e.target.value)}
/>
</div>
<div className="form-group">
<input
className=" mt-2"
type="file"
name="file"
value={img}
onChange={changeHandler}
/>
</div>
{error && <div>{error}</div>}
{file && <div>{file.name}</div>}
<button
onClick={uploadFile}
type="submit"
className="btn btn-primary mt-2"
>
Submit
</button>
</form>
</div>
</div>
</div>
I can preview title as given in input field by passing as value parameter but i don't know how to do it with image. Also i am storing value of title,place etc in variable do i need to do the same for image too?

Changing state in useEffect

I am dispatching an action in useEffect hook to fetch data and then updating state using the data from redux store. When the page first loads i get the correct data, but when refreshing the browser I get undefined values.
React.useEffect(() => {
dispatch(getSingleCoin(props.match.params.id))
setName(coinDetail.name)
setSymbol(coinDetail.symbol)
setLogourl(coinDetail.logo)
setPrice(coinDetail.price)
setLaunchDate(coinDetail.launchDate)
setWebsiteUrl(coinDetail.websiteUrl)
setNetwork(coinDetail.chain)
setAddress(coinDetail.address)
setTwitterUrl(coinDetail.twitter)
setTelegramUrl(coinDetail.telegram)
setRedditUrl(coinDetail.reddit)
setYoutubeUrl(coinDetail.youtube)
setCoinDescription(coinDetail.description)
setMarketCap(coinDetail.marketCap)
}
}, [coinDetail,dispatch, props.match.params.id])
const handleSubmit = (e) => {
e.preventDefault()
const coin = {}
coin.name = name
coin.symbol = symbol
coin.logo = logourl
coin.price = price
coin.launchDate = launchDate
coin.websiteUrl = websiteUrl
coin.chain = network
coin.address = address
coin.twitter = twitterUrl
coin.telegram = telegramUrl
coin.reddit = redditUrl
coin.youtube = youtube
coin.description = coinDescription
coin.marketCap = marketCap
coin._id = props.match.params.id
dispatch(updateCoin(coin))
}
return (
<div className="container add-coin-wapper mt-4">
{loading && coinDetail === undefined ? (
<div>...Loading</div>
) : error ? (
<div>{error}</div>
) : (
<div className="card ">
<div className="card-header">
<div className="approve-header">
<div
className="approve-back"
onClick={() => props.history.push('/Admin/coinlist')}
>
<ArrowBackIosIcon />
<div>Back to Coin listing</div>
</div>
</div>
</div>
<div className="card-body">
{/* here */}
<>
<div>
<h3>Edit Coin</h3>
</div>
<form onSubmit={handleSubmit}>
<div className="row">
<div className="col-sm-12 col-md-6 col-lg-6">
<h5>Coin informations</h5>
<div className="form-group">
<label htmlFor="name">name</label>
<input
type="text"
className="form-control"
id="name"
name="name"
placeholder="Bitcoin"
required
onChange={(e) => setName(e.target.value)}
value={name}
/>
</div>
<div className="form-group">
<label htmlFor="symbol">symbol</label>
<input
type="text"
className="form-control"
id="symbol"
name="symbol"
placeholder="Enter symbol"
onChange={(e) => setSymbol(e.target.value)}
required
value={symbol}
/>
</div>
<div className="form-group">
<label htmlFor="logo">Logo url</label>
<input
type="text"
className="form-control"
id="url"
name="logourl"
placeholder="https://clod.com/logo"
onChange={(e) => setLogourl(e.target.value)}
value={logourl}
/>
</div>
<div className="form-group">
<label htmlFor="description">Coin Description</label>
<textarea
className="form-control"
id="exampleFormControlTextarea1"
rows="3"
onChange={(e) => setCoinDescription(e.target.value)}
placeholder="Describe your coin appropriately to show attractiveness"
value={coinDescription}
></textarea>
</div>
<div className="form-group">
<label htmlFor="price">price</label>
<div className="input-group mb-2">
<div className="input-group-prepend">
<div className="input-group-text">$</div>
</div>
<input
type="number"
className="form-control"
id="marketcap"
placeholder="0.00085"
step="any"
min="0"
onChange={(e) => setPrice(e.target.value)}
value={price}
/>
</div>
</div>
<div className="form-group">
<label htmlFor="marketcap">Market cap</label>
<div className="input-group mb-2">
<div className="input-group-prepend">
<div className="input-group-text">$</div>
</div>
<input
type="number"
className="form-control"
id="marketcap"
step="any"
placeholder="0.00085"
min="0"
onChange={(e) => setMarketCap(e.target.value)}
value={marketCap}
/>
</div>
</div>
<div className="form-group">
<label htmlFor="launchdate">Launch date</label>
<div
className="input-group date"
data-provide="datepicker"
>
<input
type="date"
className="form-control"
onChange={(e) => setLaunchDate(e.target.value)}
value={moment(launchDate).format('YYYY-MM-DD')}
/>
<div className="input-group-addon">
<span className="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
<div className="col-sm-12 col-md-6 col-lg-6">
<h5>Coin market</h5>
<div className="form-group">
<label htmlFor="network">Network/Chain</label>
<select
className="form-control"
id="network"
onChange={(e) => setNetwork(e.target.value)}
value={network}
>
<option value="BSC">Binance Smart Chain (BSC)</option>
<option value="ETH">Ethereum (ETH)</option>
<option value="SOL">Solona (SOL)</option>
</select>
</div>
<div className="form-group">
<label htmlFor="contract">Contract Adress</label>
<input
type="text"
className="form-control"
id="contract"
name="contract"
placeholder="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
onChange={(e) => setAddress(e.target.value)}
required
value={address}
/>
</div>
<h5>Coin links</h5>
<div className="form-group">
<label htmlFor="weburl">Website url</label>
<div className="input-group mb-2">
<div className="input-group-prepend">
<div className="input-group-text">
<LanguageIcon />
</div>
</div>
<input
type="text"
className="form-control"
id="web"
placeholder="https://www.coinx.com"
onChange={(e) => setWebsiteUrl(e.target.value)}
required
value={websiteUrl}
/>
</div>
</div>
<div className="form-group">
<label htmlFor="twitter">Twitter</label>
<div className="input-group mb-2">
<div className="input-group-prepend">
<div className="input-group-text">
<TwitterIcon />
</div>
</div>
<input
type="text"
className="form-control"
id="twitter"
placeholder="https://twitter.com/"
onChange={(e) => setTwitterUrl(e.target.value)}
value={twitterUrl}
/>
</div>
</div>
<div className="form-group">
<label htmlFor="telegram">Telegram</label>
<div className="input-group mb-2">
<div className="input-group-prepend">
<div className="input-group-text">
<TelegramIcon />
</div>
</div>
<input
type="text"
className="form-control"
id="telegram"
placeholder="https://t.me/"
onChange={(e) => setTelegramUrl(e.target.value)}
value={telegramUrl}
/>
</div>
</div>
<div className="form-group">
<label htmlFor="youtube">YouTube</label>
<div className="input-group mb-2">
<div className="input-group-prepend">
<div className="input-group-text">
<YouTubeIcon />
</div>
</div>
<input
type="text"
className="form-control"
id="youtube"
placeholder="https://www.youtube.com/watch?v="
onChange={(e) => setYoutubeUrl(e.target.value)}
value={youtube}
/>
</div>
</div>
<div className="form-group">
<label htmlFor="reddit">Reddit</label>
<div className="input-group mb-2">
<div className="input-group-prepend">
<div className="input-group-text">
<RedditIcon />
</div>
</div>
<input
type="text"
className="form-control"
id="reddit"
placeholder="https://www.reddit.com"
onChange={(e) => setRedditUrl(e.target.value)}
value={redditUrl}
/>
</div>
</div>
<button type="submit" className="btn" disabled={loading}>
update
</button>
</div>
</div>
</form>
</>
{/* here */}
</div>
{/* here */}
</div>
)}
</div>
The state data is supposed to be displayed in form input elements. I render a div with a loading status before the data is fetched and loading set to false.

how do I fix this ant design datepicker component in my react project .I have shared a screenshot

I'm working on a project which required ant design datepicker along with bootstrap.I'm not sure whats making this datepicker move out of screen. Is there something I need to do with bootstrap classes to fix this? I have shared my screenshot.thanenter image description here]1]1
const form= () => (
<form onSubmit={onFormSubmit}>
<div className="form-group">
<label className="btn btn-outline-secondary btn-block m-3">Add image
<input type="file" name="image" onChange={handleImageChange} accept="image/*" hidden/>
</label>
<input className="form-control m-2" type="text" name="title" placeholder="title" onChange={handleChange} value={title}/>
<textarea className="form-control m-2" type="text" name="content" placeholder="content" onChange={handleChange} value={content}/>
<AlgoliaPlaces className="form-control ml-2" placeholder="location" defaultValue={location} options={config} onChange={handleSearch} style={{height:"50px"}} />
<input className="form-control m-2" type="number" name="price" placeholder="price" onChange={handleChange} value={price}/>
<input className="form-control m-2" type="number" name="bed" placeholder="Number of beds" onChange={handleChange} value={bed}/>
</div>
**<DatePicker className="form-control m-2"/>**
<button className="btn btn-outline-primary m-2">Add</button>
</form>
)
return(
<div>
<div className="container-fluid p-5 text-center">
<h2>Add </h2>
</div>
<div className="container-fluid">
<div className="row">
<div className="col-md-10">
{hotelForm()}
</div
<div className="col-md-2">
<img src={preview} alt="preview-image" className="img img-fluid m-2" />
<pre>{JSON.stringify(values,null, 2)}</pre>
</div>
</div>
</div>
</div>
)
It looks like you are missing ant design css stylesheet.
Try to add the following line at the root of your app :
import 'antd/dist/antd.css';

I want to customize stripe form in my project in react

I want to create a payment form using stripe in react js and backend is in spring boot i am using formik to get form data and yup for form validation as i am new to react i need help in customizing stripe form
Right now i am doing something like this
<Formik
enableReinitialize={true}
initialValues={RecurringPaymentSchema}
validationSchema={RecurringPaymentValidationSchema}
onSubmit={({ setSubmitting, resetForm, setErrors }) => {
this.handleSubmit(resetForm, setErrors);
setSubmitting(false);
//resetForm();
}}
>
<Form>
<div className="py-2">
<div className="custom-control custom-radio">
<Field
className="custom-control-input"
name="monthly-plan"
type="radio"
value="monthly-subscription"
/>
<label className="custom-control-label" for="monthly-plan">
<strong>Monthly $9.99</strong>
<br />
<small className="text-muted">
Pay $9.99 every month and get access to all premium features.
</small>
</label>
</div>
<div className="custom-control custom-radio mt-3">
<Field
checked=""
className="custom-control-input"
name="annually-plan"
type="radio"
value="annual-subscription"
/>
<label className="custom-control-label" for="annually-plan">
<strong>Yearly $49.99</strong>
<span className="badge badge-primary ml-1">60% OFF</span>
<br />
<small className="text-muted">
Pay $49.99 every year and get access to all premium features.
</small>
</label>
</div>
</div>
<input id="api-key" type="hidden" value="${stripePublicKey}" />
<div className="form-group">
<label className="font-weight-medium" for="card-element">
Enter credit or debit card below
</label>
<div className="w-100">
{/* A Stripe Element will be inserted here. */}
<Elements stripe={stripePromise}>
<CardElement
id="card-element"
options={CARD_ELEMENT_OPTIONS}
onChange={this.handleError}
/>
</Elements>
</div>
</div>
<div className="form-group">
<Field
className="form-control"
id="email"
name="email"
placeholder="Email Address"
type="email"
/>
<p className="errors">
<ErrorMessage name="email" />
</p>
</div>
{/* Used to display Element errors. */}
<div
className="text-danger w-100"
id="card-errors"
role="alert"
></div>
<div className="form-group pt-2">
<button
className="btn btn-primary btn-block"
id="submitButton"
type="submit"
>
Pay With Your Card
</button>
</div>
</Form>
</Formik>
Now i want validation of stripe as well as my radio buttons or other form elements using yup
my schemas are
import * as Yup from 'yup';
export const RecurringPaymentSchema = {
monthlyPlan: '',
annuallyPlan: '',
email: '',
};
export const RecurringPaymentValidationSchema = Yup.object().shape({
email: Yup.string().required("Email can't be blank"),
});

Pass form data in controller MVC React.net Core 1.1

i'm a new user of React.net core .
I wanted to know how pass form's data between my form in my react file to the controller . I want to pass this data in controller . i have a model for "alert" with each attribute that we can see in the form . Then i want to store this data in a json that i create one time and rewrite each time i create a new alert. Thx for reading this.
var CommentBox = React.createClass({
render: function () {
return (
<div className="Header">
<h1><strong>René</strong></h1>
<div className="Creation">
<hr />
<strong><h2>Création d'une Alerte</h2></strong>
<br />
<br />
<div className="container">
<form action="/Controllers/HomeController" method="post">
<label htmlFor="nom">Nom de l'Alerte</label>
<div className="col-xs-2">
<input type="text" className="form-control" name="nom"></input>
</div>
<br />
<br />
<div className="form-group">
<label htmlFor="descr">Description</label>
<input type="text" className="form-control" name="comment"></input>
</div>
<br />
<br />
<div className="form-group">
<label htmlFor="descr">Date de début</label>
<input type="date" className="form-control" name="dated"></input>
</div>
<br />
<br />
<div className="form-group">
<label htmlFor="descr">Date de fin</label>
<input type="date" className="form-control" name="datef"></input>
</div>
<br />
<br />
<div className="form-group">
<div className="panel panel-default">
<div className="panel-body">Niveau de l'Alerte</div>
</div>
</div>
<select className="selectpicker">
<option name="medium" className="medium" value="medium">Medium</option>
<option name="urgent" className="urgent" value="urgent">Urgent</option>
<option name="turgent" className="turgent" value="Turgent">Très Urgent</option>
<option name="critique" className="critique" value="Critique">Critique</option>
</select>
<br />
<br />
<div className="panel panel-default">
<div className="panel-body">Type d'Alerte</div>
</div>
<p></p>
<span className="label label-success">Mail</span>
<input name="mail" type="checkbox" value="Mail" />
<br />
<p></p>
<span className="label label-info">Slack</span>
<input name="slack" type="checkbox" value="Slack" />
<br />
<p></p>
<span className="label label-primary">Ecran TV</span>
<input name="ecran" type="checkbox" value="Ecran" />
<br />
<p></p>
<span className="label label-warning">Sonnette</span>
<input name="sonnette" type="checkbox" value="Sonnette" />
<br />
<p></p>
<span className="label label-danger">Girophare</span>
<input name="girophare" type="checkbox" value="Girophare" />
<br />
<br />
<button type="submit" className="btn btn-default" value="Submit Alert">Valider</button>
</form>
</div>
</div>

Resources