diff --git a/FullstackProsjekt/src/frontend/src/assets/main.css b/FullstackProsjekt/src/frontend/src/assets/main.css
index 375a8e1489920735e25f636f0b4f3f28e8b8b388..86553c2544de7a0edaae40cbb3e0e49992cbed3f 100644
--- a/FullstackProsjekt/src/frontend/src/assets/main.css
+++ b/FullstackProsjekt/src/frontend/src/assets/main.css
@@ -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){
diff --git a/FullstackProsjekt/src/frontend/src/views/LoginView.vue b/FullstackProsjekt/src/frontend/src/views/LoginView.vue
index 56d34281c0271350cede959021380b971b8604d0..2528f9a9c7eba61f767b875f460527d404b84081 100644
--- a/FullstackProsjekt/src/frontend/src/views/LoginView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/LoginView.vue
@@ -1,18 +1,18 @@
<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>
- <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>
+ <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 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;
+.showPasswordIcon {
+ 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>
diff --git a/FullstackProsjekt/src/frontend/src/views/SignupView.vue b/FullstackProsjekt/src/frontend/src/views/SignupView.vue
index e76797bfbd638ef94eba34bea8e93a16d1c3cc44..0908f8ed5c709824be12e01dbd85e7a83072dc68 100644
--- a/FullstackProsjekt/src/frontend/src/views/SignupView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/SignupView.vue
@@ -1,18 +1,17 @@
<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>Password</label> <br>
- <input type="text" required v-model="password" /> <br>
+ <label>Username</label> <br>
+ <input type="text" required v-model="username" placeholder="Insert username here..."/> <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>
+ </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>