Skip to content
Snippets Groups Projects
Commit a5496320 authored by Madeleine Stenberg Jonassen's avatar Madeleine Stenberg Jonassen
Browse files

Merge branch 'login-ui' into 'main' 

Login/Signup UI

See merge request !20
parents 1164adc0 ebcb49f3
No related branches found
No related tags found
1 merge request!20Login/Signup UI
Pipeline #268517 passed
Stage: build
Stage: test
Stage: package
Show whitespace changes
Inline Side-by-side
FullstackProsjekt/src/frontend/src/assets/main.css
+ 47
− 4
View file @ a5496320
......@@ -3,12 +3,29 @@ body {
margin: 0 0 0 27px;
background-color: #F2F2F2;
}
input {
padding: 5px;
border-radius: 5px;
border: none;
min-width: 220px;
background-color: #E5E5E5;
margin: 10px;
font-family: monospace;
}
input::placeholder {
color: #b0b0b0;
}
label {
display: inline-block;
font-weight: bold;
}
.space{
margin: 100px;
}
.row{
margin-top: 5%;
display: flex;
......@@ -27,6 +44,13 @@ body {
box-shadow: 0 0 20px 0px rgba(0,0,0,0.3);
}
.error-message{
color: #e53a1c;
padding: 10px;
font-size: 16px;
margin-bottom: 20px;
}
.play-btn{
padding: 10px;
......@@ -43,6 +67,8 @@ body {
border-color: transparent;
color: #242F40;
border-radius: 10px;
cursor: pointer;
}
.delete-btn{
padding: 8px;
......@@ -51,6 +77,8 @@ body {
color: #242F40;
border-radius: 10px;
font-family: monospace;
cursor: pointer;
}
.add-Btn {
background-color: #242F40;
......@@ -60,6 +88,8 @@ body {
border-radius: 20px;
border-color: transparent;
margin-top: 10px;
cursor: pointer;
}
.add-Btn:hover{
cursor: pointer;
......@@ -76,6 +106,8 @@ body {
border-radius: 20px;
border-color: transparent;
margin-top: 10px;
cursor: pointer;
}
.close-btn{
......@@ -84,16 +116,27 @@ body {
border-radius: 5px;
border-color: transparent;
margin-left: 10px;
cursor: pointer;
}
.submit-btn{
background-color: #CCA43B;
font-size: 16px;
padding: 10px;
font-size: 20px;
padding: 20px;
border-radius: 5px;
border-color: transparent;
margin-left: 130px;
min-width: 160px;
font-family: monospace;
transition: 0.2s;
cursor: pointer;
}
.submit-btn:hover{
background-color: #a67d0e;
}
.submit-btn:active{
background-color: #2D333B;
color: white;
}
@media (max-width: 700px){
......
FullstackProsjekt/src/frontend/src/views/LoginView.vue
+ 38
− 55
View file @ a5496320
<script>
//import Svg from "@/assets/Svg.vue";
import Svg from "@/assets/Svg.vue";
import {setToken} from "@/tokenController.js";
import {apiClient} from "@/api.js";
export default {
//name: 'Login',
//components: {Svg},
name: 'Login',
components: {Svg},
data() {
return {
username: '',
email: '',
password: '',
showPassword: false, // Add showPassword property
errorMsg: '', //TODO: display error to user
showPassword: false,
errorMsg: '',
}
},
methods: {
......@@ -26,7 +26,7 @@ export default {
});
} catch (error) {
//TODO: proper error handling
this.errorMsg = 'Error logging in';
this.errorMsg = 'Error logging in, try again';
}
},
togglePasswordVisibility() {
......@@ -43,25 +43,27 @@ export default {
<div class="login">
<h1 id="login">Login</h1>
<p> Sign in to your already existing account</p>
<div class="loginBox">
<label>Username</label> <br>
<input type="text" required v-model="username" placeholder="username"/> <br>
<!--
<label>Email</label> <br>
<input type="email" placeholder="JohnDoe@email.com" required v-model="email"/> <br>
-->
<input type="text" required v-model="username" placeholder="Rizz_Dragon420"/> <br>
<label>Password</label> <br>
<div class="password-input">
<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>
<label></label>{{errorMsg}}<br>
<router-link to="/signup" id="signUpLink">SIGNUP</router-link>
</button>
</div> <br>
<label class="error-message">{{errorMsg}}</label><br>
<p1> Don't have a account?</p1><router-link to="/signup" id="signUpLink">SIGNUP!</router-link>
</div>
</div>
<div class="submit-section">
<input id="submit" type="submit"/>
<input class="submit-btn" type="submit"/>
</div>
</form>
</div>
......@@ -71,6 +73,7 @@ export default {
<style>
.loginPage {
padding-top: 85px;
padding-left: 20px;
display: flex;
justify-content: center;
align-items: center;
......@@ -87,36 +90,33 @@ export default {
}
.loginBox {
padding: 20px;
padding: 40px;
}
label {
.password-input {
position: relative;
display: inline-block;
margin-right: 10px;
font-weight: bold;
}
input {
padding: 5px;
border-radius: 5px;
border: none;
min-width: 250px;
background-color: #E5E5E5;
margin: 10px;
}
input::placeholder {
color: #b0b0b0;
}
.showPasswordIcon {
border-color: transparent;
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
border: none;
background: none;
cursor: pointer;
margin-left: 0;
}
#signUpLink {
color: #CCA43B;
padding: 10px;
font-size: 16px;
text-decoration: none;
}
#signUpLink:hover{
color: #242F40;
transition: 0.3s;
}
.submit-section {
......@@ -125,21 +125,4 @@ input::placeholder {
align-items: center;
}
#submit {
min-width: 150px;
min-height: 60px;
font-size: 24px;
border-radius: 6px;
background-color: #242F40;
color: white;
border: none;
cursor: pointer;
margin-top: 20px;
}
#submit:hover:enabled {
background-color: rgba(23, 55, 44, 0.9);
transition: 0.5s;
}
</style>
FullstackProsjekt/src/frontend/src/views/SignupView.vue
+ 50
− 53
View file @ a5496320
<script>
//import Svg from '../assets/Svg.vue'
import Svg from '../assets/Svg.vue'
import {apiClient} from "@/api.js";
export default {
name: 'Register',
components: {Svg},
data(){
return{
username: '',
//first_name:'',
//last_name:'',
//email:'',
password:'',
password_confirm:'',
errorMsg: '', //TODO: display error to user
showPassword: false,
}
},
methods:{
......@@ -20,21 +19,22 @@
//TODO: use interceptor to check matching password, send one password
try {
await apiClient.post('/auth/register', {
//first_name: this.first_name,
//last_name: this.last_name,
//email: this.email,
username: this.username,
password: this.password
//password_confirm: this.password_confirm
password: this.password,
password_confirm: this.password_confirm
}).then(response => {
//TODO: display successful registration to user
alert("User: " + this.username + " created!")
this.$router.push('/login')
});
} catch (error) {
//TODO: proper error handling
this.errorMsg = 'Error signing up';
}
this.errorMsg = 'Error signing up, try again';
}
},
togglePasswordVisibility() {
this.showPassword = !this.showPassword;
},
}
}
</script>
......@@ -49,31 +49,40 @@
<h1 id="signup">Signup</h1>
<p> Create an account to get started!</p>
<div class="signupBox">
<label>First Name</label> <br>
<input type="text" required v-model="username" placeholder="username"/> <br>
<!--
<label>First Name</label> <br>
<input type="text" required v-model="first_name" placeholder="John"/> <br>
<label>Last Name</label> <br>
<input type="text" required v-model="last_name" placeholder="Doe"/> <br>
<label>Email</label> <br>
<input type="email" required v-model="email" placeholder="JohnDoe@email.com"/> <br>
-->
<label>Username</label> <br>
<input type="text" required v-model="username" placeholder="Insert username here..."/> <br>
<label>Password</label> <br>
<input type="text" required v-model="password" /> <br>
<div class="password-input">
<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>
</div> <br>
<label>Confirm Password</label> <br>
<input type="text" required v-model="password_confirm" /> <br>
<div class="password-input">
<input :type="showPassword ? 'text' : 'password'" required v-model="password_confirm"/>
<button type="button" class="showPasswordIcon" @click="togglePasswordVisibility">
<Svg v-if="showPassword" :name="'hide-password-icon'"/>
<Svg v-else :name="'show-password-icon'" />
</button>
</div> <br>
<label class="error-message">{{errorMsg}}</label><br>
</div>
</div>
<div class="submit-section">
<input id="submit" type="submit"/>
<input class="submit-btn" type="submit"/>
</div>
</form>
</div>
</body>
</template>
<style>
.signupPage {
padding-top: 85px;
......@@ -90,43 +99,31 @@
border-style: solid;
margin: 20px;
}
.signupBox {
padding: 30px;
padding: 40px;
min-width: 400px;
}
label {
.password-input {
position: relative;
display: inline-block;
font-weight: bold;
}
input {
padding: 5px;
border-radius: 5px;
.showPasswordIcon {
position: absolute;
top: 50%;
right: 5px; /* Adjust positioning as needed */
transform: translateY(-50%);
border: none;
min-width: 250px;
background-color: #E5E5E5;
margin: 10px;
}
input::placeholder {
color: #b0b0b0;
background: none;
cursor: pointer;
}
.submit-section {
display: flex;
justify-content: center;
align-items: center;
}
#submit {
min-width: 150px;
min-height: 60px;
font-size: 24px;
border-radius: 6px;
background-color: #242F40;
color: white;
border: none;
cursor: pointer;
margin-top: 20px;
}
#submit:hover:enabled {
background-color: rgba(23, 55, 44, 0.9);
transition: 0.5s;
}
</style>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment