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

89
pages/settings.vue
View File

@ -6,37 +6,39 @@
<div id="content-body">
<div class="buttonOptions">
<input :class="[(darkMode && accountSelected) ? 'selected-input-darkmode' : '',
(darkMode && !accountSelected) ? 'input-darkmode' : '',
(!darkMode && accountSelected) ? 'selected-input-lightmode' : '',
(!darkMode && !accountSelected) ? 'input-lightmode' : '',]" type="button" id="account" value="Account"
(darkMode && !accountSelected) ? 'input-darkmode' : '',
(!darkMode && accountSelected) ? 'selected-input-lightmode' : '',
(!darkMode && !accountSelected) ? 'input-lightmode' : '',]" type="button" id="account" value="Account"
@click="ActivateAccount">
<input :class="[(darkMode && appearanceSelected) ? 'selected-input-darkmode' : '',
(darkMode && !appearanceSelected) ? 'input-darkmode' : '',
(!darkMode && appearanceSelected) ? 'selected-input-lightmode' : '',
(!darkMode && !appearanceSelected) ? 'input-lightmode' : '',]" type="button" id="appearance"
(darkMode && !appearanceSelected) ? 'input-darkmode' : '',
(!darkMode && appearanceSelected) ? 'selected-input-lightmode' : '',
(!darkMode && !appearanceSelected) ? 'input-lightmode' : '',]" type="button" id="appearance"
value="Appearance" @click="ActivateAppearance">
<input :class="[(darkMode && usersSelected) ? 'selected-input-darkmode' : '',
(darkMode && !usersSelected) ? 'input-darkmode' : '',
(!darkMode && usersSelected) ? 'selected-input-lightmode' : '',
(!darkMode && !usersSelected) ? 'input-lightmode' : '',]" type="button" id="users" value="Users"
@click="ActivateUsers">
<input :class="[(darkMode) ? 'input-darkmode' : '',
(!darkMode) ? 'input-lightmode' : '',]" type="button" id="logout" value="Logout" @click="handleLogout">
</div>
<UserProfile v-if="accountSelected"/>
<UserAccount v-if="accountSelected"/>
<UserAppearance v-if="appearanceSelected"/>
<UserRightsList v-if="usersSelected"/>
<UserProfile v-if="accountSelected" />
<UserAccount v-if="accountSelected" />
<UserAppearance v-if="appearanceSelected" />
<!-- <UserRightsList v-if="usersSelected"/> -->
</div>
</section>
</template>
<script setup>
import { ref } from 'vue';
import UserProfile from "../components/server/UserProfile.vue";
import UserAccount from "../components/server/UserAccount.vue";
import UserAppearance from "../components/server/UserAppearance.vue";
import UserRightsList from "../components/server/UserRightsList.vue";
// import UserRightsList from "../components/server/UserRightsList.vue";
import { useStore } from "vuex";
const store = useStore();
const { signOut } = useAuth()
definePageMeta({
layout: 'default',
@ -47,33 +49,54 @@ const darkMode = ref(true)
const accountSelected = ref(true)
const appearanceSelected = ref(false)
const usersSelected = ref(false)
const handleLogout = async () => {
localStorage.setItem('logged-in-bool', false);
localStorage.removeItem('logged-in-user-id');
localStorage.removeItem('logged-in-user-username');
localStorage.removeItem('logged-in-user-registered');
localStorage.removeItem('logged-in-user-lastLogin');
localStorage.removeItem('logged-in-user-fullName');
localStorage.removeItem('logged-in-user-email');
localStorage.removeItem('logged-in-user-phonenumber');
localStorage.removeItem('logged-in-user-address');
localStorage.removeItem('logged-in-user-city');
localStorage.removeItem('logged-in-user-postcode');
localStorage.removeItem('logged-in-user-adminBool');
localStorage.removeItem('logged-in-user-technicianBool');
localStorage.removeItem('logged-in-user-readerBool');
store.commit('resetChangeToSet');
store.commit('setLocalStorageChanged');
let res = await signOut({ callbackUrl: '/login' })
store.commit('resetStore');
store.commit('logout');
}
// fuctions to change the option button
const ActivateAccount = () => {
accountSelected.value = true;
appearanceSelected.value = false;
usersSelected.value = false;
// usersSelected.value = false;
};
const ActivateAppearance = () => {
accountSelected.value = false;
appearanceSelected.value = true;
usersSelected.value = false;
};
const ActivateUsers = () => {
accountSelected.value = false;
appearanceSelected.value = false;
usersSelected.value = true;
// usersSelected.value = false;
};
// const ActivateUsers = () => {
// accountSelected.value = false;
// appearanceSelected.value = false;
// usersSelected.value = true;
// };
</script>
<script>
export default {
name: "SettingsPage",
}
</script>
</script>
<style>
* {
box-sizing: border-box;
@ -131,7 +154,7 @@ export default {
input#account,
input#appearance,
input#users {
input#logout {
display: flex;
flex-direction: row;
align-items: center;
@ -157,6 +180,10 @@ input#users {
background-color: #454545;
}
input#logout:hover {
background-color: #454545;
}
.input-lightmode {
color: #000;
background-color: #E4E4E4;