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

250
components/LoginForm.vue
View File

@ -26,8 +26,11 @@
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Password:</div>
</label>
<div :class="['input-field', darkMode ? 'input-darkmode' : 'input-lightmode']">
<input type="text" id="password-input" placeholder="*******">
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="show-password-toggle" value="Show">
<input :type="showPassword ? 'text' : 'password'" id="password-input" placeholder="*******">
<input v-if="!showPassword" type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
id="show-password-toggle" value="Show" @click="togglePasswordVisibility">
<input v-if="showPassword" type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
id="show-password-toggle" value="Hide" @click="togglePasswordVisibility">
</div>
</div>
</div>
@ -37,24 +40,42 @@
</label>
</div>
<div class="buttons">
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="login-button" value="Login" @click="handleLogin">
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="signup-button" value="Signup" @click="testFunctionSignup">
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="login-button" value="Login"
@click="handleLogin">
<!-- <input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="signup-button" value="Signup" @click="testFunctionSignup"> -->
</div>
</form>
</template>
<script setup>
import { useRouter } from 'vue-router';
import { ref } from 'vue';
// import { useRouter } from 'vue-router';
import { ref, onBeforeUnmount } from 'vue';
import Axios from '../axios.config.js';
import clientsideConfig from '../clientsideConfig.js';
import { useStore } from 'vuex';
const store = useStore();
const { signIn } = useAuth()
const router = useRouter();
// const router = useRouter();
const darkMode = ref(true);
const isError = ref(false);
const showPassword = ref(false);
const errorMsg = ref('');
function setItem(item, value) {
if (process.client) {
localStorage.setItem(item, value)
return true
} else {
return false
}
}
const togglePasswordVisibility = () => {
showPassword.value = !showPassword.value;
}
const handleLogin = async () => {
isError.value = false;
errorMsg.value = '';
@ -82,69 +103,105 @@ const handleLogin = async () => {
// sucessfully logged in
router.push('/home')*/
let res = await signIn( credentials, { callbackUrl: '/home' })
// console.log("res", res)
let resBody = await signIn(credentials, { callbackUrl: '/home' })
try {
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/login`);
setItem('logged-in-bool', true);
setItem('logged-in-user-id', response.data.id)
setItem('logged-in-user-username', response.data.username)
setItem('logged-in-user-registered', response.data.registered)
setItem('logged-in-user-lastLogin', response.data.lastLogin)
setItem('logged-in-user-fullName', response.data.fullName)
setItem('logged-in-user-email', response.data.email)
setItem('logged-in-user-phonenumber', response.data.phonenumber)
setItem('logged-in-user-address', response.data.address)
setItem('logged-in-user-city', response.data.city)
setItem('logged-in-user-postcode', response.data.postcode)
setItem('logged-in-user-adminBool', response.data.adminBool)
setItem('logged-in-user-technicianBool', response.data.technicianBool)
setItem('logged-in-user-readerBool', response.data.readerBool)
setTimeout(() => {
}, 500);
store.commit('setLocalStorageChanged');
} catch (err) {
console.log(err.response.statusText);
}
} catch (err) {
// handle the error
console.log(err.response.statusText)
isError.value = true;
errorMsg.value = err.response.statusText;
errorMsg.value = 'Username or password is incorrect.';
document.getElementById('password-input').value = '';
}
}
const testFunctionSignup = async () => {
isError.value = false;
errorMsg.value = '';
// const testFunctionSignup = async () => {
// isError.value = false;
// errorMsg.value = '';
const username = 'adm_tueit'
const password = 'SvF=?bfEx7_hV,cMEu4m'
const password_repeat = 'SvF=?bfEx7_hV,cMEu4m'
const fullName = 'administrator'
const email = 'support@tueit.de'
const phonenumber = ''
const address = ''
const city = ''
const postcode = ''
const adminBool = true
const technician1Bool = false
const technician2Bool = false
const technicianMonitoringBool = false
const merchantBool = false
const internBool = true
// const username = 'adm_tueit'
// const password = 'SvF=?bfEx7_hV,cMEu4m'
// const password_repeat = 'SvF=?bfEx7_hV,cMEu4m'
// const fullName = 'administrator'
// const email = 'support@tueit.de'
// const phonenumber = ''
// const address = ''
// const city = ''
// const postcode = ''
// const adminBool = true
// const technician1Bool = false
// const technician2Bool = false
// const technicianMonitoringBool = false
// const merchantBool = false
// const internBool = true
const requestBody = {
username: username,
password: password,
password_repeat: password_repeat,
fullName: fullName,
email: email,
phonenumber: phonenumber,
address: address,
city: city,
postcode: postcode,
adminBool: adminBool,
technician1Bool: technician1Bool,
technician2Bool: technician2Bool,
technicianMonitoringBool: technicianMonitoringBool,
merchantBool: merchantBool,
internBool: internBool,
// const requestBody = {
// username: username,
// password: password,
// password_repeat: password_repeat,
// fullName: fullName,
// email: email,
// phonenumber: phonenumber,
// address: address,
// city: city,
// postcode: postcode,
// adminBool: adminBool,
// technician1Bool: technician1Bool,
// technician2Bool: technician2Bool,
// technicianMonitoringBool: technicianMonitoringBool,
// merchantBool: merchantBool,
// internBool: internBool,
// }
// try {
// let res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/signup`, requestBody);
// // something to do with the res?
// // console.log(res)
// } catch (err) {
// // handle the error
// console.log(err.response.statusText)
// isError.value = true;
// errorMsg.value = err.response.statusText;
// }
// }
onMounted(() => {
document.addEventListener('keyup', handleKeyUp);
document.getElementById('username-input').value = '';
document.getElementById('password-input').value = '';
});
onBeforeUnmount(() => {
document.removeEventListener('keyup', handleKeyUp);
});
const handleKeyUp = (event) => {
if (event.key === 'Enter') {
handleLogin();
}
try {
let res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/signup`, requestBody);
// something to do with the res?
// console.log(res)
} catch (err) {
// handle the error
console.log(err.response.statusText)
isError.value = true;
errorMsg.value = err.response.statusText;
}
}
};
</script>
<script>
@ -157,8 +214,8 @@ export default {
}
}
}
</script>
</script>
<style scoped>
* {
@ -178,10 +235,12 @@ export default {
padding: 2.5rem 1.875rem;
gap: 1.875rem;
}
.form-darkmode {
border: 0.0625rem solid #000;
background-color: #2c2c2c;
}
.form-lightmode {
border: 0.0625rem solid #8e8e8e;
background-color: #fff;
@ -202,6 +261,7 @@ export default {
width: 3.125rem;
height: 3.125rem;
}
.title-icon>img {
width: 3.125rem;
height: 3.125rem;
@ -210,14 +270,24 @@ export default {
overflow: hidden;
}
#show-password-toggle:hover {
cursor: pointer;
}
.title {
margin: 0;
letter-spacing: 0.05rem;
white-space: nowrap;
font: 400 1.875rem/1.875rem Overpass, sans-serif;
}
.title-darkmode { color: #ffffff; }
.title-lightmode { color: #000000; }
.title-darkmode {
color: #ffffff;
}
.title-lightmode {
color: #000000;
}
@ -259,28 +329,43 @@ label {
width: 1.875rem;
height: 1.875rem;
}
.icon>img {
object-fit: contain;
object-position: center;
overflow: hidden;
}
#username-icon>img {
width: auto;
height: 0.9375rem;
}
}
#password-icon>img {
width: 0.9375rem;
height: auto;
}
.icon-darkmode>img { filter: invert(100%); }
.icon-lightmode>img { filter: invert(0%); }
.icon-darkmode>img {
filter: invert(100%);
}
.icon-lightmode>img {
filter: invert(0%);
}
.label {
letter-spacing: 0.02rem;
font: 400 0.9375rem/1.875rem Overpass, sans-serif;
}
.label-darkmode { color: #ffffff; }
.label-lightmode { color: #000000; }
.label-darkmode {
color: #ffffff;
}
.label-lightmode {
color: #000000;
}
.input-field {
display: flex;
@ -293,11 +378,18 @@ label {
border-radius: 0.3125rem;
padding: 0.1875rem 0.625rem;
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
}
.input-darkmode { background-color: #212121; }
.input-lightmode { background-color: #EBEBEB; }
}
input[type=text] {
.input-darkmode {
background-color: #212121;
}
.input-lightmode {
background-color: #EBEBEB;
}
input[type=text],
input[type=password] {
width: 100%;
height: 100%;
background-color: #00000000;
@ -360,6 +452,12 @@ input[type=button] {
white-space: nowrap;
font: 600 1.125rem/1.875rem Overpass, sans-serif;
}
.button-darkmode { color: #ffffff; }
.button-lightmode { color: #000000; }
.button-darkmode {
color: #ffffff;
}
.button-lightmode {
color: #000000;
}
</style>