mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-17 22:57:21 +01:00
12773d539e
* Read IP blocks from database * begin building general blocking solution * add new frontend files * Add UI for managing blockers * correctly reset local data after creating blocker * Tweak wording * Add UI for managing blockers * restructure admin pages * improve test coverage * Improve blocker UI * add blocker to block emails from registration * lint fix * fix * lint fixes * fix import * add new permission for managing blockers * improve permission check * fix managing permissions from admin * improve navbar display for non fullAccess admin * update block error strings * lint fix * add option to errorHandler to skip logging * validate blocker value during input * improve blocker form display * chore(subproj): reconcile habitica-images * fix(scripts): use same Mongo version for dev/test * fix(whitespace): eof * documentation improvements * remove nconf import * remove old test --------- Co-authored-by: Kalista Payne <kalista@habitica.com> Co-authored-by: Kalista Payne <sabrecat@gmail.com>
134 lines
2.7 KiB
Vue
134 lines
2.7 KiB
Vue
<template>
|
|
<div style="display: contents">
|
|
<td>
|
|
<select
|
|
v-model="blocker.type"
|
|
class="form-control"
|
|
@change="onTypeChanged"
|
|
>
|
|
<option value="ipaddress">
|
|
IP-Address
|
|
</option>
|
|
<option value="client">
|
|
Client Identifier
|
|
</option>
|
|
<option value="email">
|
|
E-Mail
|
|
</option>
|
|
</select>
|
|
</td>
|
|
<td>
|
|
<select
|
|
v-model="blocker.area"
|
|
class="form-control"
|
|
>
|
|
<option value="full">
|
|
Full
|
|
</option>
|
|
</select>
|
|
</td>
|
|
<td>
|
|
<input
|
|
v-model="blocker.value"
|
|
class="form-control"
|
|
autocorrect="off"
|
|
autocapitalize="off"
|
|
:class="{ 'is-invalid input-invalid': !isValid }"
|
|
@input="validateValue"
|
|
>
|
|
</td>
|
|
<td>
|
|
<input
|
|
v-model="blocker.reason"
|
|
class="form-control"
|
|
>
|
|
</td>
|
|
<td
|
|
colspan="3"
|
|
class="text-right"
|
|
>
|
|
<button
|
|
class="btn btn-primary mr-2"
|
|
:disabled="!isValid"
|
|
:class="{ disabled: !isValid }"
|
|
@click="$emit('save', blocker)"
|
|
>
|
|
<span>Save</span>
|
|
</button>
|
|
<button
|
|
class="btn btn-danger"
|
|
@click="$emit('cancel')"
|
|
>
|
|
<span>Cancel</span>
|
|
</button>
|
|
</td>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.btn-primary.disabled {
|
|
background: #4F2A93;
|
|
color: white;
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import isIP from 'validator/es/lib/isIP';
|
|
|
|
export default {
|
|
name: 'BlockerForm',
|
|
props: {
|
|
isNew: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
blocker: {
|
|
type: Object,
|
|
default: () => ({
|
|
type: '',
|
|
area: '',
|
|
value: '',
|
|
reason: '',
|
|
}),
|
|
},
|
|
},
|
|
data () {
|
|
return {
|
|
isValid: false,
|
|
};
|
|
},
|
|
mounted () {
|
|
this.validateValue();
|
|
},
|
|
methods: {
|
|
onTypeChanged () {
|
|
if (this.blocker.type === 'email') {
|
|
this.blocker.area = 'full';
|
|
}
|
|
this.validateValue();
|
|
},
|
|
validateValue () {
|
|
if (this.blocker.type === 'ipaddress') {
|
|
this.validateValueAsIpAddress();
|
|
} else if (this.blocker.type === 'client') {
|
|
this.validateValueAsClient();
|
|
} else if (this.blocker.type === 'email') {
|
|
this.validateValueAsEmail();
|
|
}
|
|
},
|
|
validateValueAsEmail () {
|
|
const emailRegex = /^([a-zA-Z0-9._%+-]*)@(?:[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})?$/;
|
|
this.isValid = emailRegex.test(this.blocker.value) && this.blocker.value.length > 3;
|
|
},
|
|
validateValueAsIpAddress () {
|
|
this.isValid = isIP(this.blocker.value);
|
|
},
|
|
validateValueAsClient () {
|
|
this.isValid = this.blocker.value.length > 0;
|
|
},
|
|
},
|
|
};
|
|
</script>
|