mirror of
https://github.com/romancm/gamebrary
synced 2025-02-17 11:38:24 +00:00
create profile
This commit is contained in:
Gamebrary
parent
9c8c2de0e9
commit
89410bb687
4 changed files with 151 additions and 182 deletions
139
src/components/Profile/CreateProfile.vue
Normal file
139
src/components/Profile/CreateProfile.vue
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
<template lang="html">
|
||||
<div>
|
||||
<label class="sr-only">Username</label>
|
||||
<b-form-group
|
||||
label-for="userName"
|
||||
class="field"
|
||||
valid-feedback="Available"
|
||||
:invalid-feedback="errorMessage"
|
||||
prepend="http://gamebrary.com/"
|
||||
:state="available"
|
||||
>
|
||||
<b-input-group prepend="http://gamebrary.com/" class="mb-2 mr-sm-2 mb-sm-0">
|
||||
<b-form-input
|
||||
id="userName"
|
||||
v-model="userName"
|
||||
placeholder="user name"
|
||||
debounce="500"
|
||||
autofocus
|
||||
:min="$options.MIN_PROFILE_LENGTH"
|
||||
:max="$options.MAX_PROFILE_LENGTH"
|
||||
@update="checkUserNameAvailability"
|
||||
:state="state"
|
||||
/>
|
||||
</b-input-group>
|
||||
</b-form-group>
|
||||
|
||||
<b-button
|
||||
:variant="available ? 'success' : 'primary'"
|
||||
:disabled="!available"
|
||||
class="mt-4"
|
||||
@click="createProfile"
|
||||
>
|
||||
<b-spinner small v-if="saving || loading" />
|
||||
<span v-else>Create profile</span>
|
||||
</b-button>
|
||||
|
||||
<!-- TODO: Add something about public profiles in terms and require this checkbox -->
|
||||
<!-- <b-form-checkbox class="mb-2 mr-sm-2 mb-sm-0">Accept Terms</b-form-checkbox> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { MIN_PROFILE_LENGTH, MAX_PROFILE_LENGTH } from '@/constants';
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
export default {
|
||||
MIN_PROFILE_LENGTH,
|
||||
MAX_PROFILE_LENGTH,
|
||||
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
saving: false,
|
||||
loading: false,
|
||||
userName: this.value,
|
||||
available: null,
|
||||
errorMessage: '',
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
|
||||
state() {
|
||||
return this.available && this.userName.length > 6 && this.userName.length < 24;
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$bvModal.show('edit-profile');
|
||||
},
|
||||
|
||||
methods: {
|
||||
async createProfile() {
|
||||
this.saving = true;
|
||||
const { userName } = this;
|
||||
|
||||
await this.$store.dispatch('SAVE_PROFILE', { userName });
|
||||
|
||||
this.saving = false;
|
||||
},
|
||||
|
||||
async checkUserNameAvailability(userName = '') {
|
||||
this.available = null;
|
||||
|
||||
if (userName.length === 0) {
|
||||
this.available = null;
|
||||
this.errorMessage = 'Please enter a user name';
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (userName.length < MIN_PROFILE_LENGTH) {
|
||||
this.available = false;
|
||||
this.errorMessage = `User name must be at least ${MIN_PROFILE_LENGTH} characters long`;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (userName.length > MAX_PROFILE_LENGTH) {
|
||||
this.available = false;
|
||||
this.errorMessage = `User name must be shorter than ${MAX_PROFILE_LENGTH} characters`;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const isValid = /^[0-9a-zA-Z]+$/.test(userName);
|
||||
|
||||
if (!isValid) {
|
||||
this.available = false;
|
||||
this.errorMessage = 'Only letters and numbers allowed';
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (!userName) return;
|
||||
|
||||
this.loading = true;
|
||||
|
||||
this.available = await this.$store.dispatch('CHECK_PROFILE_USERNAME_AVAILABILITY', userName);
|
||||
|
||||
this.loading = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
.field {
|
||||
width: 340px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,102 +0,0 @@
|
|||
<template lang="html">
|
||||
<div>
|
||||
<!-- <b-input-group prepend="@" class="mb-2 mr-sm-2 mb-sm-0">
|
||||
<b-form-input id="inline-form-input-username" placeholder="Username"></b-form-input>
|
||||
</b-input-group> -->
|
||||
<b-form inline>
|
||||
<label class="sr-only" for="inline-form-input-username">Username</label>
|
||||
<b-form-group
|
||||
label-for="userName"
|
||||
valid-feedback="Available"
|
||||
invalid-feedback="User name taken"
|
||||
prepend="http://gamebrary.com/"
|
||||
:state="available"
|
||||
>
|
||||
<b-input-group prepend="http://gamebrary.com/" class="mb-2 mr-sm-2 mb-sm-0">
|
||||
<b-form-input
|
||||
id="userName"
|
||||
v-model="userName"
|
||||
placeholder="Pick a user name"
|
||||
debounce="500"
|
||||
autofocus
|
||||
@update="checkUserNameAvailability"
|
||||
:state="state"
|
||||
/>
|
||||
</b-input-group>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-checkbox class="mb-2 mr-sm-2 mb-sm-0">Accept Terms</b-form-checkbox>
|
||||
|
||||
<b-button
|
||||
:variant="available && userName ? 'success' : 'primary'"
|
||||
:disabled="!available || !userName"
|
||||
@click="createProfile"
|
||||
>
|
||||
Create profile
|
||||
</b-button>
|
||||
</b-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
saving: false,
|
||||
loading: false,
|
||||
userName: this.value,
|
||||
available: null,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
|
||||
state() {
|
||||
return this.available && this.userName.length > 6 && this.userName.length < 24;
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$bvModal.show('edit-profile');
|
||||
},
|
||||
|
||||
methods: {
|
||||
async createProfile() {
|
||||
this.saving = true;
|
||||
const { userName } = this;
|
||||
|
||||
await this.$store.dispatch('SAVE_PROFILE', { userName });
|
||||
|
||||
this.saving = false;
|
||||
// this.$bvModal.hide('edit-profile');
|
||||
},
|
||||
|
||||
async checkUserNameAvailability(userName) {
|
||||
if (!userName) return;
|
||||
this.available = null;
|
||||
|
||||
// console.log(userName);
|
||||
this.loading = true;
|
||||
|
||||
this.available = await this.$store.dispatch('CHECK_PROFILE_USERNAME_AVAILABILITY', userName);
|
||||
|
||||
// console.log(this.available);
|
||||
this.loading = false;
|
||||
this.$emit('result', this.available);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
</style>
|
||||
|
|
@ -1,6 +1,8 @@
|
|||
export const POPULAR_PLATFORMS = [169, 167, 130, 48, 49, 41];
|
||||
|
||||
export const DEFAULT_LIST_VIEW = 'single';
|
||||
export const MIN_PROFILE_LENGTH = 6;
|
||||
export const MAX_PROFILE_LENGTH = 32;
|
||||
|
||||
export const PLATFORM_CATEGORIES = {
|
||||
1: 'console',
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template lang="html">
|
||||
<b-container>
|
||||
<div v-if="loading">
|
||||
|
||||
loading...
|
||||
</div>
|
||||
|
||||
<empty-state
|
||||
|
|
@ -9,69 +9,23 @@
|
|||
title="Profiles"
|
||||
message="Share boards with other users, get your own shareable URL, and more!"
|
||||
>
|
||||
<profile-name-check-field />
|
||||
<create-profile />
|
||||
</empty-state>
|
||||
|
||||
<profile v-else />
|
||||
<!-- @action="createProfile" -->
|
||||
|
||||
<!-- <h1>Edit profile</h1>
|
||||
<b-button @click="checkUserNameAvailability">
|
||||
Check availability
|
||||
</b-button>
|
||||
|
||||
<b-form-group
|
||||
label="Pick a user name"
|
||||
label-for="userName"
|
||||
valid-feedback="Available"
|
||||
invalid-feedback="User name taken"
|
||||
:state="available"
|
||||
>
|
||||
<b-form-input
|
||||
id="userName"
|
||||
disabled
|
||||
v-model="profile.userName"
|
||||
placeholder=""
|
||||
/>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-input
|
||||
v-model="profile.name"
|
||||
placeholder="name"
|
||||
/>
|
||||
|
||||
<b-form-input
|
||||
v-model="profile.bio"
|
||||
placeholder="bio"
|
||||
/>
|
||||
|
||||
<b-form-input
|
||||
v-model="profile.location"
|
||||
placeholder="location"
|
||||
/>
|
||||
|
||||
<b-form-input
|
||||
v-model="profile.website"
|
||||
placeholder="website"
|
||||
/>
|
||||
|
||||
<b-form-input
|
||||
v-model="profile.twitter"
|
||||
placeholder="twitter"
|
||||
/> -->
|
||||
</b-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EmptyState from '@/components/EmptyState';
|
||||
import ProfileNameCheckField from '@/components/Profile/ProfileNameCheckField';
|
||||
import CreateProfile from '@/components/Profile/CreateProfile';
|
||||
import Profile from '@/components/Profile';
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EmptyState,
|
||||
ProfileNameCheckField,
|
||||
CreateProfile,
|
||||
Profile,
|
||||
},
|
||||
|
||||
|
|
@ -91,37 +45,13 @@ export default {
|
|||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.load();
|
||||
},
|
||||
async mounted() {
|
||||
await this.$store.dispatch('LOAD_PROFILE')
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
|
||||
methods: {
|
||||
async load() {
|
||||
this.loading = true;
|
||||
|
||||
await this.$store.dispatch('LOAD_PROFILE')
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
async save() {
|
||||
this.saving = true;
|
||||
|
||||
await this.$store.dispatch('SAVE_PROFILE', this.profile);
|
||||
|
||||
this.saving = false;
|
||||
this.$bvModal.hide('edit-profile');
|
||||
},
|
||||
|
||||
checkUserNameAvailability() {
|
||||
this.$store.dispatch('CHECK_PROFILE_USERNAME_AVAILABILITY', this.profile.userName)
|
||||
.then((test) => {
|
||||
this.available = test;
|
||||
});
|
||||
},
|
||||
this.loading = false;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue