Add token based registration creation and management (#200)
* Add token based registration creation and management * yarn fix * Apply suggestions from code review Remove empty line * move date to `const date_format`pull/244/head
parent
c891afa611
commit
efed8b2774
@ -0,0 +1,132 @@
|
||||
import React from "react";
|
||||
import {
|
||||
BooleanInput,
|
||||
Create,
|
||||
Datagrid,
|
||||
DateField,
|
||||
DateTimeInput,
|
||||
Edit,
|
||||
Filter,
|
||||
List,
|
||||
maxValue,
|
||||
number,
|
||||
NumberField,
|
||||
NumberInput,
|
||||
regex,
|
||||
SimpleForm,
|
||||
TextInput,
|
||||
TextField,
|
||||
Toolbar,
|
||||
} from "react-admin";
|
||||
|
||||
const date_format = {
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
second: "2-digit",
|
||||
};
|
||||
|
||||
const validateToken = [regex(/^[A-Za-z0-9._~-]{0,64}$/)];
|
||||
const validateUsesAllowed = [number()];
|
||||
const validateLength = [number(), maxValue(64)];
|
||||
|
||||
const dateParser = v => {
|
||||
const d = new Date(v);
|
||||
if (isNaN(d)) return 0;
|
||||
return d.getTime();
|
||||
};
|
||||
|
||||
const dateFormatter = v => {
|
||||
if (v === undefined || v === null) return;
|
||||
const d = new Date(v);
|
||||
|
||||
const pad = "00";
|
||||
const year = d.getFullYear().toString();
|
||||
const month = (pad + (d.getMonth() + 1).toString()).slice(-2);
|
||||
const day = (pad + d.getDate().toString()).slice(-2);
|
||||
const hour = (pad + d.getHours().toString()).slice(-2);
|
||||
const minute = (pad + d.getMinutes().toString()).slice(-2);
|
||||
|
||||
// target format yyyy-MM-ddThh:mm
|
||||
return `${year}-${month}-${day}T${hour}:${minute}`;
|
||||
};
|
||||
|
||||
const RegistrationTokenFilter = props => (
|
||||
<Filter {...props}>
|
||||
<BooleanInput source="valid" alwaysOn />
|
||||
</Filter>
|
||||
);
|
||||
|
||||
export const RegistrationTokenList = props => {
|
||||
return (
|
||||
<List
|
||||
{...props}
|
||||
filters={<RegistrationTokenFilter />}
|
||||
filterDefaultValues={{ valid: true }}
|
||||
pagination={false}
|
||||
perPage={500}
|
||||
>
|
||||
<Datagrid rowClick="edit">
|
||||
<TextField source="token" sortable={false} />
|
||||
<NumberField source="uses_allowed" sortable={false} />
|
||||
<NumberField source="pending" sortable={false} />
|
||||
<NumberField source="completed" sortable={false} />
|
||||
<DateField
|
||||
source="expiry_time"
|
||||
showTime
|
||||
options={date_format}
|
||||
sortable={false}
|
||||
/>
|
||||
</Datagrid>
|
||||
</List>
|
||||
);
|
||||
};
|
||||
|
||||
export const RegistrationTokenCreate = props => (
|
||||
<Create {...props}>
|
||||
<SimpleForm redirect="list" toolbar={<Toolbar alwaysEnableSaveButton />}>
|
||||
<TextInput
|
||||
source="token"
|
||||
autoComplete="off"
|
||||
validate={validateToken}
|
||||
resettable
|
||||
/>
|
||||
<NumberInput
|
||||
source="length"
|
||||
validate={validateLength}
|
||||
helperText="resources.registration_tokens.helper.length"
|
||||
step={1}
|
||||
/>
|
||||
<NumberInput
|
||||
source="uses_allowed"
|
||||
validate={validateUsesAllowed}
|
||||
step={1}
|
||||
/>
|
||||
<DateTimeInput source="expiry_time" parse={dateParser} />
|
||||
</SimpleForm>
|
||||
</Create>
|
||||
);
|
||||
|
||||
export const RegistrationTokenEdit = props => {
|
||||
return (
|
||||
<Edit {...props}>
|
||||
<SimpleForm>
|
||||
<TextInput source="token" disabled />
|
||||
<NumberInput source="pending" disabled />
|
||||
<NumberInput source="completed" disabled />
|
||||
<NumberInput
|
||||
source="uses_allowed"
|
||||
validate={validateUsesAllowed}
|
||||
step={1}
|
||||
/>
|
||||
<DateTimeInput
|
||||
source="expiry_time"
|
||||
parse={dateParser}
|
||||
format={dateFormatter}
|
||||
/>
|
||||
</SimpleForm>
|
||||
</Edit>
|
||||
);
|
||||
};
|
Loading…
Reference in new issue