Refactors client pages of dashboard

app/clients/dropbox/views/authenticate.html

@@ -1,9 +1,8 @@
 <div class="inset">
-  <p>Connect your folder to Dropbox</p>
+  <p>Connect your folder to <strong>Dropbox</strong></p>
 
   <ul>
-    <li>Blot will create a new folder for <b style="font-weight:500">{{blog.title}}</b> in your Dropbox.</li>
-    <li>Blot will only be able to access the folder it creates in your Dropbox.</li>
+    <li>Blot will create a new folder in your Dropbox.</li>
     <li>You can revoke Blot’s access to this folder at any time.</li>
   </ul>
 

app/clients/dropbox/views/disconnect.html

@@ -1,7 +1,7 @@
 
 <form method='post' class="account" >
 
-  <p>If you disconnect your folder from Dropbox, changes you make in Dropbox will no longer sync to Blot. Your blog will remain as it is until you connect it to another service or tool.</p>
+  <p>If you disconnect your folder from <strong>Dropbox</strong>, your blog will remain as it is now until you reconnect your folder to another service or tool.</p>
 
   <input type="hidden" name="_csrf" value="{{csrftoken}}">
 

app/clients/dropbox/views/index.html

@@ -73,7 +73,7 @@
 
   <a class="line" href="{{{base}}}/disconnect">
     <span class="label">Disconnect</span>
-    <span class="link">Disconnect your folder from Dropbox</span>
+    <span class="link">Disconnect your folder</span>
   </a>
 
 <br><br>

app/clients/git/views/index.html

@@ -1,33 +1,26 @@
 {{> status-line}}
 
-{{#error}}
-<p class="box red" style="width:120%"> ... </p>
-{{/error}}
-
+<div style="border:1px solid rgba(0,0,0,0.1);border-radius: 4px;margin:20px 0">
 <div class="line" >
-  <span class="label">Repository URL</span>
+  <span class="label">URL</span>
   <span class="center">https://{{host}}/clients/git/end/{{blog.handle}}.git</span>
 </div>  
 
 <div class="line" >
-  <span class="label">Repository username</span>
+  <span class="label">Username</span>
   <span class="center">{{user.email}}</span>
 </div>  
 
 <div class="line" >
-  <span class="label">Repository password</span>
+  <span class="label">Password</span>
   <span class="center">{{token}}</span>
-  <span class="right"> <form method="post" action="{{{base}}}/refresh-token">
-    <input type="hidden" name="_csrf" value="{{csrftoken}}">
-    <input type="submit" style="margin-top:11px" value="Refresh token">
-  </form>
-</span>
+  <a style="margin-left: 1rem" class="link" href="{{{base}}}/reset-password">Reset password</a>
 </div>  
-
+</div>
 
 
 <a class="line" href="{{{base}}}/disconnect">
   <span class="label">Disconnect</span>
-  <span class="link">Disconnect your folder from Git</span>
+  <span class="link">Disconnect your folder</span>
 </a>
 

app/clients/git/views/reset-password.html

@@ -0,0 +1,4 @@
+ <form method="post" action="{{{base}}}/refresh-token">
+    <input type="hidden" name="_csrf" value="{{csrftoken}}">
+    <input type="submit" style="margin-top:11px" value="Reset password">
+  </form>

app/clients/google-drive/views/index.html

@@ -68,8 +68,27 @@
 {{/account}}
 
 {{^account}}
+
+<div class="inset">
+  <p>Connect your folder to <strong>Google Drive</strong></p>
+
+  <ul>
+    <li>Blot will create a new folder in your Drive.</li>
+    <li>You can revoke Blot’s access to your Drive at any time.</li>
+  </ul>
+
+  <form  action="{{{base}}}/disconnect" method="post">
+    <input type="hidden" name="_csrf" value="{{csrftoken}}">
+    <div class="buttons">
+      <a href="{{{base}}}/redirect">Connect to Google Drive</a>
+      <input type="submit" value="Cancel">
+    </div>
+  </form>
+</div>
+
+<!-- 
 <div class="inset">
-  <!-- <p style="margin: 42px 0 20px;">
+  </!/-- <p style="margin: 42px 0 20px;">
     Blot will ask for permission to connect to your <b>Google Drive</b>. You can revoke Blot’s access at any point. 
   </p>
   <details>
@@ -81,7 +100,7 @@
       <li>Share your blog's folder from your burner to your main account's Google Drive.</p>
   </details>
   <br />
- -->
+ -/-/>
  <p><b>Link Google Drive Account</b></p>
  <p>Sign in to authorize Blot's access to your Google Drive:</p>
  <br>
@@ -109,7 +128,7 @@
       <input style="margin: 0.3rem 2rem" type="submit" value="Cancel" />
     </div>
   </form>
-</div>
+</div> -->
 {{/account}}
 
 

app/clients/local/routes.js

@@ -8,15 +8,19 @@ var Dashboard = Express.Router();
 
 // By the time this middleware is mounted, blot
 // has fetched the information about this user.
-Dashboard.get("/", function (req, res, next) {
+Dashboard.get("/", function (req, res) {
   setup(req.blog.id, function (err) {
     if (err) console.log("Error setting up");
   });
   res.render(__dirname + "/views/index.html");
 });
 
-Dashboard.post("/disconnect", function (req, res, next) {
-  disconnect(req.blog.id, next);
-});
+Dashboard.route("/disconnect")
+  .get(function (req, res) {
+    res.render(__dirname + "/views/disconnect.html");
+  })
+  .post(function (req, res, next) {
+    disconnect(req.blog.id, next);
+  });
 
 module.exports = Dashboard;

app/clients/local/views/disconnect.html

@@ -0,0 +1,11 @@
+<form method='post' class="account" >
+
+  <p>If you disconnect your folder from <strong>Local folder</strong>, your blog will remain as it is now until you reconnect your folder to another service or tool.</p>
+
+  <input type="hidden" name="_csrf" value="{{csrftoken}}">
+
+  <div class="buttons">
+    <input class="button" type="submit" value="Disconnect from Local folder" />
+    <a href="{{{base}}}">Cancel</a>
+  </div>
+</form>

app/clients/local/views/index.html

@@ -1,14 +1,9 @@
  {{> status-line}}
-  <div class="line" >
-    <span class="label">Location</span>
-    <span class="center">{{blog.id}}</span>
-  </div>
-  <div class="line" >
+
+  <a class="line" href="{{{base}}}/disconnect">
     <span class="label">Disconnect</span>
-    <span class="link"><form method="POST" action="{{{base}}}/disconnect">
-<input type="submit" value="Disconnect">
-</form> </span>
-  </div>
+    <span class="link">Disconnect your folder</span>
+  </a>
 
 <br><br>
 

app/dashboard/views/clients/index.html

@@ -1,43 +1,51 @@
-<form method='post' class="account">
-
-  {{#setup}}
-  <input type="hidden" name="setup" value="true">
-  {{/setup}}
-
-  <input type="hidden" name="_csrf" value="{{csrftoken}}">
-
+<div style="padding: 11px 20px;margin:0 0;max-width: 500px">
   {{#client}}
-  <p>The folder for <b>{{blog.title}}</b> is synchronized by <b>{{display_name}}</b>. If you would like to switch to another client, you can do so without disruption. Blot will transfer the contents of your folder automatically.
+  <p>The folder for <b>{{blog.title}}</b> is synchronized from <b>{{display_name}}</b>. If you would like to switch to another client, you can do so without disruption. Blot will transfer the contents of your folder automatically.
   </p>
 
   <hr>
 
   {{/client}}
 
-  <p style="margin:0 0 2rem;max-width:475px">How would you like to sync the folder for <b>{{blog.title}}</b>? You can switch from one method to another at any point.</p>
-
+  <p>How would you like to sync the folder for <b>{{blog.title}}</b>? </p>
+</div>
   <!-- <label>Clients</label> -->
 
 <style type="text/css">
-.client-select {max-width:475px;margin-bottom: 0;padding: 10px 0;/*border-top:1px solid rgba(0,0,0,0.05);*/}
-.client-select:hover {background: rgba(0,0,0,0.03);cursor: pointer;}
+
+button[name="client"] {max-width:475px;margin-bottom: 0;padding: 10px 0;border-top:1px solid rgba(0,0,0,0.05);text-align: left;display: block;width: 100%;color:#0070e8;padding: 11px 20px;}
+button[name="client"] b {
+  display: block;
+}
+button[name="client"]:after {
+  content: "→";
+  float: right;
+}
+button[name="client"]:hover {background: rgba(0,0,0,0.03);cursor: pointer;}
 </style>
+
 {{#clients}}
 
-<label class="client-select" style="line-height: 1.5;padding-left:2.5rem;text-transform:none;font-size:inherit;letter-spacing:inherit">
-<input type="radio" name="client" style="float:left;margin: 0.3em 0 0 -1.75rem" value="{{name}}" {{checked}}> <b>{{display_name}}</b><br>{{description}}</label>
+<form method='post' style="padding:0 20px;max-width: 500px">
+
+  {{#setup}}
+  <input type="hidden" name="setup" value="true">
+  {{/setup}}
 
+  <input type="hidden" name="_csrf" value="{{csrftoken}}">
+
+  <button type="submit" name="client" value="{{name}}">
+   {{display_name}}
+  </button>
+
+</form>
 {{/clients}}
 
-
-<div class="buttons">
-  <input class="button" type="submit" name="" value="Select this client">
+<div class="buttons" style="padding: 0 20px">
   {{#setup}}
   <a href="{{{base}}}">Set up later</a>
   {{/setup}}
   {{^setup}}
   <a href="{{{base}}}">Cancel</a>
   {{/setup}}
 </div>
-
-</form>

app/dashboard/views/folder/directory.html

@@ -5,7 +5,7 @@
     color: rgb(158, 154, 152);justify-content: center;">
 
   {{#root}}
-  <span style="align-self: center;">Your blog’s folder is empty.</span>
+  <span style="align-self: center;">Your folder is empty.</span>
   {{/root}}
   {{^root}}
   <span style="align-self: center;">There is nothing here.</span>

app/dashboard/views/folder/wrapper.html

@@ -6,7 +6,7 @@
 {{#root}}<a class="line" href="{{{base}}}/client/{{client.name}}">
 <span class="label">Folder</span>
 {{^blog.client}}
-      <span class="link">Set up a client to sync your folder</span>
+      <span class="link">Choose a way to sync your folder</span>
     {{/blog.client}}
     {{#blog.client}}
     <span class="center" style="display: flex;"><span id="status" style="display: block;" class="truncate status">{{blog.status.message}} {{blog.status.fromNow}}</span><span style="white-space: nowrap">&nbsp;from {{client.display_name}}</span></span>

todo.txt

@@ -285,8 +285,6 @@ Make the magazine template respect the date settings and follow up [with questio
 Send out cancellation confirmation emails with option to give feedback
 - auto-refund people who immediately close their account after signing up
 
-Replace radio button on clients page
-
 Get to the bottom of the slow cloudflare issue and follow up with [Wen](https://mail.google.com/mail/u/0/#inbox/FMfcgzGqPzBWZcLJcwtWTXTbQjMbVrZB)
 
 Add [scrubbing pagination to images template](https://jsfiddle.net/tdnc28vm/1/)