From a766e886f529a3f602ebacf70d7944678c027414 Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Sat, 15 Apr 2017 18:12:23 +0200
Subject: Add a registration form.

---
 src/components/registration/registration.vue | 86 ++++++++++++++++++++++++++++
 1 file changed, 86 insertions(+)
 create mode 100644 src/components/registration/registration.vue

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

diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
new file mode 100644
index 00000000..b93b6cb3
--- /dev/null
+++ b/src/components/registration/registration.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="settings panel panel-default base00-background">
+    <div class="panel-heading base01-background base04">
+      Registration
+    </div>
+    <div class="panel-body">
+      <form v-on:submit.prevent='submit(user)' class='registration-form'>
+        <div class='form-group'>
+          <label for='username'>Username</label>
+          <input :disabled="registering" v-model='user.username' class='form-control' id='username' placeholder='e.g. lain'>
+        </div>
+        <div class='form-group'>
+          <label for='fullname'>Fullname</label>
+          <input :disabled="registering" v-model='user.fullname' class='form-control' id='fullname' placeholder='e.g. Lain Iwakura'>
+        </div>
+        <div class='form-group'>
+          <label for='bio'>Bio</label>
+          <input :disabled="registering" v-model='user.bio' class='form-control' id='bio'>
+        </div>
+        <div class='form-group'>
+          <label for='password'>Password</label>
+          <input :disabled="registering" v-model='user.password' class='form-control' id='password' type='password'>
+        </div>
+        <div class='form-group'>
+          <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'>
+          <button :disabled="registering" type='submit' class='btn btn-default base05 base01-background'>Submit</button>
+        </div>
+        <div v-if="error" class='form-group'>
+          <div class='error base05'>{{error}}</div>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script src="./registration.js"></script>
+<style lang="scss">
+
+.registration-form {
+     form {
+         display: flex;
+         flex-direction: column;
+         padding: 0.6em;
+     }
+
+     .form-group {
+         display: flex;
+         flex-direction: column;
+         padding: 0.3em 0.5em 0.6em;
+         line-height:24px;
+     }
+
+     form textarea {
+         border: solid;
+         border-width: 1px;
+         border-color: silver;
+         border-radius: 5px;
+         line-height:16px;
+         padding: 5px;
+         resize: vertical;
+     }
+  input {
+    border-width: 1px;
+    border-style: solid;
+    border-color: silver;
+    border-radius: 5px;
+    padding: 0.1em 0.2em 0.2em 0.2em;
+  }
+
+  .btn {
+    margin-top: 1.0em;
+    min-height: 28px;
+  }
+
+  .error {
+    border-radius: 5px;
+    text-align: center;
+    background-color: rgba(255, 48, 16, 0.65);
+    min-height: 28px;
+    line-height: 28px;
+  }
+}
+</style>
-- 
cgit v1.2.3-70-g09d2


From 4228cfc3422a37e1e15f12d9211803f5a70d62b0 Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Sun, 16 Apr 2017 11:02:03 +0200
Subject: Add email field to registration.

---
 src/components/registration/registration.vue | 4 ++++
 1 file changed, 4 insertions(+)

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

diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index b93b6cb3..1560bcff 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -13,6 +13,10 @@
           <label for='fullname'>Fullname</label>
           <input :disabled="registering" v-model='user.fullname' class='form-control' id='fullname' placeholder='e.g. Lain Iwakura'>
         </div>
+        <div class='form-group'>
+          <label for='email'>Email</label>
+          <input :disabled="registering" v-model='user.email' class='form-control' id='email' type="email">
+        </div>
         <div class='form-group'>
           <label for='bio'>Bio</label>
           <input :disabled="registering" v-model='user.bio' class='form-control' id='bio'>
-- 
cgit v1.2.3-70-g09d2


From b3b6d43dcc56ba8828d4bd180676b46141c0f0b1 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@gmail.com>
Date: Mon, 17 Apr 2017 13:57:02 +0300
Subject: Add ToS field into registration form (still need to make it fetch it
 somewhere.) Make the register form look more polished.

---
 src/components/registration/registration.vue | 130 +++++++++++++++++----------
 1 file changed, 82 insertions(+), 48 deletions(-)

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

diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 1560bcff..5267f0e1 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -5,32 +5,40 @@
     </div>
     <div class="panel-body">
       <form v-on:submit.prevent='submit(user)' class='registration-form'>
-        <div class='form-group'>
-          <label for='username'>Username</label>
-          <input :disabled="registering" v-model='user.username' class='form-control' id='username' placeholder='e.g. lain'>
-        </div>
-        <div class='form-group'>
-          <label for='fullname'>Fullname</label>
-          <input :disabled="registering" v-model='user.fullname' class='form-control' id='fullname' placeholder='e.g. Lain Iwakura'>
-        </div>
-        <div class='form-group'>
-          <label for='email'>Email</label>
-          <input :disabled="registering" v-model='user.email' class='form-control' id='email' type="email">
-        </div>
-        <div class='form-group'>
-          <label for='bio'>Bio</label>
-          <input :disabled="registering" v-model='user.bio' class='form-control' id='bio'>
-        </div>
-        <div class='form-group'>
-          <label for='password'>Password</label>
-          <input :disabled="registering" v-model='user.password' class='form-control' id='password' type='password'>
-        </div>
-        <div class='form-group'>
-          <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'>
-          <button :disabled="registering" type='submit' class='btn btn-default base05 base01-background'>Submit</button>
+        <div class='container'>
+          <div class='text-fields'>
+            <div class='form-group'>
+              <label for='username'>Username</label>
+              <input :disabled="registering" v-model='user.username' class='form-control' id='username' placeholder='e.g. lain'>
+            </div>
+            <div class='form-group'>
+              <label for='fullname'>Fullname</label>
+              <input :disabled="registering" v-model='user.fullname' class='form-control' id='fullname' placeholder='e.g. Lain Iwakura'>
+            </div>
+            <div class='form-group'>
+              <label for='email'>Email</label>
+              <input :disabled="registering" v-model='user.email' class='form-control' id='email' type="email">
+            </div>
+            <div class='form-group'>
+              <label for='bio'>Bio</label>
+              <input :disabled="registering" v-model='user.bio' class='form-control' id='bio'>
+            </div>
+            <div class='form-group'>
+              <label for='password'>Password</label>
+              <input :disabled="registering" v-model='user.password' class='form-control' id='password' type='password'>
+            </div>
+            <div class='form-group'>
+              <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'>
+              <button :disabled="registering" type='submit' class='btn btn-default base05 base01-background'>Submit</button>
+            </div>
+          </div>
+          <div class='terms-of-service'>
+            <h4>Terms of Service</h4>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          </div>
         </div>
         <div v-if="error" class='form-group'>
           <div class='error base05'>{{error}}</div>
@@ -44,28 +52,45 @@
 <style lang="scss">
 
 .registration-form {
-     form {
-         display: flex;
-         flex-direction: column;
-         padding: 0.6em;
-     }
+  display: flex;
+  flex-direction: column;
+  margin: 0.6em;
+
+  .container {
+    display: flex;
+    flex-direction: row;
+    //margin-bottom: 1em;
+  }
+
+  .terms-of-service {
+    flex: 0 1 55%;
+    margin: 0.8em;
+  }
+
+  .text-fields {
+    margin-top: 0.6em;
+    flex: 1 0;
+    display: flex;
+    flex-direction: column;
+  }
 
-     .form-group {
-         display: flex;
-         flex-direction: column;
-         padding: 0.3em 0.5em 0.6em;
-         line-height:24px;
-     }
+  .form-group {
+    display: flex;
+    flex-direction: column;
+    padding: 0.3em 0.0em 0.3em;
+    line-height:24px;
+  }
+
+  form textarea {
+    border: solid;
+    border-width: 1px;
+    border-color: silver;
+    border-radius: 5px;
+    line-height:16px;
+    padding: 5px;
+    resize: vertical;
+  }
 
-     form textarea {
-         border: solid;
-         border-width: 1px;
-         border-color: silver;
-         border-radius: 5px;
-         line-height:16px;
-         padding: 5px;
-         resize: vertical;
-     }
   input {
     border-width: 1px;
     border-style: solid;
@@ -75,16 +100,25 @@
   }
 
   .btn {
-    margin-top: 1.0em;
-    min-height: 28px;
+    //align-self: flex-start;
+    //width: 10em;
+    margin-top: 0.6em;
+    height: 28px;
   }
 
   .error {
     border-radius: 5px;
     text-align: center;
+    margin: 0.5em 0.6em 0;
     background-color: rgba(255, 48, 16, 0.65);
     min-height: 28px;
     line-height: 28px;
   }
 }
+
+@media all and (max-width: 959px) {
+  .registration-form .container {
+    flex-direction: column-reverse;
+  }
+}
 </style>
-- 
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/registration/registration.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 bfbc94d697df9e80e0454fbae776b6dec85dfc9b Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@gmail.com>
Date: Mon, 19 Jun 2017 16:35:35 +0300
Subject: Move customizable terms-of-service into its separate .html file.

---
 src/components/registration/registration.js  | 3 +++
 src/components/registration/registration.vue | 4 +---
 src/main.js                                  | 8 +++++++-
 static/terms-of-service.html                 | 7 +++++++
 4 files changed, 18 insertions(+), 4 deletions(-)
 create mode 100644 static/terms-of-service.html

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

diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js
index 93be9baa..9e99197c 100644
--- a/src/components/registration/registration.js
+++ b/src/components/registration/registration.js
@@ -4,6 +4,9 @@ const registration = {
     error: false,
     registering: false
   }),
+  computed: {
+    termsofservice () { return this.$store.state.config.tos }
+  },
   methods: {
     submit () {
       this.registering = true
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index f010d8ab..bb3e5e04 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -42,9 +42,7 @@
               <button :disabled="registering" type='submit' class='btn btn-default base05 base01-background'>Submit</button>
             </div>
           </div>
-          <div class='terms-of-service'>
-            <h4>Terms of Service</h4>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          <div class='terms-of-service' v-html="termsofservice">
           </div>
         </div>
         <div v-if="error" class='form-group'>
diff --git a/src/main.js b/src/main.js
index dd59dea7..52b820c2 100644
--- a/src/main.js
+++ b/src/main.js
@@ -86,9 +86,15 @@ new Vue({
 
 window.fetch('/static/config.json')
   .then((res) => res.json())
-  .then(({name, theme, background, logo}) => {
+  .then(({name, theme, background, logo, tos}) => {
     store.dispatch('setOption', { name: 'name', value: name })
     store.dispatch('setOption', { name: 'theme', value: theme })
     store.dispatch('setOption', { name: 'background', value: background })
     store.dispatch('setOption', { name: 'logo', value: logo })
   })
+
+window.fetch('/static/terms-of-service.html')
+  .then((res) => res.text())
+  .then((html) => {
+    store.dispatch('setOption', { name: 'tos', value: html })
+  })
diff --git a/static/terms-of-service.html b/static/terms-of-service.html
new file mode 100644
index 00000000..c02cb719
--- /dev/null
+++ b/static/terms-of-service.html
@@ -0,0 +1,7 @@
+<h4>Terms of Service</h4>
+
+<p>This is a placeholder ToS.</p>
+
+<p>Edit <code>"/static/terms-of-service.html"</code> to make it fit the needs of your instance.</p>
+<br>
+<img src="/static/logo.png"/ style="display: block; margin: auto;">
-- 
cgit v1.2.3-70-g09d2

