forked from arallsopp/tp-link-smart-switch-web-client-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
160 lines (130 loc) · 7.71 KB
/
index.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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!doctype html>
<html ng-app="myApp" ng-cloak>
<head>
<meta charset="utf-8">
<title>TP-Link Web UI</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body layout="column" style="overflow-y:hidden">
<div ng-controller="dash" style="overflow-y:auto" md-theme="custom">
<md-toolbar>
<div class="md-toolbar-tools">
<h2 flex md-truncate>TP-Link Web UI</h2>
</div>
</md-toolbar>
<md-tabs md-dynamic-height md-border-bottom md-selected="selected_tab_index">
<md-tab label="Devices">
<md-content ng-if="tpl.devices.length">
<md-list class="md-dense" flex>
<md-subheader class="md-no-sticky">TP-Link Devices</md-subheader>
<md-list-item class="md-2-line" ng-repeat="device in tpl.devices">
<div class="md-list-item-text">
<h3>{{device.alias}}</h3>
<p>{{device.deviceModel}} - {{device.deviceName}}</p>
</div>
<md-switch ng-change="tpl_setState($index,device.is_powered)"
ng-model="device.is_powered"></md-switch>
<md-divider/>
</md-list-item>
</md-list>
<md-button class="md-raised md-primary" ng-click="tpl_refreshDevices()">Refresh Devices</md-button>
</md-content>
<md-content ng-if="!tpl.devices.length" class="md-padding">
<h3>Warning</h3>
No devices were found. Please visit the 'Settings' tab to verify your credentials or request a new
token.</h3>
</md-content>
</md-tab>
<md-tab label="Settings">
<md-content class="md-padding">
<h3>TP-Link Authentication</h3>
<p class="md-caption">
Please provide the credentials used to connect to your TP-Link account.
</p>
<div layout="column" layout-gt-xs="row">
<md-input-container flex="50">
<label>Username/Email</label>
<input required type="email" ng-model="tpl.username"
minlength="10" maxlength="100" ng-pattern="/^.+@.+\..+$/"/>
<div ng-messages="tpl.username.$error" role="alert">
<div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
Your email must be between 10 and 100 characters long and look like an e-mail address.
</div>
</div>
</md-input-container>
<md-input-container flex="50">
<label>Password</label>
<input required ng-model="tpl.password"/>
<div ng-messages="tpl.password.$error" role="alert">
<div ng-message-exp="['required']">
Password must be provided.
</div>
</div>
</md-input-container>
</div>
<div layout="column" layout-gt-xs="row">
<md-input-container flex="50">
<md-checkbox ng-model="tpl.store_credentials" aria-label="store credentials">
Allow this browser to store credentials.
</md-checkbox>
</md-input-container>
<md-input-container flex="50">
<md-checkbox ng-model="tpl.store_token" aria-label="store token">
Allow this browser to store the authentication token.
</md-checkbox>
</md-input-container>
</div>
<md-button class="md-button md-raised md-primary" ng-click="tpl_authenticate()">Authenticate and Refresh
Devices
</md-button>
<div ng-if="tpl.token != ''">
<br/>
<md-divider/>
<h3>Current Status</h3>
<p class="md-caption">Found {{tpl.devices.length}} devices using token: <code>{{tpl.token}}</code></p>
</div>
</md-content>
</md-tab>
<md-tab label="About">
<md-content flex layout-padding>
<h3>About this application</h3>
<p>This webpage uses angular services to build a web control surface for the TP-Link series of smart
plugs. TP-Link's own official app (Kasa) only runs on iOS and Android devices, so those of you
with other tablets, mobiles, or desktops get left in the cold. This page attempts to address that.</p>
<md-divider/>
<div class="md-caption">
<p>In use, the Kasa app generates a unique ID, then combines this with the registration information you
supply at sign-up to retrieve a secure token from a TP-Link hosted API service. Requests for smart plug
availability, status and relay states are sent with this token to protect your privacy.</p>
<p>This application is able to generate a random UUID of its own, capture your credentials, and pass these
to the TP-Link hosted API service to obtain a genuine token. That token can then be used to list the devices
which are present, indicate their status, and allow you to switch them on/off from anywhere you like.</p>
<p>Information is only sent to and from the TP-Link APIs, and is not exposed to any other server. If you
opt to retain your login credentials and/or authentication token, these are stored in cookies within your
browser. They are not released to me or anyone else.</p>
<p>To access your plugs, make sure they have remote control enabled, and are registered with the
official Kasa App from TP-Link (<a
href="http://www.tp-link.com/us/home-networking/smart-home/kasa.html" target="_blank">Get
Kasa here</a>). Unfortunately, I don't know a way to perform the registration without (at least)
temporary access to the official app, but once registered you can send requests from any modern browser.</p>
<p>The full source for this project is available for free, online at <a
href="https://github.com/arallsopp/tp-link-smart-switch-web-client-" target="_blank">GitHub</a>.
</p>
<p>I hope you are able to make use of it.</p>
</div>
<p>Andy Allsopp</p>
</md-content>
</md-tab>
</md-tabs>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-cookies.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.js"></script>
<script src="script.js"></script>
</body>
</html>