Merge pull request #201 from netlify/better-demo-login

Improvements to the demo experience

src/backends/netlify-auth/AuthenticationPage.css

@@ -20,6 +20,11 @@
   color: #dd0000;
 }
 
+.message {
+  font-size: 1.1em;
+  margin: 20px 10px;
+}
+
 .button {
   padding: .25em 1em;
   height: auto;

src/backends/test-repo/AuthenticationPage.js

@@ -17,14 +17,15 @@ export default class AuthenticationPage extends React.Component {
     this.props.onLogin(this.state);
   };
 
-  handleEmailChange = (e) => {
+  handleEmailChange = (value) => {
-    this.setState({ email: e.target.value });
+    this.setState({ email: value });
   };
 
   render() {
     return (<section className={styles.root}>
       <Card className={styles.card}>
         <img src={logo} width={100} role="presentation" />
+        <p className={styles.message}>This is a demo, enter your email to start</p>
         <Input
           type="text"
           label="Email"

src/backends/test-repo/implementation.js

@@ -9,6 +9,15 @@ function getFile(path) {
   return obj;
 }
 
+function nameFromEmail(email) {
+  return email
+    .split('@').shift().replace(/[.-_]/g, ' ')
+    .split(' ')
+    .filter(f => f)
+    .map(s => s.substr(0, 1).toUpperCase() + (s.substr(1) || ''))
+    .join(' ');
+}
+
 export default class TestRepo {
   constructor(config) {
     this.config = config;
@@ -24,7 +33,7 @@ export default class TestRepo {
   }
 
   authenticate(state) {
-    return Promise.resolve({ email: state.email });
+    return Promise.resolve({ email: state.email, name: nameFromEmail(state.email) });
   }
 
   entriesByFolder(collection) {
@@ -71,7 +80,6 @@ export default class TestRepo {
     } else {
       window.repoFiles[folder][fileName].content = entry.raw;
     }
-    mediaFiles.forEach(media => media.uploaded = true);
     return Promise.resolve();
   }