From eba4dbe1465528737959d5d5faeb26234b4d13d3 Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Tue, 18 Oct 2016 22:30:57 -0400
Subject: [PATCH] Convert Publish page to use <form>

Previously used form element only for file input
---
 js/page/publish.js | 238 +++++++++++++++++++++++----------------------
 1 file changed, 120 insertions(+), 118 deletions(-)

diff --git a/js/page/publish.js b/js/page/publish.js
index f5181c85f..d2b1ceba6 100644
--- a/js/page/publish.js
+++ b/js/page/publish.js
@@ -250,8 +250,10 @@ var PublishPage = React.createClass({
         });
       })
 
+      var formData = new FormData(fileInput.form);
+      formData.append('file', fileInput.files[0]);
       xhr.open('POST', '/upload', true);
-      xhr.send(new FormData(fileInput.form));
+      xhr.send(formData);
     }
   },
   handleFeePrefChange: function(feeEnabled) {
@@ -320,23 +322,23 @@ var PublishPage = React.createClass({
   render: function() {
     return (
       <main ref="page">
-        <section className="card">
-          <h4>LBRY Name</h4>
-          <div className="form-row">
-            lbry://<FormField type="text" ref="name" onChange={this.handleNameChange} />
-            {
-              (!this.state.name ? '' :
-                (! this.state.nameResolved ? <em> The name <strong>{this.state.name}</strong> is available.</em>
-                                           : (this.state.myClaimExists ? <em> You already have a claim on the name <strong>{this.state.name}</strong>. You can use this page to update your claim.</em>
-                                                                       : <em> The name <strong>{this.state.name}</strong> is currently claimed for <strong>{lbry.formatCredits(this.state.topClaimValue)}</strong> credits.</em>)))
-            }
-            <div className="help">What LBRY name would you like to claim for this file?</div>
-          </div>
-        </section>
+        <form onSubmit={this.handleSubmit}>
+          <section className="card">
+            <h4>LBRY Name</h4>
+            <div className="form-row">
+              lbry://<FormField type="text" ref="name" onChange={this.handleNameChange} />
+              {
+                (!this.state.name ? '' :
+                  (! this.state.nameResolved ? <em> The name <strong>{this.state.name}</strong> is available.</em>
+                                             : (this.state.myClaimExists ? <em> You already have a claim on the name <strong>{this.state.name}</strong>. You can use this page to update your claim.</em>
+                                                                         : <em> The name <strong>{this.state.name}</strong> is currently claimed for <strong>{lbry.formatCredits(this.state.topClaimValue)}</strong> credits.</em>)))
+              }
+              <div className="help">What LBRY name would you like to claim for this file?</div>
+            </div>
+          </section>
 
-        <section className="card">
-          <h4>Choose File</h4>
-          <form>
+          <section className="card">
+            <h4>Choose File</h4>
             <FormField name="file" ref="file" type="file" onChange={this.handleFileChange} />
             { !this.state.fileInfo ? '' :
                 (!this.state.tempFileReady ? <div>
@@ -344,119 +346,119 @@ var PublishPage = React.createClass({
                                                {!this.state.uploaded ? <span> Importing file into LBRY...</span> : <span> Processing file...</span>}
                                              </div>
                                            : <div>File ready for publishing!</div>) }
-          </form>
-          { this.state.myClaimExists ? <div className="help">If you don't choose a file, the file from your existing claim will be used.</div> : null }
-        </section>
+            { this.state.myClaimExists ? <div className="help">If you don't choose a file, the file from your existing claim will be used.</div> : null }
+          </section>
 
-        <section className="card">
-          <h4>Bid Amount</h4>
-          <div className="form-row">
-            Credits <FormField ref="bid" style={publishNumberStyle} type="text" onChange={this.handleBidChange} value={this.state.bid} placeholder={this.state.nameResolved ? lbry.formatCredits(this.state.topClaimValue + 10) : 100} />
-            <div className="help">How much would you like to bid for this name?
-            { !this.state.nameResolved ? <span> Since this name is not currently resolved, you may bid as low as you want, but higher bids help prevent others from claiming your name.</span>
-                                       : (this.state.topClaimIsMine ? <span> You currently control this name with a bid of <strong>{lbry.formatCredits(this.state.myClaimValue)}</strong> credits.</span>
-                                                                    : (this.state.myClaimExists ? <span> You have a non-winning bid on this name for <strong>{lbry.formatCredits(this.state.myClaimValue)}</strong> credits.
-                                                                                                         To control this name, you'll need to increase your bid to at least <strong>{lbry.formatCredits(this.state.myClaimValue)}</strong> credits.</span>
-                                                                                                : <span> You must bid over <strong>{lbry.formatCredits(this.state.topClaimValue)}</strong> credits to claim this name.</span>)) }
+          <section className="card">
+            <h4>Bid Amount</h4>
+            <div className="form-row">
+              Credits <FormField ref="bid" style={publishNumberStyle} type="text" onChange={this.handleBidChange} value={this.state.bid} placeholder={this.state.nameResolved ? lbry.formatCredits(this.state.topClaimValue + 10) : 100} />
+              <div className="help">How much would you like to bid for this name?
+              { !this.state.nameResolved ? <span> Since this name is not currently resolved, you may bid as low as you want, but higher bids help prevent others from claiming your name.</span>
+                                         : (this.state.topClaimIsMine ? <span> You currently control this name with a bid of <strong>{lbry.formatCredits(this.state.myClaimValue)}</strong> credits.</span>
+                                                                      : (this.state.myClaimExists ? <span> You have a non-winning bid on this name for <strong>{lbry.formatCredits(this.state.myClaimValue)}</strong> credits.
+                                                                                                           To control this name, you'll need to increase your bid to at least <strong>{lbry.formatCredits(this.state.myClaimValue)}</strong> credits.</span>
+                                                                                                  : <span> You must bid over <strong>{lbry.formatCredits(this.state.topClaimValue)}</strong> credits to claim this name.</span>)) }
+              </div>
             </div>
-          </div>
-        </section>
+          </section>
 
-        <section className="card">
-          <h4>Fee</h4>
-          <div className="form-row">
-            <label>
-             <FormField type="radio" onChange={ () => { this.handleFeePrefChange(false) } } checked={!this.state.isFee} /> No fee
-            </label>
-            <label>
-             <FormField type="radio" onChange={ () => { this.handleFeePrefChange(true) } } checked={this.state.isFee} /> { !this.state.isFee ? 'Choose fee...' : 'Fee ' }
-             <span className={!this.state.isFee ? 'hidden' : ''}>
-               <FormField type="text" onChange={this.handleFeeAmountChange} style={publishNumberStyle} /> <FormField type="select" onChange={this.handleFeeCurrencyChange}>
-                 <option value="USD">US Dollars</option>
-                 <option value="LBC">LBRY credits</option>
-               </FormField>
-               </span>
-            </label>
-            <div className="help">
-              <p>How much would you like to charge for this file?</p>
-              If you choose to price this content in dollars, the number of credits charged will be adjusted based on the value of LBRY credits at the time of purchase.
+          <section className="card">
+            <h4>Fee</h4>
+            <div className="form-row">
+              <label>
+               <FormField type="radio" onChange={ () => { this.handleFeePrefChange(false) } } checked={!this.state.isFee} /> No fee
+              </label>
+              <label>
+               <FormField type="radio" onChange={ () => { this.handleFeePrefChange(true) } } checked={this.state.isFee} /> { !this.state.isFee ? 'Choose fee...' : 'Fee ' }
+               <span className={!this.state.isFee ? 'hidden' : ''}>
+                 <FormField type="text" onChange={this.handleFeeAmountChange} style={publishNumberStyle} /> <FormField type="select" onChange={this.handleFeeCurrencyChange}>
+                   <option value="USD">US Dollars</option>
+                   <option value="LBC">LBRY credits</option>
+                 </FormField>
+                 </span>
+              </label>
+              <div className="help">
+                <p>How much would you like to charge for this file?</p>
+                If you choose to price this content in dollars, the number of credits charged will be adjusted based on the value of LBRY credits at the time of purchase.
+              </div>
             </div>
-          </div>
-        </section>
+          </section>
 
 
-        <section className="card">
-          <h4>Your Content</h4>
+          <section className="card">
+            <h4>Your Content</h4>
 
-          <div className="form-row">
-            <label htmlFor="title">Title</label><FormField type="text" ref="meta_title" name="title" placeholder="My Show, Episode 1" style={publishFieldStyle} />
-          </div>
-          <div className="form-row">
-            <label htmlFor="author">Author</label><FormField type="text" ref="meta_author" name="author" placeholder="My Company, Inc." style={publishFieldStyle} />
-          </div>
-          <div className="form-row">
-          <label htmlFor="license">License</label><FormField type="select" ref="meta_license" name="license" onChange={this.handeLicenseChange}>
-            <option data-url="https://creativecommons.org/licenses/by/4.0/legalcode">Creative Commons Attribution 4.0 International</option>
-            <option data-url="https://creativecommons.org/licenses/by-sa/4.0/legalcode">Creative Commons Attribution-ShareAlike 4.0 International</option>
-            <option data-url="https://creativecommons.org/licenses/by-nd/4.0/legalcode">Creative Commons Attribution-NoDerivatives 4.0 International</option>
-            <option data-url="https://creativecommons.org/licenses/by-nc/4.0/legalcode">Creative Commons Attribution-NonCommercial 4.0 International</option>
-            <option data-url="https://creativecommons.org/licenses/by-nc-sa/4.0/legalcode">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International</option>
-            <option data-url="https://creativecommons.org/licenses/by-nc-nd/4.0/legalcode">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International</option>
-            <option>Public Domain</option>
-            <option data-license-type="copyright" {... this.state.copyrightChosen ? {value: this.state.copyrightNotice} : {}}>Copyrighted...</option>
-            <option data-license-type="other" {... this.state.otherLicenseChosen ? {value: this.state.otherLicenseDescription} : {}}>Other...</option>
-          </FormField>
-          <FormField type="hidden" ref="meta_license_url" name="license_url" value={this.getLicenseUrl()} />
-          </div>
-          {this.state.copyrightChosen
-            ? <div className="form-row">
-                <label htmlFor="copyright-notice" value={this.state.copyrightNotice}>Copyright notice</label><FormField type="text" name="copyright-notice" value={this.state.copyrightNotice} onChange={this.handleCopyrightNoticeChange} style={publishFieldStyle} />
-              </div>
-            : null}
-          {this.state.otherLicenseChosen
-            ? <div className="form-row">
-                <label htmlFor="other-license-description">License description</label><FormField type="text" name="other-license-description" onChange={this.handleOtherLicenseDescriptionChange} style={publishFieldStyle} />
-              </div>
-            : null}
-          {this.state.otherLicenseChosen
-            ? <div className="form-row">
-                <label htmlFor="other-license-url">License URL</label> <FormField type="text" name="other-license-url" style={publishFieldStyle} onChange={this.handleOtherLicenseUrlChange} />
-              </div>
-            : null}
-
-          <div className="form-row">
-          <label htmlFor="language">Language</label> <FormField type="select" defaultValue="en" ref="meta_language" name="language">
-               <option value="en">English</option>
-               <option value="zh">Chinese</option>
-               <option value="fr">French</option>
-               <option value="de">German</option>
-               <option value="jp">Japanese</option>
-               <option value="ru">Russian</option>
-               <option value="es">Spanish</option>
+            <div className="form-row">
+              <label htmlFor="title">Title</label><FormField type="text" ref="meta_title" name="title" placeholder="My Show, Episode 1" style={publishFieldStyle} />
+            </div>
+            <div className="form-row">
+              <label htmlFor="author">Author</label><FormField type="text" ref="meta_author" name="author" placeholder="My Company, Inc." style={publishFieldStyle} />
+            </div>
+            <div className="form-row">
+            <label htmlFor="license">License</label><FormField type="select" ref="meta_license" name="license" onChange={this.handeLicenseChange}>
+              <option data-url="https://creativecommons.org/licenses/by/4.0/legalcode">Creative Commons Attribution 4.0 International</option>
+              <option data-url="https://creativecommons.org/licenses/by-sa/4.0/legalcode">Creative Commons Attribution-ShareAlike 4.0 International</option>
+              <option data-url="https://creativecommons.org/licenses/by-nd/4.0/legalcode">Creative Commons Attribution-NoDerivatives 4.0 International</option>
+              <option data-url="https://creativecommons.org/licenses/by-nc/4.0/legalcode">Creative Commons Attribution-NonCommercial 4.0 International</option>
+              <option data-url="https://creativecommons.org/licenses/by-nc-sa/4.0/legalcode">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International</option>
+              <option data-url="https://creativecommons.org/licenses/by-nc-nd/4.0/legalcode">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International</option>
+              <option>Public Domain</option>
+              <option data-license-type="copyright" {... this.state.copyrightChosen ? {value: this.state.copyrightNotice} : {}}>Copyrighted...</option>
+              <option data-license-type="other" {... this.state.otherLicenseChosen ? {value: this.state.otherLicenseDescription} : {}}>Other...</option>
             </FormField>
-          </div>
-          <div className="form-row">
-            <label htmlFor="description">Description</label> <FormField type="textarea" ref="meta_description" name="description" placeholder="Description of your content" style={publishFieldStyle} />
-          </div>
-          <div className="form-row">
-            <label><FormField type="checkbox" ref="meta_nsfw" name="nsfw" placeholder="Description of your content" /> Not Safe For Work</label>
-          </div>
-        </section>
+            <FormField type="hidden" ref="meta_license_url" name="license_url" value={this.getLicenseUrl()} />
+            </div>
+            {this.state.copyrightChosen
+              ? <div className="form-row">
+                  <label htmlFor="copyright-notice" value={this.state.copyrightNotice}>Copyright notice</label><FormField type="text" name="copyright-notice" value={this.state.copyrightNotice} onChange={this.handleCopyrightNoticeChange} style={publishFieldStyle} />
+                </div>
+              : null}
+            {this.state.otherLicenseChosen
+              ? <div className="form-row">
+                  <label htmlFor="other-license-description">License description</label><FormField type="text" name="other-license-description" onChange={this.handleOtherLicenseDescriptionChange} style={publishFieldStyle} />
+                </div>
+              : null}
+            {this.state.otherLicenseChosen
+              ? <div className="form-row">
+                  <label htmlFor="other-license-url">License URL</label> <FormField type="text" name="other-license-url" style={publishFieldStyle} onChange={this.handleOtherLicenseUrlChange} />
+                </div>
+              : null}
+
+            <div className="form-row">
+            <label htmlFor="language">Language</label> <FormField type="select" defaultValue="en" ref="meta_language" name="language">
+                 <option value="en">English</option>
+                 <option value="zh">Chinese</option>
+                 <option value="fr">French</option>
+                 <option value="de">German</option>
+                 <option value="jp">Japanese</option>
+                 <option value="ru">Russian</option>
+                 <option value="es">Spanish</option>
+              </FormField>
+            </div>
+            <div className="form-row">
+              <label htmlFor="description">Description</label> <FormField type="textarea" ref="meta_description" name="description" placeholder="Description of your content" style={publishFieldStyle} />
+            </div>
+            <div className="form-row">
+              <label><FormField type="checkbox" ref="meta_nsfw" name="nsfw" placeholder="Description of your content" /> Not Safe For Work</label>
+            </div>
+          </section>
 
 
 
-        <section className="card">
-          <h4>Additional Content Information (Optional)</h4>
-          <div className="form-row">
-            <label htmlFor="meta_thumbnail">Thumbnail URL</label> <FormField type="text" ref="meta_thumbnail" name="thumbnail" placeholder="http://mycompany.com/images/ep_1.jpg" style={publishFieldStyle} />
-          </div>
-        </section>
+          <section className="card">
+            <h4>Additional Content Information (Optional)</h4>
+            <div className="form-row">
+              <label htmlFor="meta_thumbnail">Thumbnail URL</label> <FormField type="text" ref="meta_thumbnail" name="thumbnail" placeholder="http://mycompany.com/images/ep_1.jpg" style={publishFieldStyle} />
+            </div>
+          </section>
 
-        <div className="card-series-submit">
-          <Link button="primary" label={!this.state.submitting ? 'Publish' : 'Publishing...'} onClick={this.handleSubmit} disabled={this.state.submitting} />
-          <Link button="cancel" href="/" label="Cancel"/>
-         </div>
-       </main>
+          <div className="card-series-submit">
+           <Link button="primary" label={!this.state.submitting ? 'Publish' : 'Publishing...'} onClick={this.handleSubmit} disabled={this.state.submitting} />
+           <Link button="cancel" href="/" label="Cancel"/>
+          </div>
+        </form>
+      </main>
     );
   }
 });