Skip to content

Commit

Permalink
Add dark mode support
Browse files Browse the repository at this point in the history
  • Loading branch information
@hadiahmed098
hadiahmed098 committed Jul 21, 2023
1 parent 890ce74 commit f302052
Show file tree
Hide file tree
Showing 2 changed files with 115 additions and 74 deletions.
12 changes: 10 additions & 2 deletions ui/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="">
<html lang="" data-bs-theme="light">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Expand All @@ -8,10 +8,18 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
<title>Boiler Books</title>
</head>
<body data-bs-theme="light">
<body>
<noscript>
<strong>We're sorry but Boiler Books doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<script>
// load the stored theme (if exists) first to avoid some flashes
const theme = localStorage.getItem("bb_bs_theme");
if (theme !== null)
{
document.documentElement.setAttribute('data-bs-theme', theme);
}
</script>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
Expand Down
177 changes: 105 additions & 72 deletions ui/src/views/account/AccountSettings.vue
View file
Original file line number Diff line number Diff line change
@@ -1,85 +1,105 @@
<template>
<div class="container-lg my-5 pt-5">
<h1>Boiler Books Account Details</h1>
<h1>Boiler Books Settings</h1>

<div v-if="dispmsg!==''" class="lead fw-bold my-1 fs-3" v-bind:class="{'text-success':!error,'text-danger':error}">{{dispmsg}}</div>
<br v-else>

<div class="row my-2">
<div class="label-responsive col-md-4">
<h4>Account Username</h4>
</div>
<div class="col-md-8">
<input class="form-control" v-model="uname" v-bind:disabled="useOIDC">
</div>
</div>

<div class="row my-2">
<div class="label-responsive col-md-4">
<h4>Current First Name</h4>
</div>
<div class="col-md-8">
<input class="form-control" v-model="fname" v-bind:disabled="useOIDC">
</div>
</div>

<div class="row my-2">
<div class="label-responsive col-md-4">
<h4>Current Last Name</h4>
</div>
<div class="col-md-8">
<input class="form-control" v-model="lname" v-bind:disabled="useOIDC">
</div>
</div>

<div class="row my-2">
<div class="label-responsive col-md-4">
<h4>Current Email</h4>
</div>
<div class="col-md-8">
<input class="form-control" v-model="email" v-bind:disabled="useOIDC">
</div>
</div>

<div class="row my-2">
<div class="label-responsive col-md-4">
<h4>Current Address</h4>
</div>
<div class="col-md-8">
<input class="form-control" v-model="address">
</div>
</div>

<div class="row my-2">
<div class="label-responsive col-md-4">
<h4>Current City</h4>
</div>
<div class="col-md-8">
<input class="form-control" v-model="city">
</div>
</div>

<div class="row my-2">
<div class="label-responsive col-md-4">
<h4>Current State</h4>
</div>
<div class="col-md-8">
<input class="form-control" v-model="state">
</div>
<div class="my-4">
<h2>Account Details</h2>
<div class="row my-2">
<div class="label-responsive col-md-4">
<h4>Account Username</h4>
</div>
<div class="col-md-8">
<input class="form-control" v-model="uname" v-bind:disabled="useOIDC">
</div>
</div>

<div class="row my-2">
<div class="label-responsive col-md-4">
<h4>Current First Name</h4>
</div>
<div class="col-md-8">
<input class="form-control" v-model="fname" v-bind:disabled="useOIDC">
</div>
</div>

<div class="row my-2">
<div class="label-responsive col-md-4">
<h4>Current Last Name</h4>
</div>
<div class="col-md-8">
<input class="form-control" v-model="lname" v-bind:disabled="useOIDC">
</div>
</div>

<div class="row my-2">
<div class="label-responsive col-md-4">
<h4>Current Email</h4>
</div>
<div class="col-md-8">
<input class="form-control" v-model="email" v-bind:disabled="useOIDC">
</div>
</div>

<div class="row my-2">
<div class="label-responsive col-md-4">
<h4>Current Address</h4>
</div>
<div class="col-md-8">
<input class="form-control" v-model="address">
</div>
</div>

<div class="row my-2">
<div class="label-responsive col-md-4">
<h4>Current City</h4>
</div>
<div class="col-md-8">
<input class="form-control" v-model="city">
</div>
</div>

<div class="row my-2">
<div class="label-responsive col-md-4">
<h4>Current State</h4>
</div>
<div class="col-md-8">
<input class="form-control" v-model="state">
</div>
</div>

<div class="row my-2">
<div class="label-responsive col-md-4">
<h4>Current Zip Code</h4>
</div>
<div class="col-md-8">
<input class="form-control" v-model="zip">
</div>
</div>

<button class="btn btn-primary mt-2 mx-1" v-on:click="updateAccount">Update Account Details</button>
<button class="btn btn-secondary mt-2 mx-1" v-on:click="changePassword">Change Password</button>
</div>

<div class="row my-2">
<div class="label-responsive col-md-4">
<h4>Current Zip Code</h4>
</div>
<div class="col-md-8">
<input class="form-control" v-model="zip">
<div class="my-4">
<h2>Color Theme</h2>
<p class="lead">Experimental! Stored only in your current browser! Report any issues.</p>
<div class="row">
<div class="col-md-2 offset-md-4">
<p>Current Theme:</p>
</div>
<div class="col-md-3">
<select id="theme-select" class="form-select" v-model="bb_bs_theme" required>
<option selected disabled value="auto"> auto: follow system preference</option>
<option selected value="light">light: classic boiler books theme</option>
<option selected value="dark"> dark: new dark mode theme</option>
</select>
</div>
</div>
</div>

<button class="btn btn-primary mt-2 mx-1" v-on:click="updateAccount">Update Account Details</button>
<button class="btn btn-secondary mt-2 mx-1" v-on:click="changePassword">Change Password</button>

</div>
</template>

Expand Down Expand Up @@ -117,7 +137,8 @@ export default {
zip: '',
dispmsg:'',
error:false,
useOIDC: import.meta.env.VITE_USE_OIDC === "true"
useOIDC: import.meta.env.VITE_USE_OIDC === "true",
bb_bs_theme: "light"
}
},
methods: {
Expand Down Expand Up @@ -153,6 +174,12 @@ export default {
}
},
async mounted() {
const theme = localStorage.getItem("bb_bs_theme");
if (theme !== null)
{
this.bb_bs_theme = theme;
}
const response = await fetchWrapperJSON(`/api/v2/account/${auth_state.state.uname}`, {
method: 'get',
});
Expand All @@ -170,6 +197,12 @@ export default {
this.city = response.response.city;
this.state = response.response.state;
this.zip = response.response.zip;
},
watch: {
bb_bs_theme(new_val) {
localStorage.setItem("bb_bs_theme", new_val); // First save the theme for later
document.documentElement.setAttribute('data-bs-theme', new_val); // Swap the theme
}
}
}
</script>
Expand Down

0 comments on commit f302052

Please sign in to comment.