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