translation interpolation, fixed heading levels and add id's and for attributes to labels and form items

ui/src/components/login.tsx

@@ -84,15 +84,16 @@ export class Login extends Component<any, State> {
     return (
       <div>
         <form onSubmit={linkEvent(this, this.handleLoginSubmit)}>
-          <h5>Login</h5>
+          <h2>{ i18n.t('login') }</h2>
           <div class="form-group row">
-            <label class="col-sm-2 col-form-label">
+            <label class="col-sm-2 col-form-label" for="login-email-or-username">
-              <T i18nKey="email_or_username">#</T>
+                { i18n.t('email_or_username') }
             </label>
             <div class="col-sm-10">
               <input
                 type="text"
                 class="form-control"
+                id="login-email-or-username"
                 value={this.state.loginForm.username_or_email}
                 onInput={linkEvent(this, this.handleLoginUsernameChange)}
                 required
@@ -101,12 +102,13 @@ export class Login extends Component<any, State> {
             </div>
           </div>
           <div class="form-group row">
-            <label class="col-sm-2 col-form-label">
+            <label class="col-sm-2 col-form-label" for="login-password">
-              <T i18nKey="password">#</T>
+                { i18n.t('password') }
             </label>
             <div class="col-sm-10">
               <input
                 type="password"
+                id="login-password"
                 value={this.state.loginForm.password}
                 onInput={linkEvent(this, this.handleLoginPasswordChange)}
                 class="form-control"
@@ -117,10 +119,11 @@ export class Login extends Component<any, State> {
                 onClick={linkEvent(this, this.handlePasswordReset)}
                 className="btn p-0 btn-link d-inline-block float-right text-muted small font-weight-bold"
               >
-                <T i18nKey="forgot_password">#</T>
+                { i18n.t('forgot_password') }
               </button>
             </div>
           </div>
+
           <div class="form-group row">
             <div class="col-sm-10">
               <button type="submit" class="btn btn-secondary">
@@ -141,16 +144,19 @@ export class Login extends Component<any, State> {
   registerForm() {
     return (
       <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
-        <h5>
+        <h2>
-          <T i18nKey="sign_up">#</T>
+          { i18n.t('sign_up') }
-        </h5>
+        </h2>
+
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label">
+          <label class="col-sm-2 col-form-label" for="register-username">
-            <T i18nKey="username">#</T>
+            { i18n.t('username') }
           </label>
+
           <div class="col-sm-10">
             <input
               type="text"
+              id="register-username"
               class="form-control"
               value={this.state.registerForm.username}
               onInput={linkEvent(this, this.handleRegisterUsernameChange)}
@@ -161,13 +167,15 @@ export class Login extends Component<any, State> {
             />
           </div>
         </div>
+
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label">
+          <label class="col-sm-2 col-form-label" for="register-email">
-            <T i18nKey="email">#</T>
+            { i18n.t('email') }
           </label>
           <div class="col-sm-10">
             <input
               type="email"
+              id="register-email"
               class="form-control"
               placeholder={i18n.t('optional')}
               value={this.state.registerForm.email}
@@ -176,13 +184,15 @@ export class Login extends Component<any, State> {
             />
           </div>
         </div>
+
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label">
+          <label class="col-sm-2 col-form-label" for="register-password">
-            <T i18nKey="password">#</T>
+            { i18n.t('password') }
           </label>
           <div class="col-sm-10">
             <input
               type="password"
+              id="register-password"
               value={this.state.registerForm.password}
               onInput={linkEvent(this, this.handleRegisterPasswordChange)}
               class="form-control"
@@ -190,13 +200,15 @@ export class Login extends Component<any, State> {
             />
           </div>
         </div>
+
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label">
+          <label class="col-sm-2 col-form-label" for="register-verify-password">
-            <T i18nKey="verify_password">#</T>
+            { i18n.t('verify_password') }
           </label>
           <div class="col-sm-10">
             <input
               type="password"
+              id="register-verify-password"
               value={this.state.registerForm.password_verify}
               onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
               class="form-control"
@@ -204,18 +216,20 @@ export class Login extends Component<any, State> {
             />
           </div>
         </div>
-        {this.state.enable_nsfw && (
+
+        { this.state.enable_nsfw && (
           <div class="form-group row">
             <div class="col-sm-10">
               <div class="form-check">
                 <input
                   class="form-check-input"
+                  id="register-show-nsfw"
                   type="checkbox"
                   checked={this.state.registerForm.show_nsfw}
                   onChange={linkEvent(this, this.handleRegisterShowNsfwChange)}
                 />
-                <label class="form-check-label">
+                <label class="form-check-label" for="register-show-nsfw">
-                  <T i18nKey="show_nsfw">#</T>
+                    { i18n.t('show_nsfw') }
                 </label>
               </div>
             </div>