The_Great_Archive/RSNewWebUI
1
0
Fork 0
mirror of https://github.com/RetroShare/RSNewWebUI.git synced 2026-09-14 11:05:47 +05:00
Code Issues Packages Projects Releases Wiki Activity

feat: improved home page

Browse Source
This commit is contained in:
zelfroster 2023-06-15 21:28:51 +05:30
parent 0d69e44786
commit e5ef6529c7
7 changed files with 254 additions and 235 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

303
webui-src/app/home.js
View File

@ -2,45 +2,18 @@ const m = require('mithril');
const rs = require('rswebui');
const widget = require('widgets');
const retrosemitext = () => {
return {
view() {
return m(
'.retrotext',
{
style: 'font-weight:500;font-size:2.4rem',
},
[
m(
'span',
{
style: 'color: #3ba4d7',
},
'RETRO'
),
'SHARE',
]
);
},
};
};
const retroshareText = () => {
return {
view() {
return m('.retroshareText', [m(retrosemitext), m('b', 'secure connection for everyone')]);
},
};
};
const logo = () => {
return {
view() {
return m('.logo', [
m('img.logo[width=20%][height=10%]', {
m('img', {
src: '../data/retroshare.svg',
alt: 'retroshare_icon',
}),
m(retroshareText),
m('.retroshareText', [
m('.retrotext', [m('span', 'RETRO'), 'SHARE']),
m('b', 'secure communication for everyone'),
]),
]);
},
};
@ -77,23 +50,18 @@ const webhelp = () => {
widget.popupMessage(m(webhelpConfirm));
},
},
[
m('i.fas .fa-globe-europe', { style: 'color:green' }),
m('p', { style: 'border-width:1px' }, 'Open Web Help'),
]
[m('i.fas.fa-globe-europe'), m('p', 'Open Web Help')]
);
},
};
};
const ConfirmCopied = () => {
return {
view: () => [
m('h3', 'Copied to Clipboard'),
m('hr'),
m(
'p[style="margin: 12px 0 4px"]',
'Your Retroshare ID has been copied to Clipboard.'
),
m('p[style="margin: 12px 0 4px"]', 'Your Retroshare ID has been copied to Clipboard.'),
m(
'p[style="margin: 4px 0 12px"]',
'Now, you can paste and send it to your friend via email or some other way.'
@ -107,17 +75,8 @@ const retroshareId = () => {
return {
view(v) {
return m('.retroshareID', [
m('i.fas .fa-copy', {
style: 'color: #3ba4d7; margin-right: 3px; cursor: pointer',
onclick: () => {
document.getElementById('retroId').select();
document.execCommand('copy');
widget.popupMessage(m(ConfirmCopied));
},
}),
m(
'textarea[readonly] .textArea',
'textarea[readonly].textArea',
{
id: 'retroId',
rows: 1,
@ -129,78 +88,14 @@ const retroshareId = () => {
},
v.attrs.ownCert.substring(31)
),
m('i.fas .fa-share-alt', { style: 'color: #3ba4d7' }),
]);
},
};
};
const Certificate = () => {
let ownCert = '';
function loadOwnCert() {
rs.rsJsonApiRequest(
'/rsPeers/GetShortInvite',
{ formatRadix: true },
(data) => (ownCert = data.invite)
);
}
return {
oninit() {
// Load long cert by default
loadOwnCert();
},
view() {
return m('.certificate ', [
m(logo),
m(
'p',
{
style: 'margin-top:25px;font-size:1.1rem;font-weight:500;',
m('i.fas.fa-copy', {
onclick: () => {
document.getElementById('retroId').select();
document.execCommand('copy');
widget.popupMessage(m(ConfirmCopied));
},
'Open Source cross-platform,'
),
m(
'p',
{
style: 'margin:0;padding:0; margin-top:5px;font-size:1.1rem;',
},
'private and secure decentralized communication platform'
),
m(
'p',
{
style: 'margin-top:80px;color: #3ba4d7;font-size:1.1rem;font-weight:600;',
},
'This is your Retroshare ID. Copy and share with your friends!'
),
m(retroshareId, { ownCert }),
m(
'p',
{
style: 'margin-bottom:5px;margin-top:40px;font-size:1.1rem',
},
'Did you receive a Retroshare ID from your friend ?'
),
m(
'button',
{
onclick: () => {
widget.popupMessage(m(AddFriend));
},
},
'Add Friend'
),
m(
'p',
{
style: 'margin-bottom:5px;margin-top:40px;font-size:1.1rem',
},
'Do you need help with Retoshare ?'
),
m(webhelp),
}),
m('i.fas.fa-share-alt'),
]);
},
};
@ -224,52 +119,52 @@ function confirmAddPrompt(details, cert, long) {
long
? m(
'button',
{
onclick: async () => {
const res = await rs.rsJsonApiRequest('/rsPeers/loadCertificateFromString', { cert });
if (res.body.retval) {
widget.popupMessage([
m('h3', 'Successful'),
m('hr'),
m('p', 'Successfully added friend.'),
]);
} else {
widget.popupMessage([
m('h3', 'Error'),
m('hr'),
m('p', 'An error occoured during adding. Friend not added.'),
]);
}
'button',
{
onclick: async () => {
const res = await rs.rsJsonApiRequest('/rsPeers/loadCertificateFromString', { cert });
if (res.body.retval) {
widget.popupMessage([
m('h3', 'Successful'),
m('hr'),
m('p', 'Successfully added friend.'),
]);
} else {
widget.popupMessage([
m('h3', 'Error'),
m('hr'),
m('p', 'An error occoured during adding. Friend not added.'),
]);
}
},
},
},
'Finish'
)
'Finish'
)
: m(
'button',
{
onclick: async () => {
const res = await rs.rsJsonApiRequest('/rsPeers/addSslOnlyFriend', {
sslId: details.id,
pgpId: details.gpg_id,
});
if (res.body.retval) {
widget.popupMessage([
m('h3', 'Successful'),
m('hr'),
m('p', 'Successfully added friend.'),
]);
} else {
widget.popupMessage([
m('h3', 'Error'),
m('hr'),
m('p', 'An error occoured during adding. Friend not added.'),
]);
}
'button',
{
onclick: async () => {
const res = await rs.rsJsonApiRequest('/rsPeers/addSslOnlyFriend', {
sslId: details.id,
pgpId: details.gpg_id,
});
if (res.body.retval) {
widget.popupMessage([
m('h3', 'Successful'),
m('hr'),
m('p', 'Successfully added friend.'),
]);
} else {
widget.popupMessage([
m('h3', 'Error'),
m('hr'),
m('p', 'An error occoured during adding. Friend not added.'),
]);
}
},
},
},
'Finish'
),
'Finish'
),
]);
}
@ -311,10 +206,7 @@ const AddFriend = () => {
view: (vnode) =>
m('.widget', [
m('h3', 'Add friend'),
m(
'p',
'Did you recieve a certificate from a friend?'
),
m('h5', 'Did you recieve a certificate from a friend?'),
m('hr'),
m(
'.cert-drop-zone',
@ -324,11 +216,7 @@ const AddFriend = () => {
ondragexit: () => (vnode.state.isDragged = false),
// Styling element when file is dragged
style: vnode.state.isDragged
? {
border: '5px solid #3ba4d7',
}
: {},
style: { border: vnode.state.isDragged && '5px solid #3ba4d7' },
ondragover: (e) => e.preventDefault(),
ondrop: (e) => {
@ -339,7 +227,10 @@ const AddFriend = () => {
},
[
m('p[style="margin: 16px 0 4px; font-size: 12px;"]', 'You can directly upload or Drag and drop the file below'),
m(
'p[style="margin: 16px 0 4px"]',
'You can directly upload or Drag and drop the file below'
),
m('input[type=file][name=certificate]', {
onchange: (e) => {
// Note: this one is for the 'browse' button
@ -347,10 +238,13 @@ const AddFriend = () => {
},
}),
m('p[style="width: 100%; text-align: center; margin: 5px 0;"]', 'OR'),
m('textarea[rows=5][placeholder="Paste the certificate here"][style="width: 100%; display: block; resize: vertical;"]', {
oninput: (e) => (certificate = e.target.value),
value: certificate,
}),
m(
'textarea[rows=5][placeholder="Paste the certificate here"][style="width: 100%; display: block; resize: vertical;"]',
{
oninput: (e) => (certificate = e.target.value),
value: certificate,
}
),
m(
'button[style="margin-top: 10px;"]',
{
@ -364,9 +258,60 @@ const AddFriend = () => {
};
};
const Certificate = () => {
let ownCert = '';
function loadOwnCert() {
rs.rsJsonApiRequest(
'/rsPeers/GetShortInvite',
{ formatRadix: true },
(data) => (ownCert = data.invite)
);
}
return {
oninit() {
// Load long cert by default
loadOwnCert();
},
view() {
return m('.homepage ', [
m(logo),
m('.certificate', [
m('.certificate__heading', [
m('h1', 'Welcome to Web Interface of Retroshare!'),
'Retroshare is an Open Source Cross-platform,',
m('br'),
'Private and Secure Decentralized Communication Platform.',
]),
m('.certificate__content', [
m('.rsId', [
m('p', 'This is your Retroshare ID. Copy and share with your friends!'),
m(retroshareId, { ownCert }),
]),
m('.add-friend', [
m('h6', 'Did you receive a Retroshare ID from your friend ?'),
m(
'button',
{
onclick: () => {
widget.popupMessage(m(AddFriend));
},
},
'Add Friend'
),
]),
m('.webhelp-container', [m('h6', 'Do you need help with Retoshare ?'), m(webhelp)]),
]),
]),
]);
},
};
};
const Layout = () => {
return {
view: () => m('.tab-page ', [m(Certificate)]),
view: () => m('.tab-page', [m(Certificate)]),
};
};

2
webui-src/app/main.js
View File

@ -51,7 +51,7 @@ const navbar = () => {
href: vnode.attrs.links[linkName],
class: 'item' + (active ? ' item-selected' : ''),
},
[navIcon[linkName], m('p[style="margin: 0; align-self: end"]', linkName)]
[navIcon[linkName], m('p', linkName)]
);
}),
m(

5
webui-src/app/scss/base/_base.scss
View File

@ -16,11 +16,12 @@ General site-wide rules
#tab-content {
height: 100%;
background-color: #eef3f6;
overflow: auto;
}
/* Individual tab pages */
.tab-page {
animation: fadein 0.5s;
height: 100%;
animation: fadein 0.3s;
overflow: auto;
}
input[type='text'],

2
webui-src/app/scss/base/_reset.scss
View File

@ -16,6 +16,8 @@ h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,

9
webui-src/app/scss/components/_navbar.scss
View File

@ -1,4 +1,4 @@
@use '../abstracts/' as *;
@use '../abstracts/colors' as *;
/* Navbar */
.nav-menu {
@ -25,8 +25,8 @@
h4 {
font-size: 1.3rem;
line-height: 1;
color: white;
align-self: end;
}
}
@ -42,6 +42,7 @@
display: flex;
align-items: center;
overflow: hidden;
line-height: 1;
&:hover {
background-color: transparentize($light-color, 0.85);
@ -104,10 +105,8 @@ a.item {
text-decoration: none;
color: #ccc;
font-size: 0.875em;
/* CSS capitalization is magical! */
text-transform: capitalize;
transition: all 300ms;
/* To vertically stack child nodes */
transition: 300ms;
display: inline-flex;
flex-direction: row;
}

166
webui-src/app/scss/pages/_home.scss
View File

@ -1,52 +1,124 @@
.certificate {
margin: auto;
@use '../abstracts/colors' as *;
.homepage {
display: flex;
align-items: flex-start;
flex-direction: column;
align-items: center;
gap: 4rem;
margin-top: 20px;
}
.textArea {
box-sizing: none;
background: transparent;
font-size: 1.1rem;
border-radius: 5px;
border: none;
resize: none;
}
.logo {
display: flex;
max-width: 500px;
justify-content: center;
align-items: center;
}
.retroshareText > h3 {
margin-right: 3px;
}
.webhelp {
background: whitesmoke;
font-size: 0.8rem;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
color: black;
border-radius: 5px;
border: 1px solid black;
padding: 10px 14px;
cursor: pointer;
}
.webhelp > i {
font-size: 1.2rem;
}
.webhelp > p {
font-weight: 600;
}
.retroshareID {
display: flex;
justify-self: start;
align-items: center;
font-size: 1.2rem;
font-family: monospace;
.logo {
display: flex;
justify-content: center;
align-items: center;
& img {
width: 90px;
}
.retroshareText {
display: flex;
flex-direction: column;
align-items: center;
& .retrotext {
font-size: 36px;
line-height: 1.125;
font-weight: 500;
& > span {
color: $primary-retro-color;
}
}
& > b {
font-size: 14px;
line-height: 1;
}
}
}
.certificate {
display: flex;
flex-direction: column;
gap: 4rem;
&__heading {
text-align: center;
& > h1 {
margin-bottom: 1rem;
}
}
&__content {
display: flex;
flex-direction: column;
gap: 2rem;
padding: 2rem;
text-align: center;
border: 1.5px solid transparentize($primary-retro-color, 0.8);
border-radius: 4px;
box-shadow: 0px 0px 8px 2px transparentize($dark-color, 0.95);
.rsId > p {
margin-bottom: 0.5rem;
color: $primary-retro-color;
}
.retroshareID {
padding: 0.5rem;
display: flex;
justify-self: start;
align-items: center;
font-size: 1.2rem;
border-radius: 4px;
background: transparentize($dark-color, 0.95);
& .textArea {
padding: 0;
font-size: 1rem;
font-family: monospace;
box-sizing: none;
background: transparent;
font-size: 1.1rem;
border-radius: 5px;
border: none;
resize: none;
}
& i {
color: $primary-retro-color;
}
& > i {
margin: 0 0.5rem;
cursor: pointer;
}
}
.webhelp {
&-container {
display: grid;
place-items: center;
}
background: whitesmoke;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
border-radius: 5px;
border: 1px solid transparentize($dark-color, 0.5);
padding: 0.5rem;
width: fit-content;
cursor: pointer;
&:hover {
background: $light-color;
border: 1px solid $dark-color;
}
& > i {
font-size: 1.2rem;
color: green;
}
}
.add-friend > h6,
.webhelp-container > h6 {
font-weight: normal;
margin-bottom: 0.5rem;
}
}
}
}

2
webui-src/styles/app.css
View File

File diff suppressed because one or more lines are too long