fix: popup forms designs

This commit is contained in:
enes 2024-07-29 17:12:47 +02:00
parent c7dfb2864a
commit e3ca3ab908
7 changed files with 111 additions and 32 deletions

View File

@ -100,7 +100,9 @@ export const Modal = () => {
)
})}
</ul>
<div className={styles.tabContent}>
<Outlet />
</div>
</main>
<footer className={styles.footer}>Welcome to SIGit!</footer>

View File

@ -59,6 +59,13 @@ $default-modal-padding: 15px 25px;
}
}
.tabContent {
display: flex;
flex-direction: column;
grid-gap: 15px;
padding-inline: 10px;
}
.footer {
padding: 15px;
border-top: solid 1px rgba(0, 0, 0, 0.1);

View File

@ -1,3 +1,26 @@
import { Button, TextField } from '@mui/material'
export const Login = () => {
return <>Login</>
return (
<>
<TextField
label="Email"
placeholder="Your email address"
fullWidth
margin="dense"
autoComplete="username"
/>
<TextField
label="Password"
placeholder="Your password"
fullWidth
margin="dense"
autoComplete="current-password"
/>
<Button variant="contained" fullWidth>
Login
</Button>
</>
)
}

View File

@ -1,4 +1,4 @@
import { Box, Button, TextField } from '@mui/material'
import { Button, Divider, TextField } from '@mui/material'
import { getPublicKey, nip19 } from 'nostr-tools'
import { useEffect, useState } from 'react'
import { useDispatch } from 'react-redux'
@ -19,10 +19,11 @@ import {
import { LoginMethods } from '../../store/auth/types'
import { Dispatch } from '../../store/store'
import { npubToHex, queryNip05 } from '../../utils'
import styles from './style.module.scss'
import { hexToBytes } from '@noble/hashes/utils'
import { NIP05_REGEX } from '../../constants'
import formStyles from '../../styles/form.module.scss'
export const Nostr = () => {
const [searchParams] = useSearchParams()
@ -355,28 +356,45 @@ export const Nostr = () => {
<>
{isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
<Box>
<div className={styles.loginPage}>
{isNostrExtensionAvailable && (
<>
<label className={formStyles.label} htmlFor="extension-login">
Login by using a browser extension
</label>
<Button
id="extension-login"
onClick={loginWithExtension}
variant="contained"
>
Extension Login
</Button>
<Divider
sx={{
fontSize: '16px'
}}
>
or
</Divider>
</>
)}
<TextField
onKeyDown={handleInputKeyDown}
label="nip05 login / nip46 bunker string"
helperText="Private key (Not recommended)"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
sx={{ width: '100%', mt: 2 }}
fullWidth
margin="dense"
/>
{isNostrExtensionAvailable && (
<Button onClick={loginWithExtension} variant="text">
Login with extension
</Button>
)}
<Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
<Button disabled={!inputValue} onClick={login} variant="contained">
<Button
disabled={!inputValue}
onClick={login}
variant="contained"
fullWidth
>
Login
</Button>
</Box>
</div>
</Box>
</>
)
}

View File

@ -1,6 +0,0 @@
@import '../../styles/colors.scss';
.loginPage {
color: $text-color;
margin-top: 20px;
}

View File

@ -1,3 +1,35 @@
import { Button, TextField } from '@mui/material'
export const Register = () => {
return <>Register</>
return (
<>
<TextField
label="Email"
placeholder="Your email address"
fullWidth
margin="dense"
autoComplete="username"
/>
<TextField
label="Password"
placeholder="Your password"
fullWidth
margin="dense"
type="password"
autoComplete="new-password"
/>
<TextField
label="Confirm password"
placeholder="Re-type your password"
fullWidth
margin="dense"
type="password"
autoComplete="new-password"
/>
<Button variant="contained" fullWidth>
Register
</Button>
</>
)
}

View File

@ -0,0 +1,3 @@
.label {
font-size: 16px;
}