moonstream/frontend/src/components/TokenRequest.js

128 wiersze
3.5 KiB
JavaScript
Czysty Zwykły widok Historia

2021-09-21 14:58:13 +00:00
import React from "react";
import {
Box,
InputGroup,
InputLeftElement,
FormControl,
FormErrorMessage,
2021-09-21 18:37:23 +00:00
Stack,
2021-09-21 14:58:13 +00:00
Button,
Input,
2021-09-22 13:45:45 +00:00
chakra,
2021-09-21 14:58:13 +00:00
} from "@chakra-ui/react";
import { useEffect, useState, useRef } from "react";
2021-09-21 15:58:27 +00:00
import { Icon } from "../../src/Theme";
2021-09-21 14:58:13 +00:00
import { useForm } from "react-hook-form";
import { useUser, useTokens } from "../core/hooks";
2021-09-21 18:37:23 +00:00
const TokenRequest = ({ setNewToken, onClose }) => {
2021-09-21 14:58:13 +00:00
const { user } = useUser();
const { createToken } = useTokens();
const { handleSubmit, errors, register } = useForm();
const [showPassword, setShowPassword] = useState("password");
const togglePassword = () => {
if (showPassword === "password") {
setShowPassword("text");
} else {
setShowPassword("password");
}
};
const PasswordRef = useRef();
useEffect(() => {
if (PasswordRef.current) {
PasswordRef.current.focus();
}
}, [PasswordRef]);
useEffect(() => {
if (createToken.data?.data) {
2021-09-21 18:37:23 +00:00
setNewToken(createToken.data.data);
onClose();
2021-09-21 14:58:13 +00:00
}
2021-09-21 18:37:23 +00:00
}, [createToken.data, setNewToken, onClose]);
2021-09-21 14:58:13 +00:00
const formStyle = {
display: "flex",
flexWrap: "wrap",
minWidth: "100px",
flexFlow: "row wrap-reverse",
aligntContent: "flex-end",
2021-09-21 18:37:23 +00:00
width: "100%",
2021-09-21 14:58:13 +00:00
};
if (!user) return ""; //loading...
return (
2021-09-21 18:37:23 +00:00
<Box px={1} py={4}>
2021-09-21 14:58:13 +00:00
<form onSubmit={handleSubmit(createToken.mutate)} style={formStyle}>
2021-09-21 18:37:23 +00:00
<Stack direction="column" spacing={4} w="100%">
<Stack direction="column" spacing={1}>
2021-09-22 13:45:45 +00:00
<chakra.label for="pwd">API key label:</chakra.label>
2021-09-21 18:37:23 +00:00
<Input
w="100%"
2022-11-17 11:02:54 +00:00
variant="bw"
2021-09-21 18:37:23 +00:00
ref={register}
name="token_note"
placeholder="My API key label"
type="search"
/>
</Stack>
<Stack direction="column" spacing={1}>
2021-09-22 13:45:45 +00:00
<chakra.label for="pwd">Password:</chakra.label>
2021-09-21 18:37:23 +00:00
<FormControl isInvalid={errors.password}>
<InputGroup minWidth="300px">
<InputLeftElement onClick={togglePassword}>
<Icon icon="password" />
</InputLeftElement>
2021-09-22 13:45:45 +00:00
2021-09-21 18:37:23 +00:00
<Input
2021-09-22 13:45:45 +00:00
id="pwd"
2021-09-21 18:37:23 +00:00
colorScheme="blue"
2022-11-17 11:02:54 +00:00
variant="bw"
2021-09-21 18:37:23 +00:00
isDisabled={createToken.isLoading}
2021-09-22 13:45:45 +00:00
placeholder="This action requires your password to confirm"
2021-09-21 18:37:23 +00:00
name="password"
type={showPassword}
ref={(e) => {
register(e, { required: "Password is required!" });
PasswordRef.current = e;
}}
/>
</InputGroup>
<FormErrorMessage color="red.400" pl="1" justifyContent="Center">
{errors.password && errors.password.message}
</FormErrorMessage>
</FormControl>
</Stack>
2021-09-21 14:58:13 +00:00
<Input
type="hidden"
ref={register}
name="username"
defaultValue={user?.username}
/>
2021-09-21 18:37:23 +00:00
<Stack pt={9} direction="row" justifyContent="flex-end" w="100%">
<Button
m={0}
variant="solid"
colorScheme="blue"
type="submit"
isLoading={createToken.isLoading}
>
Submit
</Button>
2022-11-20 11:23:42 +00:00
<Button variant="solid" colorScheme="red" onClick={() => onClose()}>
2021-09-21 18:37:23 +00:00
Cancel
</Button>
</Stack>
</Stack>
2021-09-21 14:58:13 +00:00
</form>
</Box>
);
};
export default TokenRequest;