...
 
Commits (2)
{
"extends": "stylelint-config-standard",
"rules": {
"indentation": "tab"
}
}
\ No newline at end of file
......@@ -18,7 +18,8 @@
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
"eject": "react-scripts eject",
"lint:sass": "stylelint src/**.* --config=.stylelintrc"
},
"eslintConfig": {
"extends": "react-app"
......@@ -34,5 +35,9 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"stylelint": "^10.1.0",
"stylelint-config-standard": "^18.3.0"
}
}
.app {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: var(--main);
}
.title {
font-size: 3em;
color: var(--main-text);
}
\ No newline at end of file
}
@keyframes slide {
from {transform: translateY(-50px);}
to {transform: translateY(0);}
}
.banner {
animation: slide .5s ease;
flex: 0 0 auto;
display: flex;
align-items: center;
padding: 12px 20px;
box-sizing: border-box;
min-height: 50px;
background: var(--red);
color: white;
font-size: .8125rem;
&.notice {background: var(--default-accent-color);}
&.error {background: var(--red);}
.title {
font-weight: bold;
flex: 0 0 auto;
text-transform: uppercase;
}
.divider {
flex: 0 0 auto;
display: block;
height: 26px;
width: 1px;
margin: 0 10px;
background: #FFFFFF;
border-radius: 60px;
opacity: .5;
}
.text {
flex: 1 1 auto;
}
.dismiss {
margin: 0 10px;
cursor: pointer;
}
}
\ No newline at end of file
import React from 'react';
import styles from './Notification.module.scss';
interface NotificationProps {
title: string,
text: string,
dismiss?: () => void
};
export default function Notification(props: NotificationProps) {
return (
<div className={styles.banner}>
<span className={styles.title}>{props.title}</span>
{ props.text && <span className={styles.divider} /> }
<span className={styles.text}>{props.text}</span>
{ props.dismiss && <p className={styles.dismiss} onClick={props.dismiss}>X</p> }
{/*<Icon className={styles.dismiss} icon="x" type="regular"/>*/}
</div>
);
}
\ No newline at end of file
@import 'themes/index';
html, body {
html,
body {
margin: 0;
padding: 0;
}
\ No newline at end of file
}
......@@ -28,13 +28,13 @@
.form {
max-width: 450px;
border-radius: 10px;
background: #333234;
//background: #333234;
padding: 25px;
box-sizing: border-box;
box-shadow: 0 2px 10px 0 rgba(0,0,0,.2);
background: var(--main);
border: 2px solid var(--sub);
//border: 2px solid var(--sub);
.welcome {
font-size: 24px;
......@@ -123,8 +123,9 @@
left: 10px;
right: 10px;
top: 50%;
transform: translateY(-50%);
max-width: 100%;
transform: translateY(-50%);
margin: 0 auto;
//max-width: 100%;
}
}
......
......@@ -4,10 +4,12 @@ import { Instance } from '../internal/Client';
import logo from '../assets/downloads/branding/logo-white-full.svg';
import styles from './Login.module.scss';
import Notification from '../components/ui/Notification';
enum ErrorType {
NONE,
INVALID_DETAILS,
INVALID_EMAIL,
INAVLID_PASSWORD,
SERVER_ERROR
};
......@@ -29,7 +31,8 @@ export default function Login() {
setPage(Page.LOAD);
}).catch(err => {
setError({
type: (''+err).includes('403') ? ErrorType.INVALID_DETAILS : ErrorType.SERVER_ERROR,
// ! BAD CODE FIX ASAP
type: (''+err).includes('403') ? ErrorType.INVALID_EMAIL : ErrorType.SERVER_ERROR,
reason: ''+err
});
});
......@@ -40,12 +43,13 @@ export default function Login() {
{ app =>
<div>
<div className={styles.login}>
<div className={styles.overlay} />
<div className={styles.overlay}>
{ error.type !== 0 && <Notification title='Failed to login' text={error.reason} /> }
</div>
<div className={styles.left}>
<img alt="RIOT" className={styles.logo} src={logo} draggable={false}/>
<img alt="Riot" className={styles.logo} src={logo} draggable={false}/>
</div>
<div className={styles.right}>
{ error.type !== ErrorType.NONE && 'ERROR!' }
<form className={styles.form} onSubmit={ev => submitForm(ev, app.setPage)}>
<div className={styles.welcome}>Welcome back!</div>
......@@ -54,7 +58,7 @@ export default function Login() {
<span className={styles.title}>Password</span>
<input type="password" value={password} onChange={e => setPassword(e.target.value)} />
<a className={styles.link} href="x">Forgot your password?</a>
<a className={styles.link} href="/forgotidk">Forgot your password?</a>
<input type="submit" value="Log in"/>
<span className={styles.signin}>Need an account? <a className={styles.link} href="x">Sign up</a></span>
......
This diff is collapsed.