You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
110 lines
4.5 KiB
110 lines
4.5 KiB
<!DOCTYPE html>
|
|
<html lang="en" data-bs-theme="light">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Settings</title>
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
|
|
</head>
|
|
<body>
|
|
<div class="container overflow-auto">
|
|
<h4 class="mt-3 mb-4">Profile Settings</h4>
|
|
|
|
<h5 class="mb-4">Profile Picture</h5>
|
|
|
|
<div class="justify-content-start container w-25 mb-4">
|
|
<img src="images/spiderman.jpeg" class="img-fluid" alt="profile pic">
|
|
</div>
|
|
|
|
<div class="input-group mb-3">
|
|
<input type="file" class="form-control" id="profilePic">
|
|
<label class="input-group-text" for="ProfilePicture">Upload</label>
|
|
</div>
|
|
|
|
<h5 class="mb-4">Email and Name</h5>
|
|
<form class="needs-validation" novalidate>
|
|
<div class="row mb-3">
|
|
<label for="StaticEmail" class="col-2 col-form-label">Email</label>
|
|
<div class="col-4">
|
|
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="daniel_quinonezrosario@student.uml.edu">
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<label for="CurrentName" class="col-2 col-form-label">Current Name</label>
|
|
<div class="col-4">
|
|
<input type="text" readonly class="form-control-plaintext" id="currentName" value="Daniel">
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<label for="Name" class="col-2 col-form-label">New Name</label>
|
|
<div class="col-4">
|
|
<input type="text" class="form-control" id="newName" required>
|
|
<div class="invalid-feedback">
|
|
Please enter a new name
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- div that holds name change alert -->
|
|
<div id="nameAlert"></div>
|
|
<div>
|
|
<button type="button" class="btn btn-primary mb-5" id="newNameButton">Change Name</button>
|
|
</div>
|
|
</form>
|
|
|
|
<h5 class="mb-4">Password</h5>
|
|
<form class="needs-validation" novalidate>
|
|
<div class="row mb-3">
|
|
<label for="CurrentPassword" class="col-2 col-form-label">Current Password</label>
|
|
<div class="col-4">
|
|
<input type="password" class="form-control" id="currentPassword" minlength="8" maxlength="20" required>
|
|
<div class="invalid-feedback">
|
|
Please enter your current password
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<label for="NewPassword" class="col-2 col-form-label">New Password</label>
|
|
<div class="col-4">
|
|
<input type="password" class="form-control" id="newPassword" minlength="8" maxlength="20" required>
|
|
<div class="invalid-feedback">
|
|
Please enter a new password
|
|
<br>
|
|
Your new password must be between 8 to 20 characters long
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="passwordAlert"></div>
|
|
<div>
|
|
<button type="button" class="btn btn-primary mb-5" id="newPasswordButton">Change Password</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Dark Mode toggle -->
|
|
<h4 class="mb-4">Dark Mode</h4>
|
|
|
|
<div class="form-check form-switch mb-5">
|
|
<input class="form-check-input" type="checkbox" id="darkModeCheckbox">
|
|
<label class="form-check-label" for="darkModeCheckbox">Enable Dark Mode</label>
|
|
</div>
|
|
|
|
<h4 class="mb-4">Account Settings</h4>
|
|
|
|
<div class="mb-5">
|
|
<button type="button" class="btn btn-warning">Reset Account</button>
|
|
<br>
|
|
<div class="mt-2">CAUTION: This will reset your account. In doing so, all your budget data will be erased and you will be able to restart.</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<button type="button" class="btn btn-danger">Delete Account</button>
|
|
<br>
|
|
<div class="mt-2">CAUTION: This will delete your account. All account and profile data will be completely erased.</div>
|
|
</div>
|
|
</div>
|
|
<script src="js/settings.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
|
|
</body>
|
|
</html> |