Compare commits
2 commits
76598561d7
...
9f0a9a6629
Author | SHA1 | Date | |
---|---|---|---|
|
9f0a9a6629 | ||
|
a699218c22 |
9 changed files with 103 additions and 54 deletions
|
@ -1,12 +1,28 @@
|
|||
import APIRequest from './APIRequest';
|
||||
import gatewayConnection from './Gateway/globalGatewayConnection';
|
||||
import Logger from './Logger';
|
||||
|
||||
const { log: authLog, error: authError } = Logger([ 'Authenticator' ]);
|
||||
|
||||
const Authenticator = {
|
||||
getLoggedInUserFromCookie: async function() {
|
||||
authLog('Fetching current logged in user status...');
|
||||
const { json, isOK, err } = await APIRequest.authenticated('/api/v1/users/current/info');
|
||||
if (!isOK && err) throw new Error(err);
|
||||
if (!isOK && !err) return undefined;
|
||||
if (!json || !json.user) return undefined;
|
||||
if (!isOK && err) {
|
||||
authLog('Exeption while fetching current logged in user status', err);
|
||||
throw new Error(err);
|
||||
}
|
||||
if (!isOK && !err) {
|
||||
authError('User is not authenticated');
|
||||
return undefined;
|
||||
}
|
||||
if (!json || !json.user) {
|
||||
authError('User is not authenticated');
|
||||
return undefined;
|
||||
}
|
||||
|
||||
authLog(`Logged in as "${json.user.username || '[undefined user]'}"`);
|
||||
|
||||
// NOTE(hippoz): this function has a stupid side-effect but this will have to do for now...
|
||||
gatewayConnection.connect(json.user.token);
|
||||
return json.user;
|
||||
|
|
|
@ -11,7 +11,7 @@ import { useEffect, useState } from 'react';
|
|||
import { useDispatch, connect } from 'react-redux'
|
||||
import { BrowserRouter, Switch, Route } from 'react-router-dom';
|
||||
|
||||
function App({ user, gateway }) {
|
||||
function App({ user }) {
|
||||
const [ notificationText, setNotificationText ] = useState('');
|
||||
const [ hasError, setHasError ] = useState(false);
|
||||
|
||||
|
@ -65,8 +65,7 @@ function App({ user, gateway }) {
|
|||
|
||||
const stateToProps = (state) => {
|
||||
return {
|
||||
user: state?.user,
|
||||
gateway: state?.gateway
|
||||
user: state?.user
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
@ -51,12 +51,16 @@ export default function Login() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div id="login-container">
|
||||
<input type="text" name="username" onChange={ ({ target }) => setUsernameInput(target.value) } />
|
||||
<div id="login-container" className="card main-card">
|
||||
<label htmlFor="username">Username</label>
|
||||
<br />
|
||||
<input type="password" name="password" onChange={ ({ target }) => setPasswordInput(target.value) } />
|
||||
<input type="text" name="username" className="text-input" onChange={ ({ target }) => setUsernameInput(target.value) } />
|
||||
<br />
|
||||
<button id="login-submit" onClick={ handleLoginContinueButton }>Continue</button>
|
||||
<label htmlFor="password">Password</label>
|
||||
<br />
|
||||
<input type="password" name="password" className="text-input" onChange={ ({ target }) => setPasswordInput(target.value) } />
|
||||
<br />
|
||||
<button id="login-submit" className="button" onClick={ handleLoginContinueButton }>Continue</button>
|
||||
<Notification text={ info } />
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -5,6 +5,9 @@ import { couldNotReach } from '../../Errors';
|
|||
|
||||
import { useDispatch } from 'react-redux'
|
||||
import { useState, useEffect } from 'react';
|
||||
import Logger from '../../Logger';
|
||||
|
||||
const { log: loaderLog } = Logger([ 'CategoryList', 'Loader' ]);
|
||||
|
||||
export default function CategoryList() {
|
||||
const [ categoryList, setCategoryList ] = useState();
|
||||
|
@ -13,11 +16,13 @@ export default function CategoryList() {
|
|||
const dispatch = useDispatch();
|
||||
|
||||
useEffect(() => {
|
||||
loaderLog('Loading CategoryList...');
|
||||
APIRequest.authenticated('/api/v1/content/category/list?count=50')
|
||||
.then(({ isOK, json }) => {
|
||||
if (!isOK) return setError(true);
|
||||
setCategoryList(json.categories || []);
|
||||
|
||||
loaderLog('Got category list from server, dispatching...');
|
||||
setCategoryList(json.categories || []);
|
||||
dispatch({ type: 'categories/updatecategorylist', categories: json.categories });
|
||||
})
|
||||
.catch(() => {
|
||||
|
|
|
@ -4,7 +4,7 @@ export default function UserProfileLink({ user, size }) {
|
|||
let picture;
|
||||
|
||||
if (!size) size = 32;
|
||||
|
||||
if (size !== 0) {
|
||||
// TODO: Make a debug error message for then the size does not exist
|
||||
const pictureClass = `profile-picture profile-picture-${size}`;
|
||||
|
||||
|
@ -14,6 +14,9 @@ export default function UserProfileLink({ user, size }) {
|
|||
} else {
|
||||
picture = <img className={ pictureClass } src={ defaultProfile } alt="Profile"></img>
|
||||
}
|
||||
} else {
|
||||
picture = null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="profile-link">
|
||||
|
|
|
@ -1,5 +1,10 @@
|
|||
import io from 'socket.io-client';
|
||||
|
||||
import Logger from '../Logger';
|
||||
|
||||
const { log: gatewayLog } = Logger([ 'Gateway' ]);
|
||||
const { log: gatewayHandshakeLog } = Logger([ 'Gateway', 'Handshake' ]);
|
||||
|
||||
class GatewayConnection {
|
||||
constructor(url="") {
|
||||
this.isConnected = false;
|
||||
|
@ -19,7 +24,7 @@ GatewayConnection.prototype.disconnect = function() {
|
|||
};
|
||||
|
||||
GatewayConnection.prototype.connect = function(token) {
|
||||
console.log('[*] [gateway] [handshake] Trying to connect to gateway');
|
||||
gatewayHandshakeLog('Trying to connect to gateway');
|
||||
this.socket = io(`${this.url}/gateway`, {
|
||||
query: {
|
||||
token
|
||||
|
@ -29,29 +34,29 @@ GatewayConnection.prototype.connect = function(token) {
|
|||
|
||||
this.socket.on('connect', () => {
|
||||
this.socket.once('hello', (debugInfo) => {
|
||||
console.log('[*] [gateway] [handshake] Got hello from server, sending yoo...', debugInfo);
|
||||
gatewayHandshakeLog('Got hello from server, sending yoo...', debugInfo);
|
||||
this.socket.emit('yoo');
|
||||
this.isConnected = true;
|
||||
this.debugInfo = debugInfo;
|
||||
this.onConnect('CONNECT_RECEIVED_HELLO');
|
||||
console.log('[*] [gateway] [handshake] Assuming that server received yoo and that connection is completed.');
|
||||
gatewayHandshakeLog('Assuming that server received yoo and that connection is completed.');
|
||||
});
|
||||
})
|
||||
|
||||
this.socket.on('error', (e) => {
|
||||
console.log('[E] [gateway] Gateway error', e);
|
||||
gatewayLog('Gateway error', e);
|
||||
this.isConnected = false;
|
||||
this.socket = null;
|
||||
this.onDisconnect('DISCONNECT_ERR', e);
|
||||
});
|
||||
this.socket.on('disconnectNotification', (e) => {
|
||||
console.log('[E] [gateway] Received disconnect notfication', e);
|
||||
gatewayLog('Received disconnect notfication', e);
|
||||
this.isConnected = false;
|
||||
this.socket = null;
|
||||
this.onDisconnect('DISCONNECT_NOTIF', e);
|
||||
});
|
||||
this.socket.on('disconnect', (e) => {
|
||||
console.log('[E] [gateway] Disconnected from gateway: ', e);
|
||||
gatewayLog('Disconnected from gateway: ', e);
|
||||
this.isConnected = false;
|
||||
this.onDisconnect('DISCONNECT', e);
|
||||
});
|
||||
|
@ -74,7 +79,7 @@ GatewayConnection.prototype.subscribeToCategoryChat = function(categoryId) {
|
|||
|
||||
const request = [categoryId];
|
||||
|
||||
console.log('[*] [gateway] Subscribing to channel(s)', request);
|
||||
gatewayLog('Subscribing to channel(s)', request);
|
||||
|
||||
this.socket.emit('subscribe', request);
|
||||
};
|
||||
|
|
|
@ -9,6 +9,9 @@ globalGatewayConnection.onConnect = function() {
|
|||
globalGatewayConnection.socket.on('message', (message) => {
|
||||
store.dispatch({ type: 'messagestore/addmessage', message });
|
||||
});
|
||||
globalGatewayConnection.socket.on('clientListUpdate', (userList) => {
|
||||
store.dispatch({ type: 'presence/category/clientlistupdate', userList });
|
||||
});
|
||||
};
|
||||
globalGatewayConnection.onDisconnect = function() {
|
||||
store.dispatch({ type: 'gateway/connectionstatus', gateway: { isConnected: false } });
|
||||
|
|
|
@ -1,35 +1,45 @@
|
|||
function loggerOfType(components, type='log') {
|
||||
return (...args) => {
|
||||
let str = '';
|
||||
for (const v of components) {
|
||||
const loggerOfType = (components, type='log') => (...args) => {
|
||||
let str = '%c';
|
||||
const style = 'color: #5e81ac; font-weight: bold;';
|
||||
for (const i in components) {
|
||||
const v = components[i];
|
||||
if (components[i+1] === undefined) {
|
||||
str += `[${v}]`;
|
||||
} else {
|
||||
str += `[${v}] `;
|
||||
}
|
||||
}
|
||||
//str += '%c';
|
||||
switch (type) {
|
||||
case 'log': {
|
||||
console.log(str, ...args);
|
||||
console.log(str, style, ...args);
|
||||
break;
|
||||
}
|
||||
|
||||
case 'error': {
|
||||
console.error(str, ...args);
|
||||
console.error(str, style, ...args);
|
||||
break;
|
||||
}
|
||||
|
||||
case 'warn': {
|
||||
console.warn(str, ...args);
|
||||
console.warn(str, style, ...args);
|
||||
break;
|
||||
}
|
||||
|
||||
case 'genmsg': {
|
||||
return str;
|
||||
}
|
||||
}
|
||||
|
||||
default: {
|
||||
return str;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default function Logger(components, types=['warn', 'error', 'log']) {
|
||||
const loggerObj = {};
|
||||
|
||||
for (type of types) {
|
||||
for (const type of types) {
|
||||
loggerObj[type] = loggerOfType(components, type);
|
||||
}
|
||||
|
||||
|
|
|
@ -22,8 +22,11 @@
|
|||
--button-hover-color: var(--accent-color-light);
|
||||
|
||||
--default-transition-duration: 200ms;
|
||||
|
||||
--default-border-radius: 0px;
|
||||
--default-button-border-radius: 0px;
|
||||
--category-message-border-radius: 0px;
|
||||
--bar-cards-border-radius: 0px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
|
@ -77,7 +80,7 @@ body {
|
|||
min-height: 50px;
|
||||
padding: 5px;
|
||||
|
||||
border-radius: var(--default-button-border-radius) var(--default-button-border-radius) 0px 0px;
|
||||
border-radius: var(--bar-cards-border-radius);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
|
@ -93,7 +96,7 @@ body {
|
|||
|
||||
min-height: 40px;
|
||||
|
||||
border-radius: 0px 0px var(--default-button-border-radius) var(--default-button-border-radius);
|
||||
border-radius: var(--bar-cards-border-radius);
|
||||
display: flex;
|
||||
|
||||
z-index: 100;
|
||||
|
@ -209,11 +212,12 @@ body {
|
|||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
padding: 5px;
|
||||
border-radius: var(--category-message-border-radius);
|
||||
background-color: var(--category-message-color);
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue