Added checkmarks for must reset password

This commit is contained in:
Kim 2023-08-29 10:47:35 +02:00
parent 41ccc63175
commit d93eb2c987
8 changed files with 85 additions and 29 deletions

View File

@ -7,7 +7,7 @@
"dotnetRunMessages": true, "dotnetRunMessages": true,
"launchUrl": "swagger", "launchUrl": "swagger",
"applicationUrl": "https://localhost:8000", "applicationUrl": "https://localhost:7087",
"environmentVariables": { "environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development" "ASPNETCORE_ENVIRONMENT": "Development"
} }

View File

@ -0,0 +1,30 @@
import UserProps from "./UserProps";
import { Grid, InputLabel, TextField, Checkbox } from "@mui/material";
import { I_InnovenergyTextfieldProps } from "./InnovenergyTextfield";
export type CheckmarkProps = UserProps & {
value:boolean;
}
const Checkmark = (props: CheckmarkProps) => {
return (
<Grid container direction="row" alignItems="center" spacing={2}>
<Grid item xs={3}>
<InputLabel>{props.label}</InputLabel>
</Grid>
<Grid item xs={9}>
<Checkbox
color="secondary"
id={props.id}
name={props.name}
value={props.value}
onChange={props.handleChange}
disabled={props.disabled}
/>
</Grid>
</Grid>
);
};
export default CheckmarkProps;

View File

@ -1,11 +1,14 @@
import { InputLabel, TextField } from "@mui/material"; import {Checkbox, InputLabel, TextField} from "@mui/material";
import { colors } from "../../index"; import { colors } from "../../index";
import { I_InnovenergyTextfieldProps } from "./InnovenergyTextfield"; import { I_InnovenergyTextfieldProps } from "./InnovenergyTextfield";
import { CheckmarkProps } from "./Checkmark";
interface I_InnovenergyPropertyGridProps { interface I_InnovenergyPropertyGridProps {
rows: I_InnovenergyTextfieldProps[]; rows: Array<I_InnovenergyTextfieldProps | CheckmarkProps>;
}
function isTextfieldProps(type: I_InnovenergyTextfieldProps | CheckmarkProps): type is I_InnovenergyTextfieldProps{
return typeof((type as I_InnovenergyTextfieldProps).value) === "string";
} }
export const InnovenergyPropertyGrid = ( export const InnovenergyPropertyGrid = (
props: I_InnovenergyPropertyGridProps props: I_InnovenergyPropertyGridProps
) => { ) => {
@ -25,7 +28,8 @@ export const InnovenergyPropertyGrid = (
</div> </div>
<div> <div>
{props.rows.map((element) => { {props.rows.map((element) => {
return ( if(isTextfieldProps(element)){
return (
<TextField <TextField
key={element.label} key={element.label}
color="secondary" color="secondary"
@ -58,7 +62,19 @@ export const InnovenergyPropertyGrid = (
helperText={element.helperText} helperText={element.helperText}
error={element.error} error={element.error}
/> />
); );}
else{
return(
<Checkbox
color="secondary"
id={element.id}
name={element.name}
value={element.value}
onChange={element.handleChange}
disabled={element.disabled}
/>
)
}
})} })}
</div> </div>
</div> </div>

View File

@ -1,16 +1,12 @@
import { Grid, InputLabel, TextField } from "@mui/material"; import { Grid, InputLabel, TextField } from "@mui/material";
import UserProps from "./UserProps";
export interface I_InnovenergyTextfieldProps {
id: string;
label: string; export type I_InnovenergyTextfieldProps = UserProps & {
value: string; value: string;
name: string;
handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
type?: string; type?: string;
readOnly?: boolean;
disabled?: boolean;
helperText?: string; helperText?: string;
error?: boolean;
} }
const InnovenergyTextfield = (props: I_InnovenergyTextfieldProps) => { const InnovenergyTextfield = (props: I_InnovenergyTextfieldProps) => {

View File

@ -0,0 +1,13 @@
export type UserProps = {
id: string;
label: string;
name: string;
handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
readOnly?: boolean;
disabled?: boolean;
error?: boolean;
}
export default UserProps;

View File

@ -15,6 +15,7 @@ import { I_InnovenergyTextfieldProps } from "../Layout/InnovenergyTextfield";
import { UserContext } from "../Context/UserContextProvider"; import { UserContext } from "../Context/UserContextProvider";
import { UsersContext } from "../Context/UsersContextProvider"; import { UsersContext } from "../Context/UsersContextProvider";
import InnovenergyPropertyGrid from "../Layout/InnovenergyPropertyGrid"; import InnovenergyPropertyGrid from "../Layout/InnovenergyPropertyGrid";
import CheckmarkProps from "../Layout/Checkmark";
interface I_UserFormProps { interface I_UserFormProps {
handleSubmit: (formikValues: Partial<I_User>) => Promise<AxiosResponse>; handleSubmit: (formikValues: Partial<I_User>) => Promise<AxiosResponse>;
@ -62,7 +63,7 @@ const UserForm = (props: I_UserFormProps) => {
setOpen(false); setOpen(false);
}; };
const rows: I_InnovenergyTextfieldProps[] = [ const rows: (I_InnovenergyTextfieldProps | CheckmarkProps)[] = [
{ {
id: "name-textfield", id: "name-textfield",
label: intl.formatMessage({ label: intl.formatMessage({
@ -96,20 +97,20 @@ const UserForm = (props: I_UserFormProps) => {
handleChange: formik.handleChange, handleChange: formik.handleChange,
disabled: readOnly, disabled: readOnly,
}, },
// This does not work as each field must be a textfield, great.... {
// { id: "mustResetPassword-checkbox",
// id: "mustResetPassword-checkbox", label: intl.formatMessage({
// label: intl.formatMessage({ id: "mustResetPassword",
// id: "mustResetPassword", defaultMessage: "Must reset password",
// defaultMessage: "Must reset password", }),
// }), name: "mustResetPassword",
// name: "mustResetPassword", value:formik.values.mustResetPassword,
// checked:formik.values.mustResetPassword, handleChange: formik.handleChange,
// handleChange: formik.handleChange, disabled: readOnly,
// disabled: readOnly, },
// },
]; ];
return ( return (
<form onSubmit={formik.handleSubmit}> <form onSubmit={formik.handleSubmit}>
<InnovenergyPropertyGrid rows={rows} /> <InnovenergyPropertyGrid rows={rows} />

View File

@ -1,11 +1,11 @@
import axios from "axios"; import axios from "axios";
export const axiosConfigWithoutToken = axios.create({ export const axiosConfigWithoutToken = axios.create({
baseURL: "https://localhost:7087", baseURL: "https://localhost:7087/api",
}); });
const axiosConfig = axios.create({ const axiosConfig = axios.create({
baseURL: "https://localhost:7087", baseURL: "https://localhost:7087/api",
}); });
axiosConfig.defaults.params = {}; axiosConfig.defaults.params = {};