Initial commit with devise template from https://github.com/lewagon/rails-templates

This commit is contained in:
Beatrice Olivera
2018-08-27 15:37:06 +01:00
commit ebd896cd31
131 changed files with 9104 additions and 0 deletions

View File

@@ -0,0 +1,3 @@
//= link_tree ../images
//= link_directory ../javascripts .js
//= link_directory ../stylesheets .css

0
app/assets/images/.keep Normal file
View File

BIN
app/assets/images/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

View File

@@ -0,0 +1,2 @@
//= require rails-ujs
//= require_tree .

View File

@@ -0,0 +1,13 @@
// Action Cable provides the framework to deal with WebSockets in Rails.
// You can generate new channels where WebSocket features live using the `rails generate channel` command.
//
//= require action_cable
//= require_self
//= require_tree ./channels
(function() {
this.App || (this.App = {});
App.cable = ActionCable.createConsumer();
}).call(this);

View File

View File

@@ -0,0 +1,101 @@
## Setup
Ensure you have the following gems in your Rails `Gemfile`
```ruby
# Gemfile
gem 'bootstrap-sass'
gem 'font-awesome-sass', '~> 5.0.9'
gem 'simple_form'
gem 'autoprefixer-rails'
gem 'jquery-rails' # Add this line if you use Rails 5.1 or higher
```
In your terminal, generate SimpleForm Bootstrap config.
```bash
bundle install
rails generate simple_form:install --bootstrap
```
Then replace Rails' stylesheets by Le Wagon's stylesheets:
```
rm -rf app/assets/stylesheets
curl -L https://github.com/lewagon/stylesheets/archive/master.zip > stylesheets.zip
unzip stylesheets.zip -d app/assets && rm stylesheets.zip && mv app/assets/rails-stylesheets-master app/assets/stylesheets
```
Don't forget the sprockets directives in `assets/javascripts/application.js`
```javascript
// app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require_tree .
```
And the viewport in the layout
```html
<!-- app/views/layouts/application.html.erb -->
<head>
<!-- Add these line for detecting device width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- [...] -->
</head>
```
## Adding new `.scss` files
Look at your main `application.scss` file to see how SCSS files are imported. There should **not** be a `*= require_tree .` line in the file.
```scss
// app/assets/stylesheets/application.scss
// Graphical variables
@import "config/fonts";
@import "config/colors";
@import "config/bootstrap_variables";
// External libraries
@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
// Your CSS partials
@import "layouts/index";
@import "components/index";
@import "pages/index";
```
For every folder (**`components`**, **`layouts`**, **`pages`**), there is one `_index.scss` partial which is responsible for importing all the other partials of its folder.
**Example 1**: Let's say you add a new `_contact.scss` file in **`pages`** then modify `pages/_index.scss` as:
```scss
// pages/_index.scss
@import "home";
@import "contact";
```
**Example 2**: Let's say you add a new `_sidebar.scss` file in **`layouts`** then modify `layouts/_index.scss` as:
```scss
// layouts/_index.scss
@import "sidebar";
```
## Navbar template
Our `layouts/_navbar.scss` code works well with our home-made ERB template which you can find here:
- [version without login](https://github.com/lewagon/awesome-navbars/blob/master/templates/_navbar_wagon_without_login.html.erb).
- [version with login](https://github.com/lewagon/awesome-navbars/blob/master/templates/_navbar_wagon.html.erb).
Don't forget that `*.html.erb` files go in the `app/views` folder, and `*.scss` files go in the `app/assets/stylesheets` folder. Also, our navbar have a link to the `root_path`, so make sure that you have a `root to: "controller#action"` route in your `config/routes.rb` file.

View File

@@ -0,0 +1,15 @@
// Graphical variables
@import "config/fonts";
@import "config/colors";
@import "config/bootstrap_variables";
// External libraries
@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
// Your CSS partials
@import "layouts/index";
@import "components/index";
@import "pages/index";

View File

@@ -0,0 +1,15 @@
/* -------------------------------------
* Your CSS code for flash notices and alerts
* ------------------------------------- */
.alert {
margin: 0;
text-align: center;
color: white;
}
.alert-info {
background: $green;
}
.alert-warning {
background: $red;
}

View File

@@ -0,0 +1,3 @@
// Import your components CSS files here.
@import "alert";
@import "navbar";

View File

@@ -0,0 +1,77 @@
/* Main navbar */
.navbar-wagon {
box-shadow: 0 1px 5px 0 rgba(0,0,0,0.07),0 1px 0 0 rgba(0,0,0,0.03);
background: white;
transition: all 0.3s ease;
height: 70px;
padding: 0px 30px;
display: flex;
align-items: center;
justify-content: space-between;
}
/* Logo */
.navbar-wagon-brand img {
height: 50px;
}
/* User Avatar */
.navbar-wagon .avatar {
height: 35px;
width: 35px;
border-radius: 50%;
}
/* Right section */
.navbar-wagon-right {
display: flex;
align-items: center;
justify-content: space-between;
}
/* Basic navbar item */
.navbar-wagon-item {
cursor: pointer;
padding: 0 20px;
}
/* Navbar link */
.navbar-wagon-link {
color: #616668;
font-size: 14px;
}
.navbar-wagon-link:hover {
color: #da552f;
text-decoration: none;
}
/* Dropdown menu */
.navbar-wagon-dropdown-menu {
margin-top: 15px;
box-shadow: 1px 1px 4px #E6E6E6;
border-color: #E6E6E6;
}
.navbar-wagon-dropdown-menu li > a {
transition: color 0.3s ease;
font-weight: lighter !important;
color: #999999 !important;
font-size: 15px !important;
line-height: 22px !important;
padding: 10px 20px;
}
.navbar-wagon-dropdown-menu li > a:hover {
background: transparent !important;
color: black !important;
}
.navbar-wagon-dropdown-menu:before {
content: ' ';
height: 10px;
width: 10px;
position: absolute;
right: 10px;
top: -6px;
background-color: white;
transform: rotate(45deg);
border-left: 1px solid #E6E6E6;
border-top: 1px solid #E6E6E6;
}

View File

@@ -0,0 +1,53 @@
// This is where you override default Bootstrap variables
// 1. All Bootstrap variables are here => https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss
// 2. These variables are defined with default value (see https://robots.thoughtbot.com/sass-default)
// 3. You can override them below!
// General style
$font-family-sans-serif: $body-font;
$headings-font-family: $headers-font;
$body-bg: $light-gray;
$font-size-base: 18px;
// Colors
$gray-base: $gray;
$brand-primary: $blue;
$brand-success: $green;
$brand-info: $yellow;
$brand-danger: $red;
$brand-warning: $orange;
// Buttons & inputs' radius
$border-radius-base: 2px;
$border-radius-large: 2px;
$border-radius-small: 2px;
// Patch to make simple_form compatible with bootstrap 3
.invalid-feedback {
display: none;
width: 100%;
margin-top: 0.25rem;
font-size: 80%;
color: $red;
}
.was-validated .form-control:invalid,
.form-control.is-invalid,
.was-validated .custom-select:invalid,
.custom-select.is-invalid {
border-color: $red;
}
.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-control:invalid ~ .invalid-tooltip,
.form-control.is-invalid ~ .invalid-feedback,
.form-control.is-invalid ~ .invalid-tooltip,
.was-validated .custom-select:invalid ~ .invalid-feedback,
.was-validated .custom-select:invalid ~ .invalid-tooltip,
.custom-select.is-invalid ~ .invalid-feedback,
.custom-select.is-invalid ~ .invalid-tooltip {
display: block;
}
// Override other variables below!

View File

@@ -0,0 +1,10 @@
// Define variables for your color scheme
// For example:
$red: #EE5F5B;
$blue: #469AE0;
$yellow: #FDB631;
$orange: #E67E22;
$green: #32B796;
$gray: #000000;
$light-gray: #F4F4F4;

View File

@@ -0,0 +1,16 @@
// Import Google fonts
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300,700|Raleway:400,100,300,700,500");
// Define fonts for body and headers
$body-font: "Open Sans", "Helvetica", "sans-serif";
$headers-font: "Raleway", "Helvetica", "sans-serif";
// To use a font file (.woff) uncomment following lines
// @font-face {
// font-family: "Font Name";
// src: font-url('FontFile.eot');
// src: font-url('FontFile.eot?#iefix') format('embedded-opentype'),
// font-url('FontFile.woff') format('woff'),
// font-url('FontFile.ttf') format('truetype')
// }
// $my-font: "Font Name";

View File

@@ -0,0 +1,5 @@
// Import your layouts CSS files here.
// Examples:
// @import "dashboard";
// @import "profile";
// @import "map";

View File

@@ -0,0 +1 @@
// Specific CSS for your home-page

View File

@@ -0,0 +1,2 @@
// Import page-specific CSS files here.
@import "home";

View File

@@ -0,0 +1,4 @@
module ApplicationCable
class Channel < ActionCable::Channel::Base
end
end

View File

@@ -0,0 +1,4 @@
module ApplicationCable
class Connection < ActionCable::Connection::Base
end
end

View File

@@ -0,0 +1,4 @@
class ApplicationController < ActionController::Base
protect_from_forgery with: :exception
before_action :authenticate_user!
end

View File

View File

@@ -0,0 +1,6 @@
class PagesController < ApplicationController
skip_before_action :authenticate_user!, only: [:home]
def home
end
end

View File

@@ -0,0 +1,2 @@
module ApplicationHelper
end

View File

@@ -0,0 +1 @@
import "bootstrap";

View File

@@ -0,0 +1,2 @@
class ApplicationJob < ActiveJob::Base
end

View File

@@ -0,0 +1,4 @@
class ApplicationMailer < ActionMailer::Base
default from: 'from@example.com'
layout 'mailer'
end

View File

@@ -0,0 +1,3 @@
class ApplicationRecord < ActiveRecord::Base
self.abstract_class = true
end

View File

6
app/models/user.rb Normal file
View File

@@ -0,0 +1,6 @@
class User < ApplicationRecord
# Include default devise modules. Others available are:
# :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
devise :database_authenticatable, :registerable,
:recoverable, :rememberable, :validatable
end

View File

@@ -0,0 +1,20 @@
<h2>Resend confirmation instructions</h2>
<%= simple_form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>
<%= f.error_notification %>
<%= f.full_error :confirmation_token %>
<div class="form-inputs">
<%= f.input :email,
required: true,
autofocus: true,
value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email),
input_html: { autocomplete: "email" } %>
</div>
<div class="form-actions">
<%= f.button :submit, "Resend confirmation instructions" %>
</div>
<% end %>
<%= render "devise/shared/links" %>

View File

@@ -0,0 +1,5 @@
<p>Welcome <%= @email %>!</p>
<p>You can confirm your account email through the link below:</p>
<p><%= link_to 'Confirm my account', confirmation_url(@resource, confirmation_token: @token) %></p>

View File

@@ -0,0 +1,7 @@
<p>Hello <%= @email %>!</p>
<% if @resource.try(:unconfirmed_email?) %>
<p>We're contacting you to notify you that your email is being changed to <%= @resource.unconfirmed_email %>.</p>
<% else %>
<p>We're contacting you to notify you that your email has been changed to <%= @resource.email %>.</p>
<% end %>

View File

@@ -0,0 +1,3 @@
<p>Hello <%= @resource.email %>!</p>
<p>We're contacting you to notify you that your password has been changed.</p>

View File

@@ -0,0 +1,8 @@
<p>Hello <%= @resource.email %>!</p>
<p>Someone has requested a link to change your password. You can do this through the link below.</p>
<p><%= link_to 'Change my password', edit_password_url(@resource, reset_password_token: @token) %></p>
<p>If you didn't request this, please ignore this email.</p>
<p>Your password won't change until you access the link above and create a new one.</p>

View File

@@ -0,0 +1,7 @@
<p>Hello <%= @resource.email %>!</p>
<p>Your account has been locked due to an excessive number of unsuccessful sign in attempts.</p>
<p>Click the link below to unlock your account:</p>
<p><%= link_to 'Unlock my account', unlock_url(@resource, unlock_token: @token) %></p>

View File

@@ -0,0 +1,24 @@
<h2>Change your password</h2>
<%= simple_form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| %>
<%= f.error_notification %>
<%= f.input :reset_password_token, as: :hidden %>
<%= f.full_error :reset_password_token %>
<div class="form-inputs">
<%= f.input :password,
label: "New password",
required: true,
autofocus: true,
hint: ("#{@minimum_password_length} characters minimum" if @minimum_password_length),
input_html: { autocomplete: "new-password" } %>
<%= f.input :password_confirmation, label: "Confirm your new password", required: true %>
</div>
<div class="form-actions">
<%= f.button :submit, "Change my password" %>
</div>
<% end %>
<%= render "devise/shared/links" %>

View File

@@ -0,0 +1,18 @@
<h2>Forgot your password?</h2>
<%= simple_form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
<%= f.error_notification %>
<div class="form-inputs">
<%= f.input :email,
required: true,
autofocus: true,
input_html: { autocomplete: "email" } %>
</div>
<div class="form-actions">
<%= f.button :submit, "Send me reset password instructions" %>
</div>
<% end %>
<%= render "devise/shared/links" %>

View File

@@ -0,0 +1,35 @@
<h2>Edit <%= resource_name.to_s.humanize %></h2>
<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
<%= f.error_notification %>
<div class="form-inputs">
<%= f.input :email, required: true, autofocus: true %>
<% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
<p>Currently waiting confirmation for: <%= resource.unconfirmed_email %></p>
<% end %>
<%= f.input :password,
hint: "leave it blank if you don't want to change it",
required: false
input_html: { autocomplete: "new-password" } %>
<%= f.input :password_confirmation,
required: false,
input_html: { autocomplete: "new-password" } %>
<%= f.input :current_password,
hint: "we need your current password to confirm your changes",
required: true,
input_html: { autocomplete: "current-password" } %>
</div>
<div class="form-actions">
<%= f.button :submit, "Update" %>
</div>
<% end %>
<h3>Cancel my account</h3>
<p>Unhappy? <%= link_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete %></p>
<%= link_to "Back", :back %>

View File

@@ -0,0 +1,25 @@
<h2>Sign up</h2>
<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= f.error_notification %>
<div class="form-inputs">
<%= f.input :email,
required: true,
autofocus: true ,
input_html: { autocomplete: "email" }%>
<%= f.input :password,
required: true,
hint: ("#{@minimum_password_length} characters minimum" if @minimum_password_length),
input_html: { autocomplete: "new-password" } %>
<%= f.input :password_confirmation,
required: true,
input_html: { autocomplete: "new-password" } %>
</div>
<div class="form-actions">
<%= f.button :submit, "Sign up" %>
</div>
<% end %>
<%= render "devise/shared/links" %>

View File

@@ -0,0 +1,20 @@
<h2>Log in</h2>
<%= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<div class="form-inputs">
<%= f.input :email,
required: false,
autofocus: true,
input_html: { autocomplete: "email" } %>
<%= f.input :password,
required: false,
input_html: { autocomplete: "current-password" } %>
<%= f.input :remember_me, as: :boolean if devise_mapping.rememberable? %>
</div>
<div class="form-actions">
<%= f.button :submit, "Log in" %>
</div>
<% end %>
<%= render "devise/shared/links" %>

View File

@@ -0,0 +1,25 @@
<%- if controller_name != 'sessions' %>
<%= link_to "Log in", new_session_path(resource_name) %><br />
<% end -%>
<%- if devise_mapping.registerable? && controller_name != 'registrations' %>
<%= link_to "Sign up", new_registration_path(resource_name) %><br />
<% end -%>
<%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
<%= link_to "Forgot your password?", new_password_path(resource_name) %><br />
<% end -%>
<%- if devise_mapping.confirmable? && controller_name != 'confirmations' %>
<%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name) %><br />
<% end -%>
<%- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != 'unlocks' %>
<%= link_to "Didn't receive unlock instructions?", new_unlock_path(resource_name) %><br />
<% end -%>
<%- if devise_mapping.omniauthable? %>
<%- resource_class.omniauth_providers.each do |provider| %>
<%= link_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider) %><br />
<% end -%>
<% end -%>

View File

@@ -0,0 +1,19 @@
<h2>Resend unlock instructions</h2>
<%= simple_form_for(resource, as: resource_name, url: unlock_path(resource_name), html: { method: :post }) do |f| %>
<%= f.error_notification %>
<%= f.full_error :unlock_token %>
<div class="form-inputs">
<%= f.input :email,
required: true,
autofocus: true,
input_html: { autocomplete: "email" } %>
</div>
<div class="form-actions">
<%= f.button :submit, "Resend unlock instructions" %>
</div>
<% end %>
<%= render "devise/shared/links" %>

View File

@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>TODO</title>
<%= csrf_meta_tags %>
<%= action_cable_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%#= stylesheet_pack_tag 'application', media: 'all' %> <!-- Uncomment if you import CSS in app/javascript/packs/application.js -->
</head>
<body>
<%= render 'shared/navbar' %>
<%= render 'shared/flashes' %>
<%= yield %>
<%= javascript_include_tag 'application' %>
<%= javascript_pack_tag 'application' %>
</body>
</html>

View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
/* Email styles need to be inline */
</style>
</head>
<body>
<%= yield %>
</body>
</html>

View File

@@ -0,0 +1 @@
<%= yield %>

View File

@@ -0,0 +1,2 @@
<h1>Pages#home</h1>
<p>Find me in app/views/pages/home.html.erb</p>

View File

@@ -0,0 +1,12 @@
<% if notice %>
<div class="alert alert-info alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<%= notice %>
</div>
<% end %>
<% if alert %>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<%= alert %>
</div>
<% end %>

View File

@@ -0,0 +1,58 @@
<div class="navbar-wagon">
<!-- Logo -->
<%= link_to root_path, class: "navbar-wagon-brand" do %>
<%= image_tag "logo.png", height: 50 %>
<% end %>
<!-- Right Navigation -->
<div class="navbar-wagon-right hidden-xs hidden-sm">
<% if user_signed_in? %>
<!-- Links when logged in -->
<%= link_to "Host", "#", class: "navbar-wagon-item navbar-wagon-link" %>
<%= link_to "Trips", "#", class: "navbar-wagon-item navbar-wagon-link" %>
<%= link_to "Messages", "#", class: "navbar-wagon-item navbar-wagon-link" %>
<!-- Avatar with dropdown menu -->
<div class="navbar-wagon-item">
<div class="dropdown">
<%= image_tag "http://kitt.lewagon.com/placeholder/users/ssaunier", class: "avatar dropdown-toggle", id: "navbar-wagon-menu", "data-toggle" => "dropdown" %>
<ul class="dropdown-menu dropdown-menu-right navbar-wagon-dropdown-menu">
<li>
<%= link_to "#" do %>
<i class="fa fa-user"></i> <%= t(".profile", default: "Profile") %>
<% end %>
</li>
<li>
<%= link_to "#" do %>
<i class="fa fa-cog"></i> <%= t(".settings", default: "Settings") %>
<% end %>
</li>
<li>
<%= link_to destroy_user_session_path, method: :delete do %>
<i class="fa fa-sign-out"></i> <%= t(".sign_out", default: "Log out") %>
<% end %>
</li>
</ul>
</div>
</div>
<% else %>
<!-- Login link (when logged out) -->
<%= link_to t(".sign_in", default: "Login"), new_user_session_path, class: "navbar-wagon-item navbar-wagon-link" %>
<% end %>
</div>
<!-- Dropdown list appearing on mobile only -->
<div class="navbar-wagon-item hidden-md hidden-lg">
<div class="dropdown">
<i class="fa fa-bars dropdown-toggle" data-toggle="dropdown"></i>
<ul class="dropdown-menu dropdown-menu-right navbar-wagon-dropdown-menu">
<li><a href="#">Some mobile link</a></li>
<li><a href="#">Other one</a></li>
<li><a href="#">Other one</a></li>
</ul>
</div>
</div>
</div>