[MEGATHREAD] GlitchyPastePen - Create simple front-end projects using an online code editor with instant hosting

khalby786 · June 3, 2020, 3:57pm

THIS PROJECT DOESN’T EXIST ANYMORE.

GlitchyPastePen BETA

Create simple front-end projects (mainly with HTML, CSS and JS) using an online code editor with instant hosting, much like CodePen.

GlitchyPastePen has an online code IDE, which allows you to create a simple static site and host them immediately.

GlitchyPastePen: https://glitchypastepen.glitch.me/
GitHub Repository: https://github.com/GlitchyPastePen/GlitchyPastePen
Discord Server Invite: Discord
Status: https://glitchypastepen.statuspage.io
Forum: https://glitchypastepen.flarum.cloud

Features

Collaborate live with friends and other users (temporarily disabled)
Powerful code editor with Ace.js
Choose your own preferences such as text wrapping, theme, font-size, etc, for the editor.
Intellisense powered by Ace.js
Beautify your code to make it look better.
Instant hosting for projects

Contributing

Fork the repository!
Clone your fork: git clone https://github.com/your-username/GlitchyPastePen.git
Create your feature branch: git checkout -b my-new-feature
Commit your changes: git commit -am 'Add some feature'
Push to the branch: git push origin my-new-feature
Submit a pull request!

Uses

HTML
CSS
JS
Node.js (Express)
EJS
TogetherJS for streaming with friends (Mozilla labs) (CURRENTLY DISABLED)

Remixing

Remix this project or clone this repo.

git clone https://github.com/khalby786/glitchypastepen.git
cd glitchypastepen

In the .env file, create a variable named SECRET and give it some value (meant for your session password).
This project uses the GitHub oAuth, so you need to create a new Github oAuth app in your GitHub Account, so first go to http://github.com.
Click on your profile picture in the top right corner and select ‘Settings’ from the drop-down menu.

Scroll all the way down and choose “Developer Settings” from the left menu.

Choose oAuth Apps.

Click on “New oAuth App”

Fill in all the details according to your wish, but make sure to set callback as https://PROJECTNAME.glitch.me/login/github/callback.

npm start

Collaborators

Contributors

Status page at https://glitchypastepen.statuspage.io.

RiversideRocks · June 3, 2020, 4:02pm

Really cool software! I have messed around with this and it is awesome!

idodev · June 3, 2020, 4:05pm

ya i like it to?
is this open source on glitch

ihack2712 · June 3, 2020, 4:21pm

DO NOT USE YOUR EVERYDAY PASSWORD ON THIS SITE! This site does not hash your password or use any sort of encryption at all!

github.com

khalby786/GlitchyPastePen/blob/master/server.js#L89


});

app.get("/login", (request, response) => {
  response.sendFile(__dirname + "/views/login.html");
});

app.get("/signup", async (request, response) => {
  response.sendFile(__dirname + "/views/signup.html");
});

app.post("/signup", async (request, response) => {
  var authdata;
  global.email = request.body.email;
  var username = request.body.username;
  var password = request.body.password;
  if (username && password && global.email) {
    let hasuser = await user.has(username);
    if (!hasuser) {
      let userinfo = { password: password, email: global.email };
      let newuser = await user.set(username, userinfo);
      authdata = { redirect: "/", detail: "newuser" };

khalby786 · June 3, 2020, 4:21pm

Credit to @random for making Ace.js work, because it wasn’t working initially.

khalby786 · June 3, 2020, 4:21pm

Yeah, I don’t. Good call, I should have said this earlier.

ihack2712 · June 3, 2020, 4:22pm

I’ll be willing to add proper hashing and authentication if you’d like.

khalby786 · June 3, 2020, 4:23pm

Thank you so much @ihack2712, see https://github.com/khalby786/GlitchyPastePen#contributing.

khalby786 · June 3, 2020, 4:28pm

Glitch project at https://glitch.com/edit/#!/glitchypastepen

javaarchive · June 3, 2020, 9:34pm

Pull request made, oh forgot to say but I added I slightly modified the big text of the homepage.

EddiesTech · June 3, 2020, 10:44pm

Can they not just use the bcrypt library. I have got that working before. They could also set up passport.js

Anish · June 4, 2020, 1:10am

Simple fix, that when not implemented is a major security problem.

Also implementing that know will lock users out of there old accounts so the system needs to encrypt all old passwords as a one time thing.

AlphaDelta0mega · June 4, 2020, 2:39am

Do you know any good tutorials for username/password logins that do not require 3rd party apps? I want to implement some for my site

khalby786 · June 4, 2020, 2:53am

Hey @Anish @EddiesTech @ihack2712,

I’ll be rolling out a security update today making sure no more security vulnerabilities remain. Also thanks to @wh0 for pointing out another problem in the DMs. All passwords will be encrypted and we’ll have random words for project names.

khalby786 · June 4, 2020, 3:03am

Here’s a secret (not so secret) tip: in the editor, press Ctrl + , and you’ll see a settings pane which allows you to set preferences for the editor.

khalby786 · June 4, 2020, 3:04am

@javaarchive your pull request looks good although I’ve a few things in the code to tidy up before merging the request.

javaarchive · June 4, 2020, 3:08am

Yes I normally ruin good-looking code when I remix/fork things. Example: Jenn’s wonderful 8 bit pixel art code

khalby786 · June 4, 2020, 6:52am

UPDATE!

Merged @javaarchive’s pull request
Password encryption (thanks to @javaarchive)
Random words as project names (also thanks to @javaarchive

Since passwords created before this update are not encrypted, login might fail. So, if you want, you can request to have your account deleted and you make a new one. When you make a new account, make sure to use the same username so that you get back your projects.

ihack2712 · June 4, 2020, 10:17am

Don’t encrypt passwords…

khalby786 · June 4, 2020, 10:21am

Passwords look like this now: