mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-05 23:25:44 -05:00
fix(login): finished new login screen
This commit is contained in:
trashtemp
parent
7844c84fbe
commit
a07a17d892
6 changed files with 152 additions and 43 deletions
6
disabled-js.svg
Normal file
6
disabled-js.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<svg width="225" height="161" viewBox="0 0 225 161" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M69.6951 15.0002L20.9951 63.7002L69.6951 112.4L81.7601 100.325L45.1301 63.6952L81.7601 27.0652L69.6951 15.0002ZM132.955 112.39L181.655 63.6902L132.955 14.9902L120.89 27.0652L157.52 63.6952L120.89 100.325L132.955 112.39Z" fill="white"/>
|
||||
<path d="M197 73H137C133.686 73 131 75.6863 131 79V139C131 142.314 133.686 145 137 145H197C200.314 145 203 142.314 203 139V79C203 75.6863 200.314 73 197 73Z" fill="#242424"/>
|
||||
<path d="M191 79H143C139.686 79 137 81.6863 137 85V133C137 136.314 139.686 139 143 139H191C194.314 139 197 136.314 197 133V85C197 81.6863 194.314 79 191 79Z" fill="#D14F4F"/>
|
||||
<path d="M181.5 95.5L153.5 123.5M153.5 95.5L181.5 123.5L153.5 95.5Z" stroke="white" stroke-width="5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 828 B |
63
index.html
63
index.html
|
|
@ -72,9 +72,72 @@
|
|||
media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)"
|
||||
rel="apple-touch-startup-image"
|
||||
/>
|
||||
|
||||
<!--CSS for noscript screen-->
|
||||
<style>
|
||||
noscript {
|
||||
background: #242424;
|
||||
color: white;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
}
|
||||
noscript > div {
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
noscript > div > h1 {
|
||||
margin: 8px 0;
|
||||
text-transform: uppercase;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
noscript > div > p {
|
||||
margin: 4px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
noscript > div > a {
|
||||
align-self: center;
|
||||
margin-top: 20px;
|
||||
padding: 8px 10px;
|
||||
font-size: 14px;
|
||||
width: 80px;
|
||||
font-weight: 600;
|
||||
background: #ed5151;
|
||||
border-radius: 4px;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
noscript > div > a:hover {
|
||||
background-color: #cf4848;
|
||||
}
|
||||
noscript > div > a:active {
|
||||
background-color: #b64141;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body onContextMenu="return false" ontouchstart="">
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
<noscript>
|
||||
<div>
|
||||
<img src="disabled-js.svg" />
|
||||
<h1>Well, this is really awkward...</h1>
|
||||
<p>Seems like your JavaScript is disabled.</p>
|
||||
<p>You'll need to enable JavaScript to run this app.</p>
|
||||
<a href="https://app.revolt.chat" target="_blank">Reload</a>
|
||||
</div>
|
||||
</noscript>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -24,8 +24,9 @@ const PreloaderBase = styled.div`
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: grid;
|
||||
place-items: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.spinner {
|
||||
width: 58px;
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@
|
|||
background-color: rgba(36, 36, 36, 0.75);
|
||||
border: 2px solid rgba(128, 128, 128, 0.15);
|
||||
backdrop-filter: blur(20px);
|
||||
max-width: 330px;
|
||||
max-width: 360px;
|
||||
max-height: 600px;
|
||||
padding: 30px 25px;
|
||||
border-radius: 8px;
|
||||
|
|
@ -64,6 +64,29 @@
|
|||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 10px 0 rgb(0 0 0 / 20%);
|
||||
|
||||
.captcha {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
font-size: 13px;
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.formModal {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -71,10 +94,15 @@
|
|||
|
||||
> span {
|
||||
font-size: 13px;
|
||||
word-break: keep-all;
|
||||
|
||||
b {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.welcome {
|
||||
|
|
@ -84,8 +112,17 @@
|
|||
}
|
||||
|
||||
.subtitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
|
||||
> div {
|
||||
margin-top: 1px;
|
||||
font-size: 11px;
|
||||
color: var(--secondary-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
|
|
@ -169,27 +206,28 @@
|
|||
|
||||
.success {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
.note {
|
||||
color: var(--tertiary-foreground);
|
||||
.title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mailProvider {
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
.subtitle {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 300;
|
||||
button {
|
||||
width: 100%;
|
||||
background: var(--secondary-background);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -27,16 +27,18 @@ export const CaptchaBlock = observer((props: CaptchaProps) => {
|
|||
return <Preloader type="spinner" />;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<HCaptcha
|
||||
sitekey={configuration.features.captcha.key}
|
||||
onVerify={(token) => props.onSuccess(token)}
|
||||
/>
|
||||
<div className={styles.footer}>
|
||||
<a onClick={props.onCancel}>
|
||||
<Text id="login.cancel" />
|
||||
</a>
|
||||
<div className={styles.captcha}>
|
||||
<div className={styles.title}>Are you human?</div>
|
||||
<div className={styles.checkbox}>
|
||||
<HCaptcha
|
||||
theme="dark"
|
||||
sitekey={configuration.features.captcha.key}
|
||||
onVerify={(token) => props.onSuccess(token)}
|
||||
/>
|
||||
</div>
|
||||
<a onClick={props.onCancel}>
|
||||
<Text id="login.cancel" />
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -111,30 +111,28 @@ export function Form({ page, callback }: Props) {
|
|||
<div className={styles.success}>
|
||||
{configuration?.features.email ? (
|
||||
<>
|
||||
<Envelope size={72} />
|
||||
<h2>
|
||||
<Text id="login.check_mail" />
|
||||
</h2>
|
||||
<p className={styles.note}>
|
||||
<Text id="login.email_delay" />
|
||||
</p>
|
||||
<div>
|
||||
<div className={styles.title}>
|
||||
<Text id="login.check_mail" />
|
||||
</div>
|
||||
<div className={styles.subtitle}>
|
||||
<Text id="login.email_delay" />
|
||||
</div>
|
||||
</div>
|
||||
<MailProvider email={success} />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<CheckCircle size={72} />
|
||||
<h1>
|
||||
<div className={styles.title}>
|
||||
<Text id="login.successful_registration" />
|
||||
</h1>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<span className={styles.footer}>
|
||||
<Link to="/login">
|
||||
<a>
|
||||
<Text id="login.remembered" />
|
||||
</a>
|
||||
</Link>
|
||||
</span>
|
||||
<Link to="/login">
|
||||
<a>
|
||||
<Text id="login.remembered" />
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -150,6 +148,7 @@ export function Form({ page, callback }: Props) {
|
|||
</div>
|
||||
<div className={styles.subtitle}>
|
||||
<Text id="login.subtitle" />
|
||||
<div>(app.revolt.chat)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue