utils#getErrors JavaScript Examples
The following examples show how to use
utils#getErrors.
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: ChangePasswordPage.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
function ChangePasswordPage(props) {
const {
isLoading,
updatePassword,
} = props;
const [error, setError] = useState(null);
const [state, setState] = useState({
currentPassword: '',
password: '',
confirmPassword: '',
});
useEffect(() => {
window.scrollTo(0, 0);
}, []);
const onChangeField = (e) => {
setState({
...state,
[e.target.name]: e.target.value,
});
};
const {
currentPassword,
password,
confirmPassword,
} = state;
const onSubmit = useCallback(async (e) => {
e.preventDefault();
try {
setError(null);
const message = await updatePassword({
current_password: currentPassword.trim(),
password: password.trim(),
password_confirmation: confirmPassword.trim(),
});
Swal.fire({
icon: 'success',
title: message,
showCancelButton: false,
showConfirmButton: false,
timer: 1500,
allowOutsideClick: false,
});
setState({
currentPassword: '',
password: '',
confirmPassword: '',
});
} catch (err) {
setError(getErrors(err));
}
}, [currentPassword, password, confirmPassword, updatePassword]);
const isDisabled = validator.isEmpty(currentPassword.trim())
|| validator.isEmpty(password.trim())
|| validator.isEmpty(confirmPassword.trim());
return (
<>
<div className="account-page">
<div className="content-wrapper">
<div className="content">
<div className="row">
<div className="col-md-12">
<h1 className="title">Change Password</h1>
</div>
</div>
<div className="row justify-content-center">
<div className="col-md-12">
<form
className="auth-form"
onSubmit={onSubmit}
autoComplete="off"
>
<div className="row">
<div className="col-md-6">
<div className="form-group">
<label htmlFor="current-password">Current Password</label>
<FontAwesomeIcon icon="lock" />
<input
className="input-box"
type="password"
id="current-password"
name="currentPassword"
placeholder="Current Password*"
required
value={currentPassword}
onChange={onChangeField}
/>
</div>
</div>
</div>
<div className="row">
<div className="col-md-6">
<div className="form-group">
<label htmlFor="password">New Password</label>
<FontAwesomeIcon icon="lock" />
<input
className="input-box"
type="password"
id="password"
name="password"
placeholder="Password*"
required
value={password}
onChange={onChangeField}
/>
</div>
</div>
</div>
<div className="row">
<div className="col-md-6">
<div className="form-group">
<label htmlFor="confirm-password">Confirm Password</label>
<FontAwesomeIcon icon="lock" />
<input
className="input-box"
type="password"
id="confirm-password"
name="confirmPassword"
placeholder="Confirm Password*"
required
value={confirmPassword}
onChange={onChangeField}
/>
</div>
</div>
</div>
<div className="row">
<div className="col-md-6">
<Error error={error} />
</div>
</div>
<div className="form-group">
<button
type="submit"
className="btn btn-primary submit"
disabled={isLoading || isDisabled}
>
{isLoading ? (
<img src={loader} alt="" />
) : (
'Update Password'
)}
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</>
);
}
Example #2
| Source File: ProfilePage.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
function ProfilePage(props) {
const {
isLoading,
user,
updateProfile,
userLmsSettings,
getUserLmsSettings,
loadOrganizationTypes,
} = props;
const organizationTypes = useSelector((state) => state.auth.organizationTypes);
const [error, setError] = useState(null);
const [state, setState] = useState({
firstName: (user && user.first_name) || '',
lastName: (user && user.last_name) || '',
email: (user && user.email) || '',
organizationName: (user && user.organization_name) || '',
organizationType: (user && user.organization_type) || '',
website: (user && user.website) || '',
jobTitle: (user && user.job_title) || '',
address: (user && user.address) || '',
phoneNumber: (user && user.phone_number) || '',
});
useEffect(() => {
window.scrollTo(0, 0);
getUserLmsSettings();
loadOrganizationTypes();
}, [getUserLmsSettings, loadOrganizationTypes]);
useEffect(() => {
setState({
firstName: (user && user.first_name) || '',
lastName: (user && user.last_name) || '',
email: (user && user.email) || '',
organizationName: (user && user.organization_name) || '',
organizationType: (user && user.organization_type) || '',
website: (user && user.website) || '',
jobTitle: (user && user.job_title) || '',
address: (user && user.address) || '',
phoneNumber: (user && user.phone_number) || '',
});
}, [user]);
const onChangeField = (e) => {
setState({
...state,
[e.target.name]: e.target.value,
});
};
const onSubmit = useCallback(async (e) => {
e.preventDefault();
const {
firstName,
lastName,
organizationName,
organizationType,
website,
jobTitle,
address,
phoneNumber,
} = state;
try {
if (website.trim() && !validator.isURL(website.trim())) {
setError('Please input valid website url.');
return;
}
if (!validator.isMobilePhone(phoneNumber) || !validator.isNumeric(phoneNumber)) {
setError('Please input valid phone number.');
return;
}
setError(null);
const data = {
id: user.id,
first_name: firstName.trim(),
last_name: lastName.trim(),
organization_name: organizationName.trim() ? organizationName.trim() : null,
organization_type: organizationType.trim() ? organizationType.trim() : null,
website: website.trim() ? website.trim() : null,
job_title: jobTitle.trim() ? jobTitle.trim() : null,
address: address.trim() ? address.trim() : null,
phone_number: phoneNumber.trim() ? phoneNumber.trim() : null,
};
await updateProfile(data);
Swal.fire({
icon: 'success',
title: 'Profile has been updated successfully.',
showCancelButton: false,
showConfirmButton: false,
timer: 1500,
allowOutsideClick: false,
});
} catch (err) {
setError(getErrors(err));
}
}, [user, state, updateProfile]);
const isDisabled = validator.isEmpty(state.firstName.trim()) || validator.isEmpty(state.lastName.trim());
return (
<>
<div className="account-page">
<div className="content-wrapper">
<div className="content">
<div className="row">
<div className="col">
<h1 className="title">My Account</h1>
</div>
</div>
<div className="row justify-content-center account-panel m-1">
<div className="col">
<div className="row account-panel-header-row">
<div className="col">
<h1 className="panel-title">
Account Details
</h1>
</div>
</div>
<div className="row">
<div className="col">
<form
className="auth-form"
onSubmit={onSubmit}
autoComplete="off"
>
<div className="row">
<div className="col-md-6">
<div className="form-group">
<label htmlFor="first-name">First Name</label>
<FontAwesomeIcon icon="user" />
<input
className="input-box"
id="first-name"
name="firstName"
placeholder="First Name*"
maxLength="250"
required
value={state.firstName}
onChange={onChangeField}
/>
</div>
</div>
<div className="col-md-6">
<div className="form-group">
<label htmlFor="last-name">Last Name</label>
<FontAwesomeIcon icon="user" />
<input
className="input-box"
id="last-name"
name="lastName"
placeholder="Last Name*"
maxLength="250"
required
value={state.lastName}
onChange={onChangeField}
/>
</div>
</div>
</div>
<div className="row">
<div className="col-md-6">
<div className="form-group">
<label htmlFor="email">Email</label>
<FontAwesomeIcon icon="envelope" />
<input
className="input-box"
id="email"
name="email"
placeholder="Email"
maxLength="250"
disabled
value={state.email}
/>
</div>
</div>
<div className="col-md-6">
<div className="form-group">
<label htmlFor="phone-number">Phone Number</label>
<FontAwesomeIcon icon="phone" />
<input
className="input-box"
id="phone-number"
name="phoneNumber"
placeholder="Phone Number"
maxLength="250"
value={state.phoneNumber}
onChange={onChangeField}
/>
</div>
</div>
</div>
{!(state.organizationName === 'NEAF' || state.organizationName === 'vivensity') && (
<div className="row">
<div className="col-md-6">
<div className="form-group">
<label htmlFor="organization-name">Organization Name</label>
<FontAwesomeIcon icon="building" />
<input
className="input-box"
id="organization-name"
name="organizationName"
placeholder="Organization Name"
maxLength="250"
value={state.organizationName}
onChange={onChangeField}
/>
</div>
</div>
<div className="col-md-6">
<div className="form-group">
<label htmlFor="organization-type">Organization Type</label>
<FontAwesomeIcon icon="building" />
<select
className="input-box organization-type"
name="organizationType"
placeholder="Organization Type*"
value={state.organizationType}
onChange={onChangeField}
>
{organizationTypes.map((type) => (
<option selected={type.label === state.organizationType} value={type.label}>{type.label}</option>
))}
</select>
</div>
</div>
</div>
)}
<div className="row">
<div className="col-md-6">
<div className="form-group">
<label htmlFor="website">Website</label>
<FontAwesomeIcon icon="star" />
<input
className="input-box"
id="website"
name="website"
placeholder="Website"
maxLength="250"
value={state.website}
onChange={onChangeField}
/>
</div>
</div>
<div className="col-md-6">
<div className="form-group">
<label htmlFor="job-title">Job Title</label>
<FontAwesomeIcon icon="briefcase" />
<input
className="input-box"
id="job-title"
name="jobTitle"
placeholder="Job Title"
maxLength="250"
value={state.jobTitle}
onChange={onChangeField}
/>
</div>
</div>
</div>
<div className="row">
<div className="col">
<Error error={error} />
</div>
</div>
<div className="row mb-3">
<div className="col text-right ml-5">
<button
type="submit"
className="btn btn-primary submit"
disabled={isLoading || isDisabled}
>
{isLoading ? (
<img src={loader} alt="" />
) : (
'Update Profile'
)}
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div className="row account-panel m-1 mt-4 mb-4">
<div className="col">
<div className="row account-panel-header-row">
<div className="col">
<h1 className="panel-title">
LMS Publishing
</h1>
</div>
</div>
<div className="row mt-2 mb-2">
<div className="col">
{userLmsSettings?.length === 0 && (
<Alert variant="info">No LMS publishing options have been configured for your account.</Alert>
)}
{userLmsSettings?.length > 0 && (
<>
<Alert variant="info">LMS publishing options available to your account.</Alert>
<Table striped bordered hover>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>URL</th>
</tr>
</thead>
<tbody>
{userLmsSettings.map((lms) => (
<tr>
<td>{lms.site_name}</td>
<td>{lms.description}</td>
<td>{lms.lms_url}</td>
</tr>
))}
</tbody>
</Table>
</>
)}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</>
);
}
Example #3
| Source File: ForgotPasswordPage.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
function ForgotPasswordPage(props) {
const { isLoading, forgotPassword } = props;
const [email, setEmail] = useState('');
const [error, setError] = useState(null);
const onChangeEmail = useCallback(
(e) => {
setEmail(e.target.value.trim());
},
[setEmail]
);
const onSubmit = useCallback(
async (e) => {
e.preventDefault();
try {
if (!validator.isEmail(email)) {
setError('Please input valid email.');
return;
}
setError(null);
await forgotPassword({ email });
Swal.fire({
icon: 'success',
title: 'Success',
text: 'Password reset email has been sent. Please follow the instructions.',
});
} catch (err) {
setError(getErrors(err));
}
},
[email, forgotPassword]
);
const isDisabled = validator.isEmpty(email);
return (
<div className="auth-page">
<Logo />
<div className="auth-container">
<h1 className="auth-title">Reset Password</h1>
<h3 className="auth-Pdescrip">
Please enter your CurrikiStudio account's email and click the button below, then check your email for instructions on how to reset your password.
</h3>
<form onSubmit={onSubmit} autoComplete="off" className="auth-form">
<div className="form-group">
<span>Email</span>
<input
autoFocus
className="input-box"
// type="email"
name="email"
required
value={email}
onChange={onChangeEmail}
/>
</div>
<Error error={error} />
<div className="form-group">
<button type="submit" className="signUp-btn submit" disabled={isLoading || isDisabled}>
{isLoading ? <img src={loader} alt="" /> : 'Send Reset Password Link'}
</button>
</div>
<div className="form-group text-center">
<Link to="/login">Back to Login</Link>
</div>
</form>
</div>
<img src={bg} className="bg1" alt="" />
<img src={bg1} className="bg2" alt="" />
</div>
);
}
Example #4
| Source File: ResetPasswordPage.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
function ResetPasswordPage(props) {
const {
history,
location,
isLoading,
resetPassword,
} = props;
const query = QueryString.parse(location.search);
if (!query.token) {
history.push('/login');
}
const [state, setState] = useState({
email: storageService.getItem('forgotPasswordEmail') || '',
password: '',
confirmPassword: '',
});
const [error, setError] = useState(null);
const onChangeField = useCallback((e) => {
e.persist();
setState((prevState) => ({
...prevState,
[e.target.name]: e.target.value,
}));
}, [setState]);
const onSubmit = useCallback(async (e) => {
e.preventDefault();
const email = state.email.trim();
const password = state.password.trim();
const confirmPassword = state.confirmPassword.trim();
try {
if (!validator.isEmail(email)) {
setError('Please input valid email.');
return;
}
if (password !== confirmPassword) {
setError('Password does not match.');
return;
}
setError(null);
await resetPassword({
token: query.token,
email,
password,
password_confirmation: confirmPassword,
});
Swal.fire({
icon: 'success',
title: 'Success',
text: 'Password has been reset successfully.',
});
} catch (err) {
setError(getErrors(err));
}
}, [query.token, state, resetPassword]);
const isDisabled = validator.isEmpty(state.email.trim())
|| validator.isEmpty(state.password.trim())
|| validator.isEmpty(state.confirmPassword.trim());
return (
<div className="auth-page">
<Logo />
<div className="auth-container">
<h1 className="auth-title">Reset Password</h1>
<h3 className="auth-description">Input your new password</h3>
<form
onSubmit={onSubmit}
autoComplete="off"
className="auth-form"
>
<div className="form-group">
<FontAwesomeIcon icon="envelope" />
<input
className="input-box"
// type="email"
name="email"
placeholder="Email*"
required
value={state.email}
onChange={onChangeField}
/>
</div>
<div className="form-group">
<FontAwesomeIcon icon="lock" />
<input
autoFocus
className="input-box"
type="password"
name="password"
placeholder="Password*"
required
value={state.password}
onChange={onChangeField}
/>
</div>
<div className="form-group">
<FontAwesomeIcon icon="lock" />
<input
className="input-box"
type="password"
name="confirmPassword"
placeholder="Confirm Password*"
required
value={state.confirmPassword}
onChange={onChangeField}
/>
</div>
<Error error={error} />
<div className="form-group">
<button
type="submit"
className="signUp-btn submit"
disabled={isLoading || isDisabled}
>
{isLoading ? (
<img src={loader} alt="" />
) : (
'Reset Password'
)}
</button>
</div>
<div className="form-group text-center">
<Link to="/login">Back to Login</Link>
</div>
</form>
</div>
<img src={bg} className="bg1" alt="" />
<img src={bg1} className="bg2" alt="" />
</div>
);
}
