Landing page - new design implementation #122

Merged
b merged 45 commits from issue-21 into staging 2024-07-31 13:06:58 +00:00
7 changed files with 111 additions and 32 deletions
Showing only changes of commit e3ca3ab908 - Show all commits

View File

@ -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>

View File

@ -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);

View File

@ -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>
</>
)
} }

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 { 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>
</> </>
) )
} }

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 = () => { 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;
}