Skip to content
Snippets Groups Projects
Commit c135d8f1 authored by Maddy's avatar Maddy
Browse files

Add show password icon to LoginView.vue

parent 8135b087
No related branches found
No related tags found
1 merge request!11Ui Design
Pipeline #267450 passed
Stage: build
Stage: test
Stage: deploy
Show whitespace changes
Inline Side-by-side
Showing
with 124 additions and 101 deletions
FullstackProsjekt/src/frontend/src/assets/Svg.vue
+ 12
− 1
View file @ c135d8f1
...@@ -13,6 +13,17 @@ const icon = defineAsyncComponent(()=> ...@@ -13,6 +13,17 @@ const icon = defineAsyncComponent(()=>
<template> <template>
<component :is="icon"/> <component class="icon" :is="icon"/>
</template> </template>
<style>
.icon{
height: 20px;
width: 20px;
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-left: 40px;
}
</style>
FullstackProsjekt/src/frontend/src/assets/main.css
+ 0
− 1
View file @ c135d8f1
...@@ -9,7 +9,6 @@ body { ...@@ -9,7 +9,6 @@ body {
} }
.table{ .table{
width: 450px;
padding: 10px; padding: 10px;
background-color: #dcdcdc; background-color: #dcdcdc;
} }
......
FullstackProsjekt/src/frontend/src/components/icons/hide-password-icon.svg 0 → 100644
+ 7
− 0
View file @ c135d8f1
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier"> <path d="M2.99902 3L20.999 21M9.8433 9.91364C9.32066 10.4536 8.99902 11.1892 8.99902 12C8.99902 13.6569 10.3422 15 11.999 15C12.8215 15 13.5667 14.669 14.1086 14.133M6.49902 6.64715C4.59972 7.90034 3.15305 9.78394 2.45703 12C3.73128 16.0571 7.52159 19 11.9992 19C13.9881 19 15.8414 18.4194 17.3988 17.4184M10.999 5.04939C11.328 5.01673 11.6617 5 11.9992 5C16.4769 5 20.2672 7.94291 21.5414 12C21.2607 12.894 20.8577 13.7338 20.3522 14.5" stroke="#242F40" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
</svg>
\ No newline at end of file
FullstackProsjekt/src/frontend/src/components/icons/show-password-icon.svg 0 → 100644
+ 7
− 0
View file @ c135d8f1
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier"> <path d="M15.0007 12C15.0007 13.6569 13.6576 15 12.0007 15C10.3439 15 9.00073 13.6569 9.00073 12C9.00073 10.3431 10.3439 9 12.0007 9C13.6576 9 15.0007 10.3431 15.0007 12Z" stroke="#242F40" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12.0012 5C7.52354 5 3.73326 7.94288 2.45898 12C3.73324 16.0571 7.52354 19 12.0012 19C16.4788 19 20.2691 16.0571 21.5434 12C20.2691 7.94291 16.4788 5 12.0012 5Z" stroke="#242F40" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
</svg>
\ No newline at end of file
FullstackProsjekt/src/frontend/src/components/shared/sidebar/Sidebar.vue
+ 1
− 1
View file @ c135d8f1
...@@ -46,7 +46,7 @@ export default { ...@@ -46,7 +46,7 @@ export default {
<span class="collapse-icon" :class="{'rotate-180': collapsed}" @click="toggleSideBar"> <span class="collapse-icon" :class="{'rotate-180': collapsed}" @click="toggleSideBar">
<Svg name="sidebar-arrow.png" class="icon"/> <Svg name="sidebar-arrow.png" class="icon"/>
<button class="iconButton"> <img id="icon" src="../../icons/sidebar-icons/sidebar-arrow.png"/> </button> <button class="iconButton"> <img id="icon" src="../../icons/sidebar-arrow.png"/> </button>
</span> </span>
</div> </div>
</template> </template>
......
FullstackProsjekt/src/frontend/src/views/AboutView.vue
+ 1
− 10
View file @ c135d8f1
...@@ -5,18 +5,9 @@ import Svg from '../assets/Svg.vue' ...@@ -5,18 +5,9 @@ import Svg from '../assets/Svg.vue'
<template> <template>
<body> <body>
<h1> This is about page</h1> <h1> This is about page</h1>
<Svg name="bolt" class="icon"/>
</body> </body>
</template> </template>
<style> <style>
.icon{
height: 40px;
width: 50px;
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-left: 40px;
}
</style> </style>
\ No newline at end of file
FullstackProsjekt/src/frontend/src/views/LoginView.vue
+ 94
− 86
View file @ c135d8f1
<script> <script>
import Svg from '../assets/Svg.vue'
import axios from "axios"; import axios from "axios";
import Svg from "@/assets/Svg.vue";
export default { export default {
name: 'Login', name: 'Login',
components: {Svg},
data() { data() {
return { return {
email: '', email: '',
password: '', password: '',
showPassword: false // Add showPassword property
} }
}, },
methods: { methods: {
...@@ -17,16 +19,16 @@ export default { ...@@ -17,16 +19,16 @@ export default {
password: this.password password: this.password
}); });
localStorage.setItem('token', response.data.token) localStorage.setItem('token', response.data.token)
},
togglePasswordVisibility() {
this.showPassword = !this.showPassword;
} }
} }
} }
</script> </script>
<template> <template>
<body> <body>
<div class="loginPage"> <div class="loginPage">
<form @submit.prevent="handleSubmit"> <form @submit.prevent="handleSubmit">
<div class="login"> <div class="login">
...@@ -36,7 +38,11 @@ export default { ...@@ -36,7 +38,11 @@ export default {
<label>Email</label> <br> <label>Email</label> <br>
<input type="email" placeholder="JohnDoe@email.com" required v-model="email"/> <br> <input type="email" placeholder="JohnDoe@email.com" required v-model="email"/> <br>
<label>Password</label> <br> <label>Password</label> <br>
<input type="password" required v-model="password" /> <br> <input :type="showPassword ? 'text' : 'password'" required v-model="password"/>
<button type="button" class="showPasswordIcon" @click="togglePasswordVisibility">
<Svg v-if="showPassword" :name="'hide-password-icon'" />
<Svg v-else :name="'show-password-icon'" />
</button><br>
<router-link to="/signup" id="signUpLink">SIGNUP</router-link> <router-link to="/signup" id="signUpLink">SIGNUP</router-link>
</div> </div>
</div> </div>
...@@ -45,11 +51,9 @@ export default { ...@@ -45,11 +51,9 @@ export default {
</div> </div>
</form> </form>
</div> </div>
</body> </body>
</template> </template>
<style> <style>
.loginPage { .loginPage {
padding-top: 85px; padding-top: 85px;
...@@ -90,13 +94,17 @@ export default { ...@@ -90,13 +94,17 @@ export default {
input::placeholder { input::placeholder {
color: #b0b0b0; color: #b0b0b0;
} }
.showPasswordIcon{
border-color: transparent;
cursor: pointer;
margin-left: 0;
}
#signUpLink { #signUpLink {
color: #CCA43B; color: #CCA43B;
padding: 10px; padding: 10px;
} }
.submit-section { .submit-section {
display: flex; display: flex;
justify-content: center; justify-content: center;
......
FullstackProsjekt/src/frontend/src/views/SignupView.vue
+ 2
− 2
View file @ c135d8f1
...@@ -46,9 +46,9 @@ ...@@ -46,9 +46,9 @@
<label>Email</label> <br> <label>Email</label> <br>
<input type="email" required v-model="email" placeholder="JohnDoe@email.com"/> <br> <input type="email" required v-model="email" placeholder="JohnDoe@email.com"/> <br>
<label>Password</label> <br> <label>Password</label> <br>
<input type="password" required v-model="password" /> <br> <input type="text" required v-model="password" /> <br>
<label>Confirm Password</label> <br> <label>Confirm Password</label> <br>
<input type="password" required v-model="password_confirm" /> <br> <input type="text" required v-model="password_confirm" /> <br>
</div> </div>
</div> </div>
<div class="submit-section"> <div class="submit-section">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment