Verified Commit 35878cb6 authored by insert's avatar insert 🎺

Enable PWA and login form

parent 7f4cebb1
public/favicon.ico

1.12 KB | W: | H:

public/favicon.ico

14.7 KB | W: | H:

public/favicon.ico
public/favicon.ico
public/favicon.ico
public/favicon.ico
  • 2-up
  • Swipe
  • Onion skin
{
"short_name": "React App",
"name": "Create React App Sample",
"short_name": "RIOT",
"name": "RIOT chat for epic gamers",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
"src": "favicon.png",
"sizes": "144x144",
"type": "image/png"
}
],
"start_url": ".",
"start_url": "/",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
......
......@@ -23,7 +23,7 @@ export const AppContext = createContext(
export default function App() {
let [ ready, setReady ] = useState(false);
let [ theme, setTheme ] = useState('light');
let [ theme, setTheme ] = useState('dark');
let [ page, setPage ] = useState(Page.LOAD);
if (!ready) {
......
Subproject commit 2ce085335639b2873462712c67dcf0eb6eab0310
Subproject commit 7af00715b2099862a95c88a3c45298844613b4d0
......@@ -9,4 +9,4 @@ ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
\ No newline at end of file
serviceWorker.register();
\ No newline at end of file
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.4);
z-index: -1;
}
.login {
position: relative;
color: white;
font-family: 'Open Sans', sans-serif;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
min-height: 600px;
user-select: none;
background-image: url('../assets/images/pro-banner.jpg');
background-size: cover;
background-position: center;
.logo {height: 50px;}
.form {
max-width: 450px;
border-radius: 10px;
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);
.welcome {
font-size: 24px;
margin-bottom: 8px;
}
.title {
text-transform: uppercase;
color: #aaaaaa;
font-size: .75rem;
font-weight: bold;
margin-bottom: 4px;
letter-spacing: .7px;
}
.link {
color: mediumslateblue;
font-size: .875rem;
margin: 12px 0;
font-weight: 600;
text-decoration: none;
}
.signin {
color: #aaaaaa;
font-size: .875rem;
}
input[type=email], input[type=password] {
font-family: 'Open Sans', sans-serif;
height: 40px;
color: white;
font-size: 1rem;
width: 100%;
padding: 10px;
margin: 8px 0;
border: 1px solid #222428;
border-radius: 4px;
box-sizing: border-box;
background-color: #303339;
transition: border .3s;
user-select: none;
outline: 0;
&:focus {
border: 1px solid mediumslateblue;
}
}
input[type=submit] {
width: 100%;
color: white;
padding: 12px 32px;
margin: 10px 0 10px 0;
font-size: 1rem;
background: mediumslateblue;
border: none;
border-radius: 4px;
cursor: pointer;
transition: .3s ease;
outline: 0;
font-family: 'Open Sans', sans-serif;
border: 1px solid transparent;
&:focus {
border: 1px solid mediumslateblue;
}
}
}
@media screen and (max-width: 900px) {
& {
display: flex;
flex-direction: column;
}
.left {
padding: 40px 20px 0 20px;
.logo {height: 24px;}
}
.right {padding: 0;}
.form {
position: absolute;
left: 10px;
right: 10px;
top: 50%;
transform: translateY(-50%);
max-width: 100%;
}
}
@media screen and (min-width: 901px) {
display: flex;
align-items: center;
.left {
flex: 45%;
padding: 50px;
.logo {float: right;}
}
.right {
flex: 55%;
padding: 50px;
border-radius: 10px;
//background-color: rgba(255, 255, 255, 0.2);
}
}
}
\ No newline at end of file
......@@ -2,6 +2,9 @@ import React, { useState } from 'react';
import { AppContext, Page } from '../App';
import { Instance } from '../internal/Client';
import logo from '../assets/downloads/branding/logo-white-full.svg';
import styles from './Login.module.scss';
enum ErrorType {
NONE,
INVALID_DETAILS,
......@@ -13,7 +16,8 @@ export default function Login() {
let [ password, setPassword ] = useState('');
let [ error, setError ] = useState({ type: ErrorType.NONE, reason: '' });
function attemptLogin(setPage: (page: Page) => void) {
function submitForm(e: React.FormEvent, setPage: (page: Page) => void) {
e.preventDefault();
Instance.client.login(email, password).then((tfa) => {
if (tfa) {
// ? DO 2FA
......@@ -35,10 +39,27 @@ export default function Login() {
<AppContext.Consumer>
{ app =>
<div>
{ error.type !== ErrorType.NONE && <p>{error.reason}</p> }
<input value={email} onChange={e => setEmail(e.target.value)}></input>
<input value={password} onChange={e => setPassword(e.target.value)}></input>
<p onClick={() => attemptLogin(app.setPage)}>submit</p>
<div className={styles.login}>
<div className={styles.overlay} />
<div className={styles.left}>
<img className={styles.logo} src={logo} draggable={false}/>
</div>
<div className={styles.right}>
<form className={styles.form} onSubmit={ev => submitForm(ev, app.setPage)}>
<div className={styles.welcome}>Welcome back!</div>
<span className={styles.title}>Email</span>
<input type="email" value={email} onChange={e => setEmail(e.target.value)} />
<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>
<input type="submit" value="Log in"/>
<span className={styles.signin}>Need an account? <a className={styles.link} href="x">Sign up</a></span>
</form>
</div>
</div>
</div>
}
</AppContext.Consumer>
......
......@@ -21,12 +21,13 @@ const isLocalhost = Boolean(
);
type Config = {
allowDev?: boolean
onSuccess?: (registration: ServiceWorkerRegistration) => void;
onUpdate?: (registration: ServiceWorkerRegistration) => void;
};
export function register(config?: Config) {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
if (((config && config.allowDev) || process.env.NODE_ENV === 'production') && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(
(process as { env: { [key: string]: string } }).env.PUBLIC_URL,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment