From 7fc78b4e674acf6aa380f939dd652aff015df6af Mon Sep 17 00:00:00 2001
From: unknown <maxsj462@student.liu.se>
Date: Thu, 23 May 2024 11:46:46 +0200
Subject: [PATCH] registerPage start made
---
theme-costume-app/src/App.js | 3 +-
theme-costume-app/src/Register.css | 112 ++++++++++++++++++
theme-costume-app/src/Register.js | 85 +++++++++++++
.../src/components/ResponsiveAppBar.js | 1 +
4 files changed, 200 insertions(+), 1 deletion(-)
create mode 100644 theme-costume-app/src/Register.css
create mode 100644 theme-costume-app/src/Register.js
diff --git a/theme-costume-app/src/App.js b/theme-costume-app/src/App.js
index 91b0ba7..7d88c4a 100644
--- a/theme-costume-app/src/App.js
+++ b/theme-costume-app/src/App.js
@@ -6,6 +6,7 @@ import Profile from './Profile';
import Charts from './Charts';
import ResponsiveAppBar from './components/ResponsiveAppBar';
import CategoriesPage from './CategoriesPage';
+import RegisterPage from './Register';
function App() {
@@ -35,7 +36,7 @@ function App() {
<Route path="/news" element={<About />} />
<Route path="/Topplistan" element={<Charts />} />
<Route path="/Categories" element={<CategoriesPage />} />
-
+ <Route path="/register" element={<RegisterPage />} />
</Routes>
</div>
</Router>
diff --git a/theme-costume-app/src/Register.css b/theme-costume-app/src/Register.css
new file mode 100644
index 0000000..36292c8
--- /dev/null
+++ b/theme-costume-app/src/Register.css
@@ -0,0 +1,112 @@
+/* src/Register.css */
+.register-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ background-color: #f0f2f5;
+ }
+
+ .register-form {
+ background: #fff;
+ padding: 2rem;
+ border-radius: 8px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ width: 100%;
+ max-width: 400px;
+ text-align: center;
+ }
+
+ .register-form h2 {
+ margin-bottom: 1rem;
+ font-size: 1.5rem;
+ color: #333;
+ }
+
+ .form-group {
+ margin-bottom: 1rem;
+ text-align: left;
+ }
+
+ .form-group label {
+ display: block;
+ margin-bottom: 0.5rem;
+ color: #555;
+ }
+
+ .form-group input {
+ width: 100%;
+ padding: 0.5rem;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ font-size: 1rem;
+ }
+
+ .btn {
+ display: inline-block;
+ width: 100%;
+ padding: 0.75rem;
+ background-color: #007bff;
+ color: #fff;
+ border: none;
+ border-radius: 4px;
+ font-size: 1rem;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+ }
+
+ .btn:hover {
+ background-color: #0056b3;
+ }
+
+
+ .puff-in-center {
+ -webkit-animation: puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
+ animation: puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
+}
+
+/* ----------------------------------------------
+ * Generated by Animista on 2024-5-22 16:17:35
+ * Licensed under FreeBSD License.
+ * See http://animista.net/license for more info.
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+/**
+ * ----------------------------------------
+ * animation puff-in-center
+ * ----------------------------------------
+ */
+ @-webkit-keyframes puff-in-center {
+ 0% {
+ -webkit-transform: scale(2);
+ transform: scale(2);
+ -webkit-filter: blur(4px);
+ filter: blur(4px);
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ -webkit-filter: blur(0px);
+ filter: blur(0px);
+ opacity: 1;
+ }
+ }
+ @keyframes puff-in-center {
+ 0% {
+ -webkit-transform: scale(2);
+ transform: scale(2);
+ -webkit-filter: blur(4px);
+ filter: blur(4px);
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ -webkit-filter: blur(0px);
+ filter: blur(0px);
+ opacity: 1;
+ }
+ }
+
\ No newline at end of file
diff --git a/theme-costume-app/src/Register.js b/theme-costume-app/src/Register.js
new file mode 100644
index 0000000..4d74e3b
--- /dev/null
+++ b/theme-costume-app/src/Register.js
@@ -0,0 +1,85 @@
+// src/Register.js
+import React, { useState, useEffect } from 'react';
+import './Register.css';
+
+const Register = () => {
+ const [form, setForm] = useState({
+ username: '',
+ email: '',
+ password: '',
+ confirmPassword: ''
+ });
+
+ const handleChange = (e) => {
+ setForm({
+ ...form,
+ [e.target.name]: e.target.value
+ });
+ };
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ // Add your form submission logic here
+ console.log(form);
+ };
+
+ useEffect(() => {
+ const formContainer = document.querySelector('.register-form');
+ formContainer.classList.add('puff-in-center');
+ }, []); // Empty dependency array ensures that the effect runs only once after the component mounts
+
+ return (
+ <div className="register-container">
+ <form className="register-form" onSubmit={handleSubmit}>
+ <h2>Register</h2>
+ <div className="form-group">
+ <label htmlFor="username">Username</label>
+ <input
+ type="text"
+ id="username"
+ name="username"
+ value={form.username}
+ onChange={handleChange}
+ required
+ />
+ </div>
+ <div className="form-group">
+ <label htmlFor="email">Email</label>
+ <input
+ type="email"
+ id="email"
+ name="email"
+ value={form.email}
+ onChange={handleChange}
+ required
+ />
+ </div>
+ <div className="form-group">
+ <label htmlFor="password">Password</label>
+ <input
+ type="password"
+ id="password"
+ name="password"
+ value={form.password}
+ onChange={handleChange}
+ required
+ />
+ </div>
+ <div className="form-group">
+ <label htmlFor="confirmPassword">Confirm Password</label>
+ <input
+ type="password"
+ id="confirmPassword"
+ name="confirmPassword"
+ value={form.confirmPassword}
+ onChange={handleChange}
+ required
+ />
+ </div>
+ <button type="submit" className="btn">Register</button>
+ </form>
+ </div>
+ );
+};
+
+export default Register;
diff --git a/theme-costume-app/src/components/ResponsiveAppBar.js b/theme-costume-app/src/components/ResponsiveAppBar.js
index ce42578..858fb3e 100644
--- a/theme-costume-app/src/components/ResponsiveAppBar.js
+++ b/theme-costume-app/src/components/ResponsiveAppBar.js
@@ -25,6 +25,7 @@ const settings = [
{title: 'Profile', link: '/profile'},
{title: 'Dashboard', link: '/dashboard'},
{title: 'Logout', link: '/logout'},
+ {title: 'Register', link: '/register'},
];
function ResponsiveAppBar() {
--
GitLab