Merge pull request #85 from zelfroster/fix-build

Change webui directory structure and update build scripts
This commit is contained in:
csoler 2023-08-25 20:42:55 +02:00 committed by GitHub
commit 2be249d018
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 65 additions and 356 deletions

View File

@ -1,113 +0,0 @@
Required info
=============
- compilation of RS:
* compile RS with JSon api
$ qmake CONFIG="debug rs_jsonapi"
$ make
Make sure JSon API is activated in preferences->JSon API.
* to update after adding new API functions,
$ \rm jsonapi_generator/src/*inl
$ make
- test RS API with curl:
* register a login:passwd token preferences
$ curl --verbose -u login:passwd -H "Content-Type: application/json" http://127.0.0.1:9092/rsPeers/GetRetroshareInvite
* Trying 127.0.0.1...
* Connected to 127.0.0.1 (127.0.0.1) port 9092 (#0)
[...]
> Authorization: Basic bG9naW46cGFzc3dkCg==
[...]
< Content-Type: text/json
<
{
"retval": "CQEGAcGcxsBNBFNSZ4sBCAC7RIqGLdM+S [...]
}
- Existing code base:
* New WebUI: https://github/com/csoler/RSNewWebUI
This is a prototype for the new web interface, that uses the JSon API. It is extremely preliminary but already solves a few problems including
the communication with RS Json api. It is the starting point for this project or at least a working example.
Compile using qmake only:
$ qmake
Then open it with
$ firefox webui/index.html
See tests/basic_RS_communication_test.html:
* uses authentication with a hard-coded user+passwd in order to retrieve data. Make sure the login/passwd that is used is actually registered in RS.
The example should show a "chat server" page with a proper certificate of a RS node in the bottom field.
* old WebUI, also based on mithril is in retroshare main repository: libresapi/src/webui-src/app.
Other sources of information:
* JSon API documentation: https://github.com/RetroShare/RetroShare/tree/master/jsonapi-generator
TODO List
=========
By order of priority:
================+==========+===========+===========================================================================================================+
Section | ID | Status | What |
================+==========+===========+===========================================================================================================+
Preliminary | 001 | Done | Create a standalone working mithril example not talking to RS, for testing authenticated requests. |
| 002 | Done | Modify 001 it so that it prints some information that is from RS |
----------------+----------+-----------+-----------------------------------------------------------------------------------------------------------+
WebUI General | 101 | Done | Create a login page that asks for login+passwd to be used in the JSonAPI requests |
| 102 | Done | Create "tab" system to allow different sections of the webUI to be displayed (See previous WebUI) |
----------------+----------+-----------+-----------------------------------------------------------------------------------------------------------+
WebUI RS side | 201 | | Update/copy the old WebUI page so that it allows to activate/desactivate the new WebUI |
| | | |
----------------+----------+-----------+-----------------------------------------------------------------------------------------------------------+
Config | 301 | | Create a Config panel with multiple frames to handle as many configuration options as possible |
| 302 | | Config frame for show node information |
| 303 | | Config frame for network settings (Net mode, NAT, DL limits, ports) |
| 304 | | Config frame for reputations in People |
| 305 | | Config frame for Files: all options (except edit share) |
----------------+----------+-----------+-----------------------------------------------------------------------------------------------------------+
Downloads | 401 | | Make downloads update automatically every second when visible |
| 402 | | Show more accurate information about file transfers: which chunks are already there, etc. |
----------------+----------+-----------+-----------------------------------------------------------------------------------------------------------+
Appearance | 501 | | Modify the css style to get something more professional |
| | | |
----------------+----------+-----------+-----------------------------------------------------------------------------------------------------------+
Files | 601 | | Show hierarchy of shared files |
| 602 | | Allow to edit file shares (which directory with which permission) |
| 603 | | Display current hashing status (requires auto-update) |
| 604 | | Allow to edit groups of friend nodes to manage file view permissions |
----------------+----------+-----------+-----------------------------------------------------------------------------------------------------------+
On merge | 701 | | Disable libresapi, remove old WebUI page |
----------------+----------+-----------+-----------------------------------------------------------------------------------------------------------+
Release | 801 | | Make sure the installer still works with the new WebUI. Test for windows, debian, MacOS |
----------------+----------+-----------+-----------------------------------------------------------------------------------------------------------+
Explanations
101 - The page should test the validity of the passwd by requesting some authenticated info and then switch to normal webUI when
authentication is a success. We may create a special API handler for that in RS if it is not possible to test authentication success.
On RS side, the WebUI page should allow to set a login/passwd to access the WebUI and register that login/passwd into JSonAPI module when
changed/updated.
102 - The old WebUI has such a nice tab system. It's just a matter of adapting it. Do not keep the existing "Login" tab (that handled RS login,
not WebUI authentication) as RS login is handled when launching the software in both GUI and NO-GUI configurations.
401 - Previous WebUI used to do this, so it's possible. See the previous code and adapt it to the new WebUI.
402 - This is mainy a graphical problem: obtain chunk info from rsFiles->FileChunkInfo() and display them with colors.
501 - The current green look of the WebUI is terrible. Aim for something more professional. Take inspiration from e.g transmission-gtk's WebUI
Add a nice background, more compact widgets, better colors, etc.

12
TODO.md
View File

@ -1,12 +0,0 @@
#### Next Steps
- [ ] Private Chat
- [ ] Distant Chat
- [ ] Send Message (Mails)
- [ ] Chats
- [X] send Messages
#### Later:
- [ ] Channels
- [ ] Boards
- [ ] Forums

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

View File

@ -1,73 +0,0 @@
<!DOCTYPE html>
<head>
<title>Retroshare Web Interface</title>
<script type="text/javascript">
var rsJsonApiUrl = "http://127.0.0.1:9092"
function rsJsonApiRequest(path, data, callback)
{
console.log("rsJsonApiRequest(path, data, callback)", path, data, callback)
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function()
{
if(xhr.readyState === 4)
{
console.log( path, "callback", xhr.status, xhr.responseText.replace(/\s+/g, " ").
substr(0, 60).replace(/\r?\n|\r/g," ") )
if(typeof(callback) === "function") callback(xhr.responseText);
}
}
xhr.open('POST', rsJsonApiUrl + path, true);
xhr.setRequestHeader("Accept", "application/json");
xhr.setRequestHeader("Authorization", "Basic "+btoa("cyril"+":"+"proutprout233"));
xhr.send(data);
}
</script>
</head>
<body>
<h2>
Retroshare Web Interface
</h2>
<p>
This node can help you to connect and find friends within the network.
</p>
<div>
<h3>
Enter your certificate into the following box and press the submit button.
</h3>
<textarea rows="30" cols="64" placeholder="Paste your certificate here"
id="certificate" maxlength="10000"></textarea>
<script type="text/javascript">
function clearCert()
{
document.getElementById("certificate").value = ""
}
function submitCert()
{
var jsonCert = { invite: document.getElementById("certificate").value }
rsJsonApiRequest("/rsPeers/acceptInvite", JSON.stringify(jsonCert), clearCert)
}
</script>
<button onclick="submitCert()">Submit</button>
</div>
<div>
<h3>
Copy micheleangiolillo certificate's from the following box and paste
it in your node <b>Add friends certificate</b> box.
</h3>
<textarea rows="30" cols="64"
placeholder="Copy micheleangiolillo certificate from here"
id="node_certificate" maxlength="10000">
</textarea>
<script type="text/javascript">
function setNodeCertificate(p)
{
var jsonData = JSON.parse(p)
document.getElementById("node_certificate").value = jsonData.retval
}
rsJsonApiRequest("/rsPeers/GetRetroshareInvite", "", setNodeCertificate)
</script>
</div>
</body>

View File

@ -7,7 +7,7 @@ const logo = () => {
view() {
return m('.logo', [
m('img', {
src: '../data/retroshare.svg',
src: 'images/retroshare.svg',
alt: 'retroshare_icon',
}),
m('.retroshareText', [

View File

@ -39,7 +39,7 @@ function loginComponent() {
let withOptions = false;
const logo = () =>
m('img.logo[width=30%]', { src: '../data/retroshare.svg', alt: 'retroshare_icon' });
m('img.logo[width=30%]', { src: 'images/retroshare.svg', alt: 'retroshare_icon' });
const inputName = () =>
m('input', {

View File

@ -37,7 +37,7 @@ const navbar = () => {
[
m('.nav-menu__logo', [
m('img', {
src: '../data/retroshare.svg',
src: 'images/retroshare.svg',
alt: 'retroshare_icon',
}),
m('h5', 'Retroshare'),

View File

Before

Width:  |  Height:  |  Size: 67 KiB

After

Width:  |  Height:  |  Size: 67 KiB

View File

Before

Width:  |  Height:  |  Size: 435 B

After

Width:  |  Height:  |  Size: 435 B

View File

@ -4,8 +4,8 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>RetroShare</title>
<link rel="stylesheet" href="app.css" />
<link href="/data/retroshare.svg" rel="icon" data-n-head="true" type="image/svg" />
<link rel="stylesheet" href="styles.css" />
<link href="images/retroshare.svg" rel="icon" data-n-head="true" type="image/svg" />
<script src="app.js"></script>
</head>

View File

@ -0,0 +1,5 @@
**This folder contains files needed to create webfiles at compile-time and qmake**
* init.sh creates dummy files at qmake
* build.sh creates files at compile time
* template.js start of compiled app.js, containing additional created content

View File

@ -3,6 +3,8 @@ REM create webfiles from sources at compile time (works without npm/node.js)
setlocal enabledelayedexpansion
echo "### Starting WebUI build ###"
set src=%~dp0..\..\webui-src
rem Output destination
@ -12,9 +14,9 @@ if "%~1" == "" (
set publicdest=%~1\webui
)
if exist "%publicdest%" echo remove existing %publicdest%&&rd %publicdest% /S /Q
if exist "%publicdest%" echo removing existing %publicdest%&&rd %publicdest% /S /Q
echo mkdir %publicdest%
echo creating %publicdest%
md %publicdest%
rem Make full path
@ -22,8 +24,14 @@ pushd %publicdest%
set publicdest=%cd%
popd
echo copying html file
xcopy /s %src%\index.html %publicdest%
echo copying css file
xcopy /s %src%\styles.css %publicdest%
echo building app.js
echo - copy template.js ...
echo - copying template.js ...
copy %src%\make-src\template.js %publicdest%\app.js
pushd %src%\app
@ -31,17 +39,10 @@ set "basefolder=%cd%\"
for /R %%F in (*.js) do call :addfile-js "%basefolder%" "%%F"
popd
rem #### copy css file generated by sass ####
echo copy css folder
xcopy /s %src%\styles\ %publicdest%
echo copy assets folder
echo copying assets folder
xcopy /s %src%\assets\ %publicdest%
echo copy data folder
xcopy /s %src%\..\data %publicdest%\data\
echo build.bat complete
echo "### WebUI build complete ###"
goto :EOF
@ -59,5 +60,4 @@ type %fname% >> %publicdest%\app.js
echo. >> %publicdest%\app.js
echo }); >> %publicdest%\app.js
:EOF

View File

@ -2,6 +2,8 @@
# create webfiles from sources at compile time (works without npm/node.js)
echo "### Starting WebUI build ###"
src=$(readlink -f $(dirname $0))/../../webui-src
if [ "$1" = "" ]; then
@ -11,24 +13,33 @@ else
fi
if [ "$2" = "" ]; then
if [ -d "$publicdest" ]; then
echo remove existing $publicdest
echo removing existing $publicdest
rm $publicdest -R
fi
fi
if [ ! -d "$publicdest" ]; then
echo mkdir $publicdest
echo creating $publicdest
mkdir $publicdest
fi
# For using recursive directory search(requires bash v4+)
shopt -s globstar
if [ "$2" = "" ]||[ "$2" = "index.html" ]; then
echo copying html file
cp -r $src/index.html $publicdest/
fi
if [ "$2" = "" ]||[ "$2" = "styles.css" ]; then
echo copying css file
cp $src/styles.css $publicdest/
fi
if [ "$2" = "" ]||[ "$2" = "app.js" ]; then
echo building app.js:
echo - copy template.js ...
echo - copying template.js ...
cp $src/make-src/template.js $publicdest/app.js
js_source=$src/app/
@ -43,29 +54,15 @@ if [ "$2" = "" ]||[ "$2" = "app.js" ]; then
done
fi
if [ "$2" = "" ]||[ "$2" = "app.css" ]; then
# copy css file generated by sass
echo copy styles folder
cp $src/styles/* $publicdest/
fi
if [ "$2" = "" ]||[ "$2" = "index.html" ]; then
echo copy assets folder
cp -r $src/assets/* $publicdest/
fi
if [ "$2" = "" ]||[ "$2" = "../data" ]; then # only for development to restore data folder
echo copy data folder
mkdir $publicdest/data
cp -r $src/../data $publicdest/
fi
echo copying assets folder
cp -r $src/assets/* $publicdest/
if [ "$2" != "" ]&&[ "$3" != "" ]; then
if [ ! -d "$3/webui" ]; then
echo mkdir $3/webui
echo creating $3/webui
mkdir $3/webui
fi
echo copy $2 nach $3/webui/$2
echo copying $2 nach $3/webui/$2
cp $publicdest/$2 $3/webui/$2
fi
echo build.sh complete
echo "### WebUI build complete ###"

View File

@ -1,72 +0,0 @@
.chat {
padding: 15px; }
.chat.container {
height: 100%;
padding: 0px;
position: relative;
box-sizing: border-box; }
.chat.header {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
height: 50px;
background-color: black;
border-bottom: solid 1px gray;
box-sizing: border-box; }
.chat.left {
position: absolute;
top: 50px;
bottom: 0px;
left: 0px;
width: 200px;
box-sizing: border-box;
background-color: black; }
.chat.right {
position: absolute;
top: 50px;
right: 0px;
bottom: 0px;
width: 200px;
box-sizing: border-box; }
.chat.middle {
position: absolute;
top: 0px;
margin-top: 50px;
left: 200px;
right: 200px;
box-sizing: border-box;
padding: 0px;
height: 100%;
overflow-y: scroll; }
.chat.bottom {
position: absolute;
bottom: 0px;
right: 200px;
left: 200px;
padding: 5px; }
.chat.msg {
padding: 0px; }
.chat.msg.container {
position: relative;
border-bottom: solid 1px lightgray;
padding: 10px;
height: unset; }
.chat.msg.from {
position: absolute;
width: 100px;
top: 10px;
left: 0px;
color: white;
text-align: right; }
.chat.msg.when {
float: right;
color: lightgray;
margin-bottom: 10px; }
.chat.msg.text {
padding-left: 100px;
top: 0px;
left: 100px;
white-space: pre-wrap;
height: initial; }

View File

@ -4,12 +4,12 @@ REM create dummy webfiles at qmake run
set publicdest=%1\webui
if "%1" == "" set publicdest=..\..\webui
if exist %publicdest% echo remove %publicdest%&&rd %publicdest% /S /Q
if exist %publicdest% echo removing %publicdest%&&rd %publicdest% /S /Q
echo create %publicdest%
echo creating %publicdest%
md %publicdest%
echo create %publicdest%\app.js, %publicdest%\app.css, %publicdest%\index.html
echo creating %publicdest%\app.js, %publicdest%\styles.css, %publicdest%\index.html
echo. > %publicdest%\app.js
echo. > %publicdest%\app.css
echo. > %publicdest%\styles.css
echo. > %publicdest%\index.html

View File

@ -9,14 +9,14 @@ else
fi
if [ -d "$publicdest" ]; then
echo remove $publicdest
echo removing $publicdest
rm $publicdest -R
fi
echo create $publicdest
echo creating $publicdest
mkdir $publicdest
echo touch $publicdest/app.js, $publicdest/app.css, $publicdest/index.html
echo creating $publicdest/app.js, $publicdest/styles.css, $publicdest/index.html
touch $publicdest/app.js -d 1970-01-01
touch $publicdest/app.css -d 1970-01-01
touch $publicdest/styles.css -d 1970-01-01
touch $publicdest/index.html -d 1970-01-01

View File

@ -1,7 +0,0 @@
html, body, #main {
margin: 0;
height: 100%;
font-family: Helvetica, Arial, sans-serif;
}
#main {
}

View File

@ -1,7 +0,0 @@
this folder contains files needed to create webfiles at compile-time and qmake
* init.sh creates dummy files at qmake
* build.sh creates files at compile time
* chat.css compiled version of _chat.sass (.sass should replaced by .scss)
* main.css simple template extracted from main.sass
* template.js start of compiled app.js, containing additional created content

View File

@ -1,13 +1,11 @@
{
"name": "webui-src",
"version": "1.0.0",
"description": "",
"description": "Retroshare's Web Interface",
"scripts": {
"watch": "rm ./styles/app.css && sass --watch --embed-sources --embed-source-map ./app/scss/main.scss ./styles/app.css",
"build": "sass --no-source-map --style=compressed ./app/scss/main.scss ./styles/app.css"
"watch": "rm ./styles/app.css && sass --watch --embed-sources --embed-source-map ./app/scss/main.scss ./styles.css",
"build": "sass --no-source-map --style=compressed ./app/scss/main.scss ./styles.css"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"sass": "^1.60.0"

View File

@ -21,7 +21,7 @@ TEMPLATE = subdirs
SUBDIRS= # don't build anything
CONFIG -= qt
WEBUI_SRC_HTML += $$PWD/webui-src/assets/index.html
WEBUI_SRC_HTML = $$PWD/webui-src/index.html
WEBUI_SRC_JS = $$PWD/webui-src/app/rswebui.js
WEBUI_SRC_JS += $$PWD/webui-src/app/mithril.js
@ -29,9 +29,9 @@ WEBUI_SRC_JS += $$PWD/webui-src/app/login.js
WEBUI_SRC_JS += $$PWD/webui-src/app/main.js
WEBUI_SRC_JS += $$PWD/webui-src/app/home.js
WEBUI_SRC_CSS += $$PWD/webui-src/styles/app.css
WEBUI_SRC_CSS = $$PWD/webui-src/styles.css
WEBUI_SRC_DATA += $$PWD/data/retroshare.svg
WEBUI_SRC_IMAGE = $$PWD/data/retroshare.svg
win32-g++ {
isEmpty(QMAKE_SH) {
@ -90,28 +90,21 @@ win32-g++ {
create_webfiles_js.variable_out = JUNK
create_webfiles_js.CONFIG = combine no_link
create_webfiles_css.output = webui/app.css
create_webfiles_css.output = webui/styles.css
create_webfiles_css.input = WEBUI_SRC_CSS
create_webfiles_css.commands = sh $$_PRO_FILE_PWD_/webui-src/make-src/build.sh $$_PRO_FILE_PWD_ app.css .
create_webfiles_css.commands = sh $$_PRO_FILE_PWD_/webui-src/make-src/build.sh $$_PRO_FILE_PWD_ styles.css .
create_webfiles_css.variable_out = JUNK
create_webfiles_css.CONFIG = combine no_link
QMAKE_EXTRA_COMPILERS += create_webfiles_html create_webfiles_js create_webfiles_css
system(cp -r data webui/)
webui_css_files.path = "$${RS_DATA_DIR}/webui/css/"
webui_css_files.files = webui/css/fontawesome.css \
webui/css/solid.css
webui_base_files.path = "$${RS_DATA_DIR}/webui/"
webui_base_files.files = webui/app.css \
webui/app.js \
webui/index.html
webui_base_files.files = webui/index.html \
webui/styles.css \
webui/app.js
webui_data_files.path = "$${RS_DATA_DIR}/webui/data/"
webui_data_files.files = webui/data/retroshare.svg \
webui/data/streaming.png
webui_image_files.path = "$${RS_DATA_DIR}/webui/images/"
webui_image_files.files = webui/images/retroshare.svg
webui_font_files.path = "$${RS_DATA_DIR}/webui/webfonts/"
webui_font_files.files = webui/webfonts/fa-solid-900.eot \
@ -120,5 +113,5 @@ win32-g++ {
webui/webfonts/fa-solid-900.woff \
webui/webfonts/fa-solid-900.woff2
INSTALLS += webui_base_files webui_css_files webui_font_files webui_data_files
INSTALLS += webui_base_files webui_font_files webui_image_files
}