임태민 / Mapmory

Go to a project
Toggle navigation Toggle navigation pinning
임태민
76f4ecd8 1 parent e167fc17

Update project 

- FE 업데이트 했습니다.
Inline Side-by-side
Showing 13 changed files with 458 additions and 219 deletions
body {
background-color:whitesmoke;
}
.mb-3 {
font-family: 'Archivo', sans-serif;
}
.h1 {
font-family: 'PT Serif', serif;
}
......@@ -38,9 +41,9 @@ body {
}
.mb-3{
/* .mb-3{
background-color:tan;
}
} */
\ No newline at end of file
......
......@@ -2,18 +2,40 @@
<html>
<head>
<%- include('../partials/head') %>
<style>
#login {
font-family: 'Archivo', sans-serif;
/* font-family: 'PT Serif', serif; */
font-size:3rem;
font-weight: bold;
}
div#login_wrapper{
border: 20px transparent white;
padding: 5px 20px;
position: absolute;
top: 50%;
left: 50%;
width: 450px; height: 250px;
margin-left: -220px;
margin-top: -170px;
display: flex; flex-direction:column; justify-content:center; align-items: center;
}
</style>
</head>
<body>
<%- include('../partials/nav') %>
<div class="container">
<h3 class="mb-3">Login</h3>
<div id="login_wrapper">
<h3 class="mb-3" id="login">Login</h3>
<form class="user-form" action="/login" method="post">
<div class="form-group row">
<label for="username" class="col-sm-3 col-form-label">Username</label>
<label for="username" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Username</label>
<div class="col-sm-9">
<input type="text" id="username" name="username" value="<%= username %>" class="form-control <%= (errors.username)?'is-invalid':'' %>">
<% if(errors.username){ %>
......@@ -23,7 +45,7 @@
</div>
<div class="form-group row">
<label for="password" class="col-sm-3 col-form-label">Password</label>
<label for="password" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Password</label>
<div class="col-sm-9">
<input type="password" id="password" name="password" value="" class="form-control <%= (errors.password)?'is-invalid':'' %>">
<% if(errors.password){ %>
......@@ -36,12 +58,14 @@
<div class="invalid-feedback d-block"><%= errors.login %></div>
<% } %>
<div class="mt-3">
<input class="btn btn-primary" type="submit" value="Submit">
<div class="mt-3" style="float:right">
<input class="btn btn-outline-primary" type="submit" value="Submit">
</div>
</form>
</div>
</div>
</body>
</html>
\ No newline at end of file
......
......@@ -5,7 +5,7 @@
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<style type="text/css">
#map {
height: 100%;
height: 50%;
}
html,
......@@ -28,6 +28,61 @@
line-height: 30px;
padding-left: 10px;
}
.button-wrapper{
display: inline-block;
border: none;
}
.button {
background: #fff;
border: none;
padding: 2px;
cursor: pointer;
display: block;
position: relative;
overflow: hidden;
transition: all .35s ease-in-out .35s;
margin: 0 auto;
width: 120px;
text-align: center;
}
.button:hover{
background: #36B4C7;
color: #fff;
transition: all .35s ease-in-out .35s;
}
.button:after {
bottom: -100%;
right: -100%;
content: "";
width: 100%;
height: 100%;
position: absolute;
background: #36B4C7;
transition: all .35s ease-in-out .5s;
}
.button:hover:after {
right: 0;
bottom: 0;
transition: all ease-in-out .35s;
}
.button:before {
top: -100%;
left: -100%;
content: "";
width: 100%;
height: 100%;
position: absolute;
background: #36B4C7;
transition: all .35s ease-in-out .5s;
}
.button:hover:before {
left: 0;
top: 0;
transition: all ease-in-out .35s;
}
</style>
<script>
// initMap은 처음 map을 켰을 때 화면을 생성하는 함수.
......@@ -65,9 +120,17 @@
</head>
<body>
<div id="floating-panel">
<input id="submit" type="button" value="find location" />
<div class="light-button button-wrapper">
<input class="button" id="submit" type="button" value="Find Location"/>
</div>
</div>
<div class="container mb-3" id="map"></div>
<!-- <div id="floating-panel">
<input id="submit" type="button" value="Find Location" />
</div>
<div id="map"></div>
<div id="map" class="container mb-3"></div> -->
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script
......
......@@ -10,6 +10,9 @@
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=PT+Serif:ital@1&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo&family=Gothic+A1:wght@500;600&display=swap" rel="stylesheet">
<!-- my css -->
<link rel="stylesheet" href="/css/master.css">
......
<!-- <nav class="navbar navbar-expand-sm navbar-light bg-light mb-3"> -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark mb-3">
<div class="container">
<div class="navbar-brand">Mapmory</div>
<div class="navbar-brand" style="font-weight: bold;">Mapmory</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item"><a href="/" class="nav-link">Home</a></li>
<li class="nav-item"><a href="/about" class="nav-link">About</a></li>
<!-- <li class="nav-item"><a href="/about" class="nav-link">About</a></li> -->
<li class="nav-item"><a href="/posts" class="nav-link">Memory</a></li>
</ul>
......
......@@ -10,9 +10,11 @@
<title>Geocoding Service</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" href="/css/mouse.scss">
<style type="text/css">
#map {
height: 100%;
height: 50%;
}
html,
......@@ -35,6 +37,61 @@
line-height: 30px;
padding-left: 10px;
}
.button-wrapper{
display: inline-block;
border: none;
}
.button {
background: #fff;
border: none;
padding: 2px;
cursor: pointer;
display: block;
position: relative;
overflow: hidden;
transition: all .35s ease-in-out .35s;
margin: 0 auto;
width: 120px;
text-align: center;
}
.button:hover{
background: #36B4C7;
color: #fff;
transition: all .35s ease-in-out .35s;
}
.button:after {
bottom: -100%;
right: -100%;
content: "";
width: 100%;
height: 100%;
position: absolute;
background: #36B4C7;
transition: all .35s ease-in-out .5s;
}
.button:hover:after {
right: 0;
bottom: 0;
transition: all ease-in-out .35s;
}
.button:before {
top: -100%;
left: -100%;
content: "";
width: 100%;
height: 100%;
position: absolute;
background: #36B4C7;
transition: all .35s ease-in-out .5s;
}
.button:hover:before {
left: 0;
top: 0;
transition: all ease-in-out .35s;
}
</style>
<script>
// initMap은 처음 map을 켰을 때 화면을 생성하는 함수.
......@@ -74,7 +131,10 @@
<div id="floating-panel">
<input id="submit" type="button" value="find location" />
<div class="light-button button-wrapper">
<input class="button" id="submit" type="button" value="Find Location"/>
</div>
</div>
<div class="container mb-3" id="map"></div>
......@@ -84,5 +144,6 @@
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDK6K4iDdo9cKQdrNoOJaaYg29nEG0BIjw&callback=initMap&libraries=&v=weekly"
async
></script>
</body>
</html>
\ No newline at end of file
......
......@@ -5,6 +5,7 @@
</head>
<body>
<%- include('../partials/nav') %>
<%- include('../partials/gmap') %>
<div class="container mb-3">
......@@ -36,7 +37,7 @@
</div>
<div class="form-group">
<label for="body">Body</label>
<label for="body">Content</label>
<textarea id="body" name="body" rows="5" class="form-control <%= (errors.body)?'is-invalid':''%>"><%= post.body %></textarea>
<% if(errors.body){ %>
<span class="invalid-feedback"><%= errors.body.message %></span>
......@@ -49,14 +50,14 @@
</div>
<% } %>
<div>
<a class="btn btn-primary" href="/posts/<%= post._id %>">Back</a>
<button type="submit" class="btn btn-primary">Submit</button>
<div style="float:right">
<a class="btn btn-outline-secondary" href="/posts/<%= post._id %>">Back</a>
<button type="submit" class="btn btn-outline-primary">Submit</button>
</div>
</form>
</div>
<%- include('../partials/gmap') %>
</body>
</html>
\ No newline at end of file
......
......@@ -2,53 +2,60 @@
<html>
<head>
<%- include('../partials/head') %>
</head>
<body>
<%- include('../partials/nav') %>
<div class="container mb-3">
<div>
<h2 class="mb-3" style="font-weight: bold; font-style:italic; float:left;">Memory</h2>
<h2 class="mb-3">Board</h2>
<table class="board-table table table-sm border-bottom">
<thead class="thead-light">
<tr>
<th scope="col">Title</th>
<th scope="col" class="author">Author</th>
<th scope="col" class="date">Date</th>
</tr>
</thead>
<tbody>
<% if(posts == null || posts.length == 0){ %>
<tr>
<td colspan=2> EMPTY </td>
</tr>
<div style="float:right">
<% if(isAuthenticated){ %>
<a class="btn btn-outline-primary" href="/posts/new">Write Memory</a>
<% } %>
<% posts.forEach(function(post) { %>
<tr>
<td>
<a href="/posts/<%= post._id %>"><div class="ellipsis"><%= post.title %></div></a>
</td>
<td class="author">
<div class="ellipsis"><%= post.author ? post.author.username : "" %></div>
</td>
<td class="date">
<span data-date="<%= post.createdAt %>"><%= post.createdAt %></span>
</td>
</div>
<!-- <table class="board-table table table-sm border-bottom"> -->
<table class="table table-hover table-light">
<thead>
<tr class="table-dark">
<th scope="col">Title</th>
<th scope="col" class="author">Author</th>
<th scope="col" class="date">Date</th>
</tr>
<% }) %>
</tbody>
</thead>
<tbody>
<% if(posts == null || posts.length == 0){ %>
<tr>
<td colspan=2> EMPTY </td>
</tr>
<% } %>
<% posts.forEach(function(post) { %>
<tr>
<td>
<a href="/posts/<%= post._id %>" style="color:black; font-weight: bold;"><div class="ellipsis"><%= post.title %></div></a>
</td>
<td class="author">
<div class="ellipsis"><%= post.author ? post.author.username : "" %></div>
</td>
<td class="date">
<span data-date="<%= post.createdAt %>"><%= post.createdAt %></span>
</td>
</tr>
<% }) %>
</tbody>
</table>
</table>
<div>
<% if(isAuthenticated){ %>
<a class="btn btn-primary" href="/posts/new">New</a>
<% } %>
</div>
</div>
</body>
</html>
\ No newline at end of file
......
......@@ -5,6 +5,7 @@
</head>
<body>
<%- include('../partials/nav') %>
<%- include('../partials/gmap') %>
<div class="container mb-3">
......@@ -19,7 +20,7 @@
<form action="/posts" method="post">
<div class="form-group">
<label for="title">Title</label>
<label for="title" style="font-weight:bold">Title</label>
<input type="text" id="title" name="title" value="<%= post.title %>" class="form-control <%= (errors.title)?'is-invalid':'' %>">
<% if(errors.title){ %>
<span class="invalid-feedback"><%= errors.title.message %></span>
......@@ -27,7 +28,7 @@
</div>
<div class="form-group">
<label for="address">address</label>
<label for="address" style="font-weight:bold">Address</label>
<input type="text" id="address" name="address" value="<%= post.address %>" class="form-control <%= (errors.address)?'is-invalid':'' %>">
<% if(errors.address){ %>
<span class="invalid-feedback"><%= errors.address.message %></span>
......@@ -35,6 +36,7 @@
</div>
<div class="form-group">
<label for="body" style="font-weight:bold">Content</label>
<textarea id="body" name="body" rows="5" class="form-control <%= (errors.body)?'is-invalid':''%>"><%= post.body %></textarea>
<% if(errors.body){ %>
<span class="invalid-feedback"><%= errors.body.message %></span>
......@@ -47,13 +49,13 @@
</div>
<% } %>
<div>
<a class="btn btn-primary" href="/posts">Back</a>
<button type="submit" class="btn btn-primary">Submit</button>
<div style="float:right">
<a class="btn btn-outline-secondary" href="/posts">Back</a>
<button type="submit" class="btn btn-outline-primary">Submit</button>
</div>
</form>
</div>
<%- include('../partials/gmap') %>
</body>
</html>
\ No newline at end of file
......
......@@ -13,16 +13,16 @@
<ol class="breadcrumb p-1 pl-2 pr-2">
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item"><a href="/posts">Board</a></li>
<li class="breadcrumb-item active" aria-current="page"><%= post.address %></li>
<li class="breadcrumb-item active" aria-current="page"><%= post.title %></li>
</ol>
</nav>
<div class="card">
<h5 class="card-header p-2"><%= post.title %></h5>
<h5 class="card-header p-2" style="font-weight: bold; font-family: 'Archivo', sans-serif;"><%= post.title %></h5>
<div class="row"> <!-- 1 -->
<div class="col-md-7 col-lg-8 col-xl-9 order-sm-2 order-md-1"> <!-- 1 -->
<div class="post-body p-2"><%= post.body %></div>
<div class="post-body p-2" style="font-family: 'Archivo', sans-serif;"><%= post.body %></div>
</div>
<div class="col-md-5 col-lg-4 col-xl-3 order-sm-1 order-md-2"> <!-- 1 -->
......@@ -40,12 +40,12 @@
</div>
</div>
<div class="mt-3">
<a class="btn btn-primary" href="/posts">Back</a>
<div class="mt-3" style="float:right">
<a class="btn btn-outline-secondary" href="/posts">Back</a>
<% if(isAuthenticated && post.author && currentUser.id == post.author.id){ %> <!-- 1 -->
<a class="btn btn-primary" href="/posts/<%= post._id %>/edit">Edit</a>
<a class="btn btn-outline-primary" href="/posts/<%= post._id %>/edit">Edit</a>
<form action="/posts/<%= post._id %>?_method=delete" method="post" class="d-inline">
<a class="btn btn-primary" href="javascript:void(0)" onclick="confirm('Do you want to delete this?')?this.parentElement.submit():null;">Delete</a>
<a class="btn btn-outline-primary" href="javascript:void(0)" onclick="confirm('Do you want to delete this?')?this.parentElement.submit():null;">Delete</a>
</form>
<% } %>
</div>
......
......@@ -2,95 +2,120 @@
<html>
<head>
<%- include('../partials/head') %>
<style>
#edit {
font-family: 'Archivo', sans-serif;
/* font-family: 'PT Serif', serif; */
font-size:3rem;
font-weight: bold;
margin-bottom: 20px;
}
div#edit_wrapper{
border: 20px transparent white;
padding: 5px 20px;
position: absolute;
top: 50%;
left: 50%;
width: 450px; height: 250px;
margin-left: -220px;
margin-top: -170px;
display: flex; flex-direction:column; justify-content:center; align-items: center;
}
</style>
</head>
<body>
<%- include('../partials/nav') %>
<div class="container mb-3">
<div id="edit_wrapper">
<h3 class="mb-3" id="edit">Edit User</h3>
<h3 class="mb-3">Edit User</h3>
<form action="/users/<%= username %>?_method=put" method="post"> <!-- 1 -->
<form action="/users/<%= username %>?_method=put" method="post"> <!-- 1 -->
<div class="form-group row">
<label for="currentPassword" class="col-sm-3 col-form-label">Current Password*</label>
<div class="col-sm-9 col-sm-offset-3">
<input type="password" id="currentPassword" name="currentPassword" value="" class="form-control <%= (errors.currentPassword)?'is-invalid':'' %>"> <!-- 2 -->
<% if(errors.currentPassword){ %> <!-- 3 -->
<span class="invalid-feedback"><%= errors.currentPassword.message %></span>
<% } %>
<div class="form-group row">
<label for="currentPassword" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Current Password*</label>
<div class="col-sm-9 col-sm-offset-3">
<input type="password" id="currentPassword" name="currentPassword" value="" class="form-control <%= (errors.currentPassword)?'is-invalid':'' %>"> <!-- 2 -->
<% if(errors.currentPassword){ %> <!-- 3 -->
<span class="invalid-feedback"><%= errors.currentPassword.message %></span>
<% } %>
</div>
</div>
</div>
<hr></hr>
<hr></hr>
<div class="form-group row">
<label for="username" class="col-sm-3 col-form-label">Username*</label>
<div class="col-sm-9">
<input type="text" id="username" name="username" value="<%= user.username %>" class="form-control <%= (errors.username)?'is-invalid':'' %>"> <!-- 2 -->
<% if(errors.username){ %> <!-- 3 -->
<span class="invalid-feedback"><%= errors.username.message %></span>
<% } %>
<div class="form-group row">
<label for="username" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Username*</label>
<div class="col-sm-9">
<input type="text" id="username" name="username" value="<%= user.username %>" class="form-control <%= (errors.username)?'is-invalid':'' %>"> <!-- 2 -->
<% if(errors.username){ %> <!-- 3 -->
<span class="invalid-feedback"><%= errors.username.message %></span>
<% } %>
</div>
</div>
</div>
<div class="form-group row">
<label for="name" class="col-sm-3 col-form-label">Name*</label>
<div class="col-sm-9">
<input type="text" id="name" name="name" value="<%= user.name %>" class="form-control <%= (errors.name)?'is-invalid':'' %>"> <!-- 2 -->
<% if(errors.name){ %> <!-- 3 -->
<span class="invalid-feedback"><%= errors.name.message %></span>
<% } %>
</div>
</div>
<div class="form-group row">
<label for="email" class="col-sm-3 col-form-label">Email</label>
<div class="col-sm-9">
<input type="text" id="email" name="email" value="<%= user.email %>" class="form-control <%= (errors.email)?'is-invalid':'' %>"> <!-- 2 -->
<% if(errors.email){ %> <!-- 3 -->
<span class="invalid-feedback"><%= errors.email.message %></span>
<% } %>
<div class="form-group row">
<label for="name" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Name*</label>
<div class="col-sm-9">
<input type="text" id="name" name="name" value="<%= user.name %>" class="form-control <%= (errors.name)?'is-invalid':'' %>"> <!-- 2 -->
<% if(errors.name){ %> <!-- 3 -->
<span class="invalid-feedback"><%= errors.name.message %></span>
<% } %>
</div>
</div>
</div>
<div class="form-group row">
<label for="newPassword" class="col-sm-3 col-form-label">New Password</label>
<div class="col-sm-9 col-sm-offset-3">
<input type="password" id="newPassword" name="newPassword" value="" class="form-control <%= (errors.newPassword)?'is-invalid':'' %>"> <!-- 2 -->
<% if(errors.newPassword){ %> <!-- 3 -->
<span class="invalid-feedback"><%= errors.newPassword.message %></span>
<% } %>
<div class="form-group row">
<label for="email" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Email</label>
<div class="col-sm-9">
<input type="text" id="email" name="email" value="<%= user.email %>" class="form-control <%= (errors.email)?'is-invalid':'' %>"> <!-- 2 -->
<% if(errors.email){ %> <!-- 3 -->
<span class="invalid-feedback"><%= errors.email.message %></span>
<% } %>
</div>
</div>
</div>
<div class="form-group row">
<label for="passwordConfirmation" class="col-sm-3 col-form-label">Password Confirmation</label>
<div class="col-sm-9 col-sm-offset-3">
<input type="password" id="passwordConfirmation" name="passwordConfirmation" value="" class="form-control <%= (errors.passwordConfirmation)?'is-invalid':'' %>"> <!-- 2 -->
<% if(errors.passwordConfirmation){ %> <!-- 3 -->
<span class="invalid-feedback"><%= errors.passwordConfirmation.message %></span>
<% } %>
<div class="form-group row">
<label for="newPassword" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">New Password</label>
<div class="col-sm-9 col-sm-offset-3">
<input type="password" id="newPassword" name="newPassword" value="" class="form-control <%= (errors.newPassword)?'is-invalid':'' %>"> <!-- 2 -->
<% if(errors.newPassword){ %> <!-- 3 -->
<span class="invalid-feedback"><%= errors.newPassword.message %></span>
<% } %>
</div>
</div>
</div>
<p>
<small>*Required</small>
</p>
<div class="form-group row">
<label for="passwordConfirmation" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Password Confirmation</label>
<div class="col-sm-9 col-sm-offset-3">
<input type="password" id="passwordConfirmation" name="passwordConfirmation" value="" class="form-control <%= (errors.passwordConfirmation)?'is-invalid':'' %>"> <!-- 2 -->
<% if(errors.passwordConfirmation){ %> <!-- 3 -->
<span class="invalid-feedback"><%= errors.passwordConfirmation.message %></span>
<% } %>
</div>
</div>
<div class="buttons">
<a class="btn btn-primary" href="/users/<%= user.username %>">Back</a>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
<p>
<small style="font-family: 'Archivo', sans-serif; color:red">*Required</small>
</p>
<% if(errors.unhandled){ %> <!-- 4 -->
<div class="alert alert-danger">
<%= errors.unhandled %>
<div class="buttons" style="float:right; font-weight: bold; font-family: 'Archivo', sans-serif;">
<a class="btn btn-outline-secondary" href="/users/<%= user.username %>">Back</a>
<button type="submit" class="btn btn-outline-primary">Submit</button>
</div>
<% } %>
</form>
<% if(errors.unhandled){ %> <!-- 4 -->
<div class="alert alert-danger">
<%= errors.unhandled %>
</div>
<% } %>
</form>
</div>
</div>
</body>
......
......@@ -2,75 +2,100 @@
<html>
<head>
<%- include('../partials/head') %>
<style>
#new {
font-family: 'Archivo', sans-serif;
/* font-family: 'PT Serif', serif; */
font-size:3rem;
font-weight: bold;
margin-bottom: 20px;
}
div#signup_wrapper{
border: 20px transparent white;
padding: 5px 20px;
position: absolute;
top: 50%;
left: 50%;
width: 450px; height: 250px;
margin-left: -220px;
margin-top: -170px;
display: flex; flex-direction:column; justify-content:center; align-items: center;
}
</style>
</head>
<body>
<%- include('../partials/nav') %>
<div class="container mb-3">
<div id="signup_wrapper">
<h3 class="contentBoxTop mb-3" id="new">New User</h3>
<h3 class="contentBoxTop mb-3">New User</h3>
<form action="/users" method="post">
<form action="/users" method="post">
<div class="form-group row">
<label for="username" class="col-sm-3 col-form-label">Username*</label>
<div class="col-sm-9">
<input type="text" id="username" name="username" value="<%= user.username %>" class="form-control <%= (errors.username)?'is-invalid':'' %>"> <!-- 1, 2 -->
<% if(errors.username){ %> <!-- 3 -->
<span class="invalid-feedback"><%= errors.username.message %></span>
<% } %>
<div class="form-group row">
<label for="username" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Username*</label>
<div class="col-sm-9">
<input type="text" id="username" name="username" value="<%= user.username %>" class="form-control <%= (errors.username)?'is-invalid':'' %>"> <!-- 1, 2 -->
<% if(errors.username){ %> <!-- 3 -->
<span class="invalid-feedback"><%= errors.username.message %></span>
<% } %>
</div>
</div>
</div>
<div class="form-group row">
<label for="name" class="col-sm-3 col-form-label">Name*</label>
<div class="col-sm-9">
<input type="text" id="name" name="name" value="<%= user.name %>" class="form-control <%= (errors.name)?'is-invalid':'' %>"> <!-- 1, 2 -->
<% if(errors.name){ %> <!-- 3 -->
<span class="invalid-feedback"><%= errors.name.message %></span>
<% } %>
<div class="form-group row">
<label for="name" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Name*</label>
<div class="col-sm-9">
<input type="text" id="name" name="name" value="<%= user.name %>" class="form-control <%= (errors.name)?'is-invalid':'' %>"> <!-- 1, 2 -->
<% if(errors.name){ %> <!-- 3 -->
<span class="invalid-feedback"><%= errors.name.message %></span>
<% } %>
</div>
</div>
</div>
<div class="form-group row">
<label for="email" class="col-sm-3 col-form-label">Email</label>
<div class="col-sm-9">
<input type="text" id="email" name="email" value="<%= user.email %>" class="form-control <%= (errors.email)?'is-invalid':'' %>"> <!-- 1, 2 -->
<% if(errors.email){ %>
<span class="invalid-feedback"><%= errors.email.message %></span>
<% } %>
<div class="form-group row">
<label for="email" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Email</label>
<div class="col-sm-9">
<input type="text" id="email" name="email" value="<%= user.email %>" class="form-control <%= (errors.email)?'is-invalid':'' %>"> <!-- 1, 2 -->
<% if(errors.email){ %>
<span class="invalid-feedback"><%= errors.email.message %></span>
<% } %>
</div>
</div>
</div>
<div class="form-group row">
<label for="password" class="col-sm-3 col-form-label">Password*</label>
<div class="col-sm-9">
<input type="password" id="password" name="password" value="" class="form-control <%= (errors.password)?'is-invalid':'' %>"> <!-- 1, 2 -->
<% if(errors.password){ %> <!-- 3 -->
<span class="invalid-feedback"><%= errors.password.message %></span>
<% } %>
<div class="form-group row">
<label for="password" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Password*</label>
<div class="col-sm-9">
<input type="password" id="password" name="password" value="" class="form-control <%= (errors.password)?'is-invalid':'' %>"> <!-- 1, 2 -->
<% if(errors.password){ %> <!-- 3 -->
<span class="invalid-feedback"><%= errors.password.message %></span>
<% } %>
</div>
</div>
</div>
<div class="form-group row">
<label for="passwordConfirmation" class="col-sm-3 col-form-label">Password Confirmation*</label>
<div class="col-sm-9 col-sm-offset-3">
<input type="password" id="passwordConfirmation" name="passwordConfirmation" value="" class="form-control <%= (errors.passwordConfirmation)?'is-invalid':'' %>"> <!-- 1, 2 -->
<% if(errors.passwordConfirmation){ %> <!-- 3 -->
<span class="invalid-feedback"><%= errors.passwordConfirmation.message %></span>
<% } %>
<div class="form-group row">
<label for="passwordConfirmation" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Password Confirmation*</label>
<div class="col-sm-9 col-sm-offset-3">
<input type="password" id="passwordConfirmation" name="passwordConfirmation" value="" class="form-control <%= (errors.passwordConfirmation)?'is-invalid':'' %>"> <!-- 1, 2 -->
<% if(errors.passwordConfirmation){ %> <!-- 3 -->
<span class="invalid-feedback"><%= errors.passwordConfirmation.message %></span>
<% } %>
</div>
</div>
</div>
<p>
<small>*Required</small>
</p>
<p>
<small style="font-family: 'Archivo', sans-serif; color:red;">*Required</small>
</p>
<% if(errors.unhandled){ %> <!-- 4 -->
<div class="alert alert-danger">
<%= errors.unhandled %>
</div>
<% } %>
<% if(errors.unhandled){ %> <!-- 4 -->
<div class="alert alert-danger">
<%= errors.unhandled %>
<div class="form-group" style="float:right">
<button type="submit" class="btn btn-outline-primary">Submit</button>
</div>
<% } %>
</form>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</body>
......
......@@ -2,41 +2,66 @@
<html>
<head>
<%- include('../partials/head') %>
<style>
#show {
font-family: 'Archivo', sans-serif;
/* font-family: 'PT Serif', serif; */
font-size:3rem;
font-weight: bold;
margin-bottom: 20px;
}
div#show_wrapper{
border: 20px transparent white;
padding: 5px 20px;
position: absolute;
top: 50%;
left: 50%;
width: 450px; height: 250px;
margin-left: -220px;
margin-top: -170px;
display: flex; flex-direction:column; justify-content:center; align-items: center;
}
</style>
</head>
<body>
<%- include('../partials/nav') %>
<div class="container mb-3">
<div id="show_wrapper">
<h3 class="contentBoxTop" id="show"><%= user.username %></h3>
<h3 class="contentBoxTop"><%= user.username %></h3>
<form class="user-form" action="/users" method="post">
<fieldset disabled>
<div class="form-group row">
<label for="name" class="col-sm-3 col-form-label">Name</label>
<div class="col-sm-9">
<input class="form-control" type="text" id="name" name="name" value="<%= user.name %>">
<form class="user-form" action="/users" method="post">
<fieldset disabled>
<div class="form-group row">
<label for="name" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Name</label>
<div class="col-sm-9">
<input class="form-control" type="text" id="name" name="name" value="<%= user.name %>">
</div>
</div>
</div>
<div class="form-group row">
<label for="email" class="col-sm-3 col-form-label">Email</label>
<div class="col-sm-9">
<input class="form-control" type="text" id="email" name="email" value="<%= user.email %>">
<div class="form-group row">
<label for="email" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Email</label>
<div class="col-sm-9">
<input class="form-control" type="text" id="email" name="email" value="<%= user.email %>">
</div>
</div>
</div>
</fieldset>
</form>
<div>
<a class="btn btn-primary" href="/users">Back</a>
<% if(isAuthenticated && currentUser.id == user.id){ %>
<a class="btn btn-primary" href="/users/<%= user.username %>/edit">Edit</a>
<% } %>
<form action="/users/<%= user.username %>?_method=delete" method="post" class="d-inline">
<a class="btn btn-primary" href="javascript:void(0)" onclick="confirm('Do you want to delete this?')?this.parentElement.submit():null;">Delete</a>
</fieldset>
</form>
<div>
<a class="btn btn-outline-secondary" href="/">Back</a>
<% if(isAuthenticated && currentUser.id == user.id){ %>
<a class="btn btn-outline-primary" href="/users/<%= user.username %>/edit">Edit</a>
<% } %>
<form action="/users/<%= user.username %>?_method=delete" method="post" class="d-inline">
<a class="btn btn-outline-primary" href="javascript:void(0)" onclick="confirm('Do you want to delete this?')?this.parentElement.submit():null;">Delete</a>
</form>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
......