Skip to content

Commit

Permalink
Merge pull request #43 from agrim123/login-form
Browse files Browse the repository at this point in the history 
login form added
  • Loading branch information
@tnmy44
tnmy44 committed Oct 13, 2016
2 parents 35c0eee + 6e0e5db commit a85e9c8
Show file tree
Hide file tree
Showing 3 changed files with 363 additions and 83 deletions.
154 changes: 91 additions & 63 deletions public/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,75 +1,103 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="Jinora Public chat">
<meta name="author" content="SDSLabs">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">

<title>#chat</title>
<link rel="icon" sizes="302x302" href="images/jinora.png">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
<!-- For all styles: <link href='https://fonts.googleapis.com/css?family=Roboto:400,500,900italic,900,700italic,700,500italic,300italic,400italic,300,100italic,100' rel='stylesheet' type='text/css'>-->

<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.8.1/mustache.min.js"></script>
<script src="/socket.io/socket.io.js"></script>

<link rel="import" href="bower_components/core-scaffold/core-scaffold.html">
<link rel="import" href="bower_components/core-item/core-item.html">
<link rel="import" href="bower_components/core-icons/social-icons.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-fab/paper-fab.html">
<link rel="import" href="x-chat-list.html">
<link rel="import" href="x-user-list.html">
<link rel="stylesheet" href="style.css">
</head>

<body layout vertical fullbleed>

<template id="template" is="auto-binding">

<core-header-panel flex class="top-header-panel" mode="seamed">

<div class="core-header top-toolbar">
<div id="chat-heading" >#chat</div>
<div style="background-image: url({{avatar}})" class="myavatar {{status}}"></div>
</div>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="Jinora Public chat">
<meta name="author" content="SDSLabs">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">

<title>#chat</title>
<link rel="icon" sizes="302x302" href="images/jinora.png">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
<!-- For all styles: <link href='https://fonts.googleapis.com/css?family=Roboto:400,500,900italic,900,700italic,700,500italic,300italic,400italic,300,100italic,100' rel='stylesheet' type='text/css'>-->

<core-drawer-panel class="drawer-panel" drawerwidth="280px" rightdrawer responsivewidth="600px" disableswipe="false" touch-action="">
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.8.1/mustache.min.js"></script>
<script src="/socket.io/socket.io.js"></script>

<div class="right-panel scroller" drawer >
<div class="core-header" id="announcement-area" style="display: none" >
<div class="announcement-title">ANNOUNCEMENT</div>
<p id="announcement-text"></p>
</div>
<x-user-list users="{{users}}" showMembers="{{showMembers}}"></x-user-list>
</div>
<link rel="import" href="bower_components/core-scaffold/core-scaffold.html">
<link rel="import" href="bower_components/core-item/core-item.html">
<link rel="import" href="bower_components/core-icons/social-icons.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-fab/paper-fab.html">
<link rel="import" href="x-chat-list.html">
<link rel="import" href="x-user-list.html">
<link rel="stylesheet" href="style.css">
</head>

<body layout vertical fullbleed>
<!-- LOGIN SCREEN starts -->
<div class="wrapper loginscreen">
<div class="container">
<h1>Welcome</h1>

<div class="login-div">
<input type="text" placeholder="Username" class="getinput">
<!-- <button id="login-button" class="showinput">Start chatting !!</button> -->
</div>
</div>

<ul class="bg-bubbles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- LOGIN SCREEN ends -->
<template id="template" is="auto-binding">

<core-header-panel flex class="top-header-panel" mode="seamed">

<div class="core-header top-toolbar">
<div id="chat-heading" >#chat</div>
<div style="background-image: url({{avatar}})" class="myavatar {{status}}"></div>
</div>

<div class="header-panel" main="" mode="seamed">
<section layout vertical fit class="chat-area">
<div flex class="chat-list scroller">
<template repeat="{{message in messages}}">
<x-chat-list color="{{message.color}}" avatar="{{message.avatar}}" nick="{{message.nick}}" message="{{message.message}}" status="{{message.status}}" timestamp="{{message.timestamp}}"></x-chat-list>
</template>
</div>
<div class="send-message" layout="" horizontal="">
<paper-input flex label="Message" id="input" value="{{input}}" on-click="{{resetTitle}}" on-keyup="{{checkKey}}"></paper-input>
</div>
</section>

<core-drawer-panel class="drawer-panel" drawerwidth="280px" rightdrawer responsivewidth="600px" disableswipe="false" touch-action="">

<div class="right-panel scroller" drawer >
<div class="core-header" id="announcement-area" style="display: none" >
<div class="announcement-title">ANNOUNCEMENT</div>
<p id="announcement-text"></p>
</div>
</core-drawer-panel>
<x-user-list users="{{users}}" showMembers="{{showMembers}}"></x-user-list>
</div>

<div class="header-panel" main="" mode="seamed">
<section layout vertical fit class="chat-area">
<div flex class="chat-list scroller">
<template repeat="{{message in messages}}">
<x-chat-list color="{{message.color}}" avatar="{{message.avatar}}" nick="{{message.nick}}" message="{{message.message}}" status="{{message.status}}" timestamp="{{message.timestamp}}"></x-chat-list>
</template>
</div>
<div class="send-message" layout="" horizontal="">
<paper-input flex label="Message" id="input" value="{{input}}" on-click="{{resetTitle}}" on-keyup="{{checkKey}}"></paper-input>
</div>
</section>
</div>
</core-drawer-panel>

</core-header-panel>
</core-header-panel>

</template>
</template>

<script src="polymer.js"></script>
</body>
<script src="polymer.js"></script>
</body>
</html>
25 changes: 23 additions & 2 deletions public/polymer.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,30 @@ template.users = []

defaultNames = ["Killer Whale", "Giraffe", "Rabbit", "Polar Bear", "Cheetah", "Snow Leopard", "Eagle", "Fox", "Panda", "Salamander", "Jackal", "Elephant ", "Lion", "Horse", "Monkey", "Penguin ", "Wolf", "Dolphin", "Tiger", "Cat", "Shinigami", "Korra", "Aang", "Izumi", "Katara"]

template.userName = prompt "Enter a nick:"
# template.userName = prompt "Enter a nickd:"

################## login screen #################
#doesnot allow user to change name during runtime

name = ''
$('.getinput').keydown (event) ->
if event.keyCode == 13
event.preventDefault()
$('.login-div').fadeOut 500
name = $('.getinput').val()
if name == '' or name == null
name = defaultNames[Math.floor(Math.random() * defaultNames.length)]
else
name = name
template.userName = name
template.avatar = "https://api.adorable.io/avatars/80/" + escape(template.userName) + ".png"
$('.loginscreen h1').append ' ' + name
$('.loginscreen').addClass('form-success').delay 1200
$('.loginscreen').fadeOut()
return

################# ends here ####################

template.avatar = "https://api.adorable.io/avatars/80/" + escape(template.userName) + ".png"

baseTitle = ""

Expand Down
Loading

0 comments on commit a85e9c8

Please sign in to comment.