From 33945c89fbdcc4db529b48a6c2360bb90f9b860e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anders=20H=C3=B8vik?= <andehovi@stud.ntnu.no>
Date: Fri, 19 Apr 2024 09:38:54 +0200
Subject: [PATCH] finished main layout of the updateUserSettings
---
.../UpdateUserComponents/UpdateUserLayout.vue | 66 +++++++++++++++++--
1 file changed, 61 insertions(+), 5 deletions(-)
diff --git a/src/components/UpdateUserComponents/UpdateUserLayout.vue b/src/components/UpdateUserComponents/UpdateUserLayout.vue
index f2ae1a5..5818327 100644
--- a/src/components/UpdateUserComponents/UpdateUserLayout.vue
+++ b/src/components/UpdateUserComponents/UpdateUserLayout.vue
@@ -3,18 +3,74 @@
</script>
<template>
- <div class="container text-center">
+ <div class="container">
+ <!-- The userprofile and the form that will update name, email, password -->
<div class="row">
- <div class="col">User profile</div>
- <div class="col"> update user form</div>
+ <div class="col-md-2 text-center">
+ <img src="/src/assets/userprofile.png" class="img-fluid">
+ <p class="h2">Username</p>
+ </div>
+ <div class="col-md-10">
+ <form>
+ <div class="row">
+ <div class="form-group col-md-6">
+ <label for="inputEmail4">First Name</label>
+ <input type="text" class="form-control" id="inputFirstName" placeholder="ex: Brian">
+ </div>
+ <div class="form-group col-md-6">
+ <label for="inputPassword4">Last Name</label>
+ <input type="text" class="form-control" id="inputLastName" placeholder="ex: Cox">
+ </div>
+ </div>
+ <div class="form-group col-md-6">
+ <label for="inputAddress">Email</label>
+ <input type="email" class="form-control" id="inputMail" placeholder="ex: briancox@mail.com">
+ </div>
+ <div class="row">
+ <div class="form-group col-md-6">
+ <label for="inputEmail4">Password</label>
+ <input type="password" class="form-control" id="inputPassword" placeholder="Password with capital letter, number and a special character">
+ </div>
+ <div class="form-group col-md-6">
+ <label for="inputPassword4">Confirmed Password</label>
+ <input type="password" class="form-control" id="inputPasswordConfirmed" placeholder="Repeat password">
+ </div>
+ </div>
+ <button type="submit" class="btn btn-primary">Change settings</button>
+ </form>
+ </div>
</div>
<!-- Maybe a profile-pictures here that collapses or not -->
<div class="row">
- <div class="col">User profile pictures</div>
+ <div class="col">
+ <p>
+ <a class="btn" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
+ Profile Pictures
+ </a>
+ </p>
+ </div>
+ </div>
+ <div class="row">
+ <div class="collapse" id="collapseExample">
+ <div class="card card-body">
+ This is the content of the user profile
+ </div>
+ </div>
</div>
<!-- Div that contains the configuration -->
<div class="row">
- <div class="col">Configuration</div>
+ <div class="col"><p>
+ <a class="btn" data-bs-toggle="collapse" href="#collapseConfiguration" role="button" aria-expanded="false" aria-controls="collapseConfiguration">
+ User Configuration
+ </a>
+ </p></div>
+ </div>
+ <div class="row">
+ <div class="collapse" id="collapseConfiguration">
+ <div class="card card-body">
+ This is the configuration of the user configuration
+ </div>
+ </div>
</div>
</div>
--
GitLab