Git Product home page Git Product logo

politeiagui's Introduction

Politeia GUI

Build Status

Politeiagui is the web frontend used for Politeia. Currently, there are two different systems built on top of Politeia and both uses Politeiagui as the web client. They are:

Requirements

Politeiagui uses node.js and the yarn package manager.

  • node

  • yarn

  • politeiawww

    Note: Politeiagui can be run as a standalone application that uses mock APIs to simulate communicaiton with the Politeia backend (useful if you're only doing UI changes). In this case, politeiawww isn't needed. However, be aware that the Mock APIs are not always up-to-date with the latest changes.

Development

  1. Clone this repository

    https://github.com/decred/politeiagui.git

  2. Build and run locally.

    Against politeiawww

    To run politeiagui against politeiawww, make sure politeiawww is running and use the following command:

    • Run the Proposal app: yarn && yarn start
    • Run the CMS app: yarn && yarn start:cms

    Switching between Proposals and CMS

    You can have two separate data directories for Proposals and CMS. Use the --datadir= flag when starting politeiad and pass a different directory for each app. For example:

    politeiad --buildcache --datadir="~/Library/Application\ Support/Cms"

    Doing this, you don't have to erase and populate your DB again when switching from one app to another.

    Mock APIs (WARNING: may be out of date)

    To run politeiagui using mock APIs that do not communicate with politeiawww (useful for working on UI changes only), run the following command:

    yarn && yarn uidev

Production

To build politeiagui for production deployment, use the following commands:

  • Build the Proposal app: yarn && yarn build
  • Build the CMS app: yarn && yarn build:cms

These commands use create-react-app to create production builds of politeiagui. See the deployment documentation for instructions on deploying the builds.

Configuration

Politeiagui allow customization of settings and features toggling by providing a set of configuration options. The configuration is loaded based on the "preset name" which must be provided through an enviroment variable called "REACT_APP_PRESET".

The configs can be found inside src/apps/<preset_name>.

Currently, two presets are supported, they are:

  • politeia: the set of configurations for the Proposals website.
  • cms: the set of configurations for the Contractor Managament System.

The full table of configuration options is presented below:

Option POLITEIA (default) CMS Description
title "Politeia" "Contractor Management" The title to be used for the website
logoLight "pi-logo-light.svg" "cms-logo-light.svg" Indicates what is the name of the light logo file under src/assets/images
logoDark "pi-logo-dark.svg" "cms-logo-dark.svg" Indicates what is the name of the dark logo file under src/assets/images
recordType "proposal" "invoice" The main record type name
enableAdminInvite false true To enable or not the UI elements required for admin invite
enableCommentVote true false To enable or not the vote on comments
paywallContent "paywall-politeia" "" Indicates what is the name of the markdown file under src/assets/copies to be used for the paywall copy
privacyPolicyContent "privacy-policy" "privacy-policy-cms" Indicates what is the name of the markdown file under src/assets/copies to be used for the privacy policy copy
navMenuPaths see src/apps/politeia/config.json see src/apps/cms/config.json Custom menu paths to be shown in the navigation menu dropdown

Important: Currently it's only possible to use the CMS or the POLITEIA presets fully. If you want to create your own app config, you'll need to modify the code and the API accordingly.

Testing

Politeiagui has unit tests for its core logic. To run all unit tests run the command:

yarn test

Test coverage is currently provided for (actions/*), (lib/*, reducers/*) and (selectors/*).

Relevant libraries/modules used for testing are:

E2E tests

Politeiagui has e2e tests using cypress and react-testing-library/cypress. Backend should be running when running e2e tests.

Before running the e2e tests make sure to:

  1. Run /teste2e/setup-test-users.sh script to setup the users needed for the tests.
  2. Enable paywall on backend side.

There are two ways two run the e2e tests, either in terminal or in browser:

  1. To run e2e tests in terminal use: test:e2e:run.
  2. To run e2e tests in browser use: test:e2e:browser.

Contributing

We encourage you to contribute to Politeiagui. Please check How to contribute to Politeiagui for guidelines about how to proceed.

Docker

Politeiagui can also be hosted in a docker container. To build the the docker container, run the following commands:

$ ./bin/build.sh

Then run the container with:

$ docker run -d --rm -p <local port>:80 decred/politeiagui:latest

This project was bootstrapped with Create React App. You can find the most recent version of this guide here.

politeiagui's People

Contributors

alexlyp avatar amass01 avatar blaltarriba avatar crypto-rizzo avatar dajohi avatar davecgh avatar degeri avatar dependabot[bot] avatar derekdkim avatar dornelasnelson avatar fernandoabolafio avatar go1dfish avatar gozart1 avatar hypernoob avatar jholdstock avatar lukebp avatar marcopeereboom avatar oktapodia avatar orthomind avatar rgeraldes avatar richardred0x avatar rrecuero avatar shubham-skr avatar sndurkin avatar thi4go avatar tiagoalvesdulce avatar tnguyen303 avatar vctt94 avatar vibros68 avatar victorgcramos avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

politeiagui's Issues

Export/import privkey

We need to be able to export the ed25519 private key from local storage. Let's debate options and add some sort of mechanism to allow the user to export end import said key.

Markdown editor acts weird on Galaxy Note 8

A user reported in Slack that the markdown editor doubles certain words while typing.

Device: Galaxy Note 8
Browser: Chrome, Firefox

Using Chrome:

If I type "decred.o" and then "r", I get "decred.odecred.or"

"google.c" &"o" gives me google.cgoogle.co

Firefox seems to be worse:

Any time I hit space, comma, or period, the entire word just disappears!

The issue is reproducible using the base headzoo/react-markmirror component, but it's not as bad with the JedWatson/react-md-editor component. For JedWatson/react-md-editor:

it seems to delete periods the first time i type them. So "decred." becomes just "decred", but if I type the "." again it stays.

Better error/success messages

We need better error/success messages. Just from light testing I noticed we need better messages for:

  • /user/verify/success
  • /user/verify/failure
  • /login

There are probably others as well.

Load Markdown editor on demand

react-markmirror is a very nice Markdown editor, but it's 500kb built.

Ideally we should only load it once the user visits the submission creation page

MVP: improve error handling

when i attempted to submit a new proposal, i received the near-useless error message "Error creating proposal, Bad response from server". errors should be less vague and include details that allow users to make a meaningful bug report.

by requiring that a sysadmin check the logs or dig further for an error, it decreases the likelihood of the error condition being properly handled.

Login issues

  • When logged in, menu still displays Login instead of Logout
  • After first logging in, it should redirect to either the Submit or Home page

Submit page doesn't reset

After submitting a proposal and navigating to another page, the Submit page should reset and allow the user to submit another.

Attaching files on the new proposal page wipes any existing attachments

Clicking the file input to attach files wipes any existing file attachments on the new proposal page. I can only select multiple files if I select them all within the file selector dialog, but I should be able to attach multiple files, one at a time, from multiple accesses of the file selector dialog.

MVP: submit tab should only appear when logged in

the submit tab is shown when the user is not logged in. this gives the impression that one can submit a proposal without registering with the site, which mismanages user expectations. the submit tab should only appear when users are logged in.

MVP: prevent attaching images beyond max size

i added a larger image (~628 KB) to a proposal and it printed an error about how the image was too large. this should be prevented up-front if possible, so the user cannot upload an image with size greater than the max size.

remove public access to unvetted proposals

when proposals are first submitted, they are considered in the 'unvetted' state and must be manually reviewed by someone who checks that a number of basic requirements are satisfied. since proposals that are unvetted or currently in the process of being vetted could contain inflammatory content, we must deprive users of the ability to externally access this data while a proposal is unvetted. this avoids the scenario of pi being used to effectively serve inflammatory content, albeit via an indirect channel.

as part of fixing this, the censorship token lookup widget in the ui would be removed. users who submit proposals that are ultimately censored should be able to independently verify that their proposal was indeed received and not made public with its censorship token alone. by allowing lookups against a censorship token, whoever is hosting the pi instance may end up inadvertently hosting inflammatory content.

Need <PageLoadingIcon> component

Currently we're using <LoadingIcon> for page-to-page transitions, but that's not working well on the proposal detail page. We should create a <PageLoadingIcon> component which is used for page-to-page transitions, and is consistently displayed maybe 200 - 300px from the top of the page. This should be separate from <LoadingIcon> which should be easily embeddable into other components. Similarly, <ButtonWithLoadingIcon> should be refactored to use <LoadingIcon>.

Proposal submission success page

#81

Currently pgui redirects user to their proposal’s permalink after successful submission.

API no longer returns a users unvetted proposals so we will need to add a page that replicates proposal detail with the data from the successfully submitted proposal (should be in the proposal request’s payload and response in state)

receive and verify bundle after proposal submission

the censorship token amounts to a signature from a particular pi instance confirming that a proposal submission has been received. instead of having users lookup their proposal by id or censorship token to check its status, the user should be prompted to download a "proposal bundle", which would contain all the censorship data, along with the file(s) that make up the proposal.

beyond prompting the user to download a proposal bundle, there needs to be a simple tool that users can run to verify a censorship token is valid. this is important not only for the user being censored, but also other users who wish to verify the proposal in question was indeed censored.

Admin proposal status page should display the full proposal

The admin proposal page currently only displays the proposal title and the actions. Actually, this page could be removed and the actions could just be added to the proposal details page if the current user is an admin.

Also - actions should not appear if status == Censored.

Markdown preview isn't working

The markdown preview area doesn't seem to be working.

Steps to reproduce:

  1. Navigate to the new proposal page in Chrome.
  2. Type # Test in the markdown editor.

Expected to see a header "Test" in the markdown preview area, but nothing is shown and there are no JS errors in the console.

Change Password page issues

The Change Password page has several visual issues that need addressing:

  • The error display overlaps with the sidebar on the right side of page
  • The inputs and button should look and be organized like the inputs on the signup/login page

Need loading indicators

Loading indicators should be displayed for the proposal submit page and when executing the censor/approve admin actions.

Refreshing on Submit page takes you to the Login page

After logging in to Politeia, it should take you /proposals/new. If you refresh while on the page, it will navigate to the /user/login page. It should stay on the /proposals/new page.

Similarly, refreshing on /admin/censored and /admin/unreviewed takes you to the home page.

MVP: add ability to remove images

since a user may add then wish to remove an image for a proposal, they need a corresponding button/link to do this. currently, you can only add images.

MVP: add user profile view

users will need to be able to do stuff like reset their password, set their username, add an avatar, etc.

having a simple page for performing these actions is a start and can be expanded later.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.