UI and UX design on the SignupView.vue

FullstackProsjekt/src/frontend/src/assets/main.css

@@ -16,6 +16,10 @@ input {
 input::placeholder {
     color: #b0b0b0;
 }
+label {
+    display: inline-block;
+    font-weight: bold;
+}
 
 
 .space{
@@ -63,6 +67,8 @@ input::placeholder {
     border-color: transparent;
     color: #242F40;
     border-radius: 10px;
+    cursor: pointer;
+
 }
 .delete-btn{
     padding: 8px;
@@ -71,6 +77,8 @@ input::placeholder {
     color: #242F40;
     border-radius: 10px;
     font-family: monospace;
+    cursor: pointer;
+
 }
 .add-Btn {
     background-color: #242F40;
@@ -80,6 +88,8 @@ input::placeholder {
     border-radius: 20px;
     border-color: transparent;
     margin-top: 10px;
+    cursor: pointer;
+
 }
 .add-Btn:hover{
     cursor: pointer;
@@ -96,6 +106,8 @@ input::placeholder {
     border-radius: 20px;
     border-color: transparent;
     margin-top: 10px;
+    cursor: pointer;
+
 }
 
 .close-btn{
@@ -104,6 +116,7 @@ input::placeholder {
     border-radius: 5px;
     border-color: transparent;
     margin-left: 10px;
+    cursor: pointer;
 
 }
 
@@ -116,7 +129,7 @@ input::placeholder {
     min-width: 160px;
     font-family: monospace;
     transition: 0.2s;
-
+    cursor: pointer;
 }
 .submit-btn:hover{
     background-color: #a67d0e;

FullstackProsjekt/src/frontend/src/views/LoginView.vue

@@ -11,8 +11,8 @@ export default {
       username: '',
 			email: '',
 			password: '',
-			showPassword: false, // Add showPassword property
-      errorMsg: '', //TODO: display error to user
+			showPassword: false,
+      errorMsg: '',
 		}
 	},
 	methods: {
@@ -46,7 +46,7 @@ export default {
 
 				<div class="loginBox">
           <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>Password</label> <br>
 					<div class="password-input">
@@ -93,10 +93,7 @@ export default {
 	padding: 40px;
 }
 
-label {
-	display: inline-block;
-	font-weight: bold;
-}
+
 
 .password-input {
 	position: relative;

FullstackProsjekt/src/frontend/src/views/SignupView.vue

 
 <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;
 }
 
-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>