abner/for-legacy-web
1
0
Fork 1
mirror of https://github.com/stoatchat/for-legacy-web.git synced 2026-03-06 17:11:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(login): finished new login screen

Browse Source
This commit is contained in:
trashtemp
2021-12-25 19:48:48 +01:00
parent b30e444f0a
commit f7ff31612b
6 changed files with 152 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/pages/login/Login.module.scss
View File

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

20
src/pages/login/forms/CaptchaBlock.tsx
View File

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

33
src/pages/login/forms/Form.tsx
View File

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