Skip to content
Snippets Groups Projects
Commit a35fb7cf authored by Yulong Wang's avatar Yulong Wang
Browse files

Merge branch... 

Merge branch '16-as-a-user-i-want-have-a-page-to-insert-my-information-when-i-want-to-visit-this-website-i-can' into 'main'

regist page achieve

Closes #16

See merge request !53
parents 81f9d6f5 3a28089d
No related branches found
No related tags found
1 merge request!53regist page achieve
Hide whitespace changes
Inline Side-by-side
src/main/resources/static/css/regist.css 0 → 100644
+ 302
− 0
View file @ a35fb7cf
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;1,500&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins",sans-serif;
}
body{
/*height: 100vh;*/
width: 100%;
background: #000;
}
.background{
background: url(../img/backgroud3.jpg) no-repeat;
background-position: center;
background-size:cover ;
height: 100vh;
width: 100%;
filter: blur(10px);
}
.header{
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 25px 13%;
background: transparent;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
}
.navbar a{
position: relative;
font-size: 16px;
color: black;
margin-right: 30px;
text-decoration: none;
}
.navbar a::after{
content: "";
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: black;
bottom: -5px;
border-radius: 5px;
transform: translateY(10px);
opacity: 0;
transition: .5s ease;
}
.navbar a:hover:after{
transform: translateY(0);
opacity: 1;
}
.search-bar{
width: 250px;
height: 45px;
background-color: transparent;
border: 2px solid #000000;
border-radius: 6px;
display: flex;
align-items: center;
}
.search-bar input{
width: 100%;
background-color: transparent;
border: none;
outline: none;
color: black;
font-size: 16px;
padding-left: 10px;
}
.search-bar button{
width: 40px;
height: 100%;
background: transparent;
outline: none;
border: none;
color:black;
cursor: pointer;
}
.search-bar input::placeholder{
color: black;
}
.search-bar button i{
font-size: 22px;
}
.container{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 75%;
height: 550px;
margin-top: 20px;
background: url(../img/backgroud3.jpg) no-repeat;
background-position: center;
background-size:cover ;
border-radius: 20px;
overflow: hidden;
}
.item{
position: absolute;
top: 0;
left: 0;
width: 58%;
height: 100%;
color: black;
background: transparent;
padding: 80px;
display: flex;
justify-content: space-between;
flex-direction: column;
}
.item .logo{
color: black;
font-size: 30px;
}
.text-item h2{
font-size: 40px;
line-height: 1;
}
.text-item p{
font-size: 16px;
margin: 20px 0;
}
.social-icon a i{
color: black;
font-size: 24px;
margin-left: 10px;
cursor: pointer;
transition: .5s ease;
}
.social-icon a:hover i{
transform: scale(1.2);
}
.container .login-section{
position: absolute;
top: 0;
right: 0;
width: calc(100% - 58%);
height: 100%;
color: black;
backdrop-filter: blur(10px);
}
.form-box .input-box{
width: 340px;
height: 50px;
border-bottom: 2px solid #000000;
margin: 30px 0;
position: relative;
}
.input-box input{
width: 100%;
height: 100%;
background: transparent;
border: none;
outline: none;
font-size: 16px;
padding-right: 28px;
}
.input-box label{
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-size: 16px;
font-weight: 600px;
pointer-events: none;
transition: .5s ease;
}
.input-box .icon{
position: absolute;
top: 13px;
right: 0;
font-size: 19px;
}
.input-box input:focus~ label,
.input-box input:valid~ label{
top: -5px;
}
.remember-password{
font-size: 14px;
font-weight: 500;
margin: -15px 0 15px ;
display: flex;
justify-content: space-between;
}
.remember-password label input{
accent-color: black;
margin-right: 3px;
}
.remember-password a{
color: black;
text-decoration: none;
}
.remember-password a:hover{
text-decoration: underline;
}
.btn{
background: black;
width: 100%;
height: 45px;
outline: none;
border: none;
border-radius: 4px;
cursor: pointer;
background: #84b9db;
font-size: 16px;
color: black;
box-shadow: rgba(0,0,0,0.4);
}
.create-account{
font-size: 14.5px;
text-align: center;
margin: 25px;
}
.create-account p a{
color: black;
font-weight: 600px;
text-decoration: none;
}
.create-account p a:hover{
text-decoration: underline;
}
/* Input Box */
.input-box {
width: 340px;
height: 50px;
border-bottom: 2px solid #000000;
margin: 30px 0;
position: relative;
}
.input-box input,
.input-box select {
width: 100%;
height: 100%;
background: transparent;
border: none;
outline: none;
font-size: 16px;
color: black;
padding-right: 28px;
appearance: none;
}
.input-box label {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
transition: .5s ease;
}
.input-box input:focus ~ label,
.input-box input:valid ~ label,
.input-box select:focus ~ label {
top: -5px;
}
.input-box select {
cursor: pointer;
color: black;
font-size: 16px;
border-radius: 4px;
}
.input-box .icon {
position: absolute;
top: 13px;
right: 0;
font-size: 19px;
color: black;
}
.error-message {
color: red;
font-size: 12px;
margin-top: 5px;
display: none;
}
src/main/resources/static/html/regist.html 0 → 100644
+ 144
− 0
View file @ a35fb7cf
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Register</title>
<link rel="stylesheet" href="../css/regist.css">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="../js/emailValidation.js"></script>
</head>
<body>
<!-- NAVBAR CREATION -->
<header class="header">
<nav class="navbar">
<a href="../html/login.html">Home</a>
</nav>
</header>
<!-- BACKGROUND AND MAIN CONTAINER -->
<div class="background"></div>
<div class="container">
<div class="item">
<h2 class="logo"><i class='bx bxl-xing'></i>Health & Social Care</h2>
<div class="text-item">
<h2>Welcome! <br><span>
To Our Website
</span></h2>
<p>Effective communication promotes faster and more efficient placements</p>
<div class="social-icon">
<a href="#"><i class='bx bxl-facebook'></i></a>
<a href="#"><i class='bx bxl-twitter'></i></a>
<a href="#"><i class='bx bxl-youtube'></i></a>
<a href="#"><i class='bx bxl-instagram'></i></a>
<a href="#"><i class='bx bxl-linkedin'></i></a>
</div>
</div>
</div>
<div class="login-section" style="overflow: auto">
<div class="form-box register" >
<form action="" id="registForm">
<h2>Sign Up</h2>
<!-- Username -->
<div class="input-box">
<span class="icon"><i class='bx bxs-user'></i></span>
<input type="text" id="name" name="name" required>
<label>Username</label>
<span id="nameError" class="error-message"></span>
</div>
<!-- Password -->
<div class="input-box">
<span class="icon"><i class='bx bxs-lock-alt'></i></span>
<input type="password" id="password" name="password" required>
<label>Password</label>
<span id="passwordError" class="error-message"></span>
</div>
<!-- Email -->
<div class="input-box">
<span class="icon"><i class='bx bxs-envelope'></i></span>
<input type="text" id="email" required>
<label>Email</label>
<span id="emailError" class="error-message"></span>
</div>
<!-- Phone -->
<div class="input-box">
<span class="icon"><i class='bx bxs-phone'></i></span>
<input type="tel" id="phone" name="phone" required>
<label>Phone</label>
<span id="phoneError" class="error-message"></span>
</div>
<!-- Address -->
<div class="input-box">
<span class="icon"><i class='bx bxs-map'></i></span>
<input type="text"id="address" name="address" required>
<label>Address</label>
<span id="addressError" class="error-message"></span>
</div>
<!-- Type (Dropdown) -->
<div class="input-box">
<span class="icon"><i class='bx bxs-category'></i></span>
<select required id="type">
<option value="" disabled selected>Select Type</option>
<option style="color: black" value="hospital">hospital</option>
<option style="color: black" value="patient">patient</option>
</select>
</div>
</form>
<button class="btn" onclick="regist()">Sign Up</button>
</div>
</div>
</div>
<script>
var type;
var role;
const getType = document.getElementById("type");
getType.addEventListener("change", function () {
type = getType.value; // Gets the selected value
});
function regist() {
if (type === "hospital") {
role = "HOSPITAL";
} else if (type === "patient") {
role = "PATIENT";
}
const url = '/superAdmin/sign';
const data = {
name: document.getElementsByName("name")[0].value,
password: document.getElementsByName("password")[0].value,
email: document.getElementById("email").value,
phone: document.getElementsByName("phone")[0].value,
address: document.getElementsByName("address")[0].value,
status: 1,
role: role,
type: type
};
console.log("Sending data:", data);
fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data)
})
.then((response) => response.json())
.then((data) => {
console.log(data)
if (data.code === 1) {
console.log(data)
window.location.href="login.html"
}
if(data.code === 0){
alert(data.msg);
}
})
}
</script>
</body>
</html>
src/main/resources/static/js/emailValidation.js 0 → 100644
+ 69
− 0
View file @ a35fb7cf
$(document).ready(function () {
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // confirm email
//Listen for input events using jQuery's on method
$('#email').on('input', function () {
const emailValue = $(this).val();
const $emailError = $('#emailError');
// Check whether the input is empty or does not match the regular expression
if (!emailPattern.test(emailValue) && emailValue !== '') {
$emailError.text("Please enter a valid email address.");
$emailError.show(); // Display error message
} else {
$emailError.text("");
$emailError.hide(); // Hide error message
}
});
$('#name').on('mouseleave', function () {
const value = $(this).val();
const $nameError = $('#nameError');
if (value == '') {
$nameError.text("Please enter data.");
$nameError.show();
} else {
$nameError.text("");
$nameError.hide();
}
});
$('#password').on('mouseleave', function () {
const value = $(this).val();
const $passwordError= $('#passwordError');
if (value == '') {
$passwordError.text("Please enter data.");
$passwordError.show();
} else {
$passwordError.text("");
$passwordError.hide();
}
});
$('#phone').on('mouseleave', function () {
const value = $(this).val();
const $phoneError= $('#phoneError');
// 检查输入是否为空或不符合正则表达式
if (value == '') {
$phoneError.text("Please enter data.");
$phoneError.show();
} else {
$phoneError.text("");
$phoneError.hide();
}
});
$('#address').on('mouseleave', function () {
const value = $(this).val();
const $addressError= $('#addressError');
if (value == '') {
$addressError.text("Please enter data.");
$addressError.show();
} else {
$addressError.text("");
$addressError.hide();
}
});
});
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment