mindol1004/real-world-springboot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix : [FE] Signup API Logic Update

Browse Source
This commit is contained in:
minseokkang
2022-11-15 17:54:46 +09:00
parent 5ccb42a22c
commit 2499fe3723
1 changed files with 25 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/frontend/src/views/TheRegister.vue
View File

@@ -20,13 +20,13 @@
<form> <form>
<fieldset class="form-group"> <fieldset class="form-group">
<input class="form-control form-control-lg" type="text" placeholder="Your Name" id="username"> <input class="form-control form-control-lg" type="text" placeholder="Your Name" v-model="user.username">
</fieldset> </fieldset>
<fieldset class="form-group"> <fieldset class="form-group">
<input class="form-control form-control-lg" type="text" placeholder="Email" id="email"> <input class="form-control form-control-lg" type="text" placeholder="Email" v-model="user.email">
</fieldset> </fieldset>
<fieldset class="form-group"> <fieldset class="form-group">
<input class="form-control form-control-lg" type="password" placeholder="Password" id="password"> <input class="form-control form-control-lg" type="password" placeholder="Password" v-model="user.password">
</fieldset> </fieldset>
<button @click = "signup" class="btn btn-lg btn-primary pull-xs-right"> <button @click = "signup" class="btn btn-lg btn-primary pull-xs-right">
Sign up Sign up
@@ -43,58 +43,63 @@
import axios from "axios"; import axios from "axios";
import router from "@/router"; import router from "@/router";
import {reactive} from "vue"; import {reactive, ref} from "vue";
export default { export default {
name: "TheRegister.vue", name: "TheRegister.vue",
setup(){ setup(){
const emailDuplicate = false; let emailDuplicate = ref(false);
const usernameDuplicate = false; let usernameDuplicate = ref(false);
const form = reactive({ const user = reactive({
username: "", username: "",
email: "", email: "",
password: "", password: "",
}) })
const allHideError = () => {
emailDuplicate.value = false;
usernameDuplicate.value = false;
}
const showEmailUsernameError = () => { const showEmailUsernameError = () => {
this.emailDuplicate = true; emailDuplicate.value = true;
this.usernameDuplicate = true usernameDuplicate.value = true
}; };
const showEmailError = () => { const showEmailError = () => {
this.emailDuplicate = true; emailDuplicate.value = true;
this.usernameDuplicate = false; usernameDuplicate.value = false;
}; };
const showUsernameError = () => { const showUsernameError = () => {
this.usernameDuplicate = true; usernameDuplicate.value = true;
this.emailDuplicate = false; emailDuplicate.value = false;
}; };
const signup = () => { const signup = () => {
console.log(user)
axios.post('http://3.35.44.58:8080/api/users',{ axios.post('http://3.35.44.58:8080/api/users',{
form user
}) })
.then(response => { .then(response => {
window.localStorage.setItem("token",response.data.user.token); window.localStorage.setItem("token",response.data.user.token);
this.emailDuplicate = false; allHideError();
this.usernameDuplicate = false;
router.push("/"); router.push("/");
}) })
.catch(error =>{ .catch(error =>{
console.log(error); console.log(error);
const code = error.response.data.errors.code; const code = error.response.data.errors.code;
if(code == "DUPLICATE_EMAIL_USERNAME"){ if(code == "DUPLICATE_EMAIL_USERNAME"){
this.showEmailUsernameError(); showEmailUsernameError();
}else if(code == "DUPLICATE_EMAIL"){ }else if(code == "DUPLICATE_EMAIL"){
this.showEmailError(); showEmailError();
}else if(code == "DUPLICATE_USERNAME"){ }else if(code == "DUPLICATE_USERNAME"){
this.showUsernameError(); showUsernameError();
} }
}) })
} }
return { emailDuplicate, usernameDuplicate, signup, showEmailUsernameError,showEmailError, showUsernameError } return { user, emailDuplicate, usernameDuplicate, signup, showEmailUsernameError,showEmailError, showUsernameError, allHideError }
}, },
} }