mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-18 15:17:25 +01:00
feat(usernames): invite by username
This commit is contained in:
Sabe Jones
@@ -1,152 +1,178 @@
|
||||
<template lang="pug">
|
||||
b-modal#invite-modal(:title="$t('inviteFriends')", size='lg')
|
||||
.modal-body
|
||||
p.alert.alert-info(v-html="$t('inviteAlertInfo')")
|
||||
.form-horizontal
|
||||
table.table.table-striped
|
||||
thead
|
||||
tr
|
||||
th {{ $t('userId') }}
|
||||
tbody
|
||||
tr(v-for='user in invitees')
|
||||
td
|
||||
input.form-control(type='text', v-model='user.uuid')
|
||||
tr
|
||||
td
|
||||
button.btn.btn-primary.pull-right(@click='addUuid()')
|
||||
i.glyphicon.glyphicon-plus
|
||||
| +
|
||||
tr
|
||||
td
|
||||
.col-6.col-offset-6
|
||||
button.btn.btn-primary.btn-block(@click='inviteNewUsers("uuid")') {{sendInviteText}}
|
||||
hr
|
||||
p.alert.alert-info {{ $t('inviteByEmail') }}
|
||||
.form-horizontal
|
||||
table.table.table-striped
|
||||
thead
|
||||
tr
|
||||
th {{ $t('name') }}
|
||||
th {{ $t('email') }}
|
||||
tbody
|
||||
tr(v-for='email in emails')
|
||||
td
|
||||
input.form-control(type='text', v-model='email.name')
|
||||
td
|
||||
input.form-control(type='email', v-model='email.email')
|
||||
tr
|
||||
td(colspan=2)
|
||||
button.btn.btn-primary.pull-right(@click='addEmail()')
|
||||
i.glyphicon.glyphicon-plus
|
||||
| +
|
||||
tr
|
||||
td.form-group(colspan=2)
|
||||
label.col-sm-1.control-label {{ $t('byColon') }}
|
||||
.col-sm-5
|
||||
input.form-control(type='text', v-model='inviter')
|
||||
.col-sm-6
|
||||
button.btn.btn-primary.btn-block(@click='inviteNewUsers("email")') {{sendInviteText}}
|
||||
b-modal#invite-modal(:title='$t(`inviteTo${groupType}`)', :hide-footer='true')
|
||||
div
|
||||
strong {{ $t('inviteEmailUsername') }}
|
||||
.small {{ $t('inviteEmailUsernameInfo') }}
|
||||
.input-group(v-for='(invite, index) in invites')
|
||||
.d-flex.align-items-center.justify-content-center(v-if='index === invites.length - 1 && invite.text.length === 0')
|
||||
.svg-icon.positive-icon(v-html='icons.positiveIcon')
|
||||
input.form-control(
|
||||
type='text',
|
||||
:placeholder='$t("emailOrUsernameInvite")',
|
||||
v-model='invite.text',
|
||||
v-on:change='checkInviteList',
|
||||
:class='{"input-valid": invite.valid, "is-invalid input-invalid": invite.valid === false}',
|
||||
)
|
||||
.modal-footer.d-flex.justify-content-center
|
||||
a.mr-3(@click='close()') {{ $t('cancel') }}
|
||||
button.btn.btn-primary(@click='sendInvites()', :class='{disabled: cannotSubmit}', :disabled='cannotSubmit') {{ $t('sendInvitations') }}
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
#invite-modal___BV_modal_outer_ {
|
||||
.modal-content {
|
||||
padding: 0rem 0.25rem;
|
||||
}
|
||||
}
|
||||
#invite-modal___BV_modal_header_.modal-header {
|
||||
border-bottom: 0px;
|
||||
}
|
||||
#invite-modal___BV_modal_header_ {
|
||||
.modal-title {
|
||||
color: #4F2A93;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
|
||||
a:not([href]) {
|
||||
color: $blue-10;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border: 0px;
|
||||
color: $gray-50;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
border-radius: 2px;
|
||||
border: solid 1px $gray-400;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: $gray-200;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.input-group:focus-within {
|
||||
border-color: $purple-500;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
.positive-icon {
|
||||
color: $green-10;
|
||||
width: 10px;
|
||||
margin: auto 0rem auto 1rem;
|
||||
}
|
||||
|
||||
.small {
|
||||
color: $gray-200;
|
||||
font-size: 12px;
|
||||
margin: 0.5rem 0rem 1rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'client/libs/store';
|
||||
import { mapState } from 'client/libs/store';
|
||||
import clone from 'lodash/clone';
|
||||
import debounce from 'lodash/debounce';
|
||||
import filter from 'lodash/filter';
|
||||
import forEach from 'lodash/forEach';
|
||||
import isEmail from 'validator/lib/isEmail';
|
||||
import isUUID from 'validator/lib/isUUID';
|
||||
import notifications from 'client/mixins/notifications';
|
||||
import positiveIcon from 'assets/svg/positive.svg';
|
||||
|
||||
import filter from 'lodash/filter';
|
||||
import map from 'lodash/map';
|
||||
import notifications from 'client/mixins/notifications';
|
||||
const INVITE_DEFAULTS = {text: '', valid: null};
|
||||
|
||||
export default {
|
||||
mixins: [notifications],
|
||||
props: ['group'],
|
||||
data () {
|
||||
return {
|
||||
invitees: [],
|
||||
emails: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({user: 'user.data'}),
|
||||
inviter () {
|
||||
return this.user.profile.name;
|
||||
export default {
|
||||
computed: {
|
||||
...mapState({user: 'user.data'}),
|
||||
cannotSubmit () {
|
||||
const filteredInvites = filter(this.invites, (invite) => {
|
||||
return invite.text.length > 0 && !invite.valid;
|
||||
});
|
||||
if (filteredInvites.length > 0) return true;
|
||||
},
|
||||
inviter () {
|
||||
return this.user.profile.name;
|
||||
},
|
||||
},
|
||||
sendInviteText () {
|
||||
return 'Send Invites';
|
||||
// if (!this.group) return 'Send Invites';
|
||||
// return this.group.sendInviteText;
|
||||
data () {
|
||||
return {
|
||||
invites: [clone(INVITE_DEFAULTS), clone(INVITE_DEFAULTS)],
|
||||
icons: Object.freeze({
|
||||
positiveIcon,
|
||||
}),
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
addUuid () {
|
||||
this.invitees.push({uuid: ''});
|
||||
methods: {
|
||||
checkInviteList: debounce(function checkList () {
|
||||
this.invites = filter(this.invites, (invite) => {
|
||||
return invite.text.length > 0;
|
||||
});
|
||||
if (this.invites[this.invites.length - 1].text.length > 0) this.invites.push(clone(INVITE_DEFAULTS));
|
||||
forEach(this.invites, (value, index) => {
|
||||
if (value.text.length < 1) return this.invites[index].valid = null;
|
||||
if (isEmail(value.text)) return this.invites[index].valid = true;
|
||||
if (isUUID(value.text)) {
|
||||
this.$store.dispatch('user:userLookup', {uuid: value.text})
|
||||
.then(res => {
|
||||
if (res.status === 200) return this.invites[index].valid = true;
|
||||
return this.invites[index].valid = false;
|
||||
});
|
||||
} else {
|
||||
this.$store.dispatch('user:userLookup', {username: value.text})
|
||||
.then(res => {
|
||||
if (res.status === 200) return this.invites[index].valid = true;
|
||||
return this.invites[index].valid = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
}, 500),
|
||||
close () {
|
||||
this.invites = [clone(INVITE_DEFAULTS), clone(INVITE_DEFAULTS)];
|
||||
this.$root.$emit('bv::hide::modal', 'invite-modal');
|
||||
},
|
||||
async sendInvites () {
|
||||
let invitationDetails = {
|
||||
inviter: this.inviter,
|
||||
emails: [],
|
||||
uuids: [],
|
||||
usernames: [],
|
||||
};
|
||||
forEach(this.invites, (invite) => {
|
||||
if (invite.text.length < 1) return;
|
||||
if (isEmail(invite.text)) {
|
||||
invitationDetails.emails.push({email: invite.text});
|
||||
} else if (isUUID(invite.text)) {
|
||||
invitationDetails.uuids.push(invite.text);
|
||||
} else {
|
||||
invitationDetails.usernames.push(invite.text);
|
||||
}
|
||||
});
|
||||
await this.$store.dispatch('guilds:invite', {
|
||||
invitationDetails,
|
||||
groupId: this.group._id,
|
||||
});
|
||||
|
||||
const invitesSent = invitationDetails.emails.length + invitationDetails.uuids.length + invitationDetails.usernames.length;
|
||||
let invitationString = invitesSent > 1 ? 'invitationsSent' : 'invitationSent';
|
||||
|
||||
this.text(this.$t(invitationString));
|
||||
this.close();
|
||||
},
|
||||
},
|
||||
addEmail () {
|
||||
this.emails.push({name: '', email: ''});
|
||||
},
|
||||
inviteNewUsers (inviteMethod) {
|
||||
if (!this.group._id) {
|
||||
if (!this.group.name) this.group.name = this.$t('possessiveParty', {name: this.user.profile.name});
|
||||
|
||||
// @TODO: Add dispatch
|
||||
// return Groups.Group.create(this.group)
|
||||
// .then(function(response) {
|
||||
// this.group = response.data.data;
|
||||
// _inviteByMethod(inviteMethod);
|
||||
// });
|
||||
}
|
||||
|
||||
this.inviteByMethod(inviteMethod);
|
||||
},
|
||||
async inviteByMethod (inviteMethod) {
|
||||
let invitationDetails;
|
||||
|
||||
if (inviteMethod === 'email') {
|
||||
let emails = this.getEmails();
|
||||
invitationDetails = { inviter: this.inviter, emails };
|
||||
} else if (inviteMethod === 'uuid') {
|
||||
let uuids = this.getOnlyUuids();
|
||||
invitationDetails = { uuids };
|
||||
} else {
|
||||
return alert('Invalid invite method.');
|
||||
}
|
||||
|
||||
await this.$store.dispatch('guilds:invite', {
|
||||
invitationDetails,
|
||||
groupId: this.group._id,
|
||||
});
|
||||
|
||||
let invitesSent = invitationDetails.emails || invitationDetails.uuids;
|
||||
let invitationString = invitesSent.length > 1 ? 'invitationsSent' : 'invitationSent';
|
||||
|
||||
this.text(this.$t(invitationString));
|
||||
|
||||
this.invitees = [];
|
||||
this.emails = [];
|
||||
|
||||
// @TODO: This function didn't make it over this.resetInvitees();
|
||||
|
||||
// @TODO: Sync group invites?
|
||||
// if (this.group.type === 'party') {
|
||||
// this.$router.push('//party');
|
||||
// } else {
|
||||
// this.$router.push(`/groups/guilds/${this.group._id}`);
|
||||
// }
|
||||
this.$root.$emit('bv::hide::modal', 'invite-modal');
|
||||
// @TODO: error?
|
||||
// _resetInvitees();
|
||||
},
|
||||
getOnlyUuids () {
|
||||
let uuids = map(this.invitees, 'uuid');
|
||||
let filteredUuids = filter(uuids, (id) => {
|
||||
return id !== '';
|
||||
});
|
||||
return filteredUuids;
|
||||
},
|
||||
getEmails () {
|
||||
let emails = filter(this.emails, (obj) => {
|
||||
return obj.email !== '';
|
||||
});
|
||||
return emails;
|
||||
},
|
||||
},
|
||||
};
|
||||
mixins: [notifications],
|
||||
props: ['group', 'groupType'],
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user