From 6ba07eabe8a3cd732eab6e653f187a0eac3aed79 Mon Sep 17 00:00:00 2001
From: Richard <richard@tripaneer.com>
Date: Sat, 18 Jan 2020 14:22:58 +0100
Subject: [PATCH] updated form labels and fields, updated translations

---
 ui/src/components/post-form.tsx | 40 +++++++++++++++++++--------------
 1 file changed, 23 insertions(+), 17 deletions(-)

diff --git a/ui/src/components/post-form.tsx b/ui/src/components/post-form.tsx
index fe633a01c..dbf77000f 100644
--- a/ui/src/components/post-form.tsx
+++ b/ui/src/components/post-form.tsx
@@ -136,12 +136,13 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
       <div>
         <form onSubmit={linkEvent(this, this.handlePostSubmit)}>
           <div class="form-group row">
-            <label class="col-sm-2 col-form-label">
-              <T i18nKey="url">#</T>
+            <label class="col-sm-2 col-form-label" for="post-url">
+              { i18n.t('url') }
             </label>
             <div class="col-sm-10">
               <input
                 type="url"
+                id="post-url"
                 class="form-control"
                 value={this.state.postForm.url}
                 onInput={linkEvent(this, this.handlePostUrlChange)}
@@ -165,7 +166,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                   className={`${UserService.Instance.user &&
                     'pointer'} d-inline-block mr-2 float-right text-muted small font-weight-bold`}
                 >
-                  <T i18nKey="upload_image">#</T>
+                  { i18n.t('upload_image') }
                 </label>
                 <input
                   id="file-upload"
@@ -185,7 +186,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                   target="_blank"
                   class="mr-2 d-inline-block float-right text-muted small font-weight-bold"
                 >
-                  <T i18nKey="archive_link">#</T>
+                  { i18n.t('archive_link') }
                 </a>
               )}
               {this.state.imageLoading && (
@@ -199,7 +200,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
               {this.state.crossPosts.length > 0 && (
                 <>
                   <div class="my-1 text-muted small font-weight-bold">
-                    <T i18nKey="cross_posts">#</T>
+                    { i18n.t('cross_posts') }
                   </div>
                   <PostListings showCommunity posts={this.state.crossPosts} />
                 </>
@@ -207,12 +208,13 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
             </div>
           </div>
           <div class="form-group row">
-            <label class="col-sm-2 col-form-label">
-              <T i18nKey="title">#</T>
+            <label class="col-sm-2 col-form-label" for="post-title">
+              { i18n.t('title') }
             </label>
             <div class="col-sm-10">
               <textarea
                 value={this.state.postForm.name}
+                id="post-title"
                 onInput={linkEvent(this, this.handlePostNameChange)}
                 class="form-control"
                 required
@@ -223,20 +225,22 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
               {this.state.suggestedPosts.length > 0 && (
                 <>
                   <div class="my-1 text-muted small font-weight-bold">
-                    <T i18nKey="related_posts">#</T>
+                    { i18n.t('related_posts') }
                   </div>
                   <PostListings posts={this.state.suggestedPosts} />
                 </>
               )}
             </div>
           </div>
+
           <div class="form-group row">
-            <label class="col-sm-2 col-form-label">
-              <T i18nKey="body">#</T>
+            <label class="col-sm-2 col-form-label" for="post-body">
+              { i18n.t('body') }
             </label>
             <div class="col-sm-10">
               <textarea
                 value={this.state.postForm.body}
+                id="post-body"
                 onInput={linkEvent(this, this.handlePostBodyChange)}
                 className={`form-control ${this.state.previewMode && 'd-none'}`}
                 rows={4}
@@ -254,7 +258,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                     .previewMode && 'active'}`}
                   onClick={linkEvent(this, this.handlePreviewToggle)}
                 >
-                  <T i18nKey="preview">#</T>
+                  { i18n.t('preview') }
                 </button>
               )}
               <a
@@ -262,18 +266,19 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                 target="_blank"
                 class="d-inline-block float-right text-muted small font-weight-bold"
               >
-                <T i18nKey="formatting_help">#</T>
+                { i18n.t('formatting_help') }
               </a>
             </div>
           </div>
           {!this.props.post && (
             <div class="form-group row">
-              <label class="col-sm-2 col-form-label">
-                <T i18nKey="community">#</T>
+              <label class="col-sm-2 col-form-label" for="post-community">
+                { i18n.t('community') }
               </label>
               <div class="col-sm-10">
                 <select
                   class="form-control"
+                  id="post-community"
                   value={this.state.postForm.community_id}
                   onInput={linkEvent(this, this.handlePostCommunityChange)}
                 >
@@ -290,12 +295,13 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                 <div class="form-check">
                   <input
                     class="form-check-input"
+                    id="post-nsfw"
                     type="checkbox"
                     checked={this.state.postForm.nsfw}
                     onChange={linkEvent(this, this.handlePostNsfwChange)}
                   />
-                  <label class="form-check-label">
-                    <T i18nKey="nsfw">#</T>
+                  <label class="form-check-label" for="post-nsfw">
+                    { i18n.t('nsfw') }
                   </label>
                 </div>
               </div>
@@ -320,7 +326,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                   class="btn btn-secondary"
                   onClick={linkEvent(this, this.handleCancel)}
                 >
-                  <T i18nKey="cancel">#</T>
+                  { i18n.t('cancel') }
                 </button>
               )}
             </div>