Visual touch-ups

src/components/App.js

@@ -62,13 +62,6 @@ export default class App extends React.Component {
           </div>
           <footer className="footer">
             <p>
-              <script
-                id="fb13c4g"
-                dangerouslySetInnerHTML={{
-                  __html:
-                    "(function(i){var f,s=document.getElementById(i);f=document.createElement('iframe');f.src='//api.flattr.com/button/view/?uid=kern&button=compact&url=http%3A%2F%2Fgithub.com%2Fkern%2Ffilepizza';f.title='Flattr';f.height=20;f.width=110;f.style.borderWidth=0;s.parentNode.insertBefore(f,s);})('fb13c4g');"
-                }}
-              />{" "}
               Donations: <strong>1P7yFQAC3EmpvsB7K9s6bKPvXEP1LPoQnY</strong>
             </p>
 

src/components/Tempalink.js

@@ -7,21 +7,28 @@ export default class Tempalink extends React.Component {
     this.onClick = this.onClick.bind(this)
   }
 
-  onClick() {
+  onClick(e) {
-    this.refs.input.getDOMNode().setSelectionRange(0, 9999)
+    e.target.setSelectionRange(0, 9999)
   }
 
   render() {
     var url = window.location.origin + '/' + this.props.token
+    var shortUrl = window.location.origin + '/download/' + this.props.shortToken
+
     return <div className="tempalink">
-      <input
+      <div className="long-url">
-        onClick={this.onClick}
+        <input
-        readOnly
+          onClick={this.onClick}
-        ref="input"
+          readOnly
-        type="text"
+          type="text"
-        value={url} />
+          value={url} />
+      </div>
+
+      <div className="short-url">
+        or, for short: <span>{shortUrl}</span>
+      </div>
 
-        <QRCode text={url} />
+      <QRCode text={url} />
     </div>
   }
 

src/components/UploadPage.js

@@ -81,7 +81,7 @@ export default class UploadPage extends React.Component {
           <p>Send someone this link to download.</p>
           <p>This link will work as long as this page is open.</p>
           <p>Peers: {this.state.peers} &middot; Up: {formatSize(this.state.speedUp)}</p>
-          <Tempalink token={this.state.token} />
+          <Tempalink token={this.state.token} shortToken={this.state.shortToken} />
 
         </div>
     }

src/db.js

@@ -7,34 +7,52 @@ const TOKEN_OPTIONS = {
   maxLength: 20
 }
 
+const SHORT_TOKEN_OPTIONS = {
+  length: 8,
+  chars: '0123456789abcdefghijklmnopqrstuvwxyz'
+}
+
 let tokens = {}
+let shortTokens = {}
+
 const tokenGenerator = new xkcdPassword()
 tokenGenerator.initWithWordList(toppings)
 
+function generateShortToken() {
+  var result = '';
+  for (var i = SHORT_TOKEN_OPTIONS.length; i > 0; --i)
+    result += SHORT_TOKEN_OPTIONS.chars[Math.floor(Math.random() * SHORT_TOKEN_OPTIONS.chars.length)];
+  return result;
+}
+
 export function create(socket) {
 
   return tokenGenerator.generate(TOKEN_OPTIONS).then((parts) => {
     const token = parts.join('/')
+    const shortToken = generateShortToken()
     let result = {
       token: token,
+      shortToken: shortToken,
       socket: socket
     }
 
     tokens[token] = result
+    shortTokens[shortToken] = result
     return result
   })
 
 }
 
-export function exists(token) {
-  return token in tokens
-}
-
 export function find(token) {
   return tokens[token]
 }
+
+export function findShort(shortToken) {
+  return shortTokens[shortToken.toLowerCase()]
+}
  
 export function remove(client) {
   if (client == null) return
   delete tokens[client.token]
+  delete shortTokens[client.shortToken]
 }

src/index.styl

@@ -49,14 +49,14 @@ p {
 
 .footer {
     width: 100%
-    height: 60px
     text-align: center
     color: gray
     padding: 10px 0 10px
-    position: relative
+    position: fixed
     bottom: 0
     border-radius: 5px 5px 0 0
     background white
+    box-shadow 0 -2px 4px light-gray
 
     iframe {
       display: inline-block;
@@ -165,11 +165,11 @@ p {
     display: flex
     flex-direction: column
 
-    input {
+    .long-url input {
         background: beige
         color: dark-gray
         border: 0
-        margin: 20px 0
+        margin: 20px 0 0
         font: 18px/1 monospace
         height: 60px
         padding: 20px
@@ -177,6 +177,22 @@ p {
         width: 100%
     }
 
+    .short-url {
+        background: light-gray
+        color: dark-gray
+        border: 0
+        margin: 0 0 20px
+        height: 40px
+        padding: 10px 20px
+        text-align: center
+        width: 100%
+        font: 14px/1 "Quicksand", sans-serif;
+
+        span {
+            font: 14px/1 monospace
+        }
+    }
+
     img {
         margin: auto
         padding-bottom: 60px
@@ -202,7 +218,9 @@ p {
     background: green
     border: none
     color: white
-    width: 100%
+    width: calc(100vw - 40px)
+    margin: 0 20px
+    border-radius: 4px
     font: bold 18px/20px "Quicksand", sans-serif
     transition: 0.25s
     cursor: pointer
@@ -223,6 +241,9 @@ p {
     overflow: hidden
     background: green
     transition: all 1s ease
+    width: calc(100vw - 40px)
+    margin: 0 20px
+    border-radius: 4px
 
     .progress-bar-inner {
         float: left
@@ -230,6 +251,7 @@ p {
         background: green
         box-shadow: inset 0 1px 1px light-green
         overflow: hidden
+        border-radius: 4px
     }
 
     .progress-bar-text {

src/middleware/bootstrap.js

@@ -3,9 +3,7 @@ var express = require('express')
 
 var routes = module.exports = new express.Router()
 
-routes.get(/^\/([a-z]+\/[a-z]+\/[a-z]+\/[a-z]+)$/, function (req, res, next) {
+function bootstrap (uploader, req, res, next) {
-
-  var uploader = db.find(req.params[0])
   if (uploader) {
     res.locals.data = {
       DownloadStore: {
@@ -24,5 +22,14 @@ routes.get(/^\/([a-z]+\/[a-z]+\/[a-z]+\/[a-z]+)$/, function (req, res, next) {
     err.status = 404
     next(err)
   }
+}
+
+routes.get(/^\/([a-z]+\/[a-z]+\/[a-z]+\/[a-z]+)$/, function (req, res, next) {
+  var uploader = db.find(req.params[0])
+  return bootstrap(uploader, req, res, next)
+})
 
+routes.get(/^\/download\/(\w+)$/, function (req, res, next) {
+  var uploader = db.findShort(req.params[0])
+  return bootstrap(uploader, req, res, next)
 })

src/routes.js

@@ -10,6 +10,7 @@ export default (
   <Route handler={App}>
     <DefaultRoute handler={UploadPage} />
     <Route name="download" path="/:a/:b/:c/:d" handler={DownloadPage} />
+    <Route name="download-short" path="/download/:a" handler={DownloadPage} />
     <Route name="error" path="error" handler={ErrorPage} />
     <NotFoundRoute handler={ErrorPage} />
   </Route>

src/server.js

@@ -70,7 +70,7 @@ io.on("connection", function(socket) {
       upload.fileSize = metadata.fileSize;
       upload.fileType = metadata.fileType;
       upload.infoHash = metadata.infoHash;
-      res(upload.token);
+      res({ token: upload.token, shortToken: upload.shortToken });
     });
   });
 

src/stores/UploadStore.js

@@ -24,6 +24,7 @@ export default alt.createStore(
       this.speedUp = 0;
       this.status = "ready";
       this.token = null;
+      this.shortToken = null;
     }
 
     onUploadFile(file) {
@@ -51,10 +52,11 @@ export default alt.createStore(
               fileType: file.type,
               infoHash: torrent.magnetURI
             },
-            token => {
+            (res) => {
               this.setState({
                 status: "uploading",
-                token: token,
+                token: res.token,
+                shortToken: res.shortToken,
                 fileName: file.name,
                 fileSize: file.size,
                 fileType: file.type,