This repository has been archived by the owner on Nov 15, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathchatExample.html
93 lines (84 loc) · 2.58 KB
/
chatExample.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<head>
<title>meteor-chat-example</title>
</head>
<body>
<h1 style="text-align: center;">Welcome to my Meteor chat example</h1>
<h3 style="text-align: center; margin-top:0px;">This is an example for an open chat. Try it!</h3>
<div class="ui grid">
<div class="ui four wide column"></div>
<div class="ui eight wide column">
{{> errorMessage}}
{{#unless currentUser}}
{{> login}}
{{else}}
{{> messages}}
{{/unless}}
</div>
<div class="ui four wide column">
{{#if currentUser}}
{{> logout}}
{{/if}}
</div>
</div>
</body>
<template name="messages">
<div id="messageContainer">
{{#each messages}}
<!-- <div class="ui divider"></div> -->
<div class="message" style="{{ownMessage}}">
<div class="message-head">
<div class="message-date">{{when}}</div>
<div class="user-name">{{username}} says:</div>
</div>
<div class="message-body">{{message}}</div>
</div>
{{/each}}
</div>
<form class="ui form">
<div class="ui action left input" style="width:100%; margin-top: 15px;">
<input type="text" id="inputField" placeholder="type your message">
<div class="ui blue button sendNewMessage">Send</div>
</div>
</form>
</template>
<template name="login">
<div class="ui segment">
<form class="ui form">
<div class="two fields">
<div class="required field">
<label>Username</label>
<div class="ui icon input">
<input type="text" id="username" value={{randomUsername}}>
<i class="user icon"></i>
</div>
</div>
<div class="required field">
<label>Password</label>
<div class="ui icon input">
<input type="password" id="password" value={{randomPassword}}>
<i class="lock icon"></i>
</div>
</div>
</div>
<button type="button" class="ui blue basic button" id="signUpButton">Sign in</button>
</form>
<div class="ui hidden clearing divider"></div>
<div class="ui hidden clearing divider"></div>
<div class="ui bottom attached small label">
To save you the hassle, I created a random username and password for you. Just hit sign in and have a look around!
</div>
</div>
</template>
<template name="logout">
<button type="button" class="ui red basic button" id="logoutButton">Sign out</button>
</template>
<template name="errorMessage">
{{#if error}}
<div class="ui error message">
<div class="content">
<div class="header">Error</div>
<p>{{error}}</p>
</div>
</div>
{{/if}}
</template>