1+ <?php
2+
3+ require_once 'db.php ' ;
4+ include 'logged.php ' ; // This line makes it impossible to log in to the account page.
5+ $ message = '' ;
6+
7+ if ($ _SERVER ["REQUEST_METHOD " ] == "POST " ) {
8+ $ username = $ _POST ['username ' ];
9+ $ password = $ _POST ['password ' ];
10+
11+ $ stmt = $ conn ->prepare ("SELECT * FROM users WHERE username = ? " );
12+ $ stmt ->bind_param ("s " , $ username );
13+ $ stmt ->execute ();
14+
15+ $ result = $ stmt ->get_result ();
16+
17+ if ($ result ->num_rows == 1 ) {
18+ $ row = $ result ->fetch_assoc ();
19+
20+ if (password_verify ($ password , $ row ['password ' ])) {
21+ $ token = bin2hex (random_bytes (32 ));
22+
23+ $ update_stmt = $ conn ->prepare ("UPDATE users SET token = ? WHERE id = ? " );
24+ $ update_stmt ->bind_param ("si " , $ token , $ row ['id ' ]);
25+ $ update_stmt ->execute ();
26+
27+ setcookie ('token ' , $ token , time () + (86400 * 30 ), '/ ' );
28+ header ("Location: /dashboard.php " ); // Menu that can only be accessed in your account
29+ exit ();
30+ } else {
31+ $ message = "Invalid user name or password. " ;
32+ }
33+ } else {
34+ $ message = "Invalid user name or password. " ;
35+ }
36+
37+ $ stmt ->close ();
38+ $ update_stmt ->close ();
39+ }
40+
41+ ?>
42+
43+ <!DOCTYPE html>
44+ <html lang="ru">
45+
46+ <head>
47+ <meta charset="UTF-8">
48+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
49+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
50+ <title>Login - Test</title>
51+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
52+ <style>
53+ * {
54+ margin: 0;
55+ padding: 0;
56+ box-sizing: border-box;
57+ font-family: Arial, sans-serif;
58+ }
59+
60+ body {
61+ background-color: #121212;
62+ color: #ffffff;
63+ display: flex;
64+ justify-content: center;
65+ align-items: center;
66+ height: 100vh;
67+ position: relative;
68+ overflow: hidden;
69+ padding: 1rem;
70+ }
71+
72+ .background-text {
73+ position: absolute;
74+ top: 50%;
75+ left: 50%;
76+ transform: translate(-50%, -50%);
77+ font-size: 10rem;
78+ color: rgba(255, 255, 255, 0.05);
79+ white-space: nowrap;
80+ z-index: 0;
81+ }
82+
83+ .login-container {
84+ background-color: #1e1e1e;
85+ padding: 2rem;
86+ border-radius: 10px;
87+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
88+ text-align: center;
89+ width: 100%;
90+ max-width: 400px;
91+ z-index: 1;
92+ position: relative;
93+ }
94+
95+ form {
96+ display: flex;
97+ flex-direction: column;
98+ }
99+
100+ .group {
101+ display: flex;
102+ align-items: center;
103+ position: relative;
104+ margin-bottom: 1rem;
105+ }
106+
107+ .group input {
108+ width: 100%;
109+ padding-left: 45px;
110+ background-color: #2c2c2c;
111+ color: #ffffff;
112+ border: none;
113+ border-radius: 5px;
114+ padding: 0.75rem;
115+ padding-left: 45px;
116+ }
117+
118+ .group input::placeholder {
119+ color: #9e9e9e;
120+ }
121+
122+ .group .icon {
123+ position: absolute;
124+ left: 0.75rem;
125+ fill: none;
126+ width: 1.5rem;
127+ height: 1.5rem;
128+ color: #ffffff;
129+ top: 50%;
130+ transform: translateY(-50%);
131+ }
132+
133+ button {
134+ padding: 0.75rem;
135+ border: none;
136+ border-radius: 5px;
137+ background-color: #ff3b3b;
138+ color: #ffffff;
139+ font-size: 1rem;
140+ cursor: pointer;
141+ transition: background-color 0.3s ease;
142+ }
143+
144+ button:hover {
145+ background-color: #ff1c1c;
146+ }
147+
148+ .boton-elegante {
149+ padding: 15px 30px;
150+ border: 2px solid #2c2c2c;
151+ background-color: #1a1a1a;
152+ color: #ffffff;
153+ font-size: 1.2rem;
154+ cursor: pointer;
155+ border-radius: 30px;
156+ transition: all 0.4s ease;
157+ outline: none;
158+ position: relative;
159+ overflow: hidden;
160+ font-weight: bold;
161+ }
162+
163+ .boton-elegante::after {
164+ content: "";
165+ position: absolute;
166+ top: 0;
167+ left: 0;
168+ width: 100%;
169+ height: 100%;
170+ background: radial-gradient(circle,
171+ rgba(255, 255, 255, 0.25) 0%,
172+ rgba(255, 255, 255, 0) 70%);
173+ transform: scale(0);
174+ transition: transform 0.5s ease;
175+ }
176+
177+ .boton-elegante:hover::after {
178+ transform: scale(4);
179+ }
180+
181+ .boton-elegante:hover {
182+ border-color: #666666;
183+ background: #292929;
184+ }
185+
186+ @media (max-width: 768px) {
187+
188+ .login-container {
189+ width: 90%;
190+ padding: 1.5rem;
191+ }
192+ }
193+ </style>
194+ </head>
195+
196+ <body>
197+ <div class="background-text">Example</div>
198+ <div class="login-container">
199+ <form action="" method="post">
200+ <?php if (!empty ($ message )): ?>
201+ <div class="alert alert-danger mt-3" role="alert">
202+ <?php echo $ message ; ?>
203+ </div>
204+ <?php endif ; ?>
205+ <div class="group">
206+ <svg stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
207+ class="icon">
208+ <path
209+ d="M12 12c2.485 0 4.5-2.015 4.5-4.5S14.485 3 12 3 7.5 5.015 7.5 7.5 9.515 12 12 12zm0 1.5c-3.315 0-6 2.685-6 6H18c0-3.315-2.685-6-6-6z"
210+ stroke-linejoin="round" stroke-linecap="round"></path>
211+ </svg>
212+ <input type="text" id="username" name="username" placeholder="username" required>
213+ </div>
214+
215+ <div class="group">
216+ <svg stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
217+ class="icon">
218+ <path
219+ d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
220+ stroke-linejoin="round" stroke-linecap="round"></path>
221+ </svg>
222+ <input type="password" id="password" name="password" placeholder="password" required>
223+ </div>
224+
225+ <button type="submit" class="boton-elegante">Login</button>
226+ </form>
227+ <p class="text-center mt-3">No account?<a href="register.php">Register</a>.</p>
228+ </div>
229+ </body>
230+
231+ </html>
0 commit comments