Releasing new design #161
@ -100,7 +100,9 @@ export const Modal = () => {
|
|||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
</ul>
|
</ul>
|
||||||
|
<div className={styles.tabContent}>
|
||||||
<Outlet />
|
<Outlet />
|
||||||
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer className={styles.footer}>Welcome to SIGit!</footer>
|
<footer className={styles.footer}>Welcome to SIGit!</footer>
|
||||||
|
@ -59,6 +59,13 @@ $default-modal-padding: 15px 25px;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tabContent {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 15px;
|
||||||
|
padding-inline: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
border-top: solid 1px rgba(0, 0, 0, 0.1);
|
border-top: solid 1px rgba(0, 0, 0, 0.1);
|
||||||
|
@ -1,3 +1,26 @@
|
|||||||
|
import { Button, TextField } from '@mui/material'
|
||||||
|
|
||||||
export const Login = () => {
|
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>
|
||||||
|
</>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
@ -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 { getPublicKey, nip19 } from 'nostr-tools'
|
||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useState } from 'react'
|
||||||
import { useDispatch } from 'react-redux'
|
import { useDispatch } from 'react-redux'
|
||||||
@ -19,10 +19,11 @@ import {
|
|||||||
import { LoginMethods } from '../../store/auth/types'
|
import { LoginMethods } from '../../store/auth/types'
|
||||||
import { Dispatch } from '../../store/store'
|
import { Dispatch } from '../../store/store'
|
||||||
import { npubToHex, queryNip05 } from '../../utils'
|
import { npubToHex, queryNip05 } from '../../utils'
|
||||||
import styles from './style.module.scss'
|
|
||||||
import { hexToBytes } from '@noble/hashes/utils'
|
import { hexToBytes } from '@noble/hashes/utils'
|
||||||
import { NIP05_REGEX } from '../../constants'
|
import { NIP05_REGEX } from '../../constants'
|
||||||
|
|
||||||
|
import formStyles from '../../styles/form.module.scss'
|
||||||
|
|
||||||
export const Nostr = () => {
|
export const Nostr = () => {
|
||||||
const [searchParams] = useSearchParams()
|
const [searchParams] = useSearchParams()
|
||||||
|
|
||||||
@ -355,28 +356,45 @@ export const Nostr = () => {
|
|||||||
<>
|
<>
|
||||||
{isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
|
{isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
|
||||||
|
|
||||||
<Box>
|
{isNostrExtensionAvailable && (
|
||||||
<div className={styles.loginPage}>
|
<>
|
||||||
|
<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
|
<TextField
|
||||||
onKeyDown={handleInputKeyDown}
|
onKeyDown={handleInputKeyDown}
|
||||||
label="nip05 login / nip46 bunker string"
|
label="nip05 login / nip46 bunker string"
|
||||||
|
helperText="Private key (Not recommended)"
|
||||||
value={inputValue}
|
value={inputValue}
|
||||||
onChange={(e) => setInputValue(e.target.value)}
|
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
|
||||||
<Button disabled={!inputValue} onClick={login} variant="contained">
|
disabled={!inputValue}
|
||||||
|
onClick={login}
|
||||||
|
variant="contained"
|
||||||
|
fullWidth
|
||||||
|
>
|
||||||
Login
|
Login
|
||||||
</Button>
|
</Button>
|
||||||
</Box>
|
|
||||||
</div>
|
|
||||||
</Box>
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -1,6 +0,0 @@
|
|||||||
@import '../../styles/colors.scss';
|
|
||||||
|
|
||||||
.loginPage {
|
|
||||||
color: $text-color;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
@ -1,3 +1,35 @@
|
|||||||
|
import { Button, TextField } from '@mui/material'
|
||||||
|
|
||||||
export const Register = () => {
|
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>
|
||||||
|
</>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
3
src/styles/form.module.scss
Normal file
3
src/styles/form.module.scss
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.label {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user