user-authentication

This commit is contained in:
King Wang
2021-06-14 20:57:26 +08:00
parent 54c2f31f83
commit 7b18b2e3b2
38 changed files with 1418 additions and 0 deletions

View File

@@ -0,0 +1,99 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 20px;
}
h1,
h2 {
text-align: center;
margin-bottom: 20px;
}
.status {
width: 1000px;
margin: 20px auto;
text-align: center;
background: #f2f2f2;
padding: 20px;
}
.status.logined {
background: #2c81b9;
color: #fff;
}
.row {
display: flex;
background-color: #f2f2f2;
padding: 20px;
margin: 20px auto 0 auto;
width: 1000px;
}
.row>* {
flex: 1;
margin-right: 20px;
padding: 20px;
background: #d9d9d9;
}
.row>*:last-child {
margin-right: 0;
}
label {
display: inline-block;
width: 40%;
line-height: 1.5rem;
}
input {
display: inline-block;
width: 60%;
padding: 10px;
font-size: 1rem;
}
p {
margin-bottom: 10px;
}
button {
font-size: 20px;
padding: 10px 20px;
cursor: pointer;
display: block;
margin: 10px auto;
}
.action>div {
text-align: center;
}
.action .hint {
font-size: 14px;
color: #999;
}
.action h3 {
margin-bottom: 10px;
}
pre {
background: #333;
border-radius: 5px;
padding: 10px;
color: #fff;
min-height: 80px;
text-align: left;
white-space: pre-wrap;
}
.return {
display: none;
}

View File

@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TSRPC Example</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<h1>Login and Role Authentication</h1>
<div class="status">Not Logined</div>
<div class="row user">
<div class="login-normal">
<h2>Normal</h2>
<p><button>Login as Normal Role</button></p>
</div>
<div class="login-admin">
<h2>Admin</h2>
<p><button>Login as Admin Role</button></p>
</div>
<div class="logout">
<h2>Logout</h2>
<p><button>Logout</button></p>
</div>
</div>
<div class="row action">
<div class="normal">
<h2>Normal Action</h2>
<p class="hint">Need login</p>
<p><button>Do This</button></p>
<div class="return">
<h3>Return</h3>
<pre></pre>
</div>
</div>
<div class="admin">
<h2>Admin Action</h2>
<p class="hint">Need Admin role</p>
<p><button>Do This</button></p>
<div class="return">
<h3>Return</h3>
<pre></pre>
</div>
</div>
<div class="guest">
<h2>Guest Action</h2>
<p class="hint">Do NOT need login</p>
<p><button>Do This</button></p>
<div class="return">
<h3>Return</h3>
<pre></pre>
</div>
</div>
</div>
</body>
</html>