mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-06 07:25:53 -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)"
|
media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)"
|
||||||
rel="apple-touch-startup-image"
|
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>
|
</head>
|
||||||
<body onContextMenu="return false" ontouchstart="">
|
<body onContextMenu="return false" ontouchstart="">
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script type="module" src="/src/main.tsx"></script>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -24,8 +24,9 @@ const PreloaderBase = styled.div`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
display: grid;
|
display: flex;
|
||||||
place-items: center;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
.spinner {
|
.spinner {
|
||||||
width: 58px;
|
width: 58px;
|
||||||
|
|
|
||||||
|
|
@ -55,7 +55,7 @@
|
||||||
background-color: rgba(36, 36, 36, 0.75);
|
background-color: rgba(36, 36, 36, 0.75);
|
||||||
border: 2px solid rgba(128, 128, 128, 0.15);
|
border: 2px solid rgba(128, 128, 128, 0.15);
|
||||||
backdrop-filter: blur(20px);
|
backdrop-filter: blur(20px);
|
||||||
max-width: 330px;
|
max-width: 360px;
|
||||||
max-height: 600px;
|
max-height: 600px;
|
||||||
padding: 30px 25px;
|
padding: 30px 25px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
|
@ -64,6 +64,29 @@
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
box-shadow: 0 2px 10px 0 rgb(0 0 0 / 20%);
|
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 {
|
.formModal {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -71,10 +94,15 @@
|
||||||
|
|
||||||
> span {
|
> span {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
word-break: keep-all;
|
||||||
|
|
||||||
b {
|
b {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.welcome {
|
.welcome {
|
||||||
|
|
@ -84,8 +112,17 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
margin-top: 1px;
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--secondary-foreground);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
form {
|
form {
|
||||||
|
|
@ -169,27 +206,28 @@
|
||||||
|
|
||||||
.success {
|
.success {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
.note {
|
.title {
|
||||||
color: var(--tertiary-foreground);
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mailProvider {
|
.subtitle {
|
||||||
padding: 24px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
button {
|
||||||
font-weight: 300;
|
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 <Preloader type="spinner" />;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className={styles.captcha}>
|
||||||
|
<div className={styles.title}>Are you human?</div>
|
||||||
|
<div className={styles.checkbox}>
|
||||||
<HCaptcha
|
<HCaptcha
|
||||||
|
theme="dark"
|
||||||
sitekey={configuration.features.captcha.key}
|
sitekey={configuration.features.captcha.key}
|
||||||
onVerify={(token) => props.onSuccess(token)}
|
onVerify={(token) => props.onSuccess(token)}
|
||||||
/>
|
/>
|
||||||
<div className={styles.footer}>
|
</div>
|
||||||
<a onClick={props.onCancel}>
|
<a onClick={props.onCancel}>
|
||||||
<Text id="login.cancel" />
|
<Text id="login.cancel" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -111,30 +111,28 @@ export function Form({ page, callback }: Props) {
|
||||||
<div className={styles.success}>
|
<div className={styles.success}>
|
||||||
{configuration?.features.email ? (
|
{configuration?.features.email ? (
|
||||||
<>
|
<>
|
||||||
<Envelope size={72} />
|
<div>
|
||||||
<h2>
|
<div className={styles.title}>
|
||||||
<Text id="login.check_mail" />
|
<Text id="login.check_mail" />
|
||||||
</h2>
|
</div>
|
||||||
<p className={styles.note}>
|
<div className={styles.subtitle}>
|
||||||
<Text id="login.email_delay" />
|
<Text id="login.email_delay" />
|
||||||
</p>
|
</div>
|
||||||
|
</div>
|
||||||
<MailProvider email={success} />
|
<MailProvider email={success} />
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<CheckCircle size={72} />
|
<div className={styles.title}>
|
||||||
<h1>
|
|
||||||
<Text id="login.successful_registration" />
|
<Text id="login.successful_registration" />
|
||||||
</h1>
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
<span className={styles.footer}>
|
|
||||||
<Link to="/login">
|
<Link to="/login">
|
||||||
<a>
|
<a>
|
||||||
<Text id="login.remembered" />
|
<Text id="login.remembered" />
|
||||||
</a>
|
</a>
|
||||||
</Link>
|
</Link>
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -150,6 +148,7 @@ export function Form({ page, callback }: Props) {
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.subtitle}>
|
<div className={styles.subtitle}>
|
||||||
<Text id="login.subtitle" />
|
<Text id="login.subtitle" />
|
||||||
|
<div>(app.revolt.chat)</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue