Skip to content

Commit

Permalink
rewrote entire frontend
Browse files Browse the repository at this point in the history
  • Loading branch information
W-Christoph committed Apr 16, 2023
1 parent bc21fbb commit 2bd8c05
Show file tree
Hide file tree
Showing 59 changed files with 3,721 additions and 3,824 deletions.
23 changes: 0 additions & 23 deletions coturn/run.sh

This file was deleted.

2 changes: 0 additions & 2 deletions cozycast-server/build.sh

This file was deleted.

13 changes: 13 additions & 0 deletions cozycast-server/npm-website/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions cozycast-server/npm-website/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"clean": "rm -rf build"
},
"dependencies": {
"@preact/signals": "^1.1.3",
"copyfiles": "^2.4.1",
"cropperjs": "^1.5.12",
"esbuild": "^0.15.4",
Expand Down
37 changes: 22 additions & 15 deletions cozycast-server/npm-website/src/config/build.js
Original file line number Diff line number Diff line change
@@ -1,20 +1,27 @@
#!/usr/bin/env node

const esbuild = require('esbuild');
const alias = require('esbuild-plugin-alias');
const path = require('path');
const isDevelopment = process.env.NODE_ENV === 'development';

require('esbuild').build({
entryPoints: ['./src/private/js/index.js'],
bundle: true,
minify: true,
outfile: 'build/js/cozy.js',
loader: { '.js': 'jsx' },
jsxFactory: 'h',
jsxFragment: 'Fragment',
logLevel: "info",
plugins: [
alias({
"react": require.resolve("preact/compat"),
"react-dom": require.resolve("preact/compat")
}),
],
esbuild.build({
entryPoints: ['./src/private/js/index.js'],
bundle: true,
minify: !isDevelopment,
sourcemap: isDevelopment ? 'inline' : false,
outfile: 'build/js/cozy.js',
loader: { '.js': 'jsx' },
jsxFactory: 'h',
jsxFragment: 'Fragment',
logLevel: "info",
plugins: [
alias({
"react": require.resolve("preact/compat"),
"react-dom": require.resolve("preact/compat")
}),
],
define: {
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
},
}).catch(err => process.exit(1));
28 changes: 14 additions & 14 deletions cozycast-server/npm-website/src/private/js/Access.js
Original file line number Diff line number Diff line change
@@ -1,36 +1,36 @@
import { Component, render, h } from 'preact'
import { h } from 'preact'
import { route } from 'preact-router'
import { DefaultButton } from './DefaultButton.js';
import { InfoScreen } from './InfoScreen.js';
import { useEffect, useState } from 'preact/hooks';

export class Access extends Component {
export const Access = ({ code }) => {

state = {
const [state, setState] = useState({
message: "checking Acess",
submessage: "please wait",
}
})

componentWillMount() {
fetch('/api/invite/access/' + this.props.code).then((e) => {
useEffect(() => {
fetch('/api/invite/access/' + code).then((e) => {
if (e.status != 200)
this.setState({ message: "Error", submessage: "Invalid access link" })
setState({ message: "Error", submessage: "Invalid access link" })
else {
e.json().then((e) => {
route(`/room/${e.name}?access=${this.props.code}`, false)
route(`/room/${e.name}?access=${code}`, false)
}
)

}
})
}
}, [])

render({ code }, { state }) {
return <InfoScreen message={this.state.message} submessage={this.state.submessage}>
return (
<InfoScreen message={state.message} submessage={state.submessage}>
<div class="inviteButtonContainer">
<DefaultButton enabled={true} onclick={e => route("/", false)}>
exit
</DefaultButton>
</div>
</InfoScreen>;
}
</InfoScreen>
);
}
168 changes: 81 additions & 87 deletions cozycast-server/npm-website/src/private/js/Accounts.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,17 @@
import { h, Component, Fragment } from 'preact'
import { h, Fragment } from 'preact'
import { authFetch, TokenStatus } from './Authentication.js'
import { DefaultButton } from './DefaultButton.js';
import { useContext, useEffect, useState } from 'preact/hooks';
import { AppStateContext } from './appstate/AppStateContext.js';

export class Accounts extends Component {
export const Accounts = () => {
const {profile} = useContext(AppStateContext)
const [accounts, setAccount] = useState([]);
useEffect(() => {
refresh();
}, [])

constructor(props) {
super(props);
this.state = {
accounts: []
}
}

componentDidMount() {
this.refresh();
}

refresh() {
const refresh = () => {
authFetch('/api/profile/all').then((e) => {
switch (e) {
case TokenStatus.NO_TOKEN:
Expand All @@ -24,20 +20,20 @@ export class Accounts extends Component {
break;
default:
e.json().then((e) => {
console.log(e);
this.setState((state) => ({ accounts: e }));
console.log('Fetched accounts',e);
setAccount(e);
});
}
});
}

deleteUser(username) {
if(confirm("Are you sure you want to delete " + username)){
authFetch(`/api/profile/${username}`, { method: "DELETE" }).then(e => this.refresh())
const deleteUser = (username) => {
if (confirm("Are you sure you want to delete " + username)) {
authFetch(`/api/profile/${username}`, { method: "DELETE" }).then(e => refresh())
}
}

updateUser(username, admin, verified) {
const updateUser = (username, admin, verified) => {
authFetch(`/api/profile/${username}`, {
method: "POST",
headers: {
Expand All @@ -47,74 +43,72 @@ export class Accounts extends Component {
admin: admin,
verified: verified
})
}).then(e => this.refresh())
}).then(e => refresh())
}

render({ profile }, state) {
return (
<div class="default-list-background">
<table class="default-list">
<tr>
<th>Avatar</th>
<th>Username</th>
<th>Nickname</th>
<th>Color</th>
<th class="default-list-table-center">Verified</th>
<th class="default-list-table-center">Admin</th>
<th class="default-list-table-center">Delete</th>
</tr>
<tbody>
{state.accounts.map((account) => (
<tr class="default-list-element">
<td class="default-list-avatar-container-header">
<img src={account.avatarUrl} class="default-list-avatar-image-header"></img>
</td>
<td class="default-list-name">{account.username}</td>
<td class="default-list-nickname">{account.nickname}</td>
<td class="default-list-color">
<span style={{ backgroundColor: account.nameColor, width: '10px', height: '10px', display: 'inline-block', marginRight: '5px', borderRadius: '2px' }}></span>
{account.nameColor}
</td>
return (
<div class="default-list-background">
<table class="default-list">
<tr>
<th>Avatar</th>
<th>Username</th>
<th>Nickname</th>
<th>Color</th>
<th class="default-list-table-center">Verified</th>
<th class="default-list-table-center">Admin</th>
<th class="default-list-table-center">Delete</th>
</tr>
<tbody>
{accounts.map((account) => (
<tr class="default-list-element">
<td class="default-list-avatar-container-header">
<img src={account.avatarUrl} class="default-list-avatar-image-header"></img>
</td>
<td class="default-list-name">{account.username}</td>
<td class="default-list-nickname">{account.nickname}</td>
<td class="default-list-color">
<span style={{ backgroundColor: account.nameColor, width: '10px', height: '10px', display: 'inline-block', marginRight: '5px', borderRadius: '2px' }}></span>
{account.nameColor}
</td>

<td class="default-list-table-center">
<DefaultButton
enabled={account.verified}
onclick={() => this.updateUser(account.username, account.admin, !account.verified)}
>
{account.verified ? 'verified' : 'Not verified'}
</DefaultButton>
</td>
{profile.username != account.username && (
<Fragment>
<td class="default-list-table-center">
<DefaultButton
enabled={account.admin}
onclick={() => this.updateUser(account.username, !account.admin, account.verified)}
>
{account.admin ? 'Remove Admin' : 'Make Admin'}
</DefaultButton>
</td>
<td class="default-list-table-center">
<DefaultButton
enabled={!account.admin}
onclick={() => this.deleteUser(account.username)}
>
{account.admin ? "Disabled" : 'Delete'}
</DefaultButton>
</td>
</Fragment>
)}
{profile.username == account.username && (
<Fragment>
<td class="default-list-table-center">(you)</td>
<td class="default-list-table-center">(you)</td>
</Fragment>
)}
</tr>
))}
</tbody>
</table>
</div>
);
}
<td class="default-list-table-center">
<DefaultButton
enabled={account.verified}
onclick={() => updateUser(account.username, account.admin, !account.verified)}
>
{account.verified ? 'verified' : 'Not verified'}
</DefaultButton>
</td>
{profile.username != account.username && (
<Fragment>
<td class="default-list-table-center">
<DefaultButton
enabled={account.admin}
onclick={() => updateUser(account.username, !account.admin, account.verified)}
>
{account.admin ? 'Remove Admin' : 'Make Admin'}
</DefaultButton>
</td>
<td class="default-list-table-center">
<DefaultButton
enabled={!account.admin}
onclick={() => deleteUser(account.username)}
>
{account.admin ? "Disabled" : 'Delete'}
</DefaultButton>
</td>
</Fragment>
)}
{profile.username == account.username && (
<Fragment>
<td class="default-list-table-center">(you)</td>
<td class="default-list-table-center">(you)</td>
</Fragment>
)}
</tr>
))}
</tbody>
</table>
</div>
);
}
Loading

0 comments on commit 2bd8c05

Please sign in to comment.