adm_tueit/TueIT_App
2
0
Fork 0
Code Issues 3 Pull Requests 3 Packages Projects Releases Wiki Activity

implemented settings and user page (darkmode is still missing)

Browse Source
This commit is contained in:
selina.mail
2024-03-24 21:02:56 +01:00
parent acb7bb7cb6
commit 45a4b58f26
36 changed files with 2283 additions and 1313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

251
components/server/UserProfile.vue
View File

@ -5,28 +5,221 @@
<div class="rectangle-container">
<div :class="['rectangle', darkMode ? 'rectangle-darkmode' : 'rectangle-lightmode']"></div>
</div>
<div class="data-field" id="username">
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Username:</pre>
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
<div class="fullname-registered-lastLogin">
<div class="data-field" id="fullName">
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Full name:</pre>
<pre v-if="!editable"
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ loggedInUserFullName }}</pre>
<input v-if="editable" v-model="loggedInUserFullName" @change="updateUser()"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
</div>
<div class="data-field" id="registered">
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Registered:</pre>
<pre
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ loggedInUserRegistered }}</pre>
</div>
<div class="data-field" id="lastLogin">
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Last login:</pre>
<pre
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ loggedInUserLastLogin }}</pre>
</div>
</div>
<div class="info">
<div class="city-phonenumber">
<div class="data-field" id="city">
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">City:</pre>
<pre v-if="!editable"
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ loggedInUserCity }}</pre>
<input v-if="editable" v-model="loggedInUserCity" @change="updateUser()"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
</div>
<div class="data-field" id="phonenumber">
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Phonenumber:</pre>
<pre v-if="!editable"
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ loggedInUserPhonenumber }}</pre>
<input v-if="editable" v-model="loggedInUserPhonenumber" @change="updateUser()"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
</div>
</div>
<div class="postcode-address">
<div class="data-field" id="postcode">
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Postcode:</pre>
<pre v-if="!editable"
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ loggedInUserPostcode }}</pre>
<input v-if="editable" v-model="loggedInUserPostcode" @change="updateUser()"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
</div>
<div class="data-field" id="address">
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Address:</pre>
<pre v-if="!editable"
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ loggedInUserAddress }}</pre>
<input v-if="editable" v-model="loggedInUserAddress" @change="updateUser()"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
</div>
</div>
</div>
</div>
</section>
</template>
<script setup>
import { ref } from 'vue';
import { useStore } from 'vuex';
import { computed } from 'vue';
import Axios from '../axios.config.js';
import clientsideConfig from '../../clientsideConfig.js';
const store = useStore();
const editable = computed(() => store.state.editable);
const loggedInUserId = ref('');
const loggedInUserUsername = ref('');
const loggedInUserRegistered = ref('');
const loggedInUserLastLogin = ref('');
const loggedInUserFullName = ref('');
const loggedInUserEmail = ref('');
const loggedInUserPhonenumber = ref('');
const loggedInUserAddress = ref('');
const loggedInUserCity = ref('');
const loggedInUserPostcode = ref('');
const loggedInUserAdminBool = ref('');
const loggedInUserTechnicianBool = ref('');
const loggedInUserReaderBool = ref('');
function getItem(item) {
if (process.client) {
return localStorage.getItem(item)
} else {
return undefined
}
}
const getSession = async () => {
loggedInUserId.value = getItem('logged-in-user-id');
loggedInUserUsername.value = getItem('logged-in-user-username');
loggedInUserRegistered.value = getItem('logged-in-user-registered');
loggedInUserLastLogin.value = getItem('logged-in-user-lastLogin');
loggedInUserFullName.value = getItem('logged-in-user-fullName');
loggedInUserEmail.value = getItem('logged-in-user-email');
loggedInUserPhonenumber.value = getItem('logged-in-user-phonenumber');
loggedInUserAddress.value = getItem('logged-in-user-address');
loggedInUserCity.value = getItem('logged-in-user-city');
loggedInUserPostcode.value = getItem('logged-in-user-postcode');
loggedInUserAdminBool.value = getItem('logged-in-user-adminBool');
loggedInUserTechnicianBool.value = getItem('logged-in-user-technicianBool');
loggedInUserReaderBool.value = getItem('logged-in-user-readerBool');
}
const darkMode = ref(true)
//update data
const updateUser = async () => {
if (loggedInUserFullName.value.length === 0) {
alert("Please add a valid name!");
loggedInUserFullName.value = getItem('logged-in-user-fullName');
return;
}
if (loggedInUserCity.value.length === 0) {
alert("Please add a city!");
loggedInUserCity.value = getItem('logged-in-user-city');
return;
}
if (loggedInUserAddress.value.length === 0) {
alert("Please add an address!");
loggedInUserAddress.value = getItem('logged-in-user-address');
return;
}
if (!validatePhonenumber(loggedInUserPhonenumber.value)) {
alert("Please add a valid phonenumber!");
loggedInUserPhonenumber.value = getItem('logged-in-user-phonenumber');
return;
}
if (!validatePostcode(loggedInUserPostcode.value)) {
alert("Please add a valid postcode!");
loggedInUserPostcode.value = getItem('logged-in-user-postcode');
return;
}
if ((loggedInUserPhonenumber.value.length === 0) && (loggedInUserEmail.value.length === 0)) {
alert("Please add a phonenumber or an email!");
loggedInUserPhonenumber.value = getItem('logged-in-user-phonenumber');
loggedInUserEmail.value = getItem('logged-in-user-email')
return;
}
try {
await Axios.put(
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateEmployee`,
{
id: loggedInUserId.value,
username: loggedInUserUsername.value,
fullName: loggedInUserFullName.value,
email: loggedInUserEmail.value,
phonenumber: loggedInUserPhonenumber.value,
address: loggedInUserAddress.value,
city: loggedInUserCity.value,
postcode: loggedInUserPostcode.value,
adminBool: loggedInUserAdminBool.value,
technicianBool: loggedInUserTechnicianBool.value,
readerBool: loggedInUserReaderBool.value,
}
)
setItem('logged-in-user-username', loggedInUserUsername.value)
setItem('logged-in-user-fullName', loggedInUserFullName.value)
setItem('logged-in-user-email', loggedInUserEmail.value)
setItem('logged-in-user-phonenumber', loggedInUserPhonenumber.value)
setItem('logged-in-user-address', loggedInUserAddress.value)
setItem('logged-in-user-city', loggedInUserCity.value)
setItem('logged-in-user-postcode', loggedInUserPostcode.value)
getSession();
} catch (err) {
console.log(err.response.statusText);
}
}
function setItem(item, value) {
if (process.client) {
localStorage.setItem(item, value)
return true
} else {
return false
}
}
// to validate the phonenumber
const validatePhonenumber = (number) => {
const mobilephonenumberRegex = new RegExp(/^(((((00|\+){1,2})49([ \-/]?|[ \()/]?))|0)[1]([0-2]|[4-7])([0-9]{1})([ \-/]?|[ \()/]?)([0-9]{8}))$/, "gm");
const landlineRegex = new RegExp(/^0(30|40|69|89|20[12389]|21[24]|228|234|335|340|3[3-9][15]|906|[2-9][1-9]1|3(?:3(?:[0237][127]|0[3-6]|2[89]|3[458]|[46][1246]|7[589]|8[1256]|9[145])|4(?:[2347][135]|[34]7|[69][146]|48|62|76|93)|5(?:[04679][14]|[238][135]|[2469]2|[4789]6|[278]8|63|73|37|29)|6(?:[024689][13]|[03789]5|06|2[2489]|3[1246]|44|47|7[1279]|82|86)|7(?:[236][135]|2[2467]|37|4[145]|62|64|7[1-4])|8(?:[234678]1|3[468]|4[347]|6[035-9]|7[467]|83|86)|9(?:[236][135]|[04689]4|[04789]1|[03468]7|02|09|28|4[369]|6[2689]|73|76|96|98))|3[3-9][0-9]{3}|13[078]|180[235]|18[01]|19[0-9]{3}|[789]00|[2-9][0-9]{3})([0-9]{1,})$/, "gm");
if (number === "") {
return true
}
if (mobilephonenumberRegex.test(number)) {
return true
} else if (landlineRegex.test(number)) {
return true;
}
return false;
}
// to validate the postcode
const validatePostcode = (postcode) => {
const postcodeRegex = new RegExp(/^\d{5}$/);
if (postcode === "") {
return true
}
return postcodeRegex.test(postcode);
}
onMounted(async () => {
await getSession();
});
</script>
<script>
export default {
name: "UserProfile",
};
</script>
</script>
<style scoped>
.userProfile {
display: flex;
@ -52,11 +245,19 @@ export default {
background-color: #fff;
}
.input {
border: none;
}
.heading {
letter-spacing: 5%;
font: 400 1rem/2rem Overpass, sans-serif;
}
.div#address.data-field {
padding-left: 3rem;
}
.heading-darkmode {
color: #fff;
}
@ -65,6 +266,18 @@ export default {
color: #000;
}
.fullname-registered-lastLogin,
.info {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
line-height: normal;
width: 50%;
padding: 0 1rem;
border-radius: 0.3125rem;
}
.userData {
display: flex;
flex-direction: row;
@ -74,6 +287,26 @@ export default {
gap: 3.125rem
}
.city-phonenumber {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
align-self: stretch;
padding: 0 1.875rem 0 0;
gap: 0.625rem;
}
.postcode-address {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
align-self: stretch;
padding: 0 1.875rem 0 0;
gap: 0.625rem;
}
.rectangle-container {
display: flex;
}