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

This commit is contained in:
Shpuld Shpuldson 2017-04-21 18:52:42 +03:00
parent b3b6d43dcc
commit 143aa3b990
4 changed files with 84 additions and 12 deletions

View file

@ -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>

View file

@ -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;

View file

@ -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: {

View file

@ -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;