Add JavaScript files and edit profile CSS

1) finished edit profile with delete profile
This commit is contained in:
newtbot
2024-01-23 01:44:11 +08:00
parent d819ac71b2
commit 5b262eb803
14 changed files with 296 additions and 334 deletions

View File

@ -1,112 +1,111 @@
<%- include('top') %>
<link href="css/profile.css" rel="stylesheet" />
<div class="full-title">
<div class="container">
<h1 class="mt-4 mb-3">Profile
</h1>
</div>
</div>
<br>
<br>
<div class="container light-style flex-grow-1 container-p-y">
<div class="card overflow-hidden">
<div class="row no-gutters row-bordered row-border-light">
<div class="col-md-3 pt-0">
<div class="list-group list-group-flush account-settings-links">
<a class="list-group-item list-group-item-action active" data-toggle="list"
href="#account-general">General</a>
<a class="list-group-item list-group-item-action" data-toggle="list"
href="#account-change-password">Change password</a>
</div>
</div>
<div class="col-md-9">
<div class="tab-content">
<div class="tab-pane fade active show" id="account-general">
<div class="card-body media align-items-center">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt=""
class="d-block ui-w-80">
<br>
<div class="media-body ml-4">
<label class="btn btn-outline-primary">
Upload new photo
<input type="file" class="account-settings-fileinput">
</label> &nbsp;
<div class="text-light small mt-1">Allowed JPG, GIF or PNG. Max size of 800K</div>
</div>
</div>
<hr class="border-light m-0">
<div class="card-body">
<div class="form-group">
<label class="form-label">Username</label>
<input type="text" class="form-control mb-1" value="">
</div>
<div class="form-group">
<label class="form-label">First Name</label>
<input type="text" class="form-control" value="">
</div>
<div class="form-group">
<label class="form-label">Last Name</label>
<input type="text" class="form-control" value="">
</div>
<div class="form-group">
<label class="form-label">E-mail</label>
<input type="text" class="form-control mb-1" value="">
<div class="alert alert-warning mt-3">
Your email is not confirmed. Please check your inbox.<br>
<a href="javascript:void(0)">Resend confirmation</a>
</div>
</div>
<div class="form-group">
<label class="form-label">Phone Number</label>
<input type="text" class="form-control" value="">
</div>
<div class="form-group">
<label class="form-label">Address</label>
<input type="text" class="form-control" value="">
</div>
</div>
</div>
<div class="tab-pane fade" id="account-change-password">
<div class="card-body pb-2">
<div class="form-group">
<label class="form-label">Current password</label>
<input type="password" class="form-control">
</div>
<div class="form-group">
<label class="form-label">New password</label>
<input type="password" class="form-control">
</div>
<div class="form-group">
<label class="form-label">Repeat new password</label>
<input type="password" class="form-control">
</div>
</div>
<br>
<div class="profile">
<!-- <li jq-repeat="getUsername" class="nav-item"> -->
<div class="edit_information" jq-repeat="getUserDetails">
<div class="card-header shadow actionMessage" style="display:none"></div>
<form id="profileForm" action="user/update" method="put" onsubmit="formAJAX(this)"
evalAJAX="app.auth.profileRedirect();">
<h3 class="text-center">Edit Personal Information</h3>
<br>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label class="profile_details_text">First Name:</label>
<input type="text" name="first_name" value="{{ user.firstname }}" class="form-control"
pattern="^[a-zA-Z\s]+$">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label class="profile_details_text">Last Name: </label>
<input type="text" name="last_name" value="{{ user.lastname }}" class="form-control"
pattern="^[a-zA-Z\s]+$">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label class="profile_details_text">Username:</label>
<input type="text" name="username" value="{{ user.username }}" class="form-control"
pattern="^\w+$">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label class="profile_details_text">Password:</label>
<input type="password" name="password" placeholder="Password" class="form-control" value=""
pattern="^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label class="profile_details_text">Email Address:</label>
<input type="email" name="email" value="{{user.email}}" class="form-control"
pattern="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label class="profile_details_text">Address:</label>
<input type="text" name="address" value="{{ user.address }}" class="form-control"
pattern="^(\d{1,3}.)?.+\s(\d{6})$">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label class="profile_details_text">Phone Number:</label>
<input type="tel" name="phone" value="{{ user.phone }}" class="form-control" value=""
pattern="^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,8}$">
<div class="text-right mt-3">
<button type="button" class="btn btn-primary">Save changes</button>&nbsp;
<button type="button" class="btn btn-default">Cancel</button>
<button type="button" class="btn btn-delete">Delete Account</button>
</div>
</div>
</div>
<br>
<div class="row justify-content-center mt-3">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 submit">
<div class="form-group text-center">
<input type="submit" class="btn btn-success updateButton" value="Update Profile">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center">
<button type="button" class="btn btn-danger deleteButton" onclick="return myConfirm();">Delete
Profile</button>
</div>
</div>
</form>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<script>
function myConfirm() {
var result = confirm("Do you wish to Delete your Profile");
if (result == true) {
app.user.deleteProfile();
} else {
return false;
}
}
</script>
<%- include('bot') %>