init
这个提交包含在：
@@ -0,0 +1,87 @@
|
||||
import { ErrorMessage, Field, Form, Formik } from "formik";
|
||||
import * as Yup from "yup";
|
||||
|
||||
const initialValues = {
|
||||
generateKey: "",
|
||||
confirmKey: "",
|
||||
};
|
||||
|
||||
const CreateApiSchema = Yup.object().shape({
|
||||
generateKey: Yup.string().required("Generate Key is required"),
|
||||
confirmKey: Yup.string().required("Confirm Key required"),
|
||||
});
|
||||
|
||||
function CreateApi() {
|
||||
return (
|
||||
<>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={CreateApiSchema}
|
||||
onSubmit={(fields) => {
|
||||
alert(
|
||||
"SUCCESS!! :-)\n\n" + JSON.stringify(fields, null, 4)
|
||||
);
|
||||
}}
|
||||
>
|
||||
{({ errors, status, touched }) => (
|
||||
<Form>
|
||||
<div className="row">
|
||||
<div className="col-xxl-6 col-xl-6 col-lg-6 mb-3">
|
||||
<label className="form-label">
|
||||
Generate New Key
|
||||
</label>
|
||||
<Field
|
||||
name="generateKey"
|
||||
type="text"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.generateKey &&
|
||||
touched.generateKey
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="generateKey"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-xxl-6 col-xl-6 col-lg-6 mb-3">
|
||||
<label className="form-label">
|
||||
Confirm Passphrase
|
||||
</label>
|
||||
<Field
|
||||
name="confirmKey"
|
||||
type="text"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.confirmKey &&
|
||||
touched.confirmKey
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="confirmKey"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-3">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary mr-2"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default CreateApi;
|
||||
@@ -0,0 +1,176 @@
|
||||
import { ErrorMessage, Field, Form, Formik } from "formik";
|
||||
import * as Yup from "yup";
|
||||
|
||||
const initialValues = {
|
||||
fullName: "",
|
||||
email: "",
|
||||
address: "",
|
||||
city: "",
|
||||
country: "",
|
||||
postal: "",
|
||||
};
|
||||
|
||||
const PersonalInfoSchema = Yup.object().shape({
|
||||
fullName: Yup.string().required("Full is required"),
|
||||
email: Yup.string().email("Email is invalid").required("Email is required"),
|
||||
address: Yup.string().required("Present Address is required"),
|
||||
city: Yup.string().required("City is required"),
|
||||
postal: Yup.string().required("Post code is required"),
|
||||
country: Yup.string().required("country is required"),
|
||||
});
|
||||
|
||||
function PersonalInfo() {
|
||||
return (
|
||||
<>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={PersonalInfoSchema}
|
||||
onSubmit={(fields) => {
|
||||
alert(
|
||||
"SUCCESS!! :-)\n\n" + JSON.stringify(fields, null, 4)
|
||||
);
|
||||
}}
|
||||
>
|
||||
{({ errors, status, touched }) => (
|
||||
<Form>
|
||||
<div className="row">
|
||||
<div className="col-xxl-6 col-xl-6 col-lg-6 mb-3">
|
||||
<label className="form-label">Full Name</label>
|
||||
<Field
|
||||
name="fullName"
|
||||
type="text"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.fullName && touched.fullName
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="fullName"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-xxl-6 col-xl-6 col-lg-6 mb-3">
|
||||
<label className="form-label">Email</label>
|
||||
<Field
|
||||
name="email"
|
||||
type="text"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.email && touched.email
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="email"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-xxl-6 col-xl-6 col-lg-6 mb-3">
|
||||
<label className="form-label">Address</label>
|
||||
<Field
|
||||
name="address"
|
||||
type="text"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.address && touched.address
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="address"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-xxl-6 col-xl-6 col-lg-6 mb-3">
|
||||
<label className="form-label">City</label>
|
||||
<Field
|
||||
name="city"
|
||||
type="text"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.city && touched.city
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="city"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-xxl-6 col-xl-6 col-lg-6 mb-3">
|
||||
<label className="form-label">Post Code</label>
|
||||
<Field
|
||||
name="postal"
|
||||
type="text"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.postal && touched.postal
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="postal"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-xxl-6 col-xl-6 col-lg-6 mb-3">
|
||||
<label className="form-label">Country</label>
|
||||
<Field
|
||||
name="country"
|
||||
as="select"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.country && touched.country
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
>
|
||||
<option value="Bangladesh">
|
||||
Bangladesh
|
||||
</option>
|
||||
<option value="United States">
|
||||
United States
|
||||
</option>
|
||||
<option value="United Kingdom">
|
||||
United Kingdom
|
||||
</option>
|
||||
</Field>
|
||||
<ErrorMessage
|
||||
name="country"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-3">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary mr-2"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default PersonalInfo;
|
||||
@@ -0,0 +1,153 @@
|
||||
import { ErrorMessage, Field, Form, Formik } from "formik";
|
||||
import * as Yup from "yup";
|
||||
|
||||
const initialValues = {
|
||||
language: "",
|
||||
currency: "",
|
||||
theme: "",
|
||||
timeZone: "",
|
||||
};
|
||||
|
||||
const PreferencesSchema = Yup.object().shape({
|
||||
language: Yup.string().required("Language is required"),
|
||||
currency: Yup.string().required("Currency is required"),
|
||||
theme: Yup.string().required("Theme is required"),
|
||||
timeZone: Yup.string().required("Timezone is required"),
|
||||
});
|
||||
|
||||
function Preferences() {
|
||||
return (
|
||||
<>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={PreferencesSchema}
|
||||
onSubmit={(fields) => {
|
||||
alert(
|
||||
"SUCCESS!! :-)\n\n" + JSON.stringify(fields, null, 4)
|
||||
);
|
||||
}}
|
||||
>
|
||||
{({ errors, status, touched }) => (
|
||||
<Form>
|
||||
<div className="row">
|
||||
<div className="col-xxl-6 col-xl-6 col-lg-6 mb-3">
|
||||
<label className="form-label">
|
||||
Language Default
|
||||
</label>
|
||||
<Field
|
||||
name="language"
|
||||
as="select"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.language && touched.language
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
>
|
||||
<option value="Bangladesh">
|
||||
Bangladesh
|
||||
</option>
|
||||
<option value="United States">
|
||||
United States
|
||||
</option>
|
||||
<option value="United Kingdom">
|
||||
United Kingdom
|
||||
</option>
|
||||
</Field>
|
||||
<ErrorMessage
|
||||
name="language"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-xxl-6 col-xl-6 col-lg-6 mb-3">
|
||||
<label className="form-label">Currency</label>
|
||||
<Field
|
||||
name="currency"
|
||||
as="select"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.currency && touched.currency
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
>
|
||||
<option value="">USD</option>
|
||||
<option value="">Euro</option>
|
||||
<option value="">BDT</option>
|
||||
</Field>
|
||||
<ErrorMessage
|
||||
name="currency"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-xxl-6 col-xl-6 col-lg-6 mb-3">
|
||||
<label className="form-label">Theme</label>
|
||||
<Field
|
||||
name="theme"
|
||||
as="select"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.theme && touched.theme
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
>
|
||||
<option value="">Light</option>
|
||||
<option value="">Dark</option>
|
||||
<option value="">Blue</option>
|
||||
</Field>
|
||||
<ErrorMessage
|
||||
name="theme"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-xxl-6 col-xl-6 col-lg-6 mb-3">
|
||||
<label className="form-label">Time Zone</label>
|
||||
<Field
|
||||
name="timeZone"
|
||||
as="select"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.timeZone && touched.timeZone
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
>
|
||||
<option>
|
||||
(GMT-12:00) International Date Line West
|
||||
</option>
|
||||
<option>
|
||||
(GMT-11:00) Midway Island, Samoa
|
||||
</option>
|
||||
<option>(GMT-10:00) Hawaii</option>
|
||||
<option>(GMT-09:00) Alaska</option>
|
||||
<option>
|
||||
(GMT-08:00) Pacific Time (US & Canada)
|
||||
</option>
|
||||
</Field>
|
||||
<ErrorMessage
|
||||
name="timeZone"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-3">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary mr-2"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default Preferences;
|
||||
@@ -0,0 +1,125 @@
|
||||
import { ErrorMessage, Field, Form, Formik } from "formik";
|
||||
import * as Yup from "yup";
|
||||
import Link from "next/link";
|
||||
import AuthIcon from "./authselection/AuthIcon";
|
||||
const initialValues = {
|
||||
email: "",
|
||||
password: "",
|
||||
};
|
||||
|
||||
const SigninFormSchema = Yup.object().shape({
|
||||
email: Yup.string().email("Email is invalid").required("Email is required"),
|
||||
password: Yup.string()
|
||||
.min(6, "Password must be at least 6 characters")
|
||||
.required("Password is required"),
|
||||
});
|
||||
|
||||
function SigninForm() {
|
||||
return (
|
||||
<>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={SigninFormSchema}
|
||||
onSubmit={(fields) => {
|
||||
alert(
|
||||
"SUCCESS!! :-)\n\n" + JSON.stringify(fields, null, 4)
|
||||
);
|
||||
}}
|
||||
>
|
||||
{({ errors, status, touched }) => (
|
||||
<Form>
|
||||
<div className="row">
|
||||
|
||||
<div className="col-12 mb-3 d-flex justify-content-around">
|
||||
<input type="radio" id="html" className="d-none" name="fav_language" value="HTML" />
|
||||
<label className="auth-icon-label" for="html">
|
||||
<AuthIcon isActive={true} title="Consumer" icon="user" />
|
||||
</label>
|
||||
<input className="d-none" type="radio" id="css" name="fav_language" value="CSS" />
|
||||
<label className="auth-icon-label" for="css">
|
||||
<AuthIcon title="Employee" icon="address-card" />
|
||||
</label>
|
||||
<input className="d-none" type="radio" id="javascript" name="fav_language" value="JavaScript" />
|
||||
<label className="auth-icon-label" for="javascript">
|
||||
<AuthIcon title="Plumber" icon="gear" />
|
||||
</label>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="col-12 mb-3">
|
||||
<label className="form-label">Email</label>
|
||||
<Field
|
||||
name="email"
|
||||
type="text"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.email && touched.email
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="email"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className="col-12 mb-3">
|
||||
<label className="form-label">Password</label>
|
||||
<Field
|
||||
name="password"
|
||||
type="text"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.password && touched.password
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="password"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-6">
|
||||
<div className="form-check">
|
||||
<Field
|
||||
type="checkbox"
|
||||
name="acceptTerms"
|
||||
className={
|
||||
"form-check-input "
|
||||
}
|
||||
/>
|
||||
<label
|
||||
className="form-check-label"
|
||||
>
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-6 text-end">
|
||||
<Link href="/reset">
|
||||
<a>Forgot Password?</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 d-grid gap-2">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary mr-2"
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default SigninForm;
|
||||
@@ -0,0 +1,167 @@
|
||||
import { ErrorMessage, Field, Form, Formik } from "formik";
|
||||
import * as Yup from "yup";
|
||||
import AuthIcon from "./authselection/AuthIcon";
|
||||
import Link from "next/link";
|
||||
|
||||
const initialValues = {
|
||||
fullName: "",
|
||||
email: "",
|
||||
password: "",
|
||||
acceptTerms: false,
|
||||
};
|
||||
|
||||
const SignupFormSchema = Yup.object().shape({
|
||||
fullName: Yup.string().required("Full is required"),
|
||||
email: Yup.string().email("Email is invalid").required("Email is required"),
|
||||
password: Yup.string()
|
||||
.min(6, "Password must be at least 6 characters")
|
||||
.required("Password is required"),
|
||||
acceptTerms: Yup.bool().oneOf([true], "Accept Ts & Cs is required"),
|
||||
});
|
||||
|
||||
function SignupForm() {
|
||||
return (
|
||||
<>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
|
||||
onSubmit={(fields) => {
|
||||
alert(
|
||||
"SUCCESS!! :-)\n\n" + JSON.stringify(fields, null, 4)
|
||||
);
|
||||
}}
|
||||
>
|
||||
{({ errors, status, touched }) => (
|
||||
<Form>
|
||||
<div className="row">
|
||||
|
||||
<div className="col-12 mb-1 d-flex justify-content-around">
|
||||
<input type="radio" id="html" className="d-none" name="fav_language" value="HTML" />
|
||||
<label className="auth-icon-label" for="html">
|
||||
<AuthIcon isActive={true} title="Consumer" icon="user" />
|
||||
</label>
|
||||
<input className="d-none" type="radio" id="css" name="fav_language" value="CSS" />
|
||||
<label className="auth-icon-label" for="css">
|
||||
<AuthIcon title="Employee" icon="address-card" />
|
||||
</label>
|
||||
<input className="d-none" type="radio" id="javascript" name="fav_language" value="JavaScript" />
|
||||
<label className="auth-icon-label" for="javascript">
|
||||
<AuthIcon title="Plumber" icon="gear" />
|
||||
</label>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="col-12 mb-1">
|
||||
<label className="form-label">Name</label>
|
||||
<Field
|
||||
name="name"
|
||||
type="text"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.email && touched.email
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="name"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 mb-1">
|
||||
<label className="form-label">Email</label>
|
||||
<Field
|
||||
name="email"
|
||||
type="text"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.email && touched.email
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="email"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-12 mb-1">
|
||||
<label className="form-label">Number</label>
|
||||
<Field
|
||||
name="number"
|
||||
type="number"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.email && touched.email
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="number"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className="col-12 mb-1">
|
||||
<label className="form-label">Password</label>
|
||||
<Field
|
||||
name="password"
|
||||
type="text"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.password && touched.password
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="password"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-6">
|
||||
<div className="form-check">
|
||||
<Field
|
||||
type="checkbox"
|
||||
name="acceptTerms"
|
||||
className={
|
||||
"form-check-input "
|
||||
}
|
||||
/>
|
||||
<label
|
||||
className="form-check-label"
|
||||
>
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-6 text-end">
|
||||
<Link href="/reset">
|
||||
<a>Forgot Password?</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-1 d-grid gap-2">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary mr-2"
|
||||
>
|
||||
Sign Up
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default SignupForm;
|
||||
@@ -0,0 +1,97 @@
|
||||
import { ErrorMessage, Field, Form, Formik } from "formik";
|
||||
import * as Yup from "yup";
|
||||
|
||||
const initialValues = {
|
||||
fullName: "",
|
||||
photo: "",
|
||||
};
|
||||
|
||||
const UpdateAvatarSchema = Yup.object().shape({
|
||||
fullName: Yup.string().required("Full Name is required"),
|
||||
photo: Yup.string().required("Photo required"),
|
||||
});
|
||||
|
||||
function UpdateAvatar() {
|
||||
return (
|
||||
<>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={UpdateAvatarSchema}
|
||||
onSubmit={(fields) => {
|
||||
alert(
|
||||
"SUCCESS!! :-)\n\n" + JSON.stringify(fields, null, 4)
|
||||
);
|
||||
}}
|
||||
>
|
||||
{({ errors, status, touched }) => (
|
||||
<Form>
|
||||
<div className="row">
|
||||
<div className="col-12 mb-3">
|
||||
<label className="form-label">Full Name</label>
|
||||
<Field
|
||||
name="fullName"
|
||||
type="text"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.fullName && touched.fullName
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="fullName"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-xxl-12">
|
||||
<div className="d-flex align-items-center mb-3">
|
||||
<img
|
||||
className="me-3 rounded-circle me-0 me-sm-3"
|
||||
src="images/profile/3.png"
|
||||
width="55"
|
||||
height="55"
|
||||
alt=""
|
||||
/>
|
||||
<div className="media-body">
|
||||
<h4 className="mb-0">Jannatul Maowa</h4>
|
||||
<p className="mb-0">
|
||||
Max file size is 20mb
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<Field
|
||||
name="photo"
|
||||
type="file"
|
||||
className={
|
||||
|
||||
(errors.photo && touched.photo
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="photo"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-3">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary mr-2"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default UpdateAvatar;
|
||||
@@ -0,0 +1,83 @@
|
||||
import { ErrorMessage, Field, Form, Formik } from "formik";
|
||||
import * as Yup from "yup";
|
||||
|
||||
const initialValues = {
|
||||
email: "",
|
||||
password: "",
|
||||
};
|
||||
|
||||
const UpdateInfoSchema = Yup.object().shape({
|
||||
email: Yup.string().email("Email is invalid").required("Email is required"),
|
||||
password: Yup.string()
|
||||
.min(6, "Password must be at least 6 characters")
|
||||
.required("Password is required"),
|
||||
});
|
||||
|
||||
function UpdateInfo() {
|
||||
return (
|
||||
<>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={UpdateInfoSchema}
|
||||
onSubmit={(fields) => {
|
||||
alert(
|
||||
"SUCCESS!! :-)\n\n" + JSON.stringify(fields, null, 4)
|
||||
);
|
||||
}}
|
||||
>
|
||||
{({ errors, status, touched }) => (
|
||||
<Form>
|
||||
<div className="row">
|
||||
<div className="col-12 mb-3">
|
||||
<label className="form-label">Email</label>
|
||||
<Field
|
||||
name="email"
|
||||
type="text"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.email && touched.email
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="email"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 mb-3">
|
||||
<label className="form-label">Password</label>
|
||||
<Field
|
||||
name="password"
|
||||
type="text"
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.password && touched.password
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="password"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-3">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary mr-2"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default UpdateInfo;
|
||||
@@ -0,0 +1,16 @@
|
||||
import React from 'react'
|
||||
|
||||
function AuthIcon({title,icon,isActive=false}) {
|
||||
return (
|
||||
<div className={`align-items-center d-flex justify-content-center text-center flex-column `}>
|
||||
<div style={{fontSize:'25px',width:'50px',height:'50px'}} className=' text-center'>
|
||||
<i className={`px-2 fa-solid w-100 align-items-center d-flex justify-content-center h-100 fa-${icon} ${isActive ? 'auth-select-icon bg-primary text-white':''}`}></i>
|
||||
</div>
|
||||
<div className='font-13'>
|
||||
{title}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AuthIcon
|
||||
@@ -0,0 +1,59 @@
|
||||
import Tab from 'react-bootstrap/Tab';
|
||||
import Tabs from 'react-bootstrap/Tabs';
|
||||
import SigninForm from '../SigninForm';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
function Layoutform({ doughnutData }) {
|
||||
const [key, setKey] = React.useState('consumer');
|
||||
return (
|
||||
<React.Fragment>
|
||||
|
||||
|
||||
<Tabs
|
||||
defaultActiveKey="profile"
|
||||
id="justify-tab-example"
|
||||
className="mb-3 biz-tab-main"
|
||||
onSelect={(k) => setKey(k)}
|
||||
value={key}
|
||||
>
|
||||
<Tab className='border-bottom biz-tab-item selectedtab-biz' eventKey="consumer" title={ <div>
|
||||
<div>
|
||||
<i className="px-2 fa-solid fa-user"></i>
|
||||
</div>
|
||||
<div>
|
||||
Consumer
|
||||
</div>
|
||||
</div>
|
||||
}>
|
||||
<SigninForm />
|
||||
</Tab>
|
||||
|
||||
<Tab className='border-bottom biz-tab-item' eventKey="employee" title={ <div>
|
||||
<div>
|
||||
<i className="px-2 fa-solid fa-user"></i>
|
||||
</div>
|
||||
<div>
|
||||
Employee
|
||||
</div>
|
||||
</div>
|
||||
} >
|
||||
<SigninForm />
|
||||
</Tab>
|
||||
<Tab className='border-bottom biz-tab-item' eventKey="plumber" title={ <div>
|
||||
<div>
|
||||
<i className="px-2 fa-solid fa-gear"></i>
|
||||
</div>
|
||||
<div>
|
||||
Plumber
|
||||
</div>
|
||||
</div>
|
||||
}>
|
||||
<SigninForm />
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
export default Layoutform;
|
||||
在新工单中引用
屏蔽一个用户