From 37c10be5e29815057b4b1adcd268b9f4cb5b415e Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Sun, 16 Apr 2017 13:44:11 +0200
Subject: Add basic avatar changing.

---
 src/components/settings/settings.vue | 7 +++++++
 1 file changed, 7 insertions(+)

(limited to 'src/components/settings/settings.vue')

diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index 33d46e7e..7ceac828 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -8,6 +8,13 @@
         <h2>Theme</h2>
         <style-switcher></style-switcher>
       </div>
+      <div class="setting-item">
+        <h2>Avatar</h2>
+        <img :src="user.profile_image_url_original"></img>
+        <div>
+          <input name="avatar-upload" id="avatar-upload" type="file" @change="uploadAvatar" ></input>
+        </div>
+      </div>
       <div class="setting-item">
         <h2>Filtering</h2>
         <p>All notices containing these words will be muted, one per line</p>
-- 
cgit v1.2.3-70-g09d2


From 143aa3b990c0e0fac98c4a097d68e9f7518f1940 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@gmail.com>
Date: Fri, 21 Apr 2017 18:52:42 +0300
Subject: Started captcha and better avatar control, improved login form to fit
 register link better.

---
 src/components/login_form/login_form.vue     | 22 +++++++++++----
 src/components/registration/registration.vue | 14 +++++++++-
 src/components/settings/settings.js          | 20 +++++++++++---
 src/components/settings/settings.vue         | 40 ++++++++++++++++++++++++++--
 4 files changed, 84 insertions(+), 12 deletions(-)

(limited to 'src/components/settings/settings.vue')

diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index bf3f24e7..585af6f6 100644
--- a/src/components/login_form/login_form.vue
+++ b/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>
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 5267f0e1..f010d8ab 100644
--- a/src/components/registration/registration.vue
+++ b/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;
diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index 883e5caa..e4ea56f6 100644
--- a/src/components/settings/settings.js
+++ b/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,15 +26,26 @@ const settings = {
       const reader = new FileReader()
       reader.onload = ({target}) => {
         const img = target.result
-
-        this.$store.state.api.backendInteractor.updateAvatar({params: {img}}).then((user) => {
+        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])
+          this.$store.commit('setCurrentUser', user)
+        }
+      })
     }
   },
   watch: {
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index 7ceac828..bdc0f351 100644
--- a/src/components/settings/settings.vue
+++ b/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;
-- 
cgit v1.2.3-70-g09d2


From 95605c32f1a8d08d72eb60d34abead6067b79841 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@gmail.com>
Date: Mon, 19 Jun 2017 12:26:33 +0300
Subject: Automatic square cropping for avatar upload, preview of the new
 avatar.

---
 src/components/settings/settings.js  | 30 +++++++++++++++++++-----------
 src/components/settings/settings.vue | 21 ++++-----------------
 2 files changed, 23 insertions(+), 28 deletions(-)

(limited to 'src/components/settings/settings.vue')

diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index b8aa876b..8d6a6713 100644
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@@ -8,10 +8,9 @@ const settings = {
       hideAttachmentsInConvLocal: this.$store.state.config.hideAttachmentsInConv,
       hideNsfwLocal: this.$store.state.config.hideNsfw,
       muteWordsString: this.$store.state.config.muteWords.join('\n'),
-      previewfile: null,
       autoLoadLocal: this.$store.state.config.autoLoad,
       hoverPreviewLocal: this.$store.state.config.hoverPreview,
-      muteWordsString: this.$store.state.config.muteWords.join('\n')
+      previewfile: null
     }
   },
   components: {
@@ -30,20 +29,29 @@ const settings = {
       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
+      if (!this.previewfile) { return }
+
       const img = this.previewfile
-      this.$store.state.api.backendInteractor.updateAvatar({params: {img}}).then((user) => {
+      // eslint-disable-next-line no-undef
+      let imginfo = new Image()
+      let cropX, cropY, cropW, cropH
+      imginfo.src = this.previewfile
+      if (imginfo.height > imginfo.width) {
+        cropX = 0
+        cropW = imginfo.width
+        cropY = Math.floor((imginfo.height - imginfo.width) / 2)
+        cropH = imginfo.width
+      } else {
+        cropY = 0
+        cropH = imginfo.height
+        cropX = Math.floor((imginfo.width - imginfo.height) / 2)
+        cropW = imginfo.height
+      }
+      this.$store.state.api.backendInteractor.updateAvatar({params: {img, cropX, cropY, cropW, cropH}}).then((user) => {
         if (!user.error) {
           this.$store.commit('addNewUsers', [user])
           this.$store.commit('setCurrentUser', user)
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index f2442194..1abb1789 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -13,7 +13,7 @@
         <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 class="new-avatar" v-bind:src="previewfile" v-if="previewfile">
         </img>
         <div>
           <input name="avatar-upload" id="avatar-upload" type="file" @change="uploadAvatar" ></input>
@@ -71,7 +71,9 @@
    }
 
    .new-avatar {
-     max-width: 100%;
+     object-fit: cover;
+     width: 128px;
+     height: 128px;
      border-radius: 5px;
    }
 
@@ -80,21 +82,6 @@
      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;
-- 
cgit v1.2.3-70-g09d2

