aindreas/traintracker
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styled accounts page

Browse Source
This commit is contained in:
Owen Guillot
2023-03-21 14:27:23 +00:00
parent 8fc21f4a01
commit 0c0464ea5a
1 changed files with 29 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/pages/AccountPage.vue
View File

@ -4,25 +4,25 @@
<p v-if="this.user">Your Email: {{ this.user.email }}</p> <p v-if="this.user">Your Email: {{ this.user.email }}</p>
<div> <div>
<h3>Send a password reset email</h3> <h3>Send a password reset email</h3>
<input @click="resetPasswordEmail()" type="submit" name="" value="Send Password reset email"> <button @click="resetPasswordEmail()" type="submit" name="" value="Send Password reset email" class="button">Send Password Reset Email</button>
<h3>Enter your current password to edit account settings</h3> <h3>Enter your current password to edit account settings</h3>
<input v-if="showCurrentPassword" type="text" v-model="currentPassword" placeholder="Enter existing password"> <input v-if="showCurrentPassword" type="text" v-model="currentPassword" placeholder="Enter existing password">
<input v-else type="password" v-model="currentPassword" placeholder="Enter existing password"> <input v-else type="password" v-model="currentPassword" placeholder="Enter existing password">
<button @click="this.showCurrentPassword = !this.showCurrentPassword">Eye</button> <button @click="this.showCurrentPassword = !this.showCurrentPassword" class="eye-button">Eye</button>
<h3>Change email</h3> <h3>Change email</h3>
<input type="email" v-model="newEmail" aria-describedby="emailHelp" placeholder="Enter new email"> <input type="email" v-model="newEmail" aria-describedby="emailHelp" placeholder="Enter new email">
<input @click="updateUserEmail()" type="submit" name="" value="Update Email"> <button @click="updateUserEmail()" type="submit" name="" value="Update Email">Update email</button>
<h3>Change password</h3> <h3>Change password</h3>
<input v-if="showNewPassword" type="text" v-model="newPassword" placeholder="Enter new password"> <input v-if="showNewPassword" type="text" v-model="newPassword" placeholder="Enter new password">
<input v-else type="password" v-model="newPassword" placeholder="Enter new password"> <input v-else type="password" v-model="newPassword" placeholder="Enter new password">
<button @click="this.showNewPassword = !this.showNewPassword">Eye</button> <button @click="this.showNewPassword = !this.showNewPassword" class="eye-button">Eye</button>
<input @click="updateUserPassword()" type="submit" name="" value="Update Password"> <button @click="updateUserPassword()" type="submit" name="" value="Update Password">Update Password</button>
<h3>Delete account</h3> <h3>Delete account</h3>
<input @click="deleteUserAccount()" type="submit" name="" value="Delete Account"> <button @click="deleteUserAccount()" type="submit" name="" value="Delete Account">Delete Account</button>
<h3>Delete map filter preferences data</h3> <h3>Delete map filter preferences data</h3>
<button @click="deleteUserPreferences()">Delete preferences</button> <button @click="deleteUserPreferences()">Delete preferences</button>
@ -198,4 +198,27 @@ export default {
</script> </script>
<style scoped> <style scoped>
button {
background-color: blue;
color: white;
padding: 10px 20px;
border-radius: 5px;
border: none;
margin: 10px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: darkblue;
}
button:focus {
outline: none;
}
.eye-button {
background-color: grey;
}
</style> </style>