Improve form layout

public/stylesheets/style.css

@@ -40,7 +40,8 @@ h2 {
 }
 
 .share-form {
-  margin: 50px 0;
+  margin-top: 50px;
+  margin-bottom: 50px;
   text-align: center;
 }
 

routes/index.js

@@ -59,6 +59,12 @@ router.post('/search', function(req, res) {
   // determine spotify or google music
   var url = parse(req.body.url);
 
+  if (!url.host) {
+    req.flash('search-error', 'Please paste a link below to find matches');
+    res.redirect('/');
+    return;
+  }
+
   if (url.host.match(/rd\.io$/) || url.host.match(/rdio\.com$/)) {
     rdio.lookupUrl(url.href, function(result) {
       if (!result.id) {

views/index.ejs

@@ -16,17 +16,24 @@
     <h1><a href="/">match<span class="audio-lighten">.audio</span></a></h1>
   </header>
   <div class="container">
+
     <div class="row share-form">
       <div class="col-md-6 col-md-offset-3">
-        <%= error %>
-        <form role="form" method="post" action="/search" class="form-inline">
-          <div class="form-group form-group-lg">
-            <input type="text" name="url" placeholder="Paste link here" class="form-control">
-          </div>
-          <input type="submit" class="btn btn-default btn-lg" value="Share Music">
+        <% if (error.length > 0) { %>
+          <p class="alert alert-danger"><%= error %></p>
+        <% } %>
+
+        <form role="form" method="post" action="/search">
+        <div class="input-group input-group-lg">
+          <input type="text" name="url" placeholder="Paste link here" class="form-control">
+          <span class="input-group-btn">
+            <input type="submit" class="btn btn-default btn-lg" value="Share Music">
+          </span>
+        </div>
         </form>
       </div>
     </div>
+
     <div class="row">
       <div class="col-md-6 col-md-offset-3">
         <p>Make sharing music from subscription services better.