react_on_rails 5.1.1 → 5.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: e3efe27cbce192ca2a3e8ee6e91255f47e68038c
-  data.tar.gz: bc035548f573a9060627f0f15b285016e963a0e2
+  metadata.gz: c1fb981f3321f2cf6d28a3a3c1550bf60db230df
+  data.tar.gz: fdde71cf3cd95b818f030002e213dcc48885cb86
 SHA512:
-  metadata.gz: 8c2fa2400b5bc970578a1612435391d5423a005ce5ba971b767d7aaf9166b70f5ceef26cc47094da4a8343b3cc52e0833b64d6742ddd79bf375a951aeab558ff
-  data.tar.gz: a47fe80f1634269849eea0cdcbb694a775fc3f17e0420622ecdcb6d007915e9ee840729eb06aa3f65eb27efccf6f981be0af908d6345be5e34eb7e8e985989a5
+  metadata.gz: 12dcf6e3bb24210b14cd40ca74643c548d88b592291465bdb427d1eb26b9028ff7eab7e0afa1c95f1f3becd2d175117f83a1d9a0f290337804cf74a7838cc7a0
+  data.tar.gz: 946fe32089268078bb1c7ce4bc1ed6e785572ee2d75f88239d2d586c70e21eab5b7afeb35608dc2a188cf14f06f7d85f4a6136677f9c62c43916e2402ffdd2b1

data/CHANGELOG.md

@@ -4,9 +4,20 @@ All notable changes to this project will be documented in this file. Items under
 Contributors: please follow the recommendations outlined at [keepachangelog.com](http://keepachangelog.com/). Please use the existing headings and styling as a guide, and add a link for the version diff at the bottom of the file. Also, please update the `Unreleased` link to compare to the latest release version.
 ## [Unreleased]
 
+## [5.2.0] - 2016-04-08
+##### Added
+- Support for React 15.0 to react_on_rails. See [#379](https://github.com/shakacode/react_on_rails/pull/379) by [brucek](https://github.com/brucek).
+
+##### Removed
+- Generator removals to simplify installer. See [#363](https://github.com/shakacode/react_on_rails/pull/363) by [jbhatab](https://github.com/jbhatab).
+  - Removed options for heroku, boostrap, and the linters from generator.
+  - Removed install for the Webpack Dev Server, as we can now do hot reloading with Rails, so the complexity of this feature is not justified. Nevertheless, the setup of React on Rails still supports this setup, just not with the generator.
+  - Documentation added for removed installer options.
+
 ## [5.1.1] - 2016-04-04
 ##### Fixed
 - [Security] Address failure to sanitize console messages when server rendering and displaying in the browser console. See [#366](https://github.com/shakacode/react_on_rails/pull/366) and [#370](https://github.com/shakacode/react_on_rails/pull/370) by [justin808](https://github.com/justin808)
+
 ##### Added
 - railsContext includes the port number and a boolean if the code is being run on the server or client. 
 
@@ -268,8 +279,9 @@ Best done with Object destructing:
 
 ##### Fixed
 - Fix several generator related issues.
-[Unreleased]: https://github.com/shakacode/react_on_rails/compare/5.1.1...master
-[5.1.1]: https://github.com/shakacode/react_on_rails/compare/5.0.0...5.1.1
+[Unreleased]: https://github.com/shakacode/react_on_rails/compare/5.2.0...master
+[5.2.0]: https://github.com/shakacode/react_on_rails/compare/5.1.1...5.2.0
+[5.1.1]: https://github.com/shakacode/react_on_rails/compare/5.1.0...5.1.1
 [5.1.0]: https://github.com/shakacode/react_on_rails/compare/5.0.0...5.1.0
 [5.0.0]: https://github.com/shakacode/react_on_rails/compare/4.0.3...5.0.0
 [4.0.3]: https://github.com/shakacode/react_on_rails/compare/4.0.2...4.0.3

data/README.md

@@ -1,7 +1,7 @@
 [![Build Status](https://travis-ci.org/shakacode/react_on_rails.svg?branch=master)](https://travis-ci.org/shakacode/react_on_rails)  [![Dependency Status](https://gemnasium.com/shakacode/react_on_rails.svg)](https://gemnasium.com/shakacode/react_on_rails) [![Gem Version](https://badge.fury.io/rb/react_on_rails.svg)](https://badge.fury.io/rb/react_on_rails) [![npm version](https://badge.fury.io/js/react-on-rails.svg)](https://badge.fury.io/js/react-on-rails) [![Code Climate](https://codeclimate.com/github/shakacode/react_on_rails/badges/gpa.svg)](https://codeclimate.com/github/shakacode/react_on_rails) [![Coverage Status](https://coveralls.io/repos/shakacode/react_on_rails/badge.svg?branch=master&service=github)](https://coveralls.io/github/shakacode/react_on_rails?branch=master)
-
+ 
 # NEWS
-* 5.1.1 has shipped! Please see the [CHANGELOG.md](./CHANGELOG.md) for details on the latest release and any breaking changes.
+* 2016-04-08: 5.2.0 Released! Support for React 15.0 and upates to the Generator. See the [CHANGELOG.md](./CHANGELOG.md) for details.
 * [New slides on React on Rails](http://www.slideshare.net/justingordon/react-on-rails-v4032).
 * 2016-02-28: We added a [Projects page](./PROJECTS.md) and a [Kudos page](./KUDOS.md). Please edit the page your project or [email us](mailto:contact@shakacode.com) and we'll add you. We also love stars as it helps us attract new users and contributors.
 * *See [NEWS.md](NEWS.md) for the full news history.*
@@ -74,23 +74,11 @@ Please see [Getting Started](#getting-started) for how to set up your Rails proj
     - [Globally Exposing Your React Components](#globally-exposing-your-react-components)
     - [ReactOnRails View Helpers API](#reactonrails-view-helpers-api)
     - [ReactOnRails JavaScript API](#reactonrails-javascript-api)
-    - [Hot Reloading View Helpers](#hot-reloading-view-helpers)
     - [React-Router](#react-router)
 + [Generator](#generator)
     - [Understanding the Organization of the Generated Client Code](#understanding-the-organization-of-the-generated-client-code)
     - [Redux](#redux)
       - [Multiple React Components on a Page with One Store](#multiple-react-components-on-a-page-with-one-store)
-    - [Using Images and Fonts](#using-images-and-fonts)
-    - [Bootstrap Integration](#bootstrap-integration)
-        + [Bootstrap via Rails Server](#bootstrap-via-rails-server)
-        + [Bootstrap via Webpack HMR Dev Server](#bootstrap-via-webpack-hmr-dev-server)
-        + [Keeping Custom Bootstrap Configurations Synced](#keeping-custom-bootstrap-configurations-synced)
-        + [Skip Bootstrap Integration](#skip-bootstrap-integration)
-    - [Linters](#linters)
-        + [JavaScript Linters](#javascript-linters)
-        + [Ruby Linters](#ruby-linters)
-        + [Running the Linters](#running-the-linters)
-+ [Developing with the Webpack Dev Server](#developing-with-the-webpack-dev-server)
 + [Adding Additional Routes for the Dev Server](#adding-additional-routes-for-the-dev-server)
 + [Migrate From react-rails](#migrate-from-react-rails)
 + [Additional Reading](#additional-reading)
@@ -105,7 +93,6 @@ Please see [Getting Started](#getting-started) for how to set up your Rails proj
 Like the [react-rails](https://github.com/reactjs/react-rails) gem, React on Rails is capable of server-side rendering with fragment caching and is compatible with [turbolinks](https://github.com/turbolinks/turbolinks). Unlike react-rails, which depends heavily on sprockets and jquery-ujs, React on Rails uses [webpack](http://webpack.github.io/) and does not depend on jQuery. While the initial setup is slightly more involved, it allows for advanced functionality such as:
 
 + [Redux](https://github.com/reactjs/redux)
-+ [Webpack dev server](https://webpack.github.io/docs/webpack-dev-server.html) with [hot module replacement](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html)
 + [Webpack optimization functionality](https://github.com/webpack/docs/wiki/optimization)
 + [React Router](https://github.com/reactjs/react-router)
 
@@ -113,10 +100,7 @@ See the [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpac
 
 ## Why Webpack?
 
-Webpack is used for 2 purposes:
-
-1. Generate several JavaScript "bundles" for inclusion in `application.js`.
-2. Providing the Webpack Dev Server for quick prototyping of components without needing to refresh your browser to see updates.
+Webpack is used to generate several JavaScript "bundles" for inclusion in `application.js` or directly in your layout.
 
 This usage of webpack fits neatly and simply into the existing Rails sprockets system and you can include React components on a Rails view with a simple helper.
 
@@ -468,10 +452,6 @@ Usage:
 Options:
   -R, [--redux], [--no-redux]                          # Install Redux gems and Redux version of Hello World Example
   -S, [--server-rendering], [--no-server-rendering]    # Add necessary files and configurations for server-side rendering
-  -j, [--skip-js-linters], [--no-skip-js-linters]      # Skip installing JavaScript linting files
-  -L, [--ruby-linters], [--no-ruby-linters]            # Install ruby linting files, tasks, and configs
-  -H, [--heroku-deployment], [--no-heroku-deployment]  # Install files necessary for deploying to Heroku
-  -b, [--skip-bootstrap], [--no-skip-bootstrap]        # Skip installing files for bootstrap support
 
 Runtime options:
   -f, [--force]                    # Overwrite files that already exist
@@ -506,60 +486,6 @@ The generator has amended the folders created in `client/assets/` to Rails's ass
 
 Alternatively, if you have many existing assets and don't wish to move them, you could consider creating symlinks from client/assets that point to your Rails assets folders inside of `app/assets/`. The assets there will then be visible to both Rails and webpack.
 
-### Bootstrap Integration
-React on Rails ships with Twitter Bootstrap already integrated into the build. Note that the generator removes `require_tree` in both the application.js and application.css.scss files. This is to ensure the correct load order for the bootstrap integration, and is usually a good idea in general. You will therefore need to explicitly require your files.
-
-How the Bootstrap library is loaded depends upon whether one is using the Rails server or the HMR development server.
-
-#### Bootstrap via Rails Server
-In the former case, the Rails server loads `bootstrap-sprockets`, provided by the `bootstrap-sass` ruby gem (added automatically to your Gemfile by the generator) via the `app/assets/stylesheets/_bootstrap-custom.scss` partial.
-
-This allows for using Bootstrap in your regular Rails stylesheets. If you wish to customize any of the Bootstrap variables, you can do so via the `client/assets/stylesheets/_pre-bootstrap.scss` partial.
-
-#### Bootstrap via Webpack HMR Dev Server
-When using the webpack dev server, which does not go through Rails, bootstrap is loaded via the [bootstrap-sass-loader](https://github.com/shakacode/bootstrap-sass-loader) which uses the `client/bootstrap-sass-config.js` file.
-
-#### Keeping Custom Bootstrap Configurations Synced
-Because the webpack dev server and Rails each load Bootstrap via a different file (explained in the two sections immediately above), any changes to the way components are loaded in one file must also be made to the other file in order to keep styling consistent between the two. For example, if an import is excluded in `_bootstrap-custom.scss`, the same import should be excluded in `bootstrap-sass-config.js` so that styling in the Rails server and the webpack dev server will be the same.
-
-#### Skip Bootstrap Integration
-Bootstrap integration is enabled by default, but can be disabled by passing the `--skip-bootstrap` flag (alias `-b`). When you don't need Bootstrap in your existing project, just skip it as needed.
-
-### Linters
-The React on Rails generator can add linters and their recommended accompanying configurations to your project. There are two classes of linters: ruby linters and JavaScript linters.
-
-##### JavaScript Linters
-JavaScript linters are **enabled by default**, but can be disabled by passing the `--skip-js-linters` flag (alias `j`) , and those that run in Node have been added to `client/package.json` under `devDependencies`.
-
-##### Ruby Linters
-Ruby linters are **disabled by default**, but can be enabled by passing the `--ruby-linters` flag when generating. These linters have been added to your Gemfile in addition to the appropriate Rake tasks.
-
-We really love using all the linters! Give them a try.
-
-#### Running the Linters
-To run the linters (runs all linters you have installed, even if you installed both Ruby and Node):
-
-```bash
-rake lint
-```
-
-Run this command to see all the linters available
-
-```bash
-rake -T lint
-```
-
-**Here's the list:**
-```bash
-rake lint               # Runs all linters
-rake lint:eslint        # eslint
-rake lint:js            # JS Linting
-rake lint:jscs          # jscs
-rake lint:rubocop[fix]  # Run Rubocop lint in shell
-rake lint:ruby          # Run ruby-lint as shell
-rake lint:scss          # See docs for task 'scss_lint'
-```
-
 ## Multiple React Components on a Page with One Store
 You may wish to have 2 React components share the same the Redux store. For example, if your navbar is a React component, you may want it to use the same store as your component in the main area of the page. You may even want multiple React components in the main area, which allows for greater modularity. In addition, you may want this to work with Turbolinks to minimize reloading the JavaScript. A good example of this would be something like an a notifications counter in a header. As each notifications is read in the body of the page, you would like to update the header. If both the header and body share the same Redux store, then this is trivial. Otherwise, we have to rely on other solutions, such as the header polling the server to see how many unread notifications exist.
 

data/docs/additional-reading/heroku-deployment.md

@@ -65,5 +65,35 @@ bin/rake db:migrate
 bin/rake db:setup
 ```
 
+3. Create a rake file to add webpack compilation to asset precompilation. You may already have this file if you used the React on Rails generator.
+
+```ruby
+# lib/tasks/assets.rake
+# The webpack task must run before assets:environment task.
+# Otherwise Sprockets cannot find the files that webpack produces.
+# This is the secret sauce for how a Heroku deployment knows to create the webpack generated JavaScript files.
+Rake::Task["assets:precompile"]
+  .clear_prerequisites
+  .enhance(["assets:compile_environment"])
+
+namespace :assets do
+  # In this task, set prerequisites for the assets:precompile task
+  task compile_environment: :webpack do
+    Rake::Task["assets:environment"].invoke
+  end
+
+  desc "Compile assets with webpack"
+  task :webpack do
+    sh "cd client && npm run build:client"
+    # If you are doing server rendering
+    # sh "cd client && npm run build:server"
+  end
+
+  task :clobber do
+    rm_r Dir.glob(Rails.root.join("app/assets/webpack/*"))
+  end
+end
+```
+
 
 

data/docs/contributor-info/contributing.md

@@ -1,12 +1,14 @@
 # Tips for Contributors
-*See [Releasing](../releasing.md) for instructions on releasing.*
+*See [Releasing](./releasing.md) for instructions on releasing.*
 
-* After Syncing, to prepare all examples and run all tests
+## To run tests:
+* After updating code via git, to prepare all examples and run all tests:
 
 ```
-bundle && npm i && rake examples:prepare_all && rake symlink_node_package && rake
+bundle && npm i && rake examples:prepare_all && rake node_package && rake
 ```
 
+See Dev Initial Setup, below for, well... initial setup.
 
 # IDE/IDE SETUP
 It's critical to configure your IDE/editor to ignore certain directories. Otherwise your IDE might slow to a crawl!
@@ -19,6 +21,7 @@ It's critical to configure your IDE/editor to ignore certain directories. Otherw
 * /spec/dummy/app/assets/webpack
 * /spec/dummy/log
 * /spec/dummy/node_modules
+* /spec/dummy/client/node_modules
 * /spec/dummy/tmp
 * /spec/react_on_rails/dummy-for-generators
 
@@ -81,17 +84,19 @@ This is the error:
 ### Prereqs
 After checking out the repo, making sure you have rvm and nvm setup (setup ruby and node), cd to `spec/dummy` and run `bin/setup` to install ruby dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
 
-Additionally, our RSpec tests use the poltergeist web driver. You will need to install the poltergeist node module:
+Additionally, our RSpec tests use the poltergeist web driver. You will need to install the phantomjs node module:
 
 ```sh
-npm install -g poltergeist
+npm install -g phantomjs
 ```
 
+Note this *must* be installed globally for the dummy test project rspec runner to see it properly.
+
 ### NPM link
 Because the example and dummy apps rely on the react-on-rails node package, they should link directly to your local version to pick up any changes you may have made to that package. To achieve this, switch to the app's root directory and run:
 
 ```sh
-npm run symlink_node_package
+npm run node_package
 ```
 
 From now on, the example and dummy apps will use your local node_package folder as the react-on-rails node package. This will also be done automatically for you via the `rake examples:prepare_all` rake task.

data/docs/contributor-info/releasing.md

@@ -3,7 +3,7 @@
 We're now releasing this as a combined ruby gem plus npm package. We will keep the version numbers in sync.
 
 ## Testing the Gem before Release from a Rails App
-See [Contributing](../contributing.md)
+See [Contributing](./contributing.md)
 
 ## Releasing a new gem version
 Run `rake -D release` to see instructions on how to release via the rake task.

data/docs/tutorial.md

@@ -1,4 +1,6 @@
-# Tutorial for React on Rails
+# Tutorial for React on Rails (THIS ONLY WORKS UP TO VERSION 5.1.1)
+
+*Version 5.2 and greater have removed the non-essential options. See the [changelog](../CHANGELOG.md) for details on what was removed.*
 
 This tutorial setups up a new Rails app with **React on Rails**, demonstrating Rails + React + Redux + Server Rendering.
 

data/lib/generators/react_on_rails/base_generator.rb

@@ -21,37 +21,11 @@ module ReactOnRails
                    default: false,
                    desc: "Configure for server-side rendering of webpack JavaScript",
                    aliases: "-S"
-      # --skip-js-linters
-      class_option :skip_js_linters,
-                   type: :boolean,
-                   default: false,
-                   desc: "Skip installing JavaScript linting files",
-                   aliases: "-j"
-      # --ruby-linters
-      class_option :ruby_linters,
-                   type: :boolean,
-                   default: false,
-                   desc: "Install ruby linting files, tasks, and configs",
-                   aliases: "-L"
-
-      # --skip-bootstrap
-      class_option :skip_bootstrap,
-                   type: :boolean,
-                   default: false,
-                   desc: "Skip integrating Bootstrap and don't initialize files and regarding configs",
-                   aliases: "-b"
 
       def add_hello_world_route
         route "get 'hello_world', to: 'hello_world#index'"
       end
 
-      def create_client_assets_directories
-        empty_directory("client/assets")
-        empty_directory("client/assets/stylesheets")
-        empty_directory_with_keep_file("client/assets/fonts")
-        empty_directory_with_keep_file("client/assets/images")
-      end
-
       def update_git_ignore
         data = <<-DATA.strip_heredoc
           # React on Rails
@@ -112,8 +86,6 @@ module ReactOnRails
         base_path = "base/base/"
         base_files = %w(app/controllers/hello_world_controller.rb
                         client/.babelrc
-                        client/index.jade
-                        client/server.js
                         client/webpack.client.base.config.js
                         client/webpack.client.rails.config.js
                         REACT_ON_RAILS.md
@@ -125,11 +97,9 @@ module ReactOnRails
         base_path = "base/base/"
         %w(config/initializers/react_on_rails.rb
            Procfile.dev
-           Procfile.dev-hot
            app/views/hello_world/index.html.erb
            package.json
            client/app/bundles/HelloWorld/components/HelloWorldWidget.jsx
-           client/webpack.client.hot.config.js
            client/package.json).each { |file| template(base_path + file + ".tt", file) }
       end
 
@@ -153,11 +123,6 @@ module ReactOnRails
         end
       end
 
-      def template_linter_files_if_appropriate
-        return if !options.ruby_linters? && options.skip_js_linters?
-        template("base/base/lib/tasks/linters.rake.tt", "lib/tasks/linters.rake")
-      end
-
       def template_assets_rake_file
         template("base/base/lib/tasks/assets.rake.tt", "lib/tasks/assets.rake")
       end
@@ -167,9 +132,6 @@ module ReactOnRails
 # If you do not want to move existing images and fonts from your Rails app
 # you could also consider creating symlinks there that point to the original
 # rails directories. In that case, you would not add these paths here.
-Rails.application.config.assets.paths << Rails.root.join("client", "assets", "stylesheets")
-Rails.application.config.assets.paths << Rails.root.join("client", "assets", "images")
-Rails.application.config.assets.paths << Rails.root.join("client", "assets", "fonts")
 Rails.application.config.assets.precompile += %w( server-bundle.js )
 
 # Add folder with webpack generated assets to assets.paths
@@ -211,19 +173,6 @@ Rails.application.config.assets.paths << Rails.root.join("app", "assets", "webpa
           ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
       STR
 
-      # rename to application.scss from application.css or application.css.scss
-      def force_application_scss_naming_if_necessary
-        base_path = "app/assets/stylesheets/"
-        application_css = "#{base_path}application.css"
-        application_css_scss = "#{base_path}application.css.scss"
-
-        bad_name = dest_file_exists?(application_css) || dest_file_exists?(application_css_scss)
-        return unless bad_name
-
-        new_name = File.join(destination_root, "#{base_path}application.scss")
-        File.rename(bad_name, new_name)
-      end
-
       def print_helpful_message
         message = <<-MSG.strip_heredoc
 
@@ -238,12 +187,6 @@ Rails.application.config.assets.paths << Rails.root.join("app", "assets", "webpa
                 npm run rails-server
 
             - Visit http://localhost:3000/hello_world and see your React On Rails app running!
-
-            - Run the npm express-server command to load the node server with hot reloading support.
-
-                npm run express-server
-
-            - Visit http://localhost:4000 and see your React On Rails app running using the Webpack Dev server.
         MSG
         GeneratorMessages.add_info(message)
       end

data/lib/generators/react_on_rails/install_generator.rb

@@ -22,30 +22,6 @@ module ReactOnRails
                    default: false,
                    desc: "Add necessary files and configurations for server-side rendering. Default: false",
                    aliases: "-S"
-      # --skip-js-linters
-      class_option :skip_js_linters,
-                   type: :boolean,
-                   default: false,
-                   desc: "Skip installing JavaScript linting files. Default: false",
-                   aliases: "-j"
-      # --ruby-linters
-      class_option :ruby_linters,
-                   type: :boolean,
-                   default: false,
-                   desc: "Install ruby linting files, tasks, and configs. Default: false",
-                   aliases: "-L"
-      # --ruby-linters
-      class_option :heroku_deployment,
-                   type: :boolean,
-                   default: false,
-                   desc: "Install files necessary for deploying to Heroku. Default: false",
-                   aliases: "-H"
-      # --skip-bootstrap
-      class_option :skip_bootstrap,
-                   type: :boolean,
-                   default: false,
-                   desc: "Skip integrating Bootstrap and don't initialize files and regarding configs. Default: false",
-                   aliases: "-b"
 
       # --ignore-warnings
       class_option :ignore_warnings,
@@ -76,10 +52,6 @@ module ReactOnRails
         invoke "react_on_rails:base"
         invoke "react_on_rails:react_no_redux" unless options.redux?
         invoke "react_on_rails:react_with_redux" if options.redux?
-        invoke "react_on_rails:js_linters" unless options.skip_js_linters?
-        invoke "react_on_rails:ruby_linters" if options.ruby_linters?
-        invoke "react_on_rails:heroku_deployment" if options.heroku_deployment?
-        invoke "react_on_rails:bootstrap" unless options.skip_bootstrap?
       end
 
       # NOTE: other requirements for existing files such as .gitignore or application.

data/lib/generators/react_on_rails/templates/base/base/client/app/bundles/HelloWorld/components/HelloWorldWidget.jsx.tt

@@ -3,9 +3,6 @@
 
 import React, { PropTypes } from 'react';
 import _ from 'lodash';
-<%- unless options.skip_bootstrap? -%>
-import { Input } from 'react-bootstrap';
-<%- end -%>
 
 // Simple example of a React "dumb" component
 export default class HelloWorldWidget extends React.Component {
@@ -40,25 +37,14 @@ export default class HelloWorldWidget extends React.Component {
         </h3>
         <hr />
         <form className="form-horizontal">
-            <%- if options.skip_bootstrap? -%>
-            <label>
-              Say hello to:
-            </label>
-            <input
-              type="text"
-              value={name}
-              onChange={this.handleChange}
-            />
-            <%- else -%>
-            <Input
-              type="text"
-              labelClassName="col-sm-2"
-              wrapperClassName="col-sm-10"
-              label="Say hello to:"
-              value={name}
-              onChange={this.handleChange}
-            />
-            <%- end -%>
+          <label>
+            Say hello to:
+          </label>
+          <input
+            type="text"
+            value={name}
+            onChange={this.handleChange}
+          />
         </form>
       </div>
     );