Started captcha and better avatar control, improved login form to fit register link better.

src/components/login_form/login_form.vue

@@ -15,14 +15,14 @@
           <input :disabled="loggingIn" v-model='user.password' class='form-control' id='password' type='password'>
         </div>
         <div class='form-group'>
-          <button :disabled="loggingIn" type='submit' class='btn btn-default base05 base01-background'>Submit</button>
+          <div class='login-bottom'>
+            <div><router-link :to="{name: 'registration'}" class='register'>Register</router-link></div>
+            <button :disabled="loggingIn" type='submit' class='btn btn-default base05 base01-background'>Log in</button>
+          </div>
         </div>
         <div v-if="authError" class='form-group'>
           <div class='error base05'>{{authError}}</div>
         </div>
-        <div class='form-group'>
-          <router-link :to="{name: 'registration'}">Register new account</router-link>
-        </div>
       </form>
     </div>
   </div>
@@ -42,8 +42,8 @@
   }
 
   .btn {
-    margin-top: 1.0em;
     min-height: 28px;
+    width: 10em;
   }
 
   .error {
@@ -53,6 +53,18 @@
     min-height: 28px;
     line-height: 28px;
   }
+
+  .register {
+    flex: 1 1;
+  }
+
+  .login-bottom {
+    margin-top: 1.0em;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
 }
 
 </style>

src/components/registration/registration.vue

@@ -31,6 +31,13 @@
               <label for='password_confirmation'>Password confirmation</label>
               <input :disabled="registering" v-model='user.confirm' class='form-control' id='password_confirmation' type='password'>
             </div>
+            <!--
+            <div class='form-group'>
+              <label for='captcha'>Captcha</label>
+              <img src='/qvittersimplesecurity/captcha.jpg' alt='captcha' class='captcha'>
+              <input :disabled="registering" v-model='user.captcha' placeholder='Enter captcha' type='test' class='form-control' id='captcha'>
+            </div>
+            -->
             <div class='form-group'>
               <button :disabled="registering" type='submit' class='btn btn-default base05 base01-background'>Submit</button>
             </div>
@@ -63,7 +70,7 @@
   }
 
   .terms-of-service {
-    flex: 0 1 55%;
+    flex: 0 1 50%;
     margin: 0.8em;
   }
 
@@ -99,6 +106,11 @@
     padding: 0.1em 0.2em 0.2em 0.2em;
   }
 
+  .captcha {
+    max-width: 350px;
+    margin-bottom: 0.4em;
+  }
+
   .btn {
     //align-self: flex-start;
     //width: 10em;

src/components/settings/settings.js

@@ -7,7 +7,8 @@ const settings = {
       hideAttachmentsLocal: this.$store.state.config.hideAttachments,
       hideAttachmentsInConvLocal: this.$store.state.config.hideAttachmentsInConv,
       hideNsfwLocal: this.$store.state.config.hideNsfw,
-      muteWordsString: this.$store.state.config.muteWords.join('\n')
+      muteWordsString: this.$store.state.config.muteWords.join('\n'),
+      previewfile: null
     }
   },
   components: {
@@ -25,7 +26,20 @@ const settings = {
       const reader = new FileReader()
       reader.onload = ({target}) => {
         const img = target.result
-
+        this.previewfile = img
+        /*this.$store.state.api.backendInteractor.updateAvatar({params: {img}}).then((user) => {
+          if (!user.error) {
+            this.$store.commit('addNewUsers', [user])
+            this.$store.commit('setCurrentUser', user)
+          }
+        })*/
+      }
+      reader.readAsDataURL(file)
+    },
+    submitAvatar () {
+      if (!this.previewfile)
+        return
+      const img = this.previewfile
       this.$store.state.api.backendInteractor.updateAvatar({params: {img}}).then((user) => {
         if (!user.error) {
           this.$store.commit('addNewUsers', [user])
@@ -33,8 +47,6 @@ const settings = {
         }
       })
     }
-      reader.readAsDataURL(file)
-    }
   },
   watch: {
     hideAttachmentsLocal (value) {

src/components/settings/settings.vue

@@ -8,12 +8,17 @@
         <h2>Theme</h2>
         <style-switcher></style-switcher>
       </div>
-      <div class="setting-item">
+      <div class="setting-item" v-if="user">
         <h2>Avatar</h2>
-        <img :src="user.profile_image_url_original"></img>
+        <p>Your current avatar:</p>
+        <img :src="user.profile_image_url_original" class="old-avatar"></img>
+        <p>Set new avatar:</p>
+        <img class="new-avatar" v-bind:src="previewfile">
+        </img>
         <div>
           <input name="avatar-upload" id="avatar-upload" type="file" @change="uploadAvatar" ></input>
         </div>
+        <button class="btn btn-default base05 base01-background" v-if="previewfile" @click="submitAvatar">Submit</button>
       </div>
       <div class="setting-item">
         <h2>Filtering</h2>
@@ -51,6 +56,37 @@
      width: 100%;
      height: 100px;
    }
+
+   .old-avatar {
+     width: 128px;
+     border-radius: 5px;
+   }
+
+   .new-avatar {
+     max-width: 100%;
+     border-radius: 5px;
+   }
+
+   .btn {
+     margin-top: 1em;
+     min-height: 28px;
+     width: 10em;
+   }
+
+   .cropper {
+     //position: absolute;
+     cursor: move;
+     width: 128px;
+     height: 128px;
+     border:1px solid #fff;
+     background-color: #000000;
+     .sub {
+       width: 100%;
+       height: 100%;
+       margin: -1px -1px -1px -1px ;
+       border:1px dashed #000;
+     }
+   }
  }
  .setting-list {
    list-style-type: none;