구희연 / Food_recipe_info

Go to a project
Toggle navigation Toggle navigation pinning
윤희찬
fdaabc0a 1 parent 96ae9a88

Update front-end of Welcome Page

Inline Side-by-side
Showing 1 changed file with 68 additions and 23 deletions
......@@ -6,7 +6,7 @@ const fs=require('fs');
const router = express.Router()
const fileStore = require('session-file-store')(session);
const app = express();
var flash = require('connect-flash');
var flash = require('connect-flash');
var NaverStrategy = require('passport-naver').Strategy;
var KakaoStrategy = require('passport-kakao').Strategy;
......@@ -38,7 +38,7 @@ passport.deserializeUser(function(id, done) { //읽기
//첫 페이지
app.get('/',(req,res)=>{
let page = getFirstPage('Passport','This is Passport Example Page',authInfo(req));
let page = getFirstPage('Welcome!','Food Recipe',authInfo(req));
res.send(page);
});
......@@ -57,7 +57,7 @@ app.get('/main',(req,res)=>{
//로그인 페이지
app.get('/login',(req,res)=>{
let page = getLoginButton(`<a href="/">뒤로가기</a>`);
res.send(page);
res.send(page);
});
......@@ -75,7 +75,7 @@ passport.use(new LocalStrategy({
console.log(user);
//아이디가 다를때
if (id !== user.email){
if (id !== user.email){
//alert("존재하는 아이디가 없습니다.")
return done(null, false, { message: '아이디가 다르다' });}
//비밀번호가 다를때
......@@ -89,18 +89,18 @@ passport.use(new LocalStrategy({
//로그인 처리 (Passport)
app.post('/login',
passport.authenticate('local', {
passport.authenticate('local', {
//성공시, 메인페이지 이동
//실패시 로그인 페이지 이동
successRedirect: '/',
failureRedirect: '/login',
badRequestMessage : 'Missing username or password.',
failureFlash: true
failureFlash: true
}));
//로그 아웃 처리
app.get('/logout',(req,res)=>{
//passport 정보 삭제
req.logout();
//서버측 세션 삭제
......@@ -124,20 +124,20 @@ const authInfo = (req)=>{
// naver 로그인
app.get('/naverlogin', passport.authenticate('naver'));
passport.use('naver',new NaverStrategy({
clientID: 'CGVVomc0bhMhzfzbytK2',
clientSecret: 'XHylcjnZxG',
clientID: 'CGVVomc0bhMhzfzbytK2',
clientSecret: 'XHylcjnZxG',
callbackURL: "http://localhost:3000/",
svcType: 0,
authType: 'reauthenticate' // enable re-authentication
},
function(accessToken, refreshToken, profile, done) {
},
function(accessToken, refreshToken, profile, done) {
var _profile = profile._json;
console.log(_profile.id);
console.log(_profile.properties.nickname);
}
}
));
// kakao 로그인
app.get('/kakaologin', passport.authenticate('kakao-login'));
......@@ -230,7 +230,7 @@ app.get('/join',(req,res)=>{
</style><link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
......@@ -254,7 +254,7 @@ app.get('/join',(req,res)=>{
</button>
</form>
</html>
`,'<a href="/login">뒤로가기</a>');
res.send(page);
});
......@@ -371,7 +371,7 @@ const getLoginButton = (auth) =>{
<button type="submit" class="btn btn btn-primary">
<a href="/join" style="color:white;text-decoration-line:none;"> 회원가입</a>
</form>
</div>
</div>
</div>
......@@ -380,8 +380,8 @@ const getLoginButton = (auth) =>{
<a href="/naverlogin" class="btn btn-block btn-lg btn-success btn_login">Naver</a>
<a href="/kakaologin" class="btn btn-block btn-lg btn-warning btn_login">KaKao</a>
</div>
</body>
</html>
`;
......@@ -398,13 +398,59 @@ const getFirstPage =(title, content, auth) =>{
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Passport Example</title>
<style>
body{
height: 100vh;
background-image: url('https://images.unsplash.com/photo-1614548539924-5c1f205b3747?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: scroll;
}
h1 {
position: absolute;
left: 50%;
top: 30%;
transform: translate(-50%, -30%);
text-align: center;
font-size: 5em;
font-family: cursive;;
}
p {
position: relative;
left: 50%;
top: 47%;
transform: translate(-50%, -47%);
font-size: 3em;
text-align: center;
}
div {
position: relative;
font-size: 1.3em;
text-align: center;
}
.box1{
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.box2{
position: relative;
left: 50%;
top: 54%;
transform: translate(-50%, -54%);
}
</style>
</head>
<body>
${auth}
<h1>${title}</h1>
<p>${content}</p>
<div>
<input type="button" value="page move" onClick="movepage()"/>
<div class="box1">
${auth}
</div>
<div class="box2">
<input type="button" value="레시피 보러가기" onClick="movepage()"/>
</div>
<script type="text/javascript">
function movepage(){
......@@ -415,4 +461,3 @@ const getFirstPage =(title, content, auth) =>{
`;
}
......