usability features

This are all the commits from another PR combined into a single commit.

1 files changed, 15 insertions, 12 deletions

diff --git a/ui/src/components/setup.tsx b/ui/src/components/setup.tsx
index 25cfadef..029f22b9 100644
--- a/ui/src/components/setup.tsx
+++ b/ui/src/components/setup.tsx
@@ -62,7 +62,7 @@ export class Setup extends Component<any, State> {
         <div class="row">
           <div class="col-12 offset-lg-3 col-lg-6">
             <h3>
-              <T i18nKey="lemmy_instance_setup">#</T>
+                { i18n.t('lemmy_instance_setup') }
             </h3>
             {!this.state.doneRegisteringUser ? (
               this.registerUser()
@@ -78,17 +78,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
@@ -99,12 +98,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}
@@ -114,12 +115,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"
@@ -128,12 +130,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"