kopia lustrzana https://github.com/bugout-dev/moonstream
login form styling
Anton Mushnin
rodzic
e1e5ded83d
commit
8c2f3fb0b4
|
|
@ -1,24 +1,23 @@
|
|||
import React, { useEffect } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import {
|
||||
Text,
|
||||
Stack,
|
||||
Box,
|
||||
FormControl,
|
||||
FormErrorMessage,
|
||||
InputGroup,
|
||||
Button,
|
||||
Input,
|
||||
InputRightElement,
|
||||
Button,
|
||||
} from "@chakra-ui/react";
|
||||
import CustomIcon from "./CustomIcon";
|
||||
import { useLogin } from "../core/hooks";
|
||||
import PasswordInput from "./PasswordInput";
|
||||
import { MODAL_TYPES } from "../core/providers/OverlayProvider/constants";
|
||||
|
||||
const SignIn = ({ toggleModal }) => {
|
||||
const { handleSubmit, errors, register } = useForm();
|
||||
const { login, isLoading, data } = useLogin();
|
||||
const [showPassword, togglePassword] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!data) {
|
||||
|
|
@ -30,70 +29,135 @@ const SignIn = ({ toggleModal }) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<Text color="gray.1200" fontSize="md">
|
||||
To your Moonstream account
|
||||
</Text>
|
||||
<form onSubmit={handleSubmit(login)}>
|
||||
<Stack width="100%" pt={4} spacing={3}>
|
||||
<Stack width="100%" spacing={3}>
|
||||
<div
|
||||
style={{
|
||||
fontSize: "18px",
|
||||
fontWeight: 400,
|
||||
color: errors.username ? "#EE8686" : "white",
|
||||
}}
|
||||
>
|
||||
{errors.username ? errors.username.message : "Username"}
|
||||
</div>
|
||||
<FormControl isInvalid={errors.username}>
|
||||
<InputGroup>
|
||||
<InputGroup bg="black">
|
||||
<Input
|
||||
_placeholder={{ textColor: "gray.1200" }}
|
||||
borderColor="white"
|
||||
bg="#1A1D22"
|
||||
color="white"
|
||||
_placeholder={{ textColor: "#CDCDCD" }}
|
||||
autoComplete="username"
|
||||
variant="filled"
|
||||
colorScheme="blue"
|
||||
placeholder="Your Moonstream username"
|
||||
variant="outline"
|
||||
placeholder="Enter your username or email"
|
||||
errorBorderColor="#EE8686"
|
||||
name="username"
|
||||
{...register("username", { required: true })}
|
||||
ref={register({ required: "Username is required!" })}
|
||||
ref={register({ required: "Username is required" })}
|
||||
_hover={{
|
||||
backgroundColor: "#1A1D22",
|
||||
}}
|
||||
_focus={{
|
||||
backgroundColor: "#1A1D22",
|
||||
}}
|
||||
_autofill={{
|
||||
backgroundColor: "#1A1D22",
|
||||
textFillColor: "white",
|
||||
boxShadow: "0 0 0px 1000px #1A1D22 inset",
|
||||
transition: "background-color 5000s ease-in-out 0s",
|
||||
}}
|
||||
/>
|
||||
<InputRightElement>
|
||||
<CustomIcon icon="name" />
|
||||
</InputRightElement>
|
||||
</InputGroup>
|
||||
<FormErrorMessage color="red.400" pl="1">
|
||||
{errors.username && errors.username.message}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
<div
|
||||
style={{
|
||||
fontSize: "18px",
|
||||
color: errors.password ? "#EE8686" : "white",
|
||||
}}
|
||||
>
|
||||
{errors.password ? errors.password.message : "Password"}
|
||||
</div>
|
||||
<FormControl isInvalid={errors.password}>
|
||||
<PasswordInput
|
||||
placeholder="Your Moonstream password"
|
||||
name="password"
|
||||
ref={register({ required: "Password is required!" })}
|
||||
/>
|
||||
<FormErrorMessage color="red.400" pl="1">
|
||||
{errors.password && errors.password.message}
|
||||
</FormErrorMessage>
|
||||
<InputGroup bg="black">
|
||||
<Input
|
||||
borderColor="white"
|
||||
bg="#1A1D22"
|
||||
color="white"
|
||||
_placeholder={{ textColor: "#CDCDCD" }}
|
||||
autoComplete="current-password"
|
||||
variant="outline"
|
||||
placeholder="Enter your password"
|
||||
errorBorderColor="#EE8686"
|
||||
name="password"
|
||||
type={showPassword ? "text" : "password"}
|
||||
ref={register({ required: "Password is required" })}
|
||||
_hover={{
|
||||
backgroundColor: "#1A1D22",
|
||||
}}
|
||||
_focus={{
|
||||
backgroundColor: "#1A1D22",
|
||||
}}
|
||||
_autofill={{
|
||||
backgroundColor: "#1A1D22",
|
||||
textFillColor: "white",
|
||||
boxShadow: "0 0 0px 1000px #1A1D22 inset",
|
||||
transition: "background-color 5000s ease-in-out 0s",
|
||||
}}
|
||||
/>
|
||||
<InputRightElement onClick={() => togglePassword(!showPassword)}>
|
||||
<CustomIcon icon="password" />
|
||||
</InputRightElement>
|
||||
</InputGroup>
|
||||
</FormControl>
|
||||
<Text textAlign="start" fontSize="18px">
|
||||
{" "}
|
||||
<Box
|
||||
cursor="pointer"
|
||||
color="#EE8686"
|
||||
as="span"
|
||||
onClick={() => toggleModal({ type: MODAL_TYPES.FORGOT })}
|
||||
>
|
||||
Forgot your password?
|
||||
</Box>
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
<Button
|
||||
my={8}
|
||||
mt="30px"
|
||||
mb="10px"
|
||||
bg="#F56646"
|
||||
fontWeight="700"
|
||||
borderRadius="30px"
|
||||
padding="10px 30px"
|
||||
fontSize="20px"
|
||||
height="46px"
|
||||
color="#ffffff"
|
||||
type="submit"
|
||||
width="100%"
|
||||
variant="solid"
|
||||
colorScheme="blue"
|
||||
isLoading={isLoading}
|
||||
_hover={{
|
||||
backgroundColor: "#F4532F",
|
||||
}}
|
||||
_focus={{
|
||||
backgroundColor: "#F4532F",
|
||||
}}
|
||||
_active={{
|
||||
backgroundColor: "#F4532F",
|
||||
}}
|
||||
>
|
||||
Login
|
||||
</Button>
|
||||
</form>
|
||||
<Text textAlign="center" fontSize="md" color="gray.1200">
|
||||
{" "}
|
||||
<Box
|
||||
cursor="pointer"
|
||||
color="blue.800"
|
||||
as="span"
|
||||
onClick={() => toggleModal({ type: MODAL_TYPES.FORGOT })}
|
||||
>
|
||||
Forgot your password?
|
||||
</Box>
|
||||
<Box height="1px" width="100%" background="#eaebf8" mb="1.875rem" />
|
||||
</Text>
|
||||
<Text textAlign="center" fontSize="md" color="gray.1200">
|
||||
|
||||
<Text textAlign="center" fontSize="md" color="white">
|
||||
Don`t have an account?{" "}
|
||||
<Box
|
||||
cursor="pointer"
|
||||
color="blue.800"
|
||||
color="#EE8686"
|
||||
as="span"
|
||||
onClick={() => toggleModal({ type: MODAL_TYPES.SIGNUP })}
|
||||
>
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue