Files
Alex Khomenko 3b515e650c Grafana-UI: Update React Hook Form to v7 (#33328)
* Update hook form

* Update Form component

* Update ChangePassword.tsx

* Update custom types

* Update SaveDashboardForm

* Update form story

* Update FieldArray.story.tsx

* Bump hook form version

* Update typescript to v4.2.4

* Update ForgottenPassword.tsx

* Update LoginForm.tsx

* Update SignupPage.tsx

* Update VerifyEmail.tsx

* Update AdminEditOrgPage.tsx

* Update UserCreatePage.tsx

* Update BasicSettings.tsx

* Update NotificationChannelForm.tsx

* Update NotificationChannelOptions.tsx

* Update NotificationSettings.tsx

* Update OptionElement.tsx

* Update AlertRuleForm.tsx

* Update AlertTypeStep.tsx

* Update AnnotationsField.tsx

* Update ConditionField.tsx

* Update ConditionsStep.tsx

* Update GroupAndNamespaceFields.tsx

* Update LabelsField.tsx

* Update QueryStep.tsx

* Update RowOptionsForm.tsx

* Update SaveDashboardAsForm.tsx

* Update NewDashboardsFolder.tsx

* Update ImportDashboardForm.tsx

* Update DashboardImportPage.tsx

* Update NewOrgPage.tsx

* Update OrgProfile.tsx

* Update UserInviteForm.tsx

* Update PlaylistForm.tsx

* Update ChangePasswordForm.tsx

* Update UserProfileEditForm.tsx

* Update TeamSettings.tsx

* Update SignupInvited.tsx

* Expose setValue from the Form

* Update typescript to v4.2.4

* Remove ref from field props

* Fix tests

* Revert TS update

* Use exact version

* Update latest batch of changes

* Reduce the number of strict TS errors

* Fix defaults

* more type error fixes

* Update CreateTeam

* fix folder picker in rule form

* fixes for hook form 7

* Update docs

Co-authored-by: Domas <domasx2@gmail.com>
2021-04-29 16:54:38 +03:00

63 lines
1.8 KiB
TypeScript

import React, { FC, useState } from 'react';
import { Form, Field, Input, Button, Legend, Container, HorizontalGroup, LinkButton } from '@grafana/ui';
import { getConfig } from 'app/core/config';
import { getBackendSrv } from '@grafana/runtime';
import appEvents from 'app/core/app_events';
import { AppEvents } from '@grafana/data';
interface EmailDTO {
email: string;
}
export const VerifyEmail: FC = () => {
const [emailSent, setEmailSent] = useState(false);
const onSubmit = (formModel: EmailDTO) => {
getBackendSrv()
.post('/api/user/signup', formModel)
.then(() => {
setEmailSent(true);
})
.catch((err) => {
const msg = err.data?.message || err;
appEvents.emit(AppEvents.alertWarning, [msg]);
});
};
if (emailSent) {
return (
<div>
<p>An email with a verification link has been sent to the email address. You should receive it shortly.</p>
<Container margin="md" />
<LinkButton variant="primary" href={getConfig().appSubUrl + '/signup'}>
Complete Signup
</LinkButton>
</div>
);
}
return (
<Form onSubmit={onSubmit}>
{({ register, errors }) => (
<>
<Legend>Verify Email</Legend>
<Field
label="Email"
description="Enter your email address to get a verification link sent to you"
invalid={!!(errors as any).email}
error={(errors as any).email?.message}
>
<Input {...register('email', { required: true })} placeholder="Email" />
</Field>
<HorizontalGroup>
<Button>Send verification email</Button>
<LinkButton fill="text" href={getConfig().appSubUrl + '/login'}>
Back to login
</LinkButton>
</HorizontalGroup>
</>
)}
</Form>
);
};