react-bootstrap#Form JavaScript Examples
The following examples show how to use
react-bootstrap#Form.
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: TextArea.jsx From ashteki with GNU Affero General Public License v3.0 | 6 votes |
|
render() {
return (
<Form.Group as={Row}>
<Form.Label column sm='3' htmlFor={this.props.name}>
{this.props.label}
</Form.Label>
<Col className={this.props.fieldClass}>
<textarea
ref={this.props.name}
rows={this.props.rows}
className='form-control'
id={this.props.name}
placeholder={this.props.placeholder}
value={this.props.value}
onChange={this.props.onChange}
onBlur={this.props.onBlur}
/>
{this.props.validationMessage ? (
<span className='help-block'>{this.props.validationMessage} </span>
) : null}
</Col>
{this.props.children}
</Form.Group>
);
}
Example #2
| Source File: NoticeForm.js From real-time-web-samples with MIT License | 6 votes |
|
render() {
return (
<Container fluid>
<Row>
<Col xs={{ span: 2, offset: 10 }} md={{ span: 1, offset: 11 }}>
<Image src={staffImage} roundedCircle fluid className="border border-primary my-3" />
</Col>
</Row>
<Row>
<Col md="6" className="mb-3">
<Form onSubmit={this.submitNotice}>
<Form.Group controlId="ControlTextarea">
<Form.Control className="" style={{backgroundColor: 'rgba(255, 255, 255, 6%)'}} value={this.state.formText} onChange={this.changeNotice} name="formText" as="textarea" rows="10" placeholder="输入通知消息..."/>
</Form.Group>
<Button variant="primary" type="submit" className="float-right">通知</Button>
</Form>
</Col>
<Col md="6">
<Image src={azureImage} fluid />
</Col>
</Row>
</Container>
);
}
Example #3
| Source File: ReleaseUpdate.js From SaraAlert with Apache License 2.0 | 6 votes |
|
createModal(title, toggle) {
return (
<Modal size="lg" show centered>
<Modal.Header>
<Modal.Title>{title}</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>Enter the message to send to all users:</p>
<Form.Group>
<Form.Control as="textarea" rows="10" id="comment" onChange={this.handleChange} />
</Form.Group>
</Modal.Body>
<Modal.Footer>
<Button
variant="primary btn-square"
disabled={!this.state.comment.length}
onClick={() => {
if (window.confirm('You are about to send this message to all users (' + this.props.user_count + ' accounts). Are you sure?')) {
this.submit();
}
}}>
Send
</Button>
<Button variant="secondary btn-square" onClick={toggle}>
Cancel
</Button>
</Modal.Footer>
</Modal>
);
}
Example #4
| Source File: admins.js From Dose with BSD 3-Clause "New" or "Revised" License | 6 votes |
|
render() {
return (
<Layout>
<Table title="Admin accounts" columns={this.getColumns()} data={this.getData()}></Table>
<br />
<div className=" flex flex-wrap relative">
<Form.Control className="w-40 mr-3 bg-gray-800 border-gray-900 focus:bg-gray-800 text-white" type="text" placeholder="Username" onChange={(e) => this.setState({ username: e.target.value })} />
<Form.Control className="w-40 mr-3 bg-gray-800 border-gray-900 focus:bg-gray-800 text-white" type="password" placeholder="Password" onChange={(e) => this.setState({ password: e.target.value })} />
<button className="bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded text-xs mr-3" onClick={this.createAdmin}>
New
</button>
<p className="text-red-500 text-xs italic">{this.state.statusMessage}</p>
</div>
<br></br>
<Table title="Users" columns={this.getUserColumns()} data={this.getUserData()}></Table>
<br />
<div className=" flex flex-wrap relative">
<Form.Control className="w-40 mr-3 bg-gray-800 border-gray-900 focus:bg-gray-800 text-white" type="text" placeholder="Username" onChange={(e) => this.newUserNameChanged(e.target.value)} />
<button className="bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded text-xs mr-3" onClick={this.createUser}>
Create
</button>
<p className="text-red-500 text-xs italic">{this.state.statusMessageUser}</p>
</div>
</Layout>
)
}
Example #5
| Source File: LoginForm.js From aws-workshop-colony with Apache License 2.0 | 6 votes |
|
render() {
return (
<Navbar.Form>
<Form onSubmit={this.handleSubmit}>
<FormGroup style={formGroupStyle}>
<FormControl
type="text"
name="email"
placeholder="Email"
onChange={this.handleInputChange}
/>
<FormControl
type="password"
name="password"
placeholder="Password"
onChange={this.handleInputChange}
style={passwordStyle}
/>
<Button type="submit" bsStyle="success" style={logInButtonStyle}>
LOGIN
</Button>
</FormGroup>
</Form>
</Navbar.Form>
);
}
Example #6
| Source File: ChangeWorker.js From stake-nucypher with GNU Affero General Public License v3.0 | 6 votes |
|
function ChangeWorker(props) {
const onSubmit = (stakeValues) => {
if (props.onChangeWorker) {
props.onChangeWorker(stakeValues);
}
};
return <Formik onSubmit={onSubmit} initialValues={{ workerAddress: props.worker ? props.worker : '' }} validationSchema={validationSchema}>
{({
handleSubmit,
handleChange,
handleBlur,
values,
touched,
isValid,
errors,
}) => (
<Form onSubmit={handleSubmit}>
<Form.Group as={Row}>
<Form.Label column sm={2} htmlFor="worker-address">
Worker
</Form.Label>
<Col sm={10}>
<Form.Control id="worker-address" type="text" name="workerAddress" onChange={handleChange} value={values.workerAddress} />
<Form.Control.Feedback type="invalid" style={{ display: errors.workerAddress ? 'inline' : 'none' }}>{errors.workerAddress}</Form.Control.Feedback>
</Col>
</Form.Group>
<div className="d-flex justify-content-center">
<Button type="submit" disabled={!isValid}>Set worker</Button>
</div>
</Form>
)}
</Formik>;
}
Example #7
| Source File: ChartSelector.js From indeplot with GNU General Public License v3.0 | 6 votes |
|
render() {
const { selected, color, colorPickerOn } = this.state;
const { data, labels } = this.props;
return (
<Container>
<Form inline className="justify-content-center mb-3">
<Form.Label className="mr-2">
Select Chart Type
</Form.Label>
<DropdownButton className="chart-type-selector" title={selected} variant="outline-dark" onSelect={this.handleSelect}>
{chartTypes.map((item, i) =>
<Dropdown.Item key={i} eventKey={item} >{chartTypeIcons[item]}{item}</Dropdown.Item>
)}
</DropdownButton>
<span> </span>
<Button as="input" type="button" value="Color Picker" variant="outline-dark" onClick={this.handleColorPicker} />
<Button type="button" variant="outline-dark" onClick={this.refreshData} className="ml-1">Refresh</Button>
<Modal show={colorPickerOn} onHide={this.handleModalClose}>
<Modal.Header closeButton>
Color Picker
</Modal.Header>
<Modal.Body>
<SketchPicker
width="95%"
color={this.state.color}
onChangeComplete={this.handleColor}
/>
</Modal.Body>
</Modal>
</Form>
<Row>
<Col>
<Charts chartType={selected} chartColor={color} labels={labels} title="Sample" data={data} options={{}} />
</Col>
</Row>
</Container>
)
}
Example #8
| Source File: Login.jsx From journey.io with MIT License | 6 votes |
|
render() {
if (this.state.loginVerify) {
return <Redirect to="/dashboard" />;
}
return (
<Form className="login" onSubmit={this.sendLogin}>
<h1>Login to get started</h1>
<div className="loginBox">
<Form.Group controlId="loginUsernameInput">
<Form.Label>Username</Form.Label>
<Form.Control type="text" />
</Form.Group>
<Form.Group controlId="loginPasswordInput">
<Form.Label>Password</Form.Label>
<Form.Control type="password" />
</Form.Group>
<p>{this.state.loginError}</p>
<div className="buttons">
<Button type="submit" variant="info">
Login
</Button>
<Button type="submit" variant="outline-info">
<Link className="signupLink" to={'/signup'}>
Sign Up
</Link>
</Button>
</div>
</div>
</Form>
);
}
Example #9
| Source File: SearchBar.js From tclone with MIT License | 6 votes |
|
function SearchBar(props) {
let history = useHistory()
let [value, setValue] = useState('')
let handleChange = ({ target: { value } }) => {
setValue(value)
}
let handleSubmit = (e) => {
e.preventDefault();
let value = e.target.search.value;
value = encodeURIComponent(value);
history.push(`/search?q=${value}`)
}
let { className } = props;
return (
<Form className={className} onSubmit={handleSubmit} role="search">
<Form.Group className="w-100 mb-0 rounded-pill border-0 px-3"
style={{ backgroundColor: "rgb(233,236,239)" }}>
<InputGroup className="w-100">
<InputGroup.Prepend>
<InputGroup.Text>
<FontAwesomeIcon icon={faSearch} />
</InputGroup.Text>
</InputGroup.Prepend>
<Form.Control
value={value}
onChange={handleChange}
style={{ backgroundColor: "rgb(233,236,239)" }}
size="sm"
type="search"
placeholder="Search for posts, #hastags or @users"
name="search"
id="tsearch"
/>
</InputGroup>
</Form.Group>
</Form>
)
}
Example #10
| Source File: PoolReceipt.js From katanapools with GNU General Public License v2.0 | 6 votes |
|
render() {
const {tokenAmount} = this.props;
const {item} = this.props;
let tokenUSDValue = 0;
return (
<div>
<Form.Group controlId="formFundingCenter" className="pool-funding-form-row">
<Form.Label>Amount of {item.symbol} to transfer. 1 {item.symbol} = {item.price} USD.</Form.Label>
<Form.Control type="text" placeholder="enter amount of token to transfer" value={tokenAmount}
onChange={this.tokenAmountChanged} />
<Form.Text className="text-muted">
Total USD value = {tokenUSDValue}. Your wallet balance {item.senderBalance}
</Form.Text>
</Form.Group>
</div>
)
}
Example #11
| Source File: Auth.js From fifa with GNU General Public License v3.0 | 6 votes |
|
enterUsername() {
return (
<div>
<Form onSubmit={this.handleLogin}>
<InputGroup>
<FormControl
ref={input => {
this.usernameInput = input;
}}
placeholder="Enter your alias here"
name="username"
aria-label="username"
aria-describedby="text"
onChange={this.handleUsernameChange}
/>
<InputGroup.Append>
<Button>Submit</Button>
</InputGroup.Append>
</InputGroup>
</Form>
</div>
);
}
Example #12
| Source File: xpubInput.js From xpub-tool with MIT License | 6 votes |
|
ExtPubKeyInput = ({ extPubKey, network, onChange }) => {
const isValid = useMemo(() => isValidExtPubKey(extPubKey, network), [
extPubKey,
network,
])
const isEmptyExtPubKey = extPubKey === ""
const isFilled = !isEmptyExtPubKey
return (
<Form noValidate>
<Form.Group>
<Form.Control
isValid={isFilled && isValid}
isInvalid={isFilled && !isValid}
size="lg"
type="password"
placeholder="xpub..."
value={extPubKey}
onChange={onChange}
/>
</Form.Group>
{isFilled && !isValid && (
<Alert variant="warning">Invalid public key</Alert>
)}
</Form>
)
}
Example #13
| Source File: UploadButton.js From viade_en1b with MIT License | 5 votes |
|
UploadButton = (props) => {
const [state, setState] = useState({
filename: "",
numberOfFiles: 0
});
useEffect(() => {
if (props.reset) { resetState(); }
}, [props.reset]);
const resetState = () => {
setState({
filename: "",
numberOfFiles: 0
});
};
const file = useRef()
const checkFileIsGPX = (file) => {
var parts = file.split(".");
var ext = parts[parts.length - 1];
switch (ext.toLowerCase()) {
case "gpx":
return true;
default:
return false;
}
};
const handleSingleFileChanged = (e) => {
props.onChange(e);
if (file.current.files[0] !== undefined && checkFileIsGPX(file.current.files[0].name)) {
let name = file.current.files[0].name;
setState({ ...state, filename: name });
}
else {
let name = "";
setState({ ...state, filename: name });
}
};
const handleMultipleFileChanged = (e) => {
props.onChange(e);
let number = file.current.files.length;
setState({ ...state, numberOfFiles: number });
};
const uploadButton = (props.file)
?
<Form.Group className={props.className}>
<Form.Control ref={file} onChange={handleSingleFileChanged} id={props.id} type="file" accept=".gpx"></Form.Control>
<Form.Label className="uploadLabel" htmlFor={props.id}>
<p data-testid="upload-button-label">{state.filename !== "" ? state.filename : props.text}</p>
<BsUpload></BsUpload>
</Form.Label>
</Form.Group>
:
(props.videos ?
<Form.Group className={props.className}>
<Form.Control multiple ref={file} onChange={handleMultipleFileChanged} id={props.id} type="file" accept="video/*"></Form.Control>
<Form.Label className="uploadLabel" htmlFor={props.id}>
<p>{state.numberOfFiles !== 0 ? state.numberOfFiles + " files selected" : props.text}</p>
<BsUpload></BsUpload>
</Form.Label>
</Form.Group> :
<Form.Group className={props.className}>
<Form.Control multiple ref={file} onChange={handleMultipleFileChanged} id={props.id} type="file" accept="image/*"></Form.Control>
<Form.Label className="uploadLabel" htmlFor={props.id}>
<p>{state.numberOfFiles !== 0 ? state.numberOfFiles + " files selected" : props.text}</p>
<BsUpload></BsUpload>
</Form.Label>
</Form.Group>
)
return (
uploadButton
);
}
Example #14
| Source File: GameConfiguration.jsx From ashteki with GNU Affero General Public License v3.0 | 5 votes |
|
GameConfiguration = ({ optionSettings, onOptionSettingToggle }) => {
const { t } = useTranslation();
return (
<div>
<Form>
<Panel title={t('Game Settings')}>
<div className='advice'>
Note: Changes made here will only affect the current game.
</div>
<Form.Row>
<Form.Check
id='orderForcedAbilities'
name='optionSettings.orderForcedAbilities'
label={t('Prompt to order simultaneous abilities')}
type='switch'
checked={optionSettings.orderForcedAbilities}
onChange={(event) =>
onOptionSettingToggle('orderForcedAbilities', event.target.checked)
}
/>
<Form.Check
id='confirmOneClick'
name='gameOptions.confirmOneClick'
label={t('Show a prompt when initating 1-click abilities')}
type='switch'
checked={optionSettings.confirmOneClick}
onChange={(event) =>
onOptionSettingToggle('confirmOneClick', event.target.checked)
}
/>
<Form.Check
id='leftPrompt'
name='gameOptions.leftPrompt'
label={t('Show the prompt area on left')}
type='switch'
checked={optionSettings.leftPrompt}
onChange={(event) =>
onOptionSettingToggle('leftPrompt', event.target.checked)
}
/>
<div className='bluffTimer'>
Bluff Timer (seconds):
<RangeSlider
name='gameOptions.bluffTimer'
label='Bluff Timer'
min='0'
max='10'
tooltip='on'
value={optionSettings.bluffTimer}
onChange={(event) =>
onOptionSettingToggle('bluffTimer', event.target.value)
}
/>
</div>
<br />
</Form.Row>
</Panel>
</Form>
</div >
);
}
Example #15
| Source File: ProfileEdit.jsx From ms-identity-javascript-react-spa-dotnetcore-webapi-obo with MIT License | 5 votes |
|
render() {
return (
<div className="p-edit">
<Form onSubmit={(e) => this.handleSubmit(e)}>
<Form.Row>
<Form.Group as={Col} controlId="formGridName">
<Form.Label>givenName</Form.Label>
<Form.Control placeholder="givenName" defaultValue={this.props.profile.givenName} />
</Form.Group>
<Form.Group as={Col} controlId="formGridSurname">
<Form.Label>surname</Form.Label>
<Form.Control placeholder="surname" defaultValue={this.props.profile.surname} />
</Form.Group>
</Form.Row>
<Form.Group controlId="formGridUPN">
<Form.Label>userPrincipalName</Form.Label>
<Form.Control placeholder="userPrincipalName" defaultValue={this.props.profile.userPrincipalName} />
</Form.Group>
<Form.Row>
<Form.Group as={Col} controlId="formGridJob">
<Form.Label>jobTitle</Form.Label>
<Form.Control placeholder="jobTitle" defaultValue={this.props.profile.jobTitle} />
</Form.Group>
<Form.Group as={Col} controlId="formGridPhone">
<Form.Label>mobilePhone</Form.Label>
<Form.Control placeholder="mobilePhone" defaultValue={this.props.profile.mobilePhone} />
</Form.Group>
<Form.Group as={Col} controlId="formGridLang">
<Form.Label>preferredLanguage</Form.Label>
<Form.Control placeholder="preferredLanguage"
as="select" defaultValue={this.props.profile.preferredLanguage}>
<option>English</option>
<option>Chinese</option>
<option>Hindi</option>
</Form.Control>
</Form.Group>
</Form.Row>
<Button variant="primary" type="submit">
Submit
</Button>
</Form>
</div>
);
}
Example #16
| Source File: MonitoreesByDateOfExposure.js From SaraAlert with Apache License 2.0 | 5 votes |
|
render() {
return (
<React.Fragment>
<Card className="card-square text-center">
<Card.Header as="h5" className="text-left">
Total Monitorees by Date of Last Exposure By Risk Status
</Card.Header>
<Card.Body>
<Form.Row className="justify-content-md-center">
<Form.Group
as={Col}
md="8"
onChange={val => {
this.setTimeResolution(val.target.value);
}}>
<Form.Label>Time Resolution</Form.Label>
<Form.Control as="select" size="md">
<option>Day</option>
<option>Week</option>
<option>Month</option>
</Form.Control>
</Form.Group>
</Form.Row>
<ResponsiveContainer width="100%" height={400}>
<BarChart
width={500}
height={300}
data={this.state.lastExposureDateDate}
margin={{
top: 20,
right: 30,
left: 20,
bottom: 5,
}}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Legend />
<Bar dataKey="High" stackId="a" fill="#FA897B" />
<Bar dataKey="Medium" stackId="a" fill="#FFDD94" />
<Bar dataKey="Low" stackId="a" fill="#D0E6A5" />
<Bar dataKey="No Identified Risk" stackId="a" fill="#333" />
<Bar dataKey="Missing" stackId="a" fill="#BABEC4" />
</BarChart>
</ResponsiveContainer>
<div className="text-secondary text-right">
<i className="fas fa-exclamation-circle mr-1"></i>
Illnesses that began
{` ${this.state.lastExposureDateDate[this.state.lastExposureDateDate.length - 1]?.name} `}
may not yet be reported
</div>
</Card.Body>
</Card>
</React.Fragment>
);
}
Example #17
| Source File: Login.js From create-sas-app with Apache License 2.0 | 5 votes |
|
render() {
return (
<div className="login">
<div className="flex justify-content-center align-items-center">
<Card className={'w100 mb0'}>
<Row className="loginForm">
<Col md={12}>
<Form noValidate validated={this.state.validated}>
<h1>Login</h1>
<p className="text-muted">Sign In to your account</p>
<FormGroup>
<InputGroup>
<InputGroup.Prepend><i className={'fas fa-user'}/></InputGroup.Prepend>
<Form.Control
name={'username'}
className={`textInput`}
placeholder={'Username'}
value={this.state.username}
onChange={this.onInputChange}
required
/>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<InputGroup.Prepend><i className={'fas fa-lock'}/></InputGroup.Prepend>
<Form.Control
name={'password'}
placeholder={'Password'}
type={'password'}
value={this.state.password}
onChange={this.onInputChange}
required
/>
</InputGroup>
</FormGroup>
<Row>
<Col md={12}>
<Button
onClick={this.login}
bsstyle={'primary'}
disabled={this.validateEmail() === 'error' || this.validatePassword() === 'error' || !this.state.username || !this.state.password}
className={'pull-right'}
>Login</Button>
{this.state.error && <div className={'text-danger'}>{this.state.error}</div>}
</Col>
</Row>
</Form>
</Col>
</Row>
</Card>
</div>
</div>
);
}
Example #18
| Source File: Login.js From Purple-React with MIT License | 5 votes |
|
render() {
return (
<div>
<div className="d-flex align-items-center auth px-0">
<div className="row w-100 mx-0">
<div className="col-lg-4 mx-auto">
<div className="auth-form-light text-left py-5 px-4 px-sm-5">
<div className="brand-logo">
<img src={require("../../assets/images/logo.svg")} alt="logo" />
</div>
<h4>Hello! let's get started</h4>
<h6 className="font-weight-light">Sign in to continue.</h6>
<Form className="pt-3">
<Form.Group className="d-flex search-field">
<Form.Control type="email" placeholder="Username" size="lg" className="h-auto" />
</Form.Group>
<Form.Group className="d-flex search-field">
<Form.Control type="password" placeholder="Password" size="lg" className="h-auto" />
</Form.Group>
<div className="mt-3">
<Link className="btn btn-block btn-primary btn-lg font-weight-medium auth-form-btn" to="/dashboard">SIGN IN</Link>
</div>
<div className="my-2 d-flex justify-content-between align-items-center">
<div className="form-check">
<label className="form-check-label text-muted">
<input type="checkbox" className="form-check-input"/>
<i className="input-helper"></i>
Keep me signed in
</label>
</div>
<a href="!#" onClick={event => event.preventDefault()} className="auth-link text-black">Forgot password?</a>
</div>
<div className="mb-2">
<button type="button" className="btn btn-block btn-facebook auth-form-btn">
<i className="mdi mdi-facebook mr-2"></i>Connect using facebook
</button>
</div>
<div className="text-center mt-4 font-weight-light">
Don't have an account? <Link to="/user-pages/register" className="text-primary">Create</Link>
</div>
</Form>
</div>
</div>
</div>
</div>
</div>
)
}
Example #19
| Source File: account.js From Dose with BSD 3-Clause "New" or "Revised" License | 5 votes |
|
render() {
return (
<div className={Styles.container} style={{ height: '100vh' }}>
<div className={Styles.loginForm}>
<h2 className={Styles.header}>Create admin account</h2>
<div style={{ clear: 'both' }}></div>
<Form onSubmit={this.createAdminAccount}>
<Form.Group controlId="formBasicUsername">
<Form.Label>Username</Form.Label>
<Form.Control type="text" placeholder="Username" onChange={(e) => this.setState({ username: e.target.value })} />
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" onChange={(e) => this.setState({ password: e.target.value })} />
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Label>Repeat password</Form.Label>
<Form.Control type="password" placeholder="Password" onChange={(e) => this.setState({ repeatedPassword: e.target.value })} />
</Form.Group>
<br/>
<h2 className={Styles.header}>Main server url</h2>
<Form.Group controlId="formBasicUsername">
<Form.Label>Url/IP</Form.Label>
<Form.Control type="text" placeholder="127.0.0.1:3001" onChange={(e) => this.setState({ mainServerUrl: e.target.value })} />
</Form.Group>
<br/>
<h2 className={Styles.header}>Content Server</h2>
<Form.Group controlId="formBasicName">
<Form.Label>Name</Form.Label>
<Form.Control type="text" placeholder="Content server name" onChange={(e) => this.setState({ contentServerName: e.target.value })} />
</Form.Group>
<Form.Group controlId="formBasicName">
<Form.Label>Content server IP</Form.Label>
<Form.Control type="text" value={this.host} onChange={(e) => this.setState({ contentServerIp: e.target.value })} />
</Form.Group>
<br/>
<Button variant="primary" onClick={this.createAdminAccount}>
Submit
</Button>
<input type="submit" style={{ display: 'none' }} />
<p id="statusMessage" style={{float: 'right', color: 'red'}}>{this.state.statusMessage}</p>
</Form>
</div>
</div>
)
}
Example #20
| Source File: Login.jsx From SWEethearts-2.0 with MIT License | 5 votes |
|
Login = (props) => {
const { authStatus, setAuthStatus } = props;
const [loginInputs, setLoginInputs] = useState({
username: '',
password: '',
email: '',
});
//used to toggle error message if auth fails
//as well as redirect if auth succeeds
const [loginStatus, setLoginStatus] = useState(null);
const handleSubmit = async (e) => {
let status;
e.preventDefault();
const { username, password } = loginInputs;
const body = {
username,
password,
};
let response = await fetch('/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(body),
});
status = response.status;
let data = await response.json();
if (status === 200) {
let email;
setLoginStatus(true);
setAuthStatus({ isLoggedIn: true, username: data.username, email: data.email });
} else setLoginStatus(false);
};
const setInput = (e) => {
setLoginInputs({ ...loginInputs, [e.target.id]: e.target.value });
};
return loginStatus || authStatus.isLoggedIn ? (
<Redirect to={{ pathname: '/explore' }} />
) : (
<Spring from={{ opacity: 0 }} to={{ opacity: 1 }} config={config.slow}>
{(springProps) => (
<div style={springProps} className="login-container">
<div className="login-box">
<center>
<h4>Welcome Back!</h4>
</center>
<Form>
<Form.Group controlId="username">
<Form.Label>Username</Form.Label>
<Form.Control type="username" placeholder="Username" onChange={setInput} />
</Form.Group>
<Form.Group controlId="password">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" onChange={setInput} />
</Form.Group>
<Button variant="primary" type="submit" onClick={handleSubmit}>
Submit
</Button>
<div className={loginStatus === false ? 'error-msg' : 'hidden'}>
Sorry, your username/password was invalid.
</div>
</Form>
<br></br>
<Button variant="primary" type="link" href="/api/auth/github">
Log In with GitHub
</Button>
</div>
</div>
)}
</Spring>
);
}
Example #21
| Source File: HomeComponent.js From aws-workshop-colony with Apache License 2.0 | 5 votes |
|
Home = () => (
<>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Comfortaa"
/>
<div style={globalFont}>
<section style={titleSection}>
<img src={gourmetLogo} style={headerLogoStyle} alt="Gourmet Inc Logo" />
<h1 style={headwelcome}>
Welcome to the Gourmet Inc. Promotions Manager Website
</h1>
</section>
<section style={servicesSection}>
<Grid style={servicesGrid}>
<Row style={servicesTitle}>
<h2 style={servicesGridH2}>Services:</h2>
<h2 style={servicesGridSub}>What we offer</h2>
</Row>
<Row>
<Col md={4}>
<img src={cloud} alt="cloud icon" style={cloudIcon} />
<h4 style={serviceTitle}>Platforms</h4>
<p style={serviceDescription}>
We support all social media platforms
</p>
</Col>
<Col md={4}>
<img src={gear} alt="gear icon" />
<h4 style={serviceTitle}>Functionality</h4>
<p style={serviceDescription}>We have many awesome features</p>
</Col>
<Col md={4}>
<img src={heart} alt="heart icon" style={heartIcon} />
<h4 style={serviceTitle}>Passion</h4>
<p style={serviceDescription}>
Made with love by passionate marketers
</p>
</Col>
</Row>
</Grid>
</section>
<section style={pricingDiv}>
<h1 style={pricingHeader}>Pricing:</h1>
<h3>We offer the most competitive pricing</h3>
</section>
<section style={signUpSection}>
<Grid style={signUpDiv}>
<Row>
<Col style={signUpSectionCol}>
<h2 style={signUpHeader}>Sign up for a FREE trial</h2>
<p style={signUpText}>
The Promotions Manager is launching soon. Leave your email at
the bottom to get a FREE 60 days trial when we launch
</p>
<Form inline>
<FormControl type="text" placeholder="Enter your email" />
<div style={btnCtaStyle}>
<Button bsStyle="success" style={signUpButtonStyle}>
SIGN ME UP
</Button>
</div>
</Form>
</Col>
</Row>
</Grid>
</section>
</div>
</>
)
Example #22
| Source File: show.js From RC4Community with Apache License 2.0 | 5 votes |
|
function RCform({ formId, fw }) {
const { form, isLoading, isError } = getFormData(formId);
if (isLoading) return <Spinner />;
if (isError) return <Error />;
const handleSubmit = (e) => {
e.preventDefault();
console.log("form submitted", e);
};
return (
<Card style={{ width: fw }} className={styles.showCard}>
<Card.Title className={styles.showTitle}>{form.title}</Card.Title>
<Card.Body>
<Form onSubmit={handleSubmit}>
{form.data?.attributes.formQs.map((ele, i) => (
<Form.Group key={i} className="mb-3" controlId="formBasicEmail">
<Form.Label>{ele.value}</Form.Label>
{ele.type == "number" ? (
<>
<Form.Control
key={i}
type={ele.type}
min={ele.min}
max={ele.max}
placeholder=""
required={ele.required}
/>
<Form.Text className="text-muted">
* Value must be in range {ele.min} - {ele.max}
</Form.Text>
</>
) : (
<Form.Control
key={i}
type={ele.type}
placeholder=""
required={ele.required}
/>
)}
{ele.type == "number"}
</Form.Group>
))}
<Button variant="primary" o type="submit">
Submit
</Button>
</Form>
</Card.Body>
</Card>
);
}
Example #23
| Source File: FilterModal.jsx From hiring-channel-frontend with MIT License | 5 votes |
|
render() {
return (
<>
<Modal
show={this.state.show}
onHide={this.handleClose}
size={"xs"}
aria-labelledby="contained-modal-title-vcenter"
centered
dialogClassName="small-modal"
>
<Modal.Header style={{ background: "#AB84C8" }}>
<h5
style={{ textAlign: "center", width: "100%", fontSize: "1.5rem" }}
>
Sort
</h5>
</Modal.Header>
<Modal.Body>
<Form.Control
as="select"
className="small-selection"
onChange={(e) => {
this.setState({ sort: e.target.value });
}}
>
<option value="name" selected>
Name
</option>
<option value="rating">Rating</option>
<option value="total_project">Total Project</option>
</Form.Control>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={this.handleClose}>
Close
</Button>
<Button
variant="primary"
style={{ background: "#AB84C8" }}
onClick={()=>{
this.props.onSort(this.state.sort);
this.handleClose();
}}
>
Sort
</Button>
</Modal.Footer>
</Modal>
</>
);
}
Example #24
| Source File: SearchBar.js From Anime-Tracker-Web-App with MIT License | 5 votes |
|
SearchBar = () => {
const [animeName, setAnimeName] = useState("");
const handleChange = (event) => {
setAnimeName(event.target.value);
};
const handleSubmit = async (event) => {
event.preventDefault();
// directing to a new page, that is routed to cards' component
window.location = `/anime/cards/${animeName}`;
};
const onClick = (event) => {
event.preventDefault();
window.location = "/";
};
return (
<div className={styles.container}>
<Navbar className={styles.nav}>
<span className={styles.span} onClick={onClick}>
Anime Tracker App
</span>
<div className={styles.searchBar}>
<Form inline onSubmit={handleSubmit}>
<FormControl
onChange={handleChange}
type="text"
placeholder="Anime"
className=" mr-sm-2"
/>
<Button className={styles.button} type="submit">
Enter
</Button>
</Form>
</div>
</Navbar>
</div>
);
}
Example #25
| Source File: SelectModal.js From anutimetable with Creative Commons Attribution Share Alike 4.0 International | 5 votes |
|
SelectModal = ({ visible, title, label, options, value, multiple, inline, onChange, onHide, ...props }) => {
const hide = () => onHide(selected)
// if single-select, return selection as singleton array for consistency
const singleSelect = e => {
const options = Array.from(e.target.selectedOptions).map(o => +o.value)
setSelected(options)
onChange(options)
}
// if multi-select, prevent clearing existing selections
// allows multiple selections without pressing ctrl
const multiSelect = !multiple ? undefined : e => {
e.preventDefault()
e.stopPropagation()
const newSelect = +e.target.value
const index = selected.indexOf(newSelect)
const newSelection = e.target.selected ? [...selected.slice(0, index), ...selected.slice(index+1)] : [...selected, newSelect]
setSelected(newSelection)
onChange(newSelection)
e.target.selected = !e.target.selected
}
const [selected, setSelected] = useState([])
return <Modal size="md" centered show={visible} onHide={hide} {...props}>
<Modal.Header closeButton>
<Modal.Title>{title}</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form inline={inline}>
<Form.Label>{label}</Form.Label>
<Form.Control as="select" custom multiple={multiple} defaultValue={value} onChange={singleSelect}>
{options.map(([ key, value ]) => <option key={key} value={key} onPointerDown={multiSelect}>
{value}
</option>)}
</Form.Control>
</Form>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={hide}>
Close
</Button>
</Modal.Footer>
</Modal>
}
Example #26
| Source File: contact.js From LearningJAMStack_Gatsby with MIT License | 5 votes |
|
ContactPage = () => (
<Layout>
<SEO title="お問い合わせ" />
<Row>
<Col className="space"></Col>
</Row>
<Row>
<Col className="title-obi">
<h1 className="h1-font">お問い合わせ</h1>
</Col>
</Row>
<Row>
<Col className="space"></Col>
</Row>
<Container className="" style={{width:`80%`}}>
<Row>
<Col>
<p>（※このサンプルサイトで送信機能は使用できません）</p>
<Form>
<Form.Group controlId="formBasicText">
<Form.Control type="text" as="input" placeholder="お名前" name="name" required />
</Form.Group>
<Form.Group controlId="formBasicEmail">
<Form.Control type="email" as="input" placeholder="メールアドレス" name="email" required />
</Form.Group>
<Form.Group controlId="formTextarea">
<Form.Control as="textarea" placeholder="メッセージ" rows="3" name="message" required />
</Form.Group>
<Form.Group>
<Form.File id="FormControlFile" name="file" lang="ja" label="ファイル添付" />
</Form.Group>
<Button variant="light" type="submit">送信</Button>
</Form>
</Col>
</Row>
</Container>
<Row>
<Col className="space"></Col>
</Row>
</Layout>
)
Example #27
| Source File: contact.js From LearningJAMStack_microCMS_template with MIT License | 5 votes |
|
ContactPage = () => (
<Layout>
<SEO title="お問い合わせ" />
<Row>
<Col className="space"></Col>
</Row>
<Row>
<Col className="title-obi">
<h1 className="h1-font">お問い合わせ</h1>
</Col>
</Row>
<Row>
<Col className="space"></Col>
</Row>
<Container className="" style={{width:`80%`}}>
<Row>
<Col>
<p>（※このサンプルサイトで送信機能は使用できません）</p>
<Form>
<Form.Group controlId="formBasicText">
<Form.Control type="text" as="input" placeholder="お名前" name="name" required />
</Form.Group>
<Form.Group controlId="formBasicEmail">
<Form.Control type="email" as="input" placeholder="メールアドレス" name="email" required />
</Form.Group>
<Form.Group controlId="formTextarea">
<Form.Control as="textarea" placeholder="メッセージ" rows="3" name="message" required />
</Form.Group>
<Form.Group>
<Form.File id="FormControlFile" name="file" lang="ja" label="ファイル添付" />
</Form.Group>
<Button variant="light" type="submit">送信</Button>
</Form>
</Col>
</Row>
</Container>
<Row>
<Col className="space"></Col>
</Row>
</Layout>
)
Example #28
| Source File: addCategoryModal.js From community-forum-frontend with GNU General Public License v3.0 | 5 votes |
|
render() {
return (
<Modal
show={this.props.showModal}
onHide={this.props.handleClose}
centered
>
<Modal.Header closeButton>
<Modal.Title>
<Container>
<Row>
<Col xs={12}>
<h1 className="modal-heading">
New Category
</h1>
</Col>
</Row>
</Container>
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Container>
<Row>
<Col xs={12}>
<div className="modal-form">
{this.state.formSubmissionError && (
<Alert variant="danger">
{this.state.formSubmissionError}
</Alert>
)}
<Form onSubmit={this.onFormSubmit}>
<Form.Group controlId="addCategoryFormBasicText">
<Form.Label>Name</Form.Label>
<Form.Control
onChange={this.onFieldChange}
type="text"
name={fieldNames.NAME}
value={this.state.name}
/>
{this.state.nameError && (
<h6 className="form-field-error">
{this.state.nameError}
</h6>
)}
</Form.Group>
<Form.Group controlId="addCategoryFormBasicTextArea">
<Form.Label>Description</Form.Label>
<Form.Control
onChange={this.onFieldChange}
as="textarea"
rows={3}
name={fieldNames.DESCRIPTION}
value={this.state.description}
/>
{this.state.descriptionError && (
<h6 className="form-field-error">
{this.state.descriptionError}
</h6>
)}
</Form.Group>
<Row className="center-row">
<Button
variant=""
className="primary-button organization-page-create-button"
type="submit"
disabled={this.state.isFormInvalid}
>
Create
</Button>
</Row>
</Form>
</div>
</Col>
</Row>
</Container>
</Modal.Body>
</Modal>
);
}
Example #29
| Source File: AddStake.js From stake-nucypher with GNU Affero General Public License v3.0 | 5 votes |
|
function AddStake(props) {
const onSubmit = (stakeValues) => {
if (props.onAddStake) {
props.onAddStake(stakeValues);
}
};
return <Formik onSubmit={onSubmit} initialValues={{ infiniteApproval: false }} validationSchema={validationSchema}>
{({
handleSubmit,
handleChange,
handleBlur,
values,
touched,
isValid,
errors,
dirty
}) => (
<Form onSubmit={handleSubmit}>
<Form.Group as={Row}>
<Form.Label column sm={4} htmlFor="stake-value">
Stake value
</Form.Label>
<Col sm={8}>
<Form.Control id="stake-value" type="number" name="stakeValue" onChange={handleChange} value={values.value} />
<div className="feedback-placeholder">
<Form.Control.Feedback type="invalid" style={{ display: errors.stakeValue && dirty ? 'inline' : 'none' }}>{errors.stakeValue}</Form.Control.Feedback>
</div>
</Col>
</Form.Group>
<Form.Group as={Row}>
<Form.Label column sm={4} htmlFor="stakeDuration">
Stake duration
</Form.Label>
<Col sm={8}>
<Form.Control id="stakeDuration" type="number" name="stakeDuration" onChange={handleChange} value={values.duration} />
<div className="feedback-placeholder">
<Form.Control.Feedback type="invalid" style={{ display: errors.stakeDuration && dirty ? 'inline' : 'none' }}>{errors.stakeDuration}</Form.Control.Feedback>
</div>
</Col>
</Form.Group>
<Form.Group as={Row}>
<Col sm={{ span: 8, offset: 4 }}>
<Form.Check label="Infinite approval" name="infiniteApproval" defaultChecked={values.infiniteApproval} onChange={handleChange} value={values.infiniteApproval} />
</Col>
</Form.Group>
<div className="d-flex justify-content-center">
<Button type="submit" disabled={!isValid}>Stake</Button>
</div>
</Form>
)}
</Formik>;
}
