redux-form#Field JavaScript Examples
The following examples show how to use
redux-form#Field.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.js From HexactaLabs-NetCore_React-Level1 with Apache License 2.0 | 6 votes |
|
ProductTypeForm = props => {
const { handleSubmit, handleCancel } = props;
return (
<Form onSubmit={handleSubmit} className="addForm">
<Field label="Iniciales" name="initials" component={InputField} type="text" />
<Field label="Descripcion" name="description" component={InputField} type="text" />
<Button className="producttype-form__button" color="primary" type="submit">
Guardar
</Button>
<Button
className="producttype-form__button"
color="secondary"
type="button"
onClick={handleCancel}
>
Cancelar
</Button>
</Form>
);
}
Example #2
| Source File: index.js From HexactaLabs-NetCore_React-Level1 with Apache License 2.0 | 6 votes |
|
ProductTypeForm = (props) => {
const { handleSubmit, handleCancel } = props;
return (
<Form onSubmit={handleSubmit} className="addForm">
<Field
label="Iniciales"
name="initials"
component={InputField}
type="text"
/>
<Field
label="Descripcion"
name="description"
component={InputField}
type="text"
/>
<Button className="provider-form__button" color="primary" type="submit">
Guardar
</Button>
<Button
className="provider-form__button"
color="secondary"
type="button"
onClick={handleCancel}
>
Cancelar
</Button>
</Form>
);
}
Example #3
| Source File: FormValidationYup.js From HexactaLabs-NetCore_React-Initial with Apache License 2.0 | 6 votes |
|
AsyncValidationForm = ({ handleSubmit, pristine, reset, submitting }) => (
<form onSubmit={handleSubmit}>
<Field label="name" name="firstName" component={renderField} type="text" />
<Field name="lastName" component={renderField} type="text" />
<Field name="email" component={renderField} type="text" />
<FormSection name="address">
<Field label="calle" name="street" component={renderField} type="text" />
<Field name="city" component={renderField} type="text" />
<Field name="state" component={renderField} type="text" />
<Field name="zip" component={renderField} type="text" />
</FormSection>
<Field
name="prueba"
options={options}
component={selectable}
type="select"
/>
<div>
<button type="submit" disabled={submitting}>
Submit
</button>
<button type="button" disabled={pristine || submitting} onClick={reset}>
Clear Values
</button>
</div>
</form>
)
Example #4
| Source File: SyncValidation.js From HexactaLabs-NetCore_React-Initial with Apache License 2.0 | 6 votes |
|
SyncValidationForm = props => {
const { handleSubmit, pristine, reset, submitting } = props;
return (
<form onSubmit={handleSubmit}>
<Field
name="username"
type="text"
component={RenderField}
label="Username"
/>
<Field name="email" type="email" component={RenderField} label="Email" />
<Field name="age" type="number" component={RenderField} label="Age" />
<div>
<button type="submit" disabled={submitting}>
Submit
</button>
<button type="button" disabled={pristine || submitting} onClick={reset}>
Clear Values
</button>
</div>
</form>
);
}
Example #5
| Source File: index.js From HexactaLabs-NetCore_React-Level2 with Apache License 2.0 | 6 votes |
|
ProductForm = props => {
const { handleSubmit, handleCancel } = props;
return (
<Form onSubmit={handleSubmit}>
<Field
label="Iniciales"
name="initials"
component={InputField}
type="text"
/>
<Field
label="Descripción"
name="description"
component={InputField}
type="text"
/>
<Button className="product-form__button" color="primary" type="submit">
Guardar
</Button>
<Button
className="product-form__button"
color="secondary"
type="button"
onClick={handleCancel}
>
Cancelar
</Button>
</Form>
);
}
Example #6
| Source File: index.js From HexactaLabs-NetCore_React-Initial with Apache License 2.0 | 6 votes |
|
ProviderForm = props => {
const { handleSubmit, handleCancel } = props;
return (
<Form onSubmit={handleSubmit} className="addForm">
<Field label="Nombre" name="name" component={InputField} type="text" />
<Field label="Telefono" name="phone" component={InputField} type="text" />
<Field label="Email" name="email" component={InputField} type="text" />
<Button className="provider-form__button" color="primary" type="submit">
Guardar
</Button>
<Button
className="provider-form__button"
color="secondary"
type="button"
onClick={handleCancel}
>
Cancelar
</Button>
</Form>
);
}
Example #7
| Source File: index.js From HexactaLabs-NetCore_React-Initial with Apache License 2.0 | 6 votes |
|
StoreForm = props => {
const { handleSubmit, handleCancel } = props;
return (
<Form onSubmit={handleSubmit}>
<Field label="Nombre" name="name" component={InputField} type="text" />
<Field label="Teléfono" name="phone" component={InputField} type="text" />
<Field
label="Dirección"
name="address"
component={InputField}
type="text"
/>
<Button className="store-form__button" color="primary" type="submit">
Guardar
</Button>
<Button
className="store-form__button"
color="secondary"
type="button"
onClick={handleCancel}
>
Cancelar
</Button>
</Form>
);
}
Example #8
| Source File: ResourceActivityType.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 5 votes |
|
ResourceActivityType = (props) => {
const {
resource,
loadResourceTypes,
selectType,
type,
setActiveView,
} = props;
const { types: activityTypes } = resource;
useEffect(() => {
loadResourceTypes();
}, [loadResourceTypes]);
const { handleSubmit, onChangeActivityType } = props;
const activityTypesContent = activityTypes?.map((activityType) => (
<div className="col-md-3" key={activityType.id}>
<label className="activity-label">
<Field
name="activityType"
component={ResourceActivityTypeField}
type="radio"
value={`${activityType.id}`}
onChange={() => {
onChangeActivityType(activityType.id);
selectType([...type, 'select']);
setActiveView('select');
}}
validate={[required]}
/>
<div className="activity-item">
<div
className="activity-img"
style={{ backgroundImage: `url(${global.config.resourceUrl}${activityType.image})` }}
/>
<div className="activity-content">
<span>{activityType.title}</span>
</div>
</div>
</label>
</div>
));
return (
<div className="row">
{/* <div className="col-md-3">
<AddResourceSidebar {...props} />
</div> */}
<div className="col-md-12">
<div className="resource-activity">
<FadeDiv>
<div className="row">
<div className="col-md-12">
<h2 className="title">Pick Activity Type</h2>
<div className="activity-content">
<p>
Create memorable learning experiences from one of the
activity types below:
</p>
</div>
</div>
</div>
<form
className="row meta-form"
onSubmit={handleSubmit}
autoComplete="off"
>
{activityTypesContent}
</form>
</FadeDiv>
</div>
</div>
</div>
);
}
Example #9
| Source File: RequestTokenForm.js From mern-stack with MIT License | 5 votes |
|
render() {
const {
classes,
handleSubmit,
pristine,
submitting,
valid,
title,
isProcessed,
error,
errorMessage,
} = this.props;
return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Avatar
className={classes.avatar}
alt="Logo"
src="/logo-circle512.png"
/>
<Typography component="h1" variant="h5" color="primary">
{title}
</Typography>
<form className={classes.form} onSubmit={handleSubmit(this.onSubmit)}>
<Field
id="email"
disabled={isProcessed && !errorMessage}
label="Email Address"
name="email"
component={this.renderTextField}
/>
<Button
className={classes.submit}
color="primary"
disabled={
pristine ||
submitting ||
!valid ||
(isProcessed && !errorMessage)
}
fullWidth
type="submit"
variant="contained"
>
Submit
</Button>
<Grid container>
<Grid item xs>
<Link href="/signin" variant="body2">
Sign In
</Link>
</Grid>
<Grid item>
<Link href="/register" variant="body2">
{"Don't have an account? Sign up"}
</Link>
</Grid>
</Grid>
</form>
</div>
<Snackbar open={!!error}>
<Alert severity="error">{error}</Alert>
</Snackbar>
<Snackbar open={isProcessed && !errorMessage}>
<Alert severity="success">
An email has been sent to your email address
</Alert>
</Snackbar>
</Container>
);
}
Example #10
| Source File: appWithReduxForm.story.js From rainbow-modules with MIT License | 5 votes |
|
Content = ({ handleSubmit }) => {
const onSubmit = (values) => {
// eslint-disable-next-line no-alert
alert(`submitting ${JSON.stringify(values)}`);
};
return (
<ContainerCard>
<FormContainer onSubmit={handleSubmit(onSubmit)}>
<Title>We had love to hear from you</Title>
<Field
className="rainbow-m-bottom_medium"
component={Input}
name="name"
label="Name"
required
placeholder="Enter your name"
/>
<Field
className="rainbow-m-bottom_medium"
component={Input}
name="email"
label="Email Address"
required
placeholder="Enter your email address"
/>
<Field
className="rainbow-m-bottom_medium"
component={Textarea}
name="message"
label="Message"
required
placeholder="Type your message"
/>
<Button
className="rainbow-m-bottom_medium rainbow-m-top_medium"
label="Send"
type="submit"
variant="brand"
/>
</FormContainer>
</ContainerCard>
);
}
Example #11
| Source File: index.js From HexactaLabs-NetCore_React-Final with Apache License 2.0 | 5 votes |
|
ProductForm = props => {
const { handleSubmit, handleCancel } = props;
return (
<Form onSubmit={handleSubmit}>
<Field label="Nombre" name="name" component={InputField} type="text" />
<Field
label="Precio de costo"
name="costPrice"
component={InputField}
type="number"
parse={v => Number.parseInt(v)}
/>
<Field
label="Precio de venta"
name="salePrice"
component={InputField}
type="number"
parse={v => Number.parseInt(v)}
/>
<Field
name="productTypeId"
label="Tipo de producto"
component={SelectField}
type="select"
options={props.productTypeOptions}
/>
<Field
name="providerId"
label="Proveedor"
component={SelectField}
type="select"
options={props.providerOptions}
/>
<Button className="product-form__button" color="primary" type="submit">
Guardar
</Button>
<Button
className="product-form__button"
color="secondary"
type="button"
onClick={handleCancel}
>
Cancelar
</Button>
</Form>
);
}
Example #12
| Source File: Login.js From social-media-app with MIT License | 5 votes |
|
render() {
return (
<div>
<h1 class="ui center aligned header" style={{ paddingTop: "200px" }}>
Social Apes
</h1>
<div className="ui container" style={{ paddingTop: "20px" }}>
<div
class="ui placeholder segment"
style={{ height: "350px", backgroundColor: "#FFFFFF" }}
>
<div class="ui two column very relaxed stackable grid">
<div class="column">
<form
className="ui form"
onSubmit={this.props.handleSubmit(this.onSubmit)}
>
<Field
name="email"
component={this.renderInput}
label="Email"
icon="envelope icon"
type="text"
placeholder="[email protected]"
></Field>
<Field
name="password"
component={this.renderInput}
label="Password"
icon="lock icon"
type="password"
placeholder="password"
></Field>
<button
class={`fluid ui blue ${
this.state.loader ? "disabled loading" : ""
} submit button`}
type="submit"
>
Login
</button>
</form>
{this.renderError()}
</div>
<div class="small aligned column" style={{ paddingTop: "80px" }}>
<Link to="/create">
<div class="fluid ui blue submit button">
<i class="signup icon"></i>
Sign Up
</div>
</Link>
</div>
</div>
</div>
</div>
</div>
);
}
Example #13
| Source File: EditProfile.js From social-media-app with MIT License | 5 votes |
|
render() {
return (
<div>
<BackTo to="profile" toRoute="profile"></BackTo>
<h1 class="ui center aligned header" style={{ paddingTop: "50px" }}>
Edit Profile Details
</h1>
<div className="ui container" style={{ paddingTop: "20px" }}>
<div
class="ui placeholder segment"
style={{ height: "50%", backgroundColor: "#FFFFFF" }}
>
<div class="column">
<form
className="ui form"
onSubmit={this.props.handleSubmit(this.onSubmit)}
autoComplete="off"
>
<Field
name="name"
component={this.renderInput}
label="Name"
icon="user icon"
type="text"
placeholder="John Doe"
iv={this.props.user.name}
></Field>
<Field
name="age"
component={this.renderInput}
label="Age"
icon="hand point up icon"
type="number"
placeholder="19"
iv={this.props.user.age}
></Field>
<Field
name="userName"
component={this.renderInput}
label="UserName"
icon="user circle icon"
type="text"
placeholder="JohnDoe"
iv={this.props.user.userName}
></Field>
<Field
name="caption"
component={this.renderTextBox}
label="Caption"
icon="user circle icon"
type="text"
placeholder="Don't exceed 50 words."
iv={this.props.user.caption || ""}
></Field>
{this.renderImage()}
{/* <Field
name="password"
component={this.renderInput}
label="Password"
icon="lock icon"
type="password"
placeholder="password"
></Field> */}
<button class="fluid ui blue submit button" type="submit">
Update
</button>
</form>
{this.renderError()}
<br></br>
<br></br>
</div>
</div>
</div>
</div>
);
}
Example #14
| Source File: PostCreate.js From social-media-app with MIT License | 5 votes |
|
render() {
return (
<div>
<BackTo to="profile" toRoute="profile"></BackTo>
<h1 class="ui center aligned header" style={{ paddingTop: "100px" }}>
Create New Post
</h1>
<div className="ui container" style={{ paddingTop: "20px" }}>
<div
class="ui placeholder segment"
style={{ height: "50%", backgroundColor: "#FFFFFF" }}
>
<form
className="ui form"
onSubmit={this.props.handleSubmit(this.onSubmit)}
>
{this.renderImage()}
<Field
name="description"
component={this.renderInput}
label="Description"
icon="pen square icon"
type="text"
placeholder="Life is what happens when you're busy making other plans."
></Field>
<button
class={`fluid ui ${
this.state.loader ? "disabled loading" : ""
} blue submit button`}
type="submit"
>
Create
</button>
</form>
<br></br>
<br></br>
</div>
</div>
</div>
);
}
Example #15
| Source File: Login.js From HexactaLabs-NetCore_React-Initial with Apache License 2.0 | 5 votes |
|
CreateForm = ({ handleSubmit, submitting, onSubmit, errorMessage }) => (
<React.Fragment>
<form className="form-signin" onSubmit={handleSubmit}>
<FormGroup>
<Field
name="username"
placeholder="Nombre de usuario"
component={RenderField}
type="text"
/>
</FormGroup>
<FormGroup>
<Field
name="password"
placeholder="Contraseña"
component={RenderField}
type="password"
/>
</FormGroup>
<button
disabled={submitting}
className="btn btn-lg btn-primary btn-block btn-login text-uppercase font-weight-bold mb-2"
type="submit"
onClick={handleSubmit(values =>
onSubmit({ ...values, button: "login" })
)}
>
Sign in
</button>
<button
disabled={submitting}
type="submit"
className="btn btn-lg btn-secondary btn-block btn-login text-uppercase font-weight-bold mb-2"
onClick={handleSubmit(values =>
onSubmit({ ...values, button: "signup" })
)}
>
Sign up
</button>
</form>
{errorMessage && <div className="text-danger">{errorMessage}</div>}
</React.Fragment>
)
Example #16
| Source File: index.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 5 votes |
|
Creation = (props) => {
const { handleSubmit, editMode } = props;
return (
<div className="team-information">
<FadeDiv>
<div className="title-box">
<h2 className="title">
{editMode ? 'Edit ' : 'Create '}
Team
</h2>
<div className="title-cross" />
</div>
<div className="create-team-wrapper">
<h2 className="describe">
{editMode ? ' Editing your team information ' : ' Start your team by adding a name and description '}
</h2>
<div className="creation-panel">
<form className="create-team-form" onSubmit={handleSubmit}>
<div className="team-info-input">
<div className="team-name">
<Field
name="name"
component={InputField}
label="Team Name"
type="text"
validate={[required, maxName]}
/>
</div>
<div className="team-description">
<Field
name="description"
component={TextareaField}
label="Team Description"
validate={[required, maxDescription]}
/>
</div>
<h2 className="satelliteteaminfo"> Satellite Team Information (Optional)</h2>
<div className="team-name">
<Field
name="noovo_group_title"
component={InputField}
label="Noovo Group Title"
validate={[maxName]}
/>
</div>
</div>
<button
type="submit"
className="create-team-continue-btn"
// onClick={() => {
// if (editMode) {
// handleSubmitInEditMode();
// }
// }}
>
{editMode ? 'Update' : 'Continue'}
</button>
</form>
</div>
</div>
</FadeDiv>
</div>
);
}
Example #17
| Source File: index.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 5 votes |
|
Creation = (props) => {
const { handleSubmit, editMode } = props;
return (
<div className="group-information">
<FadeDiv>
<div className="title-box">
<h2 className="title">
{editMode ? 'Edit ' : 'Create '}
Group
</h2>
<div className="title-cross" />
</div>
<div className="create-group-wrapper">
<h2 className="describe">
{editMode ? ' Editing your group information ' : 'Start your group by adding a name and description'}
</h2>
<div className="creation-panel">
<form className="create-group-form" onSubmit={handleSubmit}>
<div className="group-info-input">
<div className="group-name">
<Field
name="name"
component={InputField}
label="Group Name"
type="text"
validate={[required, maxName]}
/>
</div>
<div className="group-description">
<Field
name="description"
component={TextareaField}
label="Group Description"
validate={[required, maxDescription]}
/>
</div>
</div>
<button type="submit" className="create-group-continue-btn">
Continue
</button>
</form>
</div>
</div>
</FadeDiv>
</div>
);
}
Example #18
| Source File: ResourceSelectActivity.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 5 votes |
|
ResourceSelectActivity = (props) => {
const { handleSubmit, onChangeActivity } = props;
const questionsContent = questions.map((activity) => (
<div className="col-md-3" key={activity.id}>
<label className="question-label">
<Field
name="activity"
component={ResourceActivityTypeField}
type="radio"
value={activity.h5pLib}
onChange={(e) => onChangeActivity(activity, e)}
validate={[required]}
/>
<div className="activity-item">
<div className="activity-img">
<img src={activity.icon} className="activity-icon" alt="" />
<img src={activity.overlayIcon} className="overlay-activity-icon" alt="" />
</div>
<div className="activity-content">
<span>{activity.text}</span>
<p>{activity.description}</p>
</div>
</div>
</label>
</div>
));
return (
<div className="row">
<div className="col-md-3">
<EditResourceSidebar {...props} />
</div>
<div className="col-md-9">
<div className="resource-question">
<FadeDiv>
<div className="row">
<div className="col-md-12">
<h2 className="title">Select the activity you want to build from the options below:</h2>
</div>
</div>
<div className="row">
<form className="row meta-form" onSubmit={handleSubmit} autoComplete="off">
{questionsContent}
<div className="col-md-12">
<button type="submit" className="add-resource-continue-btn">Continue</button>
</div>
</form>
</div>
</FadeDiv>
</div>
</div>
</div>
);
}
Example #19
| Source File: ResourceActivityType.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 5 votes |
|
ResourceActivityType = (props) => {
const {
handleSubmit,
onChangeActivityType,
} = props;
const activitiesContent = activities.map((activity) => (
<div className="col-md-3" key={activity.id}>
<label className="activity-label">
<Field
name="activityType"
component={ResourceActivityTypeField}
type="radio"
value={activity.id}
onChange={onChangeActivityType}
validate={[required]}
/>
<div className="activity-item">
<div className="activity-img">
<img src={activity.icon} className="activity-icon" alt="" />
<img src={activity.overlayIcon} className="overlay-activity-icon" alt="" />
</div>
<div className="activity-content">
<span>
{activity.title}
</span>
</div>
</div>
</label>
</div>
));
return (
<div className="row">
<div className="col-md-3">
<EditResourceSidebar {...props} />
</div>
<div className="col-md-9">
<div className="resource-activity">
<FadeDiv>
<div className="row">
<div className="col-md-12">
<h2 className="title">Select the type of activity you want to create?</h2>
<div className="activity-content">
<p>
Create memorable learning experiences from one of the activity types below:
</p>
</div>
</div>
</div>
<form className="row meta-form" onSubmit={handleSubmit} autoComplete="off">
{activitiesContent}
<div className="row">
<div className="col-md-12">
<button type="submit" className="add-resource-continue-btn">Continue</button>
</div>
</div>
</form>
</FadeDiv>
</div>
</div>
</div>
);
}
Example #20
| Source File: stepContacts.js From Lynx with MIT License | 4 votes |
|
render() {
const {
handleSubmit,
pristine,
invalid,
valid,
reset,
submitting,
loadingShippingMethods,
loadingPaymentMethods,
initialValues,
settings,
saveShippingLocation,
saveShippingMethod,
savePaymentMethod,
paymentMethods,
shippingMethods,
inputClassName,
buttonClassName,
editButtonClassName,
onEdit,
isReadOnly,
title
} = this.props;
if (isReadOnly) {
return React.createElement(
'div',
{ className: 'checkout-step' },
React.createElement(
'h1',
null,
React.createElement(
'span',
null,
'1'
),
title
),
!this.isFieldHidden('email') && React.createElement(ReadOnlyField, { name: text.email, value: initialValues.email }),
!this.isFieldHidden('mobile') && React.createElement(ReadOnlyField, { name: text.mobile, value: initialValues.mobile }),
!this.isFieldHidden('country') && React.createElement(ReadOnlyField, {
name: text.country,
value: initialValues.shipping_address.country
}),
!this.isFieldHidden('state') && React.createElement(ReadOnlyField, {
name: text.state,
value: initialValues.shipping_address.state
}),
!this.isFieldHidden('city') && React.createElement(ReadOnlyField, {
name: text.city,
value: initialValues.shipping_address.city
}),
React.createElement(ReadOnlyField, {
name: text.shippingMethod,
value: initialValues.shipping_method
}),
React.createElement(ReadOnlyField, {
name: text.paymentMethod,
value: initialValues.payment_method
}),
React.createElement(
'div',
{ className: 'checkout-button-wrap' },
React.createElement(
'button',
{
type: 'button',
onClick: onEdit,
className: editButtonClassName
},
text.edit
)
)
);
} else {
return React.createElement(
'div',
{ className: 'checkout-step' },
React.createElement(
'h1',
null,
React.createElement(
'span',
null,
'1'
),
title
),
React.createElement(
'form',
{ onSubmit: handleSubmit },
!this.isFieldHidden('email') && React.createElement(Field, {
className: inputClassName,
name: 'email',
id: 'customer.email',
component: InputField,
type: 'email',
label: this.getFieldLabel('email'),
validate: this.getFieldValidators('email'),
placeholder: this.getFieldPlaceholder('email')
}),
!this.isFieldHidden('mobile') && React.createElement(Field, {
className: inputClassName,
name: 'mobile',
id: 'customer.mobile',
component: InputField,
type: 'tel',
label: this.getFieldLabel('mobile'),
validate: this.getFieldValidators('mobile'),
placeholder: this.getFieldPlaceholder('mobile')
}),
React.createElement(
'h2',
null,
text.shippingTo
),
!this.isFieldHidden('country') && React.createElement(Field, {
className: inputClassName,
name: 'shipping_address.country',
id: 'shipping_address.country',
component: InputField,
type: 'text',
label: this.getFieldLabel('country'),
validate: this.getFieldValidators('country'),
placeholder: this.getFieldPlaceholder('country'),
onBlur: (event, value) => setTimeout(() => saveShippingLocation({ country: value }))
}),
!this.isFieldHidden('state') && React.createElement(Field, {
className: inputClassName,
name: 'shipping_address.state',
id: 'shipping_address.state',
component: InputField,
type: 'text',
label: this.getFieldLabel('state'),
validate: this.getFieldValidators('state'),
placeholder: this.getFieldPlaceholder('state'),
onBlur: (event, value) => setTimeout(() => saveShippingLocation({ state: value }))
}),
!this.isFieldHidden('city') && React.createElement(Field, {
className: inputClassName,
name: 'shipping_address.city',
id: 'shipping_address.city',
component: InputField,
type: 'text',
label: this.getFieldLabel('city'),
validate: this.getFieldValidators('city'),
placeholder: this.getFieldPlaceholder('city'),
onBlur: (event, value) => setTimeout(() => saveShippingLocation({ city: value }))
}),
React.createElement(
'h2',
null,
text.shippingMethods,
' ',
loadingShippingMethods && React.createElement(
'small',
null,
text.loading
)
),
React.createElement(
'div',
{ className: 'shipping-methods' },
shippingMethods.map((method, index) => React.createElement(
'label',
{
key: index,
className: 'shipping-method' + (method.id === initialValues.shipping_method_id ? ' active' : '')
},
React.createElement(Field, {
name: 'shipping_method_id',
component: 'input',
type: 'radio',
value: method.id,
onClick: () => saveShippingMethod(method.id)
}),
React.createElement(
'div',
null,
React.createElement(
'div',
{ className: 'shipping-method-name' },
method.name
),
React.createElement(
'div',
{ className: 'shipping-method-description' },
method.description
)
),
React.createElement(
'span',
{ className: 'shipping-method-rate' },
formatCurrency(method.price, settings)
)
))
),
React.createElement(
'h2',
null,
text.paymentMethods,
' ',
loadingPaymentMethods && React.createElement(
'small',
null,
text.loading
)
),
React.createElement(
'div',
{ className: 'payment-methods' },
paymentMethods.map((method, index) => React.createElement(
'label',
{
key: index,
className: 'payment-method' + (method.id === initialValues.payment_method_id ? ' active' : '')
},
React.createElement(Field, {
name: 'payment_method_id',
validate: [validateRequired],
component: 'input',
type: 'radio',
value: method.id,
onClick: () => savePaymentMethod(method.id)
}),
React.createElement(
'div',
null,
React.createElement(
'div',
{ className: 'payment-method-name' },
method.name
),
React.createElement(
'div',
{ className: 'payment-method-description' },
method.description
)
),
React.createElement('span', { className: 'payment-method-logo' })
))
),
React.createElement(
'div',
{ className: 'checkout-button-wrap' },
React.createElement(
'button',
{
type: 'submit',
disabled: invalid,
className: buttonClassName
},
text.next
)
)
)
);
}
}
Example #21
| Source File: VerifyEmail.js From mern-stack with MIT License | 4 votes |
|
render() {
const {
classes,
handleSubmit,
pristine,
submitting,
valid,
errorMessage,
error,
isProcessed,
} = this.props;
return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Avatar
className={classes.avatar}
alt="Logo"
src="/logo-circle512.png"
/>
<Typography component="h1" variant="h5" color="primary">
Verify Email
</Typography>
<form className={classes.form} onSubmit={handleSubmit(this.onSubmit)}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Field
component={this.renderTextField}
disabled={isProcessed && !errorMessage}
id="password"
label="Password"
placeholder="Please enter your password"
name="password"
type="password"
/>
</Grid>
</Grid>
<Button
className={classes.submit}
color="primary"
disabled={
pristine ||
submitting ||
!valid ||
(isProcessed && !errorMessage)
}
fullWidth
type="submit"
variant="contained"
>
Submit
</Button>
<Grid container>
<Grid item xs>
<Link href="/signin" variant="body2">
Sign In
</Link>
</Grid>
<Grid item>
<Link href="/request-password-reset" variant="body2">
Forgot password?
</Link>
</Grid>
</Grid>
</form>
</div>
<Snackbar open={!!error}>
<Alert severity="error">{error}</Alert>
</Snackbar>
<Snackbar open={isProcessed && !errorMessage}>
<Alert
severity="success"
action={
<Link href="/signin" variant="body2">
Sign In
</Link>
}
>
Email has been verified successfully
</Alert>
</Snackbar>
</Container>
);
}
Example #22
| Source File: stepShipping.js From Lynx with MIT License | 4 votes |
|
render() {
const {
handleSubmit,
pristine,
invalid,
valid,
reset,
submitting,
processingCheckout,
initialValues,
shippingMethod,
checkoutFields,
settings,
inputClassName,
buttonClassName,
editButtonClassName,
title,
show,
isReadOnly,
showPaymentForm,
onEdit
} = this.props;
const hideBillingAddress = settings.hide_billing_address === true;
const commentsField = checkoutFields.find(f => f.name === 'comments');
const commentsFieldPlaceholder = commentsField && commentsField.placeholder && commentsField.placeholder.length > 0 ? commentsField.placeholder : '';
const commentsFieldLabel = commentsField && commentsField.label && commentsField.label.length > 0 ? commentsField.label : text.comments;
const commentsFieldStatus = commentsField && commentsField.status.length > 0 ? commentsField.status : null;
const commentsValidate = commentsFieldStatus === 'required' ? validateRequired : null;
const hideCommentsField = commentsFieldStatus === 'hidden';
if (!show) {
return React.createElement(
'div',
{ className: 'checkout-step' },
React.createElement(
'h1',
null,
React.createElement(
'span',
null,
'2'
),
title
)
);
} else if (isReadOnly) {
let shippingFields = null;
if (shippingMethod && shippingMethod.fields && shippingMethod.fields.length > 0) {
shippingFields = shippingMethod.fields.map((field, index) => {
const fieldLabel = getFieldLabel(field);
const fieldValue = initialValues.shipping_address[field.key];
return React.createElement(
'div',
{ key: index, className: 'checkout-field-preview' },
React.createElement(
'div',
{ className: 'name' },
fieldLabel
),
React.createElement(
'div',
{ className: 'value' },
fieldValue
)
);
});
}
return React.createElement(
'div',
{ className: 'checkout-step' },
React.createElement(
'h1',
null,
React.createElement(
'span',
null,
'2'
),
title
),
shippingFields,
!hideCommentsField && initialValues.comments !== '' && React.createElement(
'div',
{ className: 'checkout-field-preview' },
React.createElement(
'div',
{ className: 'name' },
commentsFieldLabel
),
React.createElement(
'div',
{ className: 'value' },
initialValues.comments
)
),
React.createElement(
'div',
{ className: 'checkout-button-wrap' },
React.createElement(
'button',
{
type: 'button',
onClick: onEdit,
className: editButtonClassName
},
text.edit
)
)
);
} else {
let shippingFields = null;
if (shippingMethod && shippingMethod.fields && shippingMethod.fields.length > 0) {
shippingFields = shippingMethod.fields.map((field, index) => {
const fieldLabel = getFieldLabel(field);
const fieldId = `shipping_address.${field.key}`;
const fieldClassName = `${inputClassName} shipping-${field.key}`;
const validate = field.required === true ? validateRequired : null;
return React.createElement(Field, {
key: index,
className: fieldClassName,
name: fieldId,
id: fieldId,
component: InputField,
type: 'text',
label: fieldLabel,
validate: validate
});
});
}
return React.createElement(
'div',
{ className: 'checkout-step' },
React.createElement(
'h1',
null,
React.createElement(
'span',
null,
'2'
),
title
),
React.createElement(
'form',
{ onSubmit: handleSubmit },
shippingFields,
!hideCommentsField && React.createElement(Field, {
className: inputClassName + ' shipping-comments',
name: 'comments',
id: 'customer.comments',
component: TextareaField,
type: 'text',
label: commentsFieldLabel,
placeholder: commentsFieldPlaceholder,
validate: commentsValidate,
rows: '3'
}),
!hideBillingAddress && React.createElement(
'div',
null,
React.createElement(
'h2',
null,
text.billingAddress
),
React.createElement(
'div',
{ className: 'billing-as-shipping' },
React.createElement('input', {
id: 'billingAsShipping',
type: 'checkbox',
onChange: this.onChangeBillingAsShipping,
checked: this.state.billingAsShipping
}),
React.createElement(
'label',
{ htmlFor: 'billingAsShipping' },
text.sameAsShipping
)
),
!this.state.billingAsShipping && React.createElement(
'div',
null,
React.createElement(Field, {
className: inputClassName + ' billing-fullname',
name: 'billing_address.full_name',
id: 'billing_address.full_name',
component: InputField,
type: 'text',
label: text.fullName,
validate: [validateRequired]
}),
React.createElement(Field, {
className: inputClassName + ' billing-address1',
name: 'billing_address.address1',
id: 'billing_address.address1',
component: InputField,
type: 'text',
label: text.address1,
validate: [validateRequired]
}),
React.createElement(Field, {
className: inputClassName + ' billing-address2',
name: 'billing_address.address2',
id: 'billing_address.address2',
component: InputField,
type: 'text',
label: text.address2 + ` (${text.optional})`
}),
React.createElement(Field, {
className: inputClassName + ' billing-postalcode',
name: 'billing_address.postal_code',
id: 'billing_address.postal_code',
component: InputField,
type: 'text',
label: text.postal_code + ` (${text.optional})`
}),
React.createElement(Field, {
className: inputClassName + ' billing-phone',
name: 'billing_address.phone',
id: 'billing_address.phone',
component: InputField,
type: 'text',
label: text.phone + ` (${text.optional})`
}),
React.createElement(Field, {
className: inputClassName + ' billing-company',
name: 'billing_address.company',
id: 'billing_address.company',
component: InputField,
type: 'text',
label: text.company + ` (${text.optional})`
})
)
),
React.createElement(
'div',
{ className: 'checkout-button-wrap' },
React.createElement(
'button',
{
type: 'submit',
disabled: submitting || processingCheckout || invalid,
className: `${buttonClassName}${processingCheckout ? ' is-loading' : ''}`
},
showPaymentForm ? text.next : text.orderSubmit
)
)
)
);
}
}
Example #23
| Source File: stepContacts.js From Lynx with MIT License | 4 votes |
|
render() {
const {
handleSubmit,
pristine,
invalid,
valid,
reset,
submitting,
loadingShippingMethods,
loadingPaymentMethods,
initialValues,
settings,
saveShippingLocation,
saveShippingMethod,
savePaymentMethod,
paymentMethods,
shippingMethods,
inputClassName,
buttonClassName,
editButtonClassName,
onEdit,
isReadOnly,
title
} = this.props;
if (isReadOnly) {
return (
<div className="checkout-step">
<h1>
<span>1</span>
{title}
</h1>
{!this.isFieldHidden('email') && (
<ReadOnlyField name={text.email} value={initialValues.email} />
)}
{!this.isFieldHidden('mobile') && (
<ReadOnlyField name={text.mobile} value={initialValues.mobile} />
)}
{!this.isFieldHidden('country') && (
<ReadOnlyField
name={text.country}
value={initialValues.shipping_address.country}
/>
)}
{!this.isFieldHidden('state') && (
<ReadOnlyField
name={text.state}
value={initialValues.shipping_address.state}
/>
)}
{!this.isFieldHidden('city') && (
<ReadOnlyField
name={text.city}
value={initialValues.shipping_address.city}
/>
)}
<ReadOnlyField
name={text.shippingMethod}
value={initialValues.shipping_method}
/>
<ReadOnlyField
name={text.paymentMethod}
value={initialValues.payment_method}
/>
<div className="checkout-button-wrap">
<button
type="button"
onClick={onEdit}
className={editButtonClassName}
>
{text.edit}
</button>
</div>
</div>
);
} else {
return (
<div className="checkout-step">
<h1>
<span>1</span>
{title}
</h1>
<form onSubmit={handleSubmit}>
{!this.isFieldHidden('email') && (
<Field
className={inputClassName}
name="email"
id="customer.email"
component={InputField}
type="email"
label={this.getFieldLabel('email')}
validate={this.getFieldValidators('email')}
placeholder={this.getFieldPlaceholder('email')}
/>
)}
{!this.isFieldHidden('mobile') && (
<Field
className={inputClassName}
name="mobile"
id="customer.mobile"
component={InputField}
type="tel"
label={this.getFieldLabel('mobile')}
validate={this.getFieldValidators('mobile')}
placeholder={this.getFieldPlaceholder('mobile')}
/>
)}
<h2>{text.shippingTo}</h2>
{!this.isFieldHidden('country') && (
<Field
className={inputClassName}
name="shipping_address.country"
id="shipping_address.country"
component={InputField}
type="text"
label={this.getFieldLabel('country')}
validate={this.getFieldValidators('country')}
placeholder={this.getFieldPlaceholder('country')}
onBlur={(event, value) =>
setTimeout(() => saveShippingLocation({ country: value }))
}
/>
)}
{!this.isFieldHidden('state') && (
<Field
className={inputClassName}
name="shipping_address.state"
id="shipping_address.state"
component={InputField}
type="text"
label={this.getFieldLabel('state')}
validate={this.getFieldValidators('state')}
placeholder={this.getFieldPlaceholder('state')}
onBlur={(event, value) =>
setTimeout(() => saveShippingLocation({ state: value }))
}
/>
)}
{!this.isFieldHidden('city') && (
<Field
className={inputClassName}
name="shipping_address.city"
id="shipping_address.city"
component={InputField}
type="text"
label={this.getFieldLabel('city')}
validate={this.getFieldValidators('city')}
placeholder={this.getFieldPlaceholder('city')}
onBlur={(event, value) =>
setTimeout(() => saveShippingLocation({ city: value }))
}
/>
)}
<h2>
{text.shippingMethods}{' '}
{loadingShippingMethods && <small>{text.loading}</small>}
</h2>
<div className="shipping-methods">
{shippingMethods.map((method, index) => (
<label
key={index}
className={
'shipping-method' +
(method.id === initialValues.shipping_method_id
? ' active'
: '')
}
>
<Field
name="shipping_method_id"
component="input"
type="radio"
value={method.id}
onClick={() => saveShippingMethod(method.id)}
/>
<div>
<div className="shipping-method-name">{method.name}</div>
<div className="shipping-method-description">
{method.description}
</div>
</div>
<span className="shipping-method-rate">
{formatCurrency(method.price, settings)}
</span>
</label>
))}
</div>
<h2>
{text.paymentMethods}{' '}
{loadingPaymentMethods && <small>{text.loading}</small>}
</h2>
<div className="payment-methods">
{paymentMethods.map((method, index) => (
<label
key={index}
className={
'payment-method' +
(method.id === initialValues.payment_method_id
? ' active'
: '')
}
>
<Field
name="payment_method_id"
validate={[validateRequired]}
component="input"
type="radio"
value={method.id}
onClick={() => savePaymentMethod(method.id)}
/>
<div>
<div className="payment-method-name">{method.name}</div>
<div className="payment-method-description">
{method.description}
</div>
</div>
<span className="payment-method-logo" />
</label>
))}
</div>
<div className="checkout-button-wrap">
<button
type="submit"
disabled={invalid}
className={buttonClassName}
>
{text.next}
</button>
</div>
</form>
</div>
);
}
}
Example #24
| Source File: stepShipping.js From Lynx with MIT License | 4 votes |
|
render() {
const {
handleSubmit,
pristine,
invalid,
valid,
reset,
submitting,
processingCheckout,
initialValues,
shippingMethod,
checkoutFields,
settings,
inputClassName,
buttonClassName,
editButtonClassName,
title,
show,
isReadOnly,
showPaymentForm,
onEdit
} = this.props;
const hideBillingAddress = settings.hide_billing_address === true;
const commentsField = checkoutFields.find(f => f.name === 'comments');
const commentsFieldPlaceholder =
commentsField &&
commentsField.placeholder &&
commentsField.placeholder.length > 0
? commentsField.placeholder
: '';
const commentsFieldLabel =
commentsField && commentsField.label && commentsField.label.length > 0
? commentsField.label
: text.comments;
const commentsFieldStatus =
commentsField && commentsField.status.length > 0
? commentsField.status
: null;
const commentsValidate =
commentsFieldStatus === 'required' ? validateRequired : null;
const hideCommentsField = commentsFieldStatus === 'hidden';
if (!show) {
return (
<div className="checkout-step">
<h1>
<span>2</span>
{title}
</h1>
</div>
);
} else if (isReadOnly) {
let shippingFields = null;
if (
shippingMethod &&
shippingMethod.fields &&
shippingMethod.fields.length > 0
) {
shippingFields = shippingMethod.fields.map((field, index) => {
const fieldLabel = getFieldLabel(field);
const fieldValue = initialValues.shipping_address[field.key];
return (
<div key={index} className="checkout-field-preview">
<div className="name">{fieldLabel}</div>
<div className="value">{fieldValue}</div>
</div>
);
});
}
return (
<div className="checkout-step">
<h1>
<span>2</span>
{title}
</h1>
{shippingFields}
{!hideCommentsField &&
initialValues.comments !== '' && (
<div className="checkout-field-preview">
<div className="name">{commentsFieldLabel}</div>
<div className="value">{initialValues.comments}</div>
</div>
)}
<div className="checkout-button-wrap">
<button
type="button"
onClick={onEdit}
className={editButtonClassName}
>
{text.edit}
</button>
</div>
</div>
);
} else {
let shippingFields = null;
if (
shippingMethod &&
shippingMethod.fields &&
shippingMethod.fields.length > 0
) {
shippingFields = shippingMethod.fields.map((field, index) => {
const fieldLabel = getFieldLabel(field);
const fieldId = `shipping_address.${field.key}`;
const fieldClassName = `${inputClassName} shipping-${field.key}`;
const validate = field.required === true ? validateRequired : null;
return (
<Field
key={index}
className={fieldClassName}
name={fieldId}
id={fieldId}
component={InputField}
type="text"
label={fieldLabel}
validate={validate}
/>
);
});
}
return (
<div className="checkout-step">
<h1>
<span>2</span>
{title}
</h1>
<form onSubmit={handleSubmit}>
{shippingFields}
{!hideCommentsField && (
<Field
className={inputClassName + ' shipping-comments'}
name="comments"
id="customer.comments"
component={TextareaField}
type="text"
label={commentsFieldLabel}
placeholder={commentsFieldPlaceholder}
validate={commentsValidate}
rows="3"
/>
)}
{!hideBillingAddress && (
<div>
<h2>{text.billingAddress}</h2>
<div className="billing-as-shipping">
<input
id="billingAsShipping"
type="checkbox"
onChange={this.onChangeBillingAsShipping}
checked={this.state.billingAsShipping}
/>
<label htmlFor="billingAsShipping">
{text.sameAsShipping}
</label>
</div>
{!this.state.billingAsShipping && (
<div>
<Field
className={inputClassName + ' billing-fullname'}
name="billing_address.full_name"
id="billing_address.full_name"
component={InputField}
type="text"
label={text.fullName}
validate={[validateRequired]}
/>
<Field
className={inputClassName + ' billing-address1'}
name="billing_address.address1"
id="billing_address.address1"
component={InputField}
type="text"
label={text.address1}
validate={[validateRequired]}
/>
<Field
className={inputClassName + ' billing-address2'}
name="billing_address.address2"
id="billing_address.address2"
component={InputField}
type="text"
label={text.address2 + ` (${text.optional})`}
/>
<Field
className={inputClassName + ' billing-postalcode'}
name="billing_address.postal_code"
id="billing_address.postal_code"
component={InputField}
type="text"
label={text.postal_code + ` (${text.optional})`}
/>
<Field
className={inputClassName + ' billing-phone'}
name="billing_address.phone"
id="billing_address.phone"
component={InputField}
type="text"
label={text.phone + ` (${text.optional})`}
/>
<Field
className={inputClassName + ' billing-company'}
name="billing_address.company"
id="billing_address.company"
component={InputField}
type="text"
label={text.company + ` (${text.optional})`}
/>
</div>
)}
</div>
)}
<div className="checkout-button-wrap">
<button
type="submit"
disabled={submitting || processingCheckout || invalid}
className={`${buttonClassName}${
processingCheckout ? ' is-loading' : ''
}`}
>
{showPaymentForm ? text.next : text.orderSubmit}
</button>
</div>
</form>
</div>
);
}
}
Example #25
| Source File: SignUp.js From mern-stack with MIT License | 4 votes |
|
render() {
const {
classes,
handleSubmit,
pristine,
submitting,
valid,
error,
} = this.props;
return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Avatar
className={classes.avatar}
alt="Logo"
src="/logo-circle512.png"
/>
<Typography component="h1" variant="h5" color="primary">
Sign Up
</Typography>
<form className={classes.form} onSubmit={handleSubmit(this.onSubmit)}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Field
id="username"
label="Username"
name="username"
component={this.renderTextField}
/>
</Grid>
<Grid item xs={12} sm={6}>
<Field
autoComplete="fname"
id="firstName"
label="First Name"
name="firstName"
component={this.renderTextField}
/>
</Grid>
<Grid item xs={12} sm={6}>
<Field
autoComplete="lname"
id="lastName"
label="Last Name"
name="lastName"
component={this.renderTextField}
/>
</Grid>
<Grid item xs={12}>
<Field
id="email"
label="Email Address"
name="email"
component={this.renderTextField}
/>
</Grid>
<Grid item xs={12}>
<Field
name="password"
label="Password"
type="password"
id="password"
component={this.renderTextField}
/>
</Grid>
</Grid>
<Button
className={classes.submit}
color="primary"
disabled={pristine || submitting || !valid}
fullWidth
type="submit"
variant="contained"
>
Submit
</Button>
<Grid container justify="flex-end">
<Grid item>
<Link href="/signin" variant="body2">
{'Already have an account? Sign in'}
</Link>
</Grid>
</Grid>
</form>
</div>
<Snackbar open={!!error}>
<Alert severity="error">{error}</Alert>
</Snackbar>
</Container>
);
}
Example #26
| Source File: SignIn.js From mern-stack with MIT License | 4 votes |
|
render() {
const {
classes,
handleSubmit,
pristine,
submitting,
valid,
error,
} = this.props;
return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Avatar
className={classes.avatar}
alt="Logo"
src="/logo-circle512.png"
/>
<Typography component="h1" variant="h5" color="primary">
Sign in
</Typography>
<form className={classes.form} onSubmit={handleSubmit(this.onSubmit)}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Field
id="email"
label="Email Address"
name="email"
autoComplete="email"
component={this.renderTextField}
/>
</Grid>
<Grid item xs={12}>
<Field
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
component={this.renderTextField}
/>
</Grid>
</Grid>
<Button
className={classes.submit}
color="primary"
disabled={pristine || submitting || !valid}
fullWidth
type="submit"
variant="contained"
>
Submit
</Button>
<Grid container>
<Grid item xs>
<Link href="/request-password-reset" variant="body2">
Forgot password?
</Link>
</Grid>
<Grid item>
<Link href="/signup" variant="body2">
{"Don't have an account? Sign up"}
</Link>
</Grid>
</Grid>
</form>
<Box m={3}>
<Typography variant="body2" color="textSecondary">
Or Sign In With
</Typography>
</Box>
<Grid container spacing={3}>
<Grid item xs={6}>
<FacebookLogin
appId={process.env.REACT_APP_FACEBOOK_APP_ID}
fields="name,email,picture"
scope="public_profile,email"
version="7.0"
callback={this.onFacebookResponse}
render={(renderProps) => (
<Button
color="primary"
disabled={renderProps.isProcessing}
fullWidth
onClick={renderProps.onClick}
startIcon={<Facebook />}
variant="outlined"
>
Facebook
</Button>
)}
/>
</Grid>
<Grid item xs={6}>
<GoogleLogin
clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
buttonText="Google Login"
onSuccess={this.onGoogleResponse}
onFailure={this.onGoogleResponse}
render={(renderProps) => (
<Button
color="secondary"
disabled={renderProps.disabled}
fullWidth
onClick={renderProps.onClick}
startIcon={<Google />}
variant="outlined"
>
Google
</Button>
)}
/>
</Grid>
</Grid>
</div>
<Snackbar open={!!error}>
{error !== 'Email is not verified' ? (
<Alert severity="error">{error}</Alert>
) : (
<Alert
severity="error"
action={
<Link href="/request-verification-email" variant="body2">
Click here
</Link>
}
>
Email is not verified. Have not received verification email?
</Alert>
)}
</Snackbar>
</Container>
);
}
Example #27
| Source File: ResetPassword.js From mern-stack with MIT License | 4 votes |
|
render() {
const {
classes,
handleSubmit,
pristine,
submitting,
valid,
error,
errorMessage,
isProcessed,
} = this.props;
return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Avatar
className={classes.avatar}
alt="Logo"
src="/logo-circle512.png"
/>
<Typography component="h1" variant="h5" color="primary">
Reset Your Password
</Typography>
<form className={classes.form} onSubmit={handleSubmit(this.onSubmit)}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Field
component={this.renderTextField}
disabled={isProcessed && !errorMessage}
id="email"
label="Email Address"
name="email"
/>
</Grid>
<Grid item xs={12}>
<Field
component={this.renderTextField}
disabled={isProcessed && !errorMessage}
id="password"
label="New Password"
name="password"
type="password"
/>
</Grid>
</Grid>
<Button
className={classes.submit}
color="primary"
disabled={
pristine ||
submitting ||
!valid ||
(isProcessed && !errorMessage)
}
fullWidth
type="submit"
variant="contained"
>
Submit
</Button>
<Grid container>
<Grid item xs>
<Link href="/signin" variant="body2">
Sign In
</Link>
</Grid>
<Grid item>
<Link href="/signup" variant="body2">
{"Don't have an account? Sign up"}
</Link>
</Grid>
</Grid>
</form>
</div>
<Snackbar open={!!error}>
<Alert severity="error">{error}</Alert>
</Snackbar>
<Snackbar open={isProcessed && !errorMessage}>
<Alert severity="success">
Your password has been reset successfully
</Alert>
</Snackbar>
</Container>
);
}
Example #28
| Source File: CreateUser.js From social-media-app with MIT License | 4 votes |
|
render() {
return (
<div>
<h1 class="ui center aligned header" style={{ paddingTop: "80px" }}>
Create New Account
</h1>
<div className="ui container" style={{ paddingTop: "20px" }}>
<div
class="ui placeholder segment"
style={{ height: "700px", backgroundColor: "#FFFFFF" }}
>
<div class="column">
<form
className="ui form"
onSubmit={this.props.handleSubmit(this.onSubmit)}
>
<Field
name="name"
component={this.renderInput}
label="Name"
icon="user icon"
type="text"
placeholder="John Doe"
></Field>
<Field
name="age"
component={this.renderInput}
label="Age"
icon="hand point up icon"
type="number"
placeholder="19"
></Field>
<Field
name="email"
component={this.renderInput}
label="Email"
icon="envelope icon"
type="text"
placeholder="[email protected]"
></Field>
<Field
name="caption"
component={this.renderTextBox}
label="Caption"
type="text"
placeholder="Don't Exceed 50 words"
></Field>
<Field
name="userName"
component={this.renderInput}
label="UserName"
icon="user circle icon"
type="text"
placeholder="JohnDoe"
></Field>
<Field
name="password"
component={this.renderInput}
label="Password"
icon="lock icon"
type="password"
placeholder="password"
></Field>
<button
class={`fluid ui blue ${
this.state.loader ? "disabled loading" : ""
} submit button`}
type="submit"
>
Create
</button>
</form>
{this.renderError()}
<br></br>
<br></br>
<Link to="/">
<div className="ui center aligned tiny header">
Already have account?
</div>
</Link>
</div>
</div>
</div>
</div>
);
}
Example #29
| Source File: index.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
CreateProjectPopup = (props) => {
const { isLoading, project, handleSubmit, handleCloseProjectModal, showCreateProjectModal, getProjectVisibilityTypes, vType } = props;
const dispatch = useDispatch();
const stateHeader = useSelector((state) => state.organization);
const projectState = useSelector((state) => state.project);
const { teamPermission } = useSelector((state) => state.team);
const { permission } = stateHeader;
const [modalShow, setModalShow] = useState(false);
const openFile = useRef();
const [visibilityTypeArray, setVisibilityTypeArray] = useState([]);
// remove popup when escape is pressed
const escFunction = useCallback(
(event) => {
if (event.keyCode === 27) {
handleCloseProjectModal(event);
}
},
[handleCloseProjectModal]
);
useEffect(() => {
document.addEventListener('keydown', escFunction, false);
return () => {
document.removeEventListener('keydown', escFunction, false);
};
}, [escFunction]);
useMemo(() => {
(async () => {
const { data } = await getProjectVisibilityTypes();
setVisibilityTypeArray(data.data);
})();
}, [getProjectVisibilityTypes]);
return (
(permission?.Project?.includes('project:create')) ? (
<div className="create-program-wrapper">
<PexelsAPI
show={modalShow}
project={project}
onHide={() => {
setModalShow(false);
}}
searchName="abstract"
/>
<form className="create-playlist-form" onSubmit={handleSubmit} autoComplete="off">
<div className="project-name">
<Field
name="name"
component={InputField}
type="text"
validate={[required, maxLength80]}
autoComplete="new-password"
className="reduxlabel"
label="Project name"
placeholder="e.g Course Name"
/>
</div>
<div className="project-description">
<Field name="description" component={TextareaField} validate={[required, maxLength1000]} autoComplete="new-password" label="Project Description" />
</div>
<div className="upload-thumbnail check">
<div className="upload_placeholder">
<label style={{ display: 'none' }}>
<input
ref={openFile}
type="file"
accept="image/x-png,image/jpeg"
onChange={(e) => {
if (e.target.files.length === 0) {
return true;
}
if (
!(
e.target.files[0].type.includes('png') ||
e.target.files[0].type.includes('jpg') ||
e.target.files[0].type.includes('gif') ||
e.target.files[0].type.includes('jpeg')
)
) {
Swal.fire({
icon: 'error',
title: 'Error',
text: 'Invalid file selected.',
});
} else if (e.target.files[0].size > 100000000) {
Swal.fire({
icon: 'error',
title: 'Error',
text: 'Selected file size should be less then 100MB.',
});
} else {
uploadThumb(e, permission, teamPermission, projectState?.selectedProject?.id, dispatch);
}
}}
/>
<span>Upload</span>
</label>
<span className="validation-error">{imageValidation}</span>
<div>
{project?.thumbUrl ? (
<div className="thumb-display">
<label>
<h2>Upload Image</h2>
</label>
<div
className="imgbox"
style={{
backgroundImage: project.thumbUrl.includes('pexels.com') ? `url(${project.thumbUrl})` : `url(${global.config.resourceUrl}${project.thumbUrl})`,
}}
/>
</div>
) : (
<div className="new-box">
<label>
<h2>Upload Image</h2>
</label>
<div className="imgbox">
{/* eslint-disable-next-line max-len */}
<img src="https://images.pexels.com/photos/593158/pexels-photo-593158.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=200&w=280" alt="" />
</div>
</div>
)}
</div>
<div className="button-flex ">
<div className="pexel" onClick={() => setModalShow(true)}>
<img src={pexel} alt="pexel" />
<p>Pexels</p>
</div>
<div
className="gallery"
onClick={() => {
openFile.current.click();
}}
>
<img src={computer} alt="" />
<p>My device</p>
</div>
</div>
</div>
<p className="disclaimer">
Project Image dimension should be <strong>280px width and 200px height. </strong>
Maximum File size allowed is <strong>100MB.</strong>
</p>
</div>
<div className="create-project-template-wrapper">
<button type="submit" className="create-project-submit-btn" disabled={isLoading}>
{isLoading ? <img src={loader} alt="" /> : 'Create Project'}
</button>
</div>
</form>
</div>
) : (
<Alert style={{ marginTop: '25px' }} variant="danger">
You are not authorized to access this.
</Alert>
)
);
}
