Darkness4869

Register.js

Oct 16th, 2021
1,012
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // Header class
  2. class Header extends React.Component {
  3.     // Render method
  4.     render() {
  5.         return (
  6.             <header>
  7.                 <nav>
  8.                     <div>
  9.                         <a href="../">
  10.                             <img src="../Images/Logo.png" alt="System Logo" />
  11.                         </a>
  12.                     </div>
  13.                     <div>
  14.                         <a href="../AboutUs">About Us</a>
  15.                     </div>
  16.                     <div>
  17.                         <a href="../Service">Services Offered</a>
  18.                     </div>
  19.                     <div>
  20.                         <a href="../Projects">Projects</a>
  21.                     </div>
  22.                     <div>
  23.                         <a href="../Login">Login</a>
  24.                     </div>
  25.                     <div>
  26.                         <a href="./">Register</a>
  27.                     </div>
  28.                 </nav>
  29.             </header>
  30.         );
  31.     }
  32. }
  33. // Main class
  34. class Main extends React.Component {
  35.     // Constructor method
  36.     constructor(props) {
  37.         super(props);
  38.         this.state = {
  39.             username: "",
  40.             mailAddress: "",
  41.             firstName: "",
  42.             lastName: "",
  43.             dateOfBirth: "",
  44.             register: "register",
  45.         };
  46.     }
  47.     // Change handler method
  48.     handleChange(event) {
  49.         const target = event.target;
  50.         const value = target.value;
  51.         const name = target.name;
  52.         this.setState({
  53.             [name]: value,
  54.         });
  55.     }
  56.     // Submit handler method
  57.     handleSubmit(event) {
  58.         // Preventing default submission
  59.         event.preventDefault();
  60.         // Generating a POST request
  61.         fetch("./index.php", {
  62.             method: "POST",
  63.             body: JSON.stringify({
  64.                 username: this.state.username,
  65.                 mailAddress: this.state.mailAddress,
  66.                 firstName: this.state.firstName,
  67.                 lastName: this.state.lastName,
  68.                 dateOfBirth: this.state.dateOfBirth,
  69.                 register: "register",
  70.             }),
  71.             headers: {
  72.                 "Content-Type": "application/json",
  73.             },
  74.         }).then((response) => response.json());
  75.     }
  76.     // Render method
  77.     render() {
  78.         return (
  79.             <main>
  80.                 <form onSubmit={this.handleSubmit.bind(this)}>
  81.                     <div id="label">Registration Form</div>
  82.                     <div id="formContainer">
  83.                         <div id="username">
  84.                             <div id="input">
  85.                                 <div>Username *:</div>
  86.                                 <input
  87.                                     type="text"
  88.                                     name="username"
  89.                                     id="username"
  90.                                     placeholder="Username"
  91.                                     value={this.state.username}
  92.                                     onChange={this.handleChange.bind(this)}
  93.                                     required
  94.                                 />
  95.                             </div>
  96.                             <div id="guidelines">
  97.                                 Please enter a username which is unique!
  98.                             </div>
  99.                             <div id="guidelines">
  100.                                 Ensure that your username is not NSFW!
  101.                             </div>
  102.                         </div>
  103.                         <div id="mailAddress">
  104.                             <div id="input">
  105.                                 <div>Mail Address *:</div>
  106.                                 <input
  107.                                     type="email"
  108.                                     name="mailAddress"
  109.                                     id="mailAddress"
  110.                                     placeholder="Mail Address"
  111.                                     value={this.state.mailAddress}
  112.                                     onChange={this.handleChange.bind(this)}
  113.                                     required
  114.                                 />
  115.                             </div>
  116.                             <div id="guidelines">
  117.                                 The Mail Address is required to send you your
  118.                                 password and to access your account, afterwards.
  119.                             </div>
  120.                         </div>
  121.                         <div id="firstName">
  122.                             <div id="input">
  123.                                 <div>First Name *:</div>
  124.                                 <input
  125.                                     type="text"
  126.                                     name="firstName"
  127.                                     id="firstName"
  128.                                     placeholder="First Name"
  129.                                     value={this.state.firstName}
  130.                                     onChange={this.handleChange.bind(this)}
  131.                                     required
  132.                                 />
  133.                             </div>
  134.                             <div id="guidelines">
  135.                                 Please enter your first name!
  136.                             </div>
  137.                         </div>
  138.                         <div id="lastName">
  139.                             <div id="input">
  140.                                 <div>Last Name *:</div>
  141.                                 <input
  142.                                     type="text"
  143.                                     name="lastName"
  144.                                     id="lastName"
  145.                                     placeholder="Last Name"
  146.                                     value={this.state.lastName}
  147.                                     onChange={this.handleChange.bind(this)}
  148.                                     required
  149.                                 />
  150.                             </div>
  151.                             <div id="guidelines">
  152.                                 Please enter your last name!
  153.                             </div>
  154.                         </div>
  155.                         <div id="dateOfBirth">
  156.                             <div id="input">
  157.                                 <div>Date Of Birth *:</div>
  158.                                 <input
  159.                                     type="date"
  160.                                     name="dateOfBirth"
  161.                                     id="dateOfBirth"
  162.                                     value={this.state.dateOfBirth}
  163.                                     onChange={this.handleChange.bind(this)}
  164.                                     required
  165.                                 />
  166.                             </div>
  167.                             <div id="guidelines">
  168.                                 Please enter your date of birth!
  169.                             </div>
  170.                             <div id="guidelines">
  171.                                 You need to be at least thirteen years old to
  172.                                 register into this system!
  173.                             </div>
  174.                         </div>
  175.                         <div id="registrationButton">
  176.                             <button>Register</button>
  177.                         </div>
  178.                     </div>
  179.                     <ServerRendering />
  180.                 </form>
  181.             </main>
  182.         );
  183.     }
  184. }
  185. // Server Rendering class
  186. class ServerRendering extends React.Component {
  187.     // Render class
  188.     render() {
  189.         return <div id="serverRendering"></div>;
  190.     }
  191. }
  192. // Footer class
  193. class Footer extends React.Component {
  194.     // Render method
  195.     render() {
  196.         return (
  197.             <footer>
  198.                 <h1>Stormy Systems</h1>
  199.             </footer>
  200.         );
  201.     }
  202. }
  203. // Register class
  204. class Register extends React.Component {
  205.     // Render method
  206.     render() {
  207.         return [<Header />, <Main />, <Footer />];
  208.     }
  209. }
  210. // Rendering ./Register
  211. ReactDOM.render(<Register />, document.getElementById("app"));
  212.  
RAW Paste Data