From 4c36fd097f0fcb85acb302a92ad0d15fb11df032 Mon Sep 17 00:00:00 2001
From: Richard <richard@tripaneer.com>
Date: Fri, 17 Jan 2020 21:55:42 +0100
Subject: [PATCH] added interpolation for the translations and added label for
 plus id's for the fields

---
 ui/src/components/setup.tsx | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/ui/src/components/setup.tsx b/ui/src/components/setup.tsx
index d421e46f8..36f973a2d 100644
--- a/ui/src/components/setup.tsx
+++ b/ui/src/components/setup.tsx
@@ -80,17 +80,16 @@ export class Setup extends Component<any, State> {
   registerUser() {
     return (
       <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
-        <h5>
-          <T i18nKey="setup_admin">#</T>
-        </h5>
+        <h4>{ i18n.t('setup_admin')}</h4>
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label">
-            <T i18nKey="username">#</T>
+          <label class="col-sm-2 col-form-label" for="username">
+            { i18n.t('username') } 
           </label>
           <div class="col-sm-10">
             <input
               type="text"
               class="form-control"
+              id="username"
               value={this.state.userForm.username}
               onInput={linkEvent(this, this.handleRegisterUsernameChange)}
               required
@@ -101,12 +100,14 @@ export class Setup extends Component<any, State> {
           </div>
         </div>
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label">
-            <T i18nKey="email">#</T>
+          <label class="col-sm-2 col-form-label" for="email">
+            { i18n.t('email') }
           </label>
+
           <div class="col-sm-10">
             <input
               type="email"
+              id="email"
               class="form-control"
               placeholder={i18n.t('optional')}
               value={this.state.userForm.email}
@@ -116,12 +117,13 @@ export class Setup extends Component<any, State> {
           </div>
         </div>
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label">
-            <T i18nKey="password">#</T>
+          <label class="col-sm-2 col-form-label" for="password">
+            { i18n.t('password')}
           </label>
           <div class="col-sm-10">
             <input
               type="password"
+              id="password"
               value={this.state.userForm.password}
               onInput={linkEvent(this, this.handleRegisterPasswordChange)}
               class="form-control"
@@ -130,12 +132,13 @@ export class Setup extends Component<any, State> {
           </div>
         </div>
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label">
-            <T i18nKey="verify_password">#</T>
+          <label class="col-sm-2 col-form-label" for="verify-password">
+            { i18n.t('verify_password') }
           </label>
           <div class="col-sm-10">
             <input
               type="password"
+              id="verify-password"
               value={this.state.userForm.password_verify}
               onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
               class="form-control"