diff --git a/README.md b/README.md index 411fd385..7a01fc76 100644 --- a/README.md +++ b/README.md @@ -4,9 +4,9 @@ ### An open source storage system for your files and data that makes it easy to collect, organize, and share them anywhere on the web. -- [Design System](https://slate.host/system) +- [Design System](https://slate.host/_/system) - [Release Repository](https://github.com/filecoin-project/slate-react-system) -- [Live Application Prototype](https://slate.host/application) +- [Live Application Prototype](https://slate.host/_) ![screenshot](https://user-images.githubusercontent.com/310223/88253285-3a981f80-cc66-11ea-884b-e3b055f6bf46.png) diff --git a/common/validations.js b/common/validations.js index aaa52d80..0fe0e3f7 100644 --- a/common/validations.js +++ b/common/validations.js @@ -2,6 +2,27 @@ import * as Strings from "~/common/strings"; const USERNAME_REGEX = new RegExp("^[a-zA-Z0-9_]{0,}[a-zA-Z]+[0-9]*$"); const MIN_PASSWORD_LENGTH = 8; +const REJECT_LIST = [ + "_", + "root", + "www", + "website", + "index", + "api", + "public", + "static", + "admin", + "administrator", + "webmaster", + "403", + "404", + "500", + "login", + "sign-in", + "signin", + "log-in", + "logout", +]; export const username = (text) => { if (Strings.isEmpty(text)) { @@ -12,6 +33,10 @@ export const username = (text) => { return false; } + if (REJECT_LIST.includes(text)) { + return false; + } + return true; }; diff --git a/components/core/Application.js b/components/core/Application.js index d95ab0ae..202e6f16 100644 --- a/components/core/Application.js +++ b/components/core/Application.js @@ -445,7 +445,7 @@ export default class ApplicationPage extends React.Component { diff --git a/components/core/WebsitePrototypeHeader.js b/components/core/WebsitePrototypeHeader.js index d83b1864..17da2aca 100644 --- a/components/core/WebsitePrototypeHeader.js +++ b/components/core/WebsitePrototypeHeader.js @@ -53,10 +53,14 @@ export default (props) => { return (
- + Slate {Constants.values.version} - + Design System
diff --git a/components/core/WebsitePrototypeHeaderGeneric.js b/components/core/WebsitePrototypeHeaderGeneric.js index b1b16d7f..5484f90e 100644 --- a/components/core/WebsitePrototypeHeaderGeneric.js +++ b/components/core/WebsitePrototypeHeaderGeneric.js @@ -53,7 +53,11 @@ export default (props) => { return (
- + {props.children}
diff --git a/components/sidebars/SidebarCreateSlate.js b/components/sidebars/SidebarCreateSlate.js index e5dfaf4f..209818e9 100644 --- a/components/sidebars/SidebarCreateSlate.js +++ b/components/sidebars/SidebarCreateSlate.js @@ -60,7 +60,7 @@ export default class SidebarCreateSlate extends React.Component { /> - This will create a new slate address at https://slate.host/@ + This will create a new slate address at https://slate.host/ {this.props.viewer.username}/{Strings.createSlug(this.state.name)} diff --git a/components/system/SystemPage.js b/components/system/SystemPage.js index adeed8c5..4e068f7e 100644 --- a/components/system/SystemPage.js +++ b/components/system/SystemPage.js @@ -187,54 +187,54 @@ export default class SystemPage extends React.Component {
{children}
- +

Experiences @@ -243,39 +243,51 @@ export default class SystemPage extends React.Component {
Components - - - - - - - - - - + + + + + + + + + + - - + + - - - - - - - - + + + + + + + + diff --git a/electron/main.js b/electron/main.js index a6578440..a15cfced 100644 --- a/electron/main.js +++ b/electron/main.js @@ -45,7 +45,7 @@ function createWindow() { // and load the index.html of the app. // TODO(jim): // We shouldn't hardcode this port. - mainWindow.loadURL("http://localhost:1337/application"); + mainWindow.loadURL("http://localhost:1337/_"); console.log("window created"); } @@ -57,7 +57,7 @@ app.whenReady().then(() => { bootServer(); createWindow(); - app.on("activate", function () { + app.on("activate", function() { // On macOS it's common to re-create a window in the app when the // dock icon is clicked and there are no other windows open. if (BrowserWindow.getAllWindows().length === 0) createWindow(); @@ -67,7 +67,7 @@ app.whenReady().then(() => { // Quit when all windows are closed, except on macOS. There, it's common // for applications and their menu bar to stay active until the user quits // explicitly with Cmd + Q. -app.on("window-all-closed", function () { +app.on("window-all-closed", function() { if (process.platform !== "darwin") app.quit(); }); diff --git a/pages/_system-test.js b/pages/_/_test.js similarity index 100% rename from pages/_system-test.js rename to pages/_/_test.js diff --git a/pages/experiences/create-address.js b/pages/_/experiences/create-address.js similarity index 97% rename from pages/experiences/create-address.js rename to pages/_/experiences/create-address.js index bf45eee6..1e46c9dc 100644 --- a/pages/experiences/create-address.js +++ b/pages/_/experiences/create-address.js @@ -40,7 +40,7 @@ export default class SystemPageCreateAddress extends React.Component { Create a Filecoin Address{" "} diff --git a/pages/experiences/filecoin-settings.js b/pages/_/experiences/filecoin-settings.js similarity index 97% rename from pages/experiences/filecoin-settings.js rename to pages/_/experiences/filecoin-settings.js index ab84ef27..2c5c9c54 100644 --- a/pages/experiences/filecoin-settings.js +++ b/pages/_/experiences/filecoin-settings.js @@ -86,7 +86,7 @@ export default class SystemPageFilecoinSettings extends React.Component { Filecoin Settings{" "} diff --git a/pages/experiences/filecoin-wallet-balances.js b/pages/_/experiences/filecoin-wallet-balances.js similarity index 96% rename from pages/experiences/filecoin-wallet-balances.js rename to pages/_/experiences/filecoin-wallet-balances.js index c1d12adb..1ac33a61 100644 --- a/pages/experiences/filecoin-wallet-balances.js +++ b/pages/_/experiences/filecoin-wallet-balances.js @@ -52,7 +52,7 @@ export default class SystemPageFilecoinWalletBalances extends React.Component { Filecoin Wallet Balances{" "} diff --git a/pages/experiences/friends-list.js b/pages/_/experiences/friends-list.js similarity index 98% rename from pages/experiences/friends-list.js rename to pages/_/experiences/friends-list.js index 01d2555e..d7553662 100644 --- a/pages/experiences/friends-list.js +++ b/pages/_/experiences/friends-list.js @@ -169,7 +169,7 @@ export default class SystemPagePeersList extends React.Component { Friends List diff --git a/pages/experiences/generate-powergate-token.js b/pages/_/experiences/generate-powergate-token.js similarity index 97% rename from pages/experiences/generate-powergate-token.js rename to pages/_/experiences/generate-powergate-token.js index 161241f5..612586b0 100644 --- a/pages/experiences/generate-powergate-token.js +++ b/pages/_/experiences/generate-powergate-token.js @@ -57,7 +57,7 @@ export default class GeneratePowergateToken extends React.Component { Generate Powergate token{" "} diff --git a/pages/experiences/list-filecoin-deals.js b/pages/_/experiences/list-filecoin-deals.js similarity index 99% rename from pages/experiences/list-filecoin-deals.js rename to pages/_/experiences/list-filecoin-deals.js index baead9d2..eb09f266 100644 --- a/pages/experiences/list-filecoin-deals.js +++ b/pages/_/experiences/list-filecoin-deals.js @@ -152,7 +152,7 @@ export default class SystemPageDeals extends React.Component { View Storage and Retrieval Deals{" "} diff --git a/pages/experiences/make-storage-deal.js b/pages/_/experiences/make-storage-deal.js similarity index 97% rename from pages/experiences/make-storage-deal.js rename to pages/_/experiences/make-storage-deal.js index d8a94447..c4824e3b 100644 --- a/pages/experiences/make-storage-deal.js +++ b/pages/_/experiences/make-storage-deal.js @@ -66,7 +66,7 @@ export default class SystemPageMakeStorageDeal extends React.Component { Make a Storage Deal{" "} diff --git a/pages/experiences/peers-list.js b/pages/_/experiences/peers-list.js similarity index 97% rename from pages/experiences/peers-list.js rename to pages/_/experiences/peers-list.js index 39dead49..b535444a 100644 --- a/pages/experiences/peers-list.js +++ b/pages/_/experiences/peers-list.js @@ -39,7 +39,7 @@ export default class SystemPagePeersList extends React.Component { Peers List diff --git a/pages/experiences/send-address-filecoin.js b/pages/_/experiences/send-address-filecoin.js similarity index 96% rename from pages/experiences/send-address-filecoin.js rename to pages/_/experiences/send-address-filecoin.js index b1ac26c6..a8d621c6 100644 --- a/pages/experiences/send-address-filecoin.js +++ b/pages/_/experiences/send-address-filecoin.js @@ -39,7 +39,7 @@ export default class SystemPageSendAddressFilecoin extends React.Component { Send an Address Filecoin{" "} diff --git a/pages/application.js b/pages/_/index.js similarity index 100% rename from pages/application.js rename to pages/_/index.js diff --git a/pages/profile.js b/pages/_/profile.js similarity index 94% rename from pages/profile.js rename to pages/_/profile.js index 91ec8904..dc3f2d39 100644 --- a/pages/profile.js +++ b/pages/_/profile.js @@ -79,9 +79,7 @@ const STYLES_LINK = css` export default class ProfilePage extends React.Component { render() { - const title = this.props.creator - ? `@${this.props.creator.username}` - : "404"; + const title = this.props.creator ? `${this.props.creator.username}` : "404"; const url = `https://slate.host/${title}`; const description = "A user on Slate."; @@ -100,7 +98,7 @@ export default class ProfilePage extends React.Component { {this.props.creator.slates && this.props.creator.slates.length ? (

{this.props.creator.slates.map((row) => { - const url = `/@${this.props.creator.username}/${ + const url = `/${this.props.creator.username}/${ row.slatename }`; diff --git a/pages/slate.js b/pages/_/slate.js similarity index 96% rename from pages/slate.js rename to pages/_/slate.js index f202f346..779e2618 100644 --- a/pages/slate.js +++ b/pages/_/slate.js @@ -63,9 +63,7 @@ export default class SlatePage extends React.Component { }); render() { - const title = `@${this.props.slate.ownername}/${ - this.props.slate.slatename - }`; + const title = `${this.props.slate.ownername}/${this.props.slate.slatename}`; const url = `https://slate.host/${title}`; const description = "A slate."; diff --git a/pages/system/avatar-group.js b/pages/_/system/avatar-group.js similarity index 98% rename from pages/system/avatar-group.js rename to pages/_/system/avatar-group.js index 9f1f6b6b..ff3af8e7 100644 --- a/pages/system/avatar-group.js +++ b/pages/_/system/avatar-group.js @@ -22,7 +22,7 @@ export default class SystemAvatarGroup extends React.Component { Avatar Group diff --git a/pages/system/buttons.js b/pages/_/system/buttons.js similarity index 98% rename from pages/system/buttons.js rename to pages/_/system/buttons.js index d4634e23..068c9711 100644 --- a/pages/system/buttons.js +++ b/pages/_/system/buttons.js @@ -11,7 +11,7 @@ export default class SystemPageButtons extends React.Component { Buttons diff --git a/pages/system/card-tabs.js b/pages/_/system/card-tabs.js similarity index 99% rename from pages/system/card-tabs.js rename to pages/_/system/card-tabs.js index 7751f148..736cc78e 100644 --- a/pages/system/card-tabs.js +++ b/pages/_/system/card-tabs.js @@ -34,7 +34,7 @@ export default class SystemPageCardTabs extends React.Component { Card Tabs diff --git a/pages/system/carousel.js b/pages/_/system/carousel.js similarity index 99% rename from pages/system/carousel.js rename to pages/_/system/carousel.js index 2108352c..e8895c77 100644 --- a/pages/system/carousel.js +++ b/pages/_/system/carousel.js @@ -41,7 +41,7 @@ export default class SystemPageCarousel extends React.Component { Carousel diff --git a/pages/system/checkboxes.js b/pages/_/system/checkboxes.js similarity index 98% rename from pages/system/checkboxes.js rename to pages/_/system/checkboxes.js index e4ee4c26..ce4cad1a 100644 --- a/pages/system/checkboxes.js +++ b/pages/_/system/checkboxes.js @@ -22,7 +22,7 @@ export default class SystemPageCheckboxes extends React.Component { Checkboxes diff --git a/pages/system/colors.js b/pages/_/system/colors.js similarity index 98% rename from pages/system/colors.js rename to pages/_/system/colors.js index fc1cea44..87f3e2f1 100644 --- a/pages/system/colors.js +++ b/pages/_/system/colors.js @@ -33,7 +33,7 @@ export default class SystemPageColors extends React.Component { Colors diff --git a/pages/system/datepicker.js b/pages/_/system/datepicker.js similarity index 99% rename from pages/system/datepicker.js rename to pages/_/system/datepicker.js index f2d9ad8b..2e0b6829 100644 --- a/pages/system/datepicker.js +++ b/pages/_/system/datepicker.js @@ -29,7 +29,7 @@ export default class SystemPageDatepicker extends React.Component { Datepicker diff --git a/pages/system/dropdowns.js b/pages/_/system/dropdowns.js similarity index 99% rename from pages/system/dropdowns.js rename to pages/_/system/dropdowns.js index 86bcbda7..47493c65 100644 --- a/pages/system/dropdowns.js +++ b/pages/_/system/dropdowns.js @@ -38,7 +38,7 @@ export default class SystemPageDropdowns extends React.Component { Dropdowns diff --git a/pages/system/globe.js b/pages/_/system/globe.js similarity index 97% rename from pages/system/globe.js rename to pages/_/system/globe.js index 116c4d68..f21681c2 100644 --- a/pages/system/globe.js +++ b/pages/_/system/globe.js @@ -12,7 +12,7 @@ export default class SystemPageGlobe extends React.Component { Globe diff --git a/pages/system/icons.js b/pages/_/system/icons.js similarity index 98% rename from pages/system/icons.js rename to pages/_/system/icons.js index be9e65c7..d68c0c95 100644 --- a/pages/system/icons.js +++ b/pages/_/system/icons.js @@ -56,7 +56,7 @@ export default class SystemPageIcons extends React.Component { Icons diff --git a/pages/system/index.js b/pages/_/system/index.js similarity index 99% rename from pages/system/index.js rename to pages/_/system/index.js index 688b86e2..8eeb0cb0 100644 --- a/pages/system/index.js +++ b/pages/_/system/index.js @@ -11,7 +11,7 @@ export default class SystemPageRoot extends React.Component { Inputs diff --git a/pages/system/line-charts.js b/pages/_/system/line-charts.js similarity index 100% rename from pages/system/line-charts.js rename to pages/_/system/line-charts.js diff --git a/pages/system/list-editor.js b/pages/_/system/list-editor.js similarity index 98% rename from pages/system/list-editor.js rename to pages/_/system/list-editor.js index 7268a2ce..23f29790 100644 --- a/pages/system/list-editor.js +++ b/pages/_/system/list-editor.js @@ -29,7 +29,7 @@ export default class SystemPageListEditor extends React.Component { List Editor diff --git a/pages/system/loaders.js b/pages/_/system/loaders.js similarity index 97% rename from pages/system/loaders.js rename to pages/_/system/loaders.js index d12b50a8..282e0c1e 100644 --- a/pages/system/loaders.js +++ b/pages/_/system/loaders.js @@ -12,7 +12,7 @@ export default class SystemLoaders extends React.Component { Loaders diff --git a/pages/system/modals.js b/pages/_/system/modals.js similarity index 99% rename from pages/system/modals.js rename to pages/_/system/modals.js index d994c4b9..17f89357 100644 --- a/pages/system/modals.js +++ b/pages/_/system/modals.js @@ -21,7 +21,7 @@ export default class SystemPageNotifications extends React.Component { Modals diff --git a/pages/system/notifications.js b/pages/_/system/notifications.js similarity index 99% rename from pages/system/notifications.js rename to pages/_/system/notifications.js index b4005de1..637571c0 100644 --- a/pages/system/notifications.js +++ b/pages/_/system/notifications.js @@ -26,7 +26,7 @@ export default class SystemPageNotifications extends React.Component { Notifications diff --git a/pages/system/radios.js b/pages/_/system/radios.js similarity index 99% rename from pages/system/radios.js rename to pages/_/system/radios.js index 8c797527..33dfd1a3 100644 --- a/pages/system/radios.js +++ b/pages/_/system/radios.js @@ -51,7 +51,7 @@ export default class SystemPageRadios extends React.Component { Radios diff --git a/pages/system/sliders.js b/pages/_/system/sliders.js similarity index 99% rename from pages/system/sliders.js rename to pages/_/system/sliders.js index 89e7e61b..1ee36f29 100644 --- a/pages/system/sliders.js +++ b/pages/_/system/sliders.js @@ -24,7 +24,7 @@ export default class SystemPageSliders extends React.Component { Sliders diff --git a/pages/system/stats.js b/pages/_/system/stats.js similarity index 97% rename from pages/system/stats.js rename to pages/_/system/stats.js index 3fd38ac2..2f4104d2 100644 --- a/pages/system/stats.js +++ b/pages/_/system/stats.js @@ -11,7 +11,7 @@ export default class SystemPageStats extends React.Component { Stats diff --git a/pages/system/tables.js b/pages/_/system/tables.js similarity index 99% rename from pages/system/tables.js rename to pages/_/system/tables.js index b6aa1cbd..7bb10033 100644 --- a/pages/system/tables.js +++ b/pages/_/system/tables.js @@ -21,7 +21,7 @@ export default class SystemPageTables extends React.Component { Tables diff --git a/pages/system/tabs.js b/pages/_/system/tabs.js similarity index 99% rename from pages/system/tabs.js rename to pages/_/system/tabs.js index df644e11..6cb58383 100644 --- a/pages/system/tabs.js +++ b/pages/_/system/tabs.js @@ -42,7 +42,7 @@ export default class SystemPageTabs extends React.Component { Tabs diff --git a/pages/system/toggles.js b/pages/_/system/toggles.js similarity index 98% rename from pages/system/toggles.js rename to pages/_/system/toggles.js index 43b805c8..13c27ccc 100644 --- a/pages/system/toggles.js +++ b/pages/_/system/toggles.js @@ -22,7 +22,7 @@ export default class SystemPageToggles extends React.Component { Toggles diff --git a/pages/system/tooltips.js b/pages/_/system/tooltips.js similarity index 98% rename from pages/system/tooltips.js rename to pages/_/system/tooltips.js index cf62c3f7..a6902e14 100644 --- a/pages/system/tooltips.js +++ b/pages/_/system/tooltips.js @@ -12,7 +12,7 @@ export default class SystemPageTooltips extends React.Component { Tooltips diff --git a/pages/system/typography.js b/pages/_/system/typography.js similarity index 100% rename from pages/system/typography.js rename to pages/_/system/typography.js diff --git a/pages/index.js b/pages/index.js index 59074cad..7927f236 100644 --- a/pages/index.js +++ b/pages/index.js @@ -153,9 +153,7 @@ export default class IndexPage extends React.Component { {Constants.values.version} for Filecoin

- window.open("/application")} - > + window.open("/_")}> Use Slate
diff --git a/scenes/SceneEditAccount.js b/scenes/SceneEditAccount.js index 542de09f..31637d6c 100644 --- a/scenes/SceneEditAccount.js +++ b/scenes/SceneEditAccount.js @@ -136,7 +136,7 @@ export default class SceneEditAccount extends React.Component { }; render() { - const profileURL = `https://slate.host/@${this.state.username}`; + const profileURL = `https://slate.host/${this.state.username}`; return ( @@ -148,15 +148,25 @@ export default class SceneEditAccount extends React.Component { description="This image will appear in various lists." /> - +
- + + loading={this.state.changingAvatar} + > Pick avatar
@@ -166,7 +176,8 @@ export default class SceneEditAccount extends React.Component { label="Username" description={ - This is your username on Slate. Your username is used for your profile URL{" "} + This is your username on Slate. Your username is used for your + profile URL{" "} {profileURL} @@ -179,7 +190,10 @@ export default class SceneEditAccount extends React.Component { />
- + Change username
@@ -211,7 +225,10 @@ export default class SceneEditAccount extends React.Component { />
- + Change password
@@ -223,7 +240,10 @@ export default class SceneEditAccount extends React.Component { />
- + Delete my account
diff --git a/scenes/SceneHome.js b/scenes/SceneHome.js index 8c2d398c..f53aff54 100644 --- a/scenes/SceneHome.js +++ b/scenes/SceneHome.js @@ -71,14 +71,16 @@ export default class SceneHome extends React.Component { rows: this.props.viewer.slates.map((each) => { return { ...each, - url: `/@${this.props.viewer.username}/${each.slatename}`, + url: `/${this.props.viewer.username}/${each.slatename}`, public: each.data.public, }; }), }; // TODO(jim): Refactor later. - const slateButtons = [{ name: "Create slate", type: "SIDEBAR", value: "SIDEBAR_CREATE_SLATE" }]; + const slateButtons = [ + { name: "Create slate", type: "SIDEBAR", value: "SIDEBAR_CREATE_SLATE" }, + ]; // TODO(jim): Refactor later. const data = { @@ -154,7 +156,11 @@ export default class SceneHome extends React.Component { /> Home {this.props.viewer.addresses[0] ? ( -
+
) : null} -
+
{this.props.viewer.library[0] ? ( -
+
{ return { ...each, - url: `/@${this.props.viewer.username}/${each.slatename}`, + url: `/${this.props.viewer.username}/${each.slatename}`, public: each.data.public, }; }), }; // TODO(jim): Refactor later. - const slateButtons = [{ name: "Create slate", type: "SIDEBAR", value: "SIDEBAR_CREATE_SLATE" }]; + const slateButtons = [ + { name: "Create slate", type: "SIDEBAR", value: "SIDEBAR_CREATE_SLATE" }, + ]; return ( @@ -46,7 +48,11 @@ export default class SceneSlates extends React.Component { description="No! Consider this page just a functionality test. Slates will be collaborative mood boards and will have a much more intuitive experience than this." /> Slates -
+
{ server.use("/public", express.static("public")); - server.get("/application", async (req, res) => { + server.get("/_", async (req, res) => { const id = Utilities.getIdFromCookie(req); let viewer = null; @@ -37,12 +37,12 @@ app.prepare().then(async () => { }); } - return app.render(req, res, "/application", { + return app.render(req, res, "/_", { viewer, }); }); - server.get("/@:username", async (req, res) => { + server.get("/:username", async (req, res) => { const id = Utilities.getIdFromCookie(req); let viewer = null; @@ -69,7 +69,7 @@ app.prepare().then(async () => { publicOnly: true, }); - return app.render(req, res, "/profile", { + return app.render(req, res, "/_/profile", { viewer, creator: { username: creator.username, @@ -79,7 +79,7 @@ app.prepare().then(async () => { }); }); - server.get("/@:username/:slatename", async (req, res) => { + server.get("/:username/:slatename", async (req, res) => { const slate = await Data.getSlateByName({ slatename: req.params.slatename, }); @@ -106,7 +106,7 @@ app.prepare().then(async () => { return res.redirect("/403"); } - return app.render(req, res, "/slate", { + return app.render(req, res, "/_/slate", { slate: JSON.parse( JSON.stringify({ ...slate, ownername: req.params.username }) ),