KevinMidboe/seasoned
1
0
Fork 0
Code Issues 12 Pull Requests 1 Packages Projects Releases 1 Wiki Activity

Fixed input when it has icon & refactored signin/register to reflect

Browse Source 
changes in store
This commit is contained in:
Kevin
2022-03-04 18:33:16 +01:00
parent b24b091a3e
commit a614974a35
3 changed files with 160 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
src/components/Register.vue
View File

@@ -2,23 +2,47 @@
<section>
<h1>Register new user</h1>
<seasoned-input placeholder="username" icon="Email" type="username" :value.sync="username" @enter="submit"/>
<div class="form">
<seasoned-input
placeholder="username"
icon="Email"
type="email"
:value.sync="username"
@enter="submit"
/>
<seasoned-input placeholder="password" icon="Keyhole" type="password" :value.sync="password" @enter="submit"/>
<seasoned-input placeholder="repeat password" icon="Keyhole" type="password" :value.sync="passwordRepeat" @enter="submit"/>
<seasoned-input
placeholder="password"
icon="Keyhole"
type="password"
:value.sync="password"
@enter="submit"
/>
<seasoned-input
placeholder="repeat password"
icon="Keyhole"
type="password"
:value.sync="passwordRepeat"
@enter="submit"
/>
<seasoned-button @click="submit">Register</seasoned-button>
<router-link class="link" to="/signin">Have a user? Sign in here</router-link>
<seasoned-button @click="submit">Register</seasoned-button>
</div>
<router-link class="link" to="/signin"
>Have a user? Sign in here</router-link
>
<seasoned-messages :messages.sync="messages"></seasoned-messages>
</section>
</template>
<script>
import { register } from '@/api'
import SeasonedButton from '@/components/ui/SeasonedButton'
import SeasonedInput from '@/components/ui/SeasonedInput'
import SeasonedMessages from '@/components/ui/SeasonedMessages'
import { mapActions } from "vuex";
import { register } from "@/api";
import SeasonedButton from "@/components/ui/SeasonedButton";
import SeasonedInput from "@/components/ui/SeasonedInput";
import SeasonedMessages from "@/components/ui/SeasonedMessages";
export default {
components: { SeasonedButton, SeasonedInput, SeasonedMessages },
@@ -28,58 +52,56 @@ export default {
username: null,
password: null,
passwordRepeat: null
}
};
},
methods: {
...mapActions("user", ["login"]),
submit() {
this.messages = [];
let { username, password, passwordRepeat } = this;
if (username == null || username.length == 0) {
this.messages.push({ type: 'error', title: 'Missing username' })
return
this.messages.push({ type: "error", title: "Missing username" });
return;
} else if (password == null || password.length == 0) {
this.messages.push({ type: 'error', title: 'Missing password' })
return
this.messages.push({ type: "error", title: "Missing password" });
return;
} else if (passwordRepeat == null || passwordRepeat.length == 0) {
this.messages.push({ type: 'error', title: 'Missing repeat password' })
return
this.messages.push({ type: "error", title: "Missing repeat password" });
return;
} else if (passwordRepeat != password) {
this.messages.push({ type: 'error', title: 'Passwords do not match' })
return
this.messages.push({ type: "error", title: "Passwords do not match" });
return;
}
this.registerUser(username, password)
this.registerUser(username, password);
},
registerUser(username, password) {
register(username, password, true)
.then(data => {
if (data.success){
localStorage.setItem('token', data.token);
const jwtData = parseJwt(data.token)
localStorage.setItem('username', jwtData['username']);
localStorage.setItem('admin', jwtData['admin'] || false);
eventHub.$emit('setUserStatus');
this.$router.push({ name: 'profile' })
if (data.success && this.login()) {
eventHub.$emit("setUserStatus");
this.$router.push({ name: "profile" });
}
})
.catch(error => {
if (error.status === 401) {
this.messages.push({ type: 'error', title: 'Access denied', message: 'Incorrect username or password' })
}
else {
this.messages.push({ type: 'error', title: 'Unexpected error', message: error.message })
this.messages.push({
type: "error",
title: "Access denied",
message: "Incorrect username or password"
});
} else {
this.messages.push({
type: "error",
title: "Unexpected error",
message: error.message
});
}
});
},
logOut(){
localStorage.clear();
eventHub.$emit('setUserStatus');
this.$router.push({ name: 'home' });
}
}
}
};
</script>
<style lang="scss" scoped>
@@ -92,6 +114,16 @@ section {
padding: 4rem;
}
.form > div,
input,
button {
margin-bottom: 1rem;
&:last-child {
margin-bottom: 0px;
}
}
h1 {
margin: 0;
line-height: 16px;

44
src/components/Signin.vue
View File

@@ -2,22 +2,24 @@
<section>
<h1>Sign in</h1>
<seasoned-input
placeholder="username"
icon="Email"
type="email"
@enter="submit"
:value.sync="username"
/>
<seasoned-input
placeholder="password"
icon="Keyhole"
type="password"
:value.sync="password"
@enter="submit"
/>
<div class="form">
<seasoned-input
placeholder="username"
icon="Email"
type="email"
@enter="submit"
:value.sync="username"
/>
<seasoned-input
placeholder="password"
icon="Keyhole"
type="password"
:value.sync="password"
@enter="submit"
/>
<seasoned-button @click="submit">sign in</seasoned-button>
<seasoned-button @click="submit">sign in</seasoned-button>
</div>
<router-link class="link" to="/register"
>Don't have a user? Register here</router-link
>
@@ -64,7 +66,7 @@ export default {
signin(username, password) {
login(username, password, true)
.then(data => {
if (data.success && this.login(data.token)) {
if (data.success && this.login()) {
this.$router.push({ name: "profile" });
}
})
@@ -102,6 +104,16 @@ section {
padding: 4rem;
}
.form > div,
input,
button {
margin-bottom: 1rem;
&:last-child {
margin-bottom: 0px;
}
}
h1 {
margin: 0;
line-height: 16px;

127
src/components/ui/SeasonedInput.vue
View File

@@ -1,44 +1,55 @@
<template>
<div class="group" :class="{ completed: value }">
<svg class="group__input-icon">
<use v-bind="{ 'xlink:href': '#icon' + icon }"></use>
</svg>
<div class="group" :class="{ completed: value, focus }">
<component :is="inputIcon" v-if="inputIcon" />
<input
class="group__input"
class="input"
:type="tempType || type"
@input="handleInput"
v-model="inputValue"
:placeholder="placeholder"
@keyup.enter="submit"
@keyup.enter="event => $emit('enter', event)"
@focus="focus = true"
@blur="focus = false"
/>
<i
v-if="value && type === 'password'"
@click="toggleShowPassword"
class="group__input-show noselect"
@keydown.enter="toggleShowPassword"
class="show noselect"
tabindex="0"
>{{ tempType == "password" ? "show" : "hide" }}</i
>
</div>
</template>
<script>
import IconKey from "../../icons/IconKey";
import IconEmail from "../../icons/IconEmail";
export default {
components: { IconKey, IconEmail },
props: {
placeholder: { type: String },
icon: { type: String },
type: { type: String, default: "text" },
value: { type: String, default: undefined }
},
data() {
return {
inputValue: this.value || undefined,
tempType: this.type
tempType: this.type,
focus: false
};
},
computed: {
inputIcon() {
if (this.type === "password") return IconKey;
if (this.type === "email") return IconEmail;
return false;
}
},
methods: {
submit(event) {
this.$emit("enter");
},
handleInput(event) {
if (this.value !== undefined) {
this.$emit("update:value", this.inputValue);
@@ -62,74 +73,62 @@ export default {
.group {
display: flex;
margin-bottom: 1rem;
width: 100%;
position: relative;
max-width: 35rem;
border: 1px solid var(--text-color-50);
background-color: var(--background-color-secondary);
&.completed,
&.focus,
&:hover,
&:focus {
.group__input {
border-color: $text-color;
border-color: var(--text-color);
&-icon {
fill: $text-color;
}
svg {
fill: var(--text-color);
}
}
&.completed {
.group__input {
border-color: $text-color;
&-icon {
fill: $text-color;
}
}
}
&__input {
width: 100%;
padding: 10px 10px 10px 45px;
outline: none;
background-color: $background-color-secondary;
color: $text-color;
font-weight: 100;
font-size: 1.2rem;
border: 1px solid $text-color-50;
margin: 0;
margin-left: -2.2rem !important;
z-index: 3;
transition: color 0.5s ease, background-color 0.5s ease, border 0.5s ease;
border-radius: 0;
-webkit-appearance: none;
&-show {
position: absolute;
display: grid;
place-items: center;
right: 20px;
z-index: 11;
margin: auto 0;
height: 100%;
font-size: 0.9rem;
cursor: pointer;
color: $text-color-50;
-webkit-user-select: none;
user-select: none;
}
}
&__input-icon {
svg {
width: 24px;
height: 24px;
fill: $text-color-50;
transition: fill 0.5s ease;
fill: var(--text-color-50);
pointer-events: none;
margin-top: 10px;
margin-left: 10px;
z-index: 8;
}
input {
width: 100%;
padding: 10px;
outline: none;
background-color: var(--background-color-secondary);
color: var(--text-color);
font-weight: 100;
font-size: 1.2rem;
margin: 0;
z-index: 3;
border: none;
border-radius: 0;
-webkit-appearance: none;
}
.show {
position: absolute;
display: grid;
place-items: center;
right: 20px;
z-index: 11;
margin: auto 0;
height: 100%;
font-size: 0.9rem;
cursor: pointer;
color: var(--text-color-50);
-webkit-user-select: none;
user-select: none;
}
}
</style>