diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/login_form/login_form.vue | 22 | ||||
| -rw-r--r-- | src/components/registration/registration.vue | 14 | ||||
| -rw-r--r-- | src/components/settings/settings.js | 20 | ||||
| -rw-r--r-- | src/components/settings/settings.vue | 40 |
4 files changed, 84 insertions, 12 deletions
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; |