settings and sessions UI
This commit is contained in:
joshua-arts
parent
6c1074443f
commit
79d63e7b70
18
Gemfile.lock
18
Gemfile.lock
|
|
@ -1,6 +1,8 @@
|
||||||
GEM
|
GEM
|
||||||
remote: https://rubygems.org/
|
remote: https://rubygems.org/
|
||||||
specs:
|
specs:
|
||||||
|
action_interceptor (1.1.0)
|
||||||
|
rails (>= 3.1)
|
||||||
actioncable (5.0.7)
|
actioncable (5.0.7)
|
||||||
actionpack (= 5.0.7)
|
actionpack (= 5.0.7)
|
||||||
nio4r (>= 1.2, < 3.0)
|
nio4r (>= 1.2, < 3.0)
|
||||||
|
|
@ -77,6 +79,12 @@ GEM
|
||||||
faraday (0.12.2)
|
faraday (0.12.2)
|
||||||
multipart-post (>= 1.2, < 3)
|
multipart-post (>= 1.2, < 3)
|
||||||
ffi (1.9.23)
|
ffi (1.9.23)
|
||||||
|
fine_print (3.1.0)
|
||||||
|
action_interceptor (>= 1.0)
|
||||||
|
jquery-rails
|
||||||
|
rails (>= 3.1)
|
||||||
|
responders
|
||||||
|
squeel
|
||||||
font-awesome-sass (5.0.13)
|
font-awesome-sass (5.0.13)
|
||||||
sassc (>= 1.11)
|
sassc (>= 1.11)
|
||||||
globalid (0.4.1)
|
globalid (0.4.1)
|
||||||
|
|
@ -133,6 +141,8 @@ GEM
|
||||||
omniauth-twitter (1.4.0)
|
omniauth-twitter (1.4.0)
|
||||||
omniauth-oauth (~> 1.1)
|
omniauth-oauth (~> 1.1)
|
||||||
rack
|
rack
|
||||||
|
polyamorous (1.1.0)
|
||||||
|
activerecord (>= 3.0)
|
||||||
popper_js (1.12.9)
|
popper_js (1.12.9)
|
||||||
puma (3.11.4)
|
puma (3.11.4)
|
||||||
rack (2.0.5)
|
rack (2.0.5)
|
||||||
|
|
@ -169,6 +179,9 @@ GEM
|
||||||
rb-fsevent (0.10.3)
|
rb-fsevent (0.10.3)
|
||||||
rb-inotify (0.9.10)
|
rb-inotify (0.9.10)
|
||||||
ffi (>= 0.5.0, < 2)
|
ffi (>= 0.5.0, < 2)
|
||||||
|
responders (2.4.0)
|
||||||
|
actionpack (>= 4.2.0, < 5.3)
|
||||||
|
railties (>= 4.2.0, < 5.3)
|
||||||
rspec-core (3.7.1)
|
rspec-core (3.7.1)
|
||||||
rspec-support (~> 3.7.0)
|
rspec-support (~> 3.7.0)
|
||||||
rspec-expectations (3.7.0)
|
rspec-expectations (3.7.0)
|
||||||
|
|
@ -214,6 +227,10 @@ GEM
|
||||||
activesupport (>= 4.0)
|
activesupport (>= 4.0)
|
||||||
sprockets (>= 3.0.0)
|
sprockets (>= 3.0.0)
|
||||||
sqlite3 (1.3.13)
|
sqlite3 (1.3.13)
|
||||||
|
squeel (1.2.3)
|
||||||
|
activerecord (>= 3.0)
|
||||||
|
activesupport (>= 3.0)
|
||||||
|
polyamorous (~> 1.1.0)
|
||||||
tabler-rubygem (0.1.2)
|
tabler-rubygem (0.1.2)
|
||||||
autoprefixer-rails (>= 6.0.3)
|
autoprefixer-rails (>= 6.0.3)
|
||||||
thor (0.20.0)
|
thor (0.20.0)
|
||||||
|
|
@ -248,6 +265,7 @@ DEPENDENCIES
|
||||||
dotenv-rails
|
dotenv-rails
|
||||||
factory_bot_rails
|
factory_bot_rails
|
||||||
faker
|
faker
|
||||||
|
fine_print
|
||||||
font-awesome-sass (~> 5.0.13)
|
font-awesome-sass (~> 5.0.13)
|
||||||
jbuilder (~> 2.5)
|
jbuilder (~> 2.5)
|
||||||
jquery-rails
|
jquery-rails
|
||||||
|
|
|
||||||
|
|
@ -41,14 +41,6 @@
|
||||||
$background-color: #D1E2FF;
|
$background-color: #D1E2FF;
|
||||||
$rule-color: lightblue;
|
$rule-color: lightblue;
|
||||||
|
|
||||||
.header {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
background-color: $background-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-container {
|
.video-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -77,8 +69,23 @@ iframe{
|
||||||
html, body {
|
html, body {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: linear-gradient(180deg, $background-color 50%, white 50%);
|
//background: linear-gradient(180deg, $background-color 50%, white 50%);
|
||||||
background-repeat: no-repeat;
|
//background-repeat: no-repeat;
|
||||||
|
background-color: $background-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
min-height:100%;
|
||||||
|
position:relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
width: 100%;
|
||||||
|
height: 70px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small-rule {
|
.small-rule {
|
||||||
|
|
@ -88,7 +95,7 @@ html, body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.thumbnail {
|
.thumbnail {
|
||||||
height: 60%;
|
height: 40%;
|
||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -125,19 +132,6 @@ body[data-controller=landing].app-background {
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
|
||||||
padding: 20px 40px;
|
|
||||||
margin-bottom: 160px;
|
|
||||||
.logo {
|
|
||||||
max-width: 150px;
|
|
||||||
max-height: 50px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.center-block {
|
.center-block {
|
||||||
float: none;
|
float: none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
class MainController < ApplicationController
|
class MainController < ApplicationController
|
||||||
|
|
||||||
before_action :redirect_to_room
|
#before_action :redirect_to_room
|
||||||
|
|
||||||
# GET /
|
# GET /
|
||||||
def index
|
def index
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,8 @@ module SessionsHelper
|
||||||
# Logs a user into GreenLight.
|
# Logs a user into GreenLight.
|
||||||
def login(user)
|
def login(user)
|
||||||
session[:user_id] = user.id
|
session[:user_id] = user.id
|
||||||
redirect_to room_path(user.room.uid)
|
redirect_to root_path
|
||||||
|
#redirect_to room_path(user.room.uid)
|
||||||
end
|
end
|
||||||
|
|
||||||
# Logs current user out of GreenLight.
|
# Logs current user out of GreenLight.
|
||||||
|
|
|
||||||
|
|
@ -81,6 +81,10 @@ class User < ApplicationRecord
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
|
def firstname
|
||||||
|
name.split(' ').first
|
||||||
|
end
|
||||||
|
|
||||||
private
|
private
|
||||||
|
|
||||||
# Initializes a room for the user.
|
# Initializes a room for the user.
|
||||||
|
|
|
||||||
|
|
@ -12,24 +12,28 @@
|
||||||
data-resource="<%= params[:resource] %>"
|
data-resource="<%= params[:resource] %>"
|
||||||
data-current-user="<%= current_user.try(:encrypted_id) %>">
|
data-current-user="<%= current_user.try(:encrypted_id) %>">
|
||||||
|
|
||||||
<!-- Messages -->
|
<div class="wrapper">
|
||||||
<div id='alerts'>
|
|
||||||
<div class='flash-alerts'>
|
<!-- Messages -->
|
||||||
<% flash.each do |name, msg| %>
|
<div id='alerts'>
|
||||||
<div class="alert alert-<%= name %> alert-dismissible fade in" role="alert">
|
<div class='flash-alerts'>
|
||||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
<% flash.each do |name, msg| %>
|
||||||
<span aria-hidden="true">×</span>
|
<div class="alert alert-<%= name %> alert-dismissible fade in" role="alert">
|
||||||
</button>
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||||
<span class="alert-message"><%= msg %></span>
|
<span aria-hidden="true">×</span>
|
||||||
</div>
|
</button>
|
||||||
<% end %>
|
<span class="alert-message"><%= msg %></span>
|
||||||
|
</div>
|
||||||
|
<% end %>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<%= render "shared/header" %>
|
||||||
|
|
||||||
|
<%= yield %>
|
||||||
|
|
||||||
|
<%= render "shared/footer" %>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<%= render "shared/header" %>
|
|
||||||
|
|
||||||
<%= yield %>
|
|
||||||
|
|
||||||
<%= render "shared/footer" %>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,21 @@
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1 id="main-text" class="display-3 text-center text-primary">Teach Students Online.</h1>
|
|
||||||
<hr class="small-rule">
|
|
||||||
|
|
||||||
<%= render "shared/start_meeting" %>
|
<% if current_user %>
|
||||||
|
<h1 id="user-text" class="display-3 text-center text-primary"><%= "Welcome, #{current_user.firstname}." %></h1>
|
||||||
|
<%= render "shared/modals/create_room_modal" %>
|
||||||
|
<% else %>
|
||||||
|
<h1 id="main-text" class="display-3 text-center text-primary">Teach Students Online.</h1>
|
||||||
|
<%= render "shared/modals/video_modal" %>
|
||||||
|
<% end %>
|
||||||
|
<hr class="small-rule">
|
||||||
|
|
||||||
|
<!-- <%= render "shared/start_meeting" %> -->
|
||||||
|
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<%= render "shared/features" %>
|
<%= render "shared/features" %>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<%= render "shared/modals/video_modal" %>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
$(window).on('load',function(){
|
$(window).on('load',function(){
|
||||||
$('#welcomeModal').modal('show');
|
$('#welcomeModal').modal('show');
|
||||||
|
|
|
||||||
|
|
@ -1,41 +1,83 @@
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="col-lg-10">
|
|
||||||
<div class="card">
|
<div class="row">
|
||||||
<table class="table card-table table-vcenter">
|
<div class="col-10 offset-1">
|
||||||
<tbody>
|
<p style="font-size: 25px;">Sessions</p>
|
||||||
<% 3.times do %>
|
<!-- <div class="input-icon float-right">
|
||||||
<tr>
|
<input type="text" class="form-control" placeholder="Search for...">
|
||||||
<td>
|
<span class="input-icon-addon">
|
||||||
<!--<i class="fas fa-users fa-2x"></i>-->
|
<i class="fe fe-search"></i>
|
||||||
<img class="thumbnail" src="http://test-install.blindsidenetworks.com/presentation/b622495d927cd99e9898b0601c2b18a5424a0627-1527259102285/presentation/d2d9a672040fbde2a47a10bf6c37b6a4b5ae187f-1527259102298/thumbnails/thumb-1.png">
|
</span>
|
||||||
</td>
|
</div> -->
|
||||||
<td class="text-left">
|
<hr>
|
||||||
<h4>Introduction to Dinosaurs</h4>
|
|
||||||
<p><i>June 21, 2017 (about 3 hours ago)</i></p>
|
|
||||||
</td>
|
|
||||||
<td class="text-center d-none d-md-table-cell text-nowrap">
|
|
||||||
<h6 class="text-uppercase"><strong>Users</strong></h6>
|
|
||||||
<h5>3</h5>
|
|
||||||
</td>
|
|
||||||
<td class="text-center d-none d-md-table-cell text-nowrap">
|
|
||||||
<h6 class="text-uppercase"><strong>Length</strong></h6>
|
|
||||||
<h5>2 hours</h5>
|
|
||||||
</td>
|
|
||||||
<td class="text-center d-none d-md-table-cell text-nowrap">
|
|
||||||
<h6 class="text-uppercase"><strong>Visbility</strong></h6>
|
|
||||||
<h5>Unlisted</h5>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<button type="button" class="btn btn-icon btn-success"><i class="fas fa-video"></i></button>
|
|
||||||
<button type="button" class="btn btn-icon btn-primary"><i class="fas fa-chart-bar"></i></button>
|
|
||||||
<button type="button" class="btn btn-icon btn-warning"><i class="fas fa-podcast"></i></button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<% end %>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="col-10 offset-1">
|
||||||
|
<div class="card">
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table class="table table-hover table-outline table-vcenter text-nowrap card-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Thumbnails</th>
|
||||||
|
<th class="text-left">Length</th>
|
||||||
|
<th class="text-left">Users</th>
|
||||||
|
<th class="text-left">Visibility</th>
|
||||||
|
<th class="text-center"><i class="icon-settings"></i></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<% 3.times do %>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<div>Example Meeting</div>
|
||||||
|
<div class="small text-muted">
|
||||||
|
June 21, 2017 <i>(about 3 hours ago)</i>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<img class="thumbnail px-2" src="http://test-install.blindsidenetworks.com/presentation/b622495d927cd99e9898b0601c2b18a5424a0627-1527259102285/presentation/d2d9a672040fbde2a47a10bf6c37b6a4b5ae187f-1527259102298/thumbnails/thumb-1.png">
|
||||||
|
<img class="thumbnail px-2" src="http://test-install.blindsidenetworks.com/presentation/b622495d927cd99e9898b0601c2b18a5424a0627-1527259102285/presentation/d2d9a672040fbde2a47a10bf6c37b6a4b5ae187f-1527259102298/thumbnails/thumb-1.png">
|
||||||
|
<img class="thumbnail px-2" src="http://test-install.blindsidenetworks.com/presentation/b622495d927cd99e9898b0601c2b18a5424a0627-1527259102285/presentation/d2d9a672040fbde2a47a10bf6c37b6a4b5ae187f-1527259102298/thumbnails/thumb-1.png">
|
||||||
|
</td>
|
||||||
|
<td class="text-left">
|
||||||
|
<div class="small text-muted text-uppercase">
|
||||||
|
Length
|
||||||
|
</div>
|
||||||
|
1 hr
|
||||||
|
</td>
|
||||||
|
<td class="text-left">
|
||||||
|
<div class="small text-muted text-uppercase">
|
||||||
|
Users
|
||||||
|
</div>
|
||||||
|
4
|
||||||
|
</td>
|
||||||
|
<td class="text-left">
|
||||||
|
<div class="small text-muted text-uppercase">
|
||||||
|
Visibility
|
||||||
|
</div>
|
||||||
|
Unlisted
|
||||||
|
</td>
|
||||||
|
<td class="text-center">
|
||||||
|
<div class="item-action dropdown">
|
||||||
|
<a href="javascript:void(0)" data-toggle="dropdown" class="icon"><i class="fe fe-more-vertical"></i></a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-right">
|
||||||
|
<a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-tag"></i> Action </a>
|
||||||
|
<a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-edit-2"></i> Another action </a>
|
||||||
|
<a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-message-square"></i> Something else here</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-link"></i> Separated link</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<% end %>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
Sessions
|
Sessions
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,3 @@
|
||||||
<div class="footer mt-6">
|
<div class="footer">
|
||||||
<h5 class="text-center">Powered by <a target="_blank" href="http://bigbluebutton.org/">BigBlueButton</a>.</h5>
|
<h5 class="text-center">Powered by <a target="_blank" href="http://bigbluebutton.org/">BigBlueButton</a>.</h5>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<div class="header py-4">
|
<div class="header py-4 mb-6">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="d-flex">
|
<div class="d-flex">
|
||||||
<a class="header-brand" href="{{ site.base }}/index.html">
|
<a class="header-brand" href="{{ site.base }}/index.html">
|
||||||
|
|
@ -7,6 +7,11 @@
|
||||||
|
|
||||||
<div class="d-flex order-lg-2 ml-auto">
|
<div class="d-flex order-lg-2 ml-auto">
|
||||||
<% if current_user %>
|
<% if current_user %>
|
||||||
|
<a class="px-3" href="" data-toggle="modal" data-target="#createRoomModal">
|
||||||
|
<i class="fas fa-plus"></i> Create Room
|
||||||
|
</a>
|
||||||
|
<%= render "shared/modals/login_modal" %>
|
||||||
|
<a class="px-3" href="">Sessions</a>
|
||||||
<div class="dropdown">
|
<div class="dropdown">
|
||||||
<a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
|
<a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
|
||||||
<% if current_user.image.nil? %>
|
<% if current_user.image.nil? %>
|
||||||
|
|
@ -20,6 +25,9 @@
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
<%= link_to logout_path do %>
|
||||||
|
<i class="fas fa-sign-out-alt fa-2x px-5"></i>
|
||||||
|
<% end %>
|
||||||
<% else %>
|
<% else %>
|
||||||
<button type="submit" class="btn btn-pill btn-outline-primary ml-auto" data-toggle="modal" data-target="#loginModal">Login</button>
|
<button type="submit" class="btn btn-pill btn-outline-primary ml-auto" data-toggle="modal" data-target="#loginModal">Login</button>
|
||||||
<%= render "shared/modals/login_modal" %>
|
<%= render "shared/modals/login_modal" %>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
<div class="modal fade" id="createRoomModal" tabindex="-1" role="dialog">
|
||||||
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||||
|
<div class="modal-content text-center">
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="card-body p-6">
|
||||||
|
<div class="card-title text-primary">
|
||||||
|
<h3>Create New Room</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="small-rule">
|
||||||
|
<hr>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="input-icon">
|
||||||
|
<span class="input-icon-addon">
|
||||||
|
<i class="fas fa-chalkboard-teacher"></i>
|
||||||
|
</span>
|
||||||
|
<input type="email" class="form-control" placeholder="Enter a room name...">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-footer">
|
||||||
|
<button type="submit" class="btn btn-outline-primary btn-block btn-pill">Create Room</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-footer">
|
||||||
|
<p>You will be free to delete this room at any time.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -1,93 +1,125 @@
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="row">
|
||||||
<div class="selectgroup selectgroup-pills">
|
<div class="col-10 offset-1">
|
||||||
<label class="selectgroup-item">
|
<p style="font-size: 25px;">Settings</p>
|
||||||
<input type="radio" name="icon-input" value="1" class="selectgroup-input" checked="">
|
<hr>
|
||||||
<span class="selectgroup-button selectgroup-button-icon"><i class="fas fa-user"></i> Account</span>
|
|
||||||
</label>
|
|
||||||
<label class="selectgroup-item">
|
|
||||||
<input type="radio" name="icon-input" value="2" class="selectgroup-input">
|
|
||||||
<span class="selectgroup-button selectgroup-button-icon"><i class="fas fa-pencil-alt"></i> Design </span>
|
|
||||||
</label>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="row">
|
||||||
<label class="form-label">Background</label>
|
<div class="col-2 offset-1">
|
||||||
<div class="row gutters-xs">
|
<button id="account" class="setting-btn btn btn-primary btn-sm btn-block m-2">Account</button>
|
||||||
<div class="col-auto">
|
<button id="password" class="setting-btn btn btn-primary btn-sm btn-block m-2">Password</button>
|
||||||
<label class="colorinput">
|
<button id="design" class="setting-btn btn btn-primary btn-sm btn-block m-2">Design</button>
|
||||||
<input name="color" type="radio" value="azure" class="colorinput-input">
|
</div>
|
||||||
<span class="colorinput-color bg-azure"></span>
|
|
||||||
</label>
|
<div class="col-8">
|
||||||
|
<div id="account" class="setting-view card">
|
||||||
|
<div class="card-body p-6">
|
||||||
|
<div class="card-title text-primary">
|
||||||
|
<h4>Update your Account</h4>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-6">
|
||||||
|
<label class="form-label">Fullname</label>
|
||||||
|
<div class="input-icon">
|
||||||
|
<span class="input-icon-addon">
|
||||||
|
<i class="fas fa-user"></i>
|
||||||
|
</span>
|
||||||
|
<input type="text" class="form-control" value="<%= current_user.name %>" placeholder="Fullname">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<label class="form-label">Email</label>
|
||||||
|
<div class="input-icon">
|
||||||
|
<span class="input-icon-addon">
|
||||||
|
<i class="fas fa-at"></i>
|
||||||
|
</span>
|
||||||
|
<input type="email" class="form-control" value="<%= current_user.email %>" placeholder="Email">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<label class="form-label">Account Provider</label>
|
||||||
|
<input type="text" class="form-control" value="<%= current_user.provider.capitalize %>" readonly="">
|
||||||
|
<br>
|
||||||
|
<label class="form-label">Profile Image</label>
|
||||||
|
<span class="avatar avatar-xl" style="background-image: url(<%= current_user.image %>)"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-footer">
|
||||||
|
<a href="#" class="btn btn-primary float-right">Update</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto">
|
|
||||||
<label class="colorinput">
|
<div id="password" class="setting-view card">
|
||||||
<input name="color" type="radio" value="indigo" class="colorinput-input" checked="">
|
<div class="card-body p-6">
|
||||||
<span class="colorinput-color bg-indigo"></span>
|
<div class="card-title text-primary">
|
||||||
</label>
|
<h4>Change your Password</h4>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-9">
|
||||||
|
<label class="form-label">Old Password</label>
|
||||||
|
<input type="password" class="form-control">
|
||||||
|
<br>
|
||||||
|
<label class="form-label">New Password</label>
|
||||||
|
<input type="password" class="form-control">
|
||||||
|
<br>
|
||||||
|
<label class="form-label">New Password Confirmation</label>
|
||||||
|
<input type="password" class="form-control">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-footer">
|
||||||
|
<a href="#" class="btn btn-primary float-right">Update</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto">
|
|
||||||
<label class="colorinput">
|
<div id="design" class="setting-view card">
|
||||||
<input name="color" type="radio" value="purple" class="colorinput-input">
|
<div class="card-body p-6">
|
||||||
<span class="colorinput-color bg-purple"></span>
|
<div class="card-title text-primary">
|
||||||
</label>
|
<h4>Customize Greenlight</h4>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto">
|
<hr>
|
||||||
<label class="colorinput">
|
<div class="form-group">
|
||||||
<input name="color" type="radio" value="pink" class="colorinput-input">
|
<div class="row">
|
||||||
<span class="colorinput-color bg-pink"></span>
|
<div class="col-6">
|
||||||
</label>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto">
|
</div>
|
||||||
<label class="colorinput">
|
</div>
|
||||||
<input name="color" type="radio" value="red" class="colorinput-input">
|
</div>
|
||||||
<span class="colorinput-color bg-red"></span>
|
<div class="card-footer">
|
||||||
</label>
|
<a href="#" class="btn btn-primary float-right">Update</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto">
|
|
||||||
<label class="colorinput">
|
|
||||||
<input name="color" type="radio" value="orange" class="colorinput-input">
|
|
||||||
<span class="colorinput-color bg-orange"></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="col-auto">
|
|
||||||
<label class="colorinput">
|
|
||||||
<input name="color" type="radio" value="yellow" class="colorinput-input">
|
|
||||||
<span class="colorinput-color bg-yellow"></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="col-auto">
|
|
||||||
<label class="colorinput">
|
|
||||||
<input name="color" type="radio" value="lime" class="colorinput-input">
|
|
||||||
<span class="colorinput-color bg-lime"></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="col-auto">
|
|
||||||
<label class="colorinput">
|
|
||||||
<input name="color" type="radio" value="green" class="colorinput-input">
|
|
||||||
<span class="colorinput-color bg-green"></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="col-auto">
|
|
||||||
<label class="colorinput">
|
|
||||||
<input name="color" type="radio" value="teal" class="colorinput-input">
|
|
||||||
<span class="colorinput-color bg-teal"></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="form-label">Name</label>
|
|
||||||
<input type="text" class="form-control" value="<%= current_user.name %>" readonly="">
|
|
||||||
|
|
||||||
<label class="form-label">Email</label>
|
|
||||||
<input type="text" class="form-control" value="<%= current_user.email %>" readonly="">
|
|
||||||
|
|
||||||
<label class="form-label">Account Provider</label>
|
|
||||||
<input type="text" class="form-control" value="<%= current_user.provider.capitalize %>" readonly="">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
settingsButtons = $('.setting-btn');
|
||||||
|
settingsViews = $('.setting-view');
|
||||||
|
|
||||||
|
$(window).on('load', function(){
|
||||||
|
settingsButtons.each(function(i, btn) {
|
||||||
|
if(i != 0){ $(settingsViews[i]).hide(); }
|
||||||
|
$(btn).click(function(){
|
||||||
|
settingsViews.each(function(i, view){
|
||||||
|
if($(view).attr("id") == $(btn).attr("id")){
|
||||||
|
$(view).show();
|
||||||
|
} else {
|
||||||
|
$(view).hide();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
Reference in New Issue