Skip to content

Instantly share code, notes, and snippets.

@WilliamD47
Created February 16, 2022 18:33
Show Gist options
  • Save WilliamD47/ed5164de03fd6754c16ad8700cd13874 to your computer and use it in GitHub Desktop.
Save WilliamD47/ed5164de03fd6754c16ad8700cd13874 to your computer and use it in GitHub Desktop.
Password Entry System in React and Mantine
.containerMain {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 80%;
}
.centered {
border: 1px solid #8080803f;
padding: 0em 1em 1em 1em;
border-radius: 1%;
width: 20vw;
}
.main {
width: 100%;
height: 100vh;
}
.navbar {
padding: 1em 1em 1em;
}
import { useState } from 'react';
import './App.css';
import { MantineProvider, PasswordInput, TextInput, Button, Space, Center, ActionIcon } from '@mantine/core';
import { MdDarkMode, MdLightMode } from 'react-icons/md'
function App() {
const CheckEmailPassword = () => {
if (email === "") {
setEmailError(true);
} else {
setEmailError(false);
}
if (password === "") {
setPasswordError(true);
} else {
setPasswordError(false);
}
}
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [darkMode, setDarkMode] = useState(true);
const [emailError, setEmailError] = useState(false);
const [passwordError, setPasswordError] = useState(false);
return (
<div className="main" style={{backgroundColor: darkMode ? '#1A1B1E' : '#e8ebf5'}}>
<MantineProvider theme={{ colorScheme: darkMode ? 'dark' : 'light' }}>
<div className="navbar" style={{backgroundColor: darkMode ? '#21252B' : '#d5d7da'}}>
<ActionIcon<'a'>
component="a"
onClick={() => setDarkMode(!darkMode)}
size="xl">
{darkMode ? <MdLightMode size="25px" /> : <MdDarkMode size="25px"/>}
</ActionIcon>
</div>
<div className="containerMain">
<div className="centered">
<h1 style={{color: darkMode ? 'white' : 'black'}}>Sign In</h1>
<TextInput
error={emailError && "Please enter a valid email address"}
label="Email"
placeholder="Email"
required value={email}
onChange={(event) => setEmail(event.currentTarget.value)} />
<Space h="xl" />
<PasswordInput
error = {passwordError && "Please enter a valid password"}
placeholder="Password"
label="Password"
required value={password} onChange={(event) => setPassword(event.currentTarget.value)}
/>
<Space h="xl" />
<Center >
<Button<'a'>
component="a"
onClick={() => CheckEmailPassword()}
color="cyan"
radius="xs" >
Sign In
</Button>
</Center>
</div>
</div>
</MantineProvider>
</div>
);
}
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment