crt0mega
/
converse-desktop
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Style login form with open ionic icons

This commit is contained in:
Nick Denry 2020-05-10 00:06:57 +03:00
parent 2fb70a00bb
commit d1d49a1d48
10 changed files with 146 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/services/chimeverse-service.js
View File

@ -19,7 +19,6 @@ angApp.factory('ChimeVerseService', ($window, SettingsServise, SystemService, Ap
let remove = SettingsServise.removeCredentials(result.login) let remove = SettingsServise.removeCredentials(result.login)
console.log('Remove credential on logout') console.log('Remove credential on logout')
remove.then(() => { remove.then(() => {
console.log('Switch to the login state')
AppStateService.set(AppStateService.APP_STATE_LOGIN) AppStateService.set(AppStateService.APP_STATE_LOGIN)
}) })
}) })

6
app/views/default/page.html
View File

@ -1,8 +1,8 @@
<div class="page-default"> <div class="page-default">
<div class="chimeverse-branding"> <div class="chimeverse-branding">
<img src="./resources/images/logo.png" srcset="./resources/images/logo@2x.png 2x" alt="" /> <img src="./resources/images/logo.png" srcset="./resources/images/logo@2x.png 2x" alt="" class="chimeverse-branding__img" />
<h3 class="uk-heading-small uk-text-muted uk-margin-remove">Chimeverse</h3> <h3 class="chimeverse-branding__header">Chimeverse</h3>
<div class="uk-text-small uk-text-muted">v0.1.52</div> <div class="chimeverse-branding__version">v0.1.52</div>
</div> </div>
<div class="conversejs-adoption"> <div class="conversejs-adoption">
<div id="conversejs"></div> <div id="conversejs"></div>

32
app/views/login/page.html Normal file
View File

@ -0,0 +1,32 @@
<div class="login-form">
<h3 class="login-form__title">Welcome to Chimeverse</h3>
<div class="login-form__description">Jabber/XMPP client based on Converse.js and Electron</div>
<div class="login-form__card">
<form name="accountForm" ng-controller="LoginController">
<div class="login-form__wrapper">
<div class="login-form__input-group">
<span class="oi" data-glyph="link-intact"></span>
<input ng-model="bosh" class="login-form__input" type="text" placeholder="Bosh service url" required>
</div>
</div>
<div class="login-form__wrapper">
<div class="login-form__input-group">
<span class="oi" data-glyph="person"></span>
<input ng-model="login" class="login-form__input" type="text" placeholder="jid@jabber.org" required>
</div>
</div>
<div class="login-form__wrapper">
<div class="login-form__input-group">
<span class="oi" data-glyph="lock-locked"></span>
<input ng-model="password" class="login-form__input" type="password" placeholder="Password" required>
</div>
</div>
<div class="login-form__wrapper">
<button class="login-form__button" ng-click="addAccountAndLoginAction()" ng-disabled="accountForm.$invalid" disabled>Add account</button>
</div>
<div class="uk-text-small uk-text-center">
Credentials stored via Keychain
</div>
</form>
</div>
</div>

32
index.html
View File

@ -4,45 +4,21 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Chimeverse</title> <title>Chimeverse</title>
<link rel="stylesheet" type="text/css" media="screen" href="node_modules/open-iconic/font/css/open-iconic.css">
<link rel="stylesheet" type="text/css" media="screen" href="node_modules/converse.js/dist/converse.min.css"> <link rel="stylesheet" type="text/css" media="screen" href="node_modules/converse.js/dist/converse.min.css">
<link rel="stylesheet" type="text/css" href="resources/css/app.css"> <link rel="stylesheet" type="text/css" href="resources/css/app.css">
<link rel="stylesheet" type="text/css" href="resources/css/page-default.css"> <link rel="stylesheet" type="text/css" href="resources/css/page-default.css">
<link rel="stylesheet" type="text/css" href="resources/css/login-form.css">
</head> </head>
<base href="./"> <base href="./">
<body ng-app="app"> <body ng-app="app">
<div class="main-background"></div> <div class="main-background"></div>
<div class="main-window" ng-controller="AppController" ng-cloak> <div class="main-window" ng-controller="AppController" ng-cloak>
<div ng-show="state == 'default'"> <div ng-show="state == 'default'">
<ng-include src="'./app/views/default/page.html'" onload="getCredentialsAndLogin()"></ng-include> <ng-include src="'./app/views/default/page.html'" onload="getCredentialsAndLogin()"></ng-include>
</div> </div>
<div ng-show="state == 'login'" ng-controller="LoginController"> <div ng-show="state == 'login'">
<form name="accountForm"> <ng-include src="'./app/views/login/page.html'"></ng-include>
<div class="uk-margin">
<div class="uk-inline uk-width-1-1">
<span class="uk-form-icon" uk-icon="icon: link"></span>
<input ng-model="bosh" class="uk-input uk-form-large" type="text" placeholder="Bosh service url" required>
</div>
</div>
<div class="uk-margin">
<div class="uk-inline uk-width-1-1">
<span class="uk-form-icon" uk-icon="icon: user"></span>
<input ng-model="login" class="uk-input uk-form-large" type="text" placeholder="jid@jabber.org" required>
</div>
</div>
<div class="uk-margin">
<div class="uk-inline uk-width-1-1">
<span class="uk-form-icon" uk-icon="icon: lock"></span>
<input ng-model="password" class="uk-input uk-form-large" type="password" placeholder="Password" required>
</div>
</div>
<div class="uk-margin">
<button class="uk-button uk-button-primary uk-button-large uk-width-1-1" ng-click="addAccountAndLoginAction()" ng-disabled="accountForm.$invalid" disabled>Add account</button>
</div>
<div class="uk-text-small uk-text-center">
Credentials stored via Keychain
</div>
</form>
</div> </div>
<div ng-show="state == 'settings'"> <div ng-show="state == 'settings'">
settings settings

5
package-lock.json generated
View File

@ -2399,6 +2399,11 @@
"mimic-fn": "^1.0.0" "mimic-fn": "^1.0.0"
} }
}, },
"open-iconic": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/open-iconic/-/open-iconic-1.1.1.tgz",
"integrity": "sha1-nc/Ix808Yc20ojaxo0eJTJetwMY="
},
"ora": { "ora": {
"version": "3.4.0", "version": "3.4.0",
"resolved": "https://registry.npmjs.org/ora/-/ora-3.4.0.tgz", "resolved": "https://registry.npmjs.org/ora/-/ora-3.4.0.tgz",

3
package.json
View File

@ -29,6 +29,7 @@
"converse.js": "^6.0.0", "converse.js": "^6.0.0",
"electron-settings": "^3.2.0", "electron-settings": "^3.2.0",
"keytar": "^4.13.0", "keytar": "^4.13.0",
"n": "^6.5.1" "n": "^6.5.1",
"open-iconic": "^1.1.1"
} }
} }

3
renderer.js
View File

@ -20,6 +20,7 @@ angApp.controller('AppController', function ($scope, $timeout, ChimeVerseService
const { ipcRenderer } = require('electron') const { ipcRenderer } = require('electron')
ipcRenderer.on('force-logout-event', () => { ipcRenderer.on('force-logout-event', () => {
ChimeVerseService.logout()
let event = new CustomEvent("converse-force-logout") // Dispatch to the plugin let event = new CustomEvent("converse-force-logout") // Dispatch to the plugin
document.dispatchEvent(event) document.dispatchEvent(event)
//remote.getCurrentWindow().reload() //remote.getCurrentWindow().reload()
@ -31,7 +32,7 @@ angApp.controller('AppController', function ($scope, $timeout, ChimeVerseService
// @see https://docs.angularjs.org/error/$rootScope/inprog // @see https://docs.angularjs.org/error/$rootScope/inprog
$timeout(() => { $timeout(() => {
$scope.state = data $scope.state = data
console.log($scope.state) console.log('Switch to the "' + $scope.state +'" state')
}, 0) }, 0)
}); });

2
resources/css/app.css
View File

@ -12,6 +12,8 @@
body { body {
background: #f8f8f8; background: #f8f8f8;
font: normal 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
-webkit-text-size-adjust: 100%;
} }
.main-background { .main-background {

77
resources/css/login-form.css Normal file
View File

@ -0,0 +1,77 @@
.login-form {
color: #777;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
.login-form__title {
font-size: 28px;
text-align: center;
font-weight: normal;
margin: 0px 0px 15px 0px;
}
.login-form__description {
text-align: center;
}
.login-form__card {
background: #fff;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
margin-top: 30px;
padding: 30px;
}
.login-form__wrapper {
margin-bottom: 15px;;
}
.login-form__input-group {
border: 1px solid #ddd;
border-radius: 0px;
padding: 0px 0px 0px 30px;
position: relative;
}
.login-form__input-group:active,
.login-form__input-group:focus,
.login-form__input-group:hover {
border: 1px solid #aaa;
}
.login-form__input-group span {
position: absolute;
left: 15px;
top: 12px;
}
.login-form__input {
border: 0px;
color: #222;
font-size: 18px;
outline: none;
padding: 10px;
width: 290px;
}
.login-form__input::placeholder { /* Most modern browsers support this now. */
color: #ddd;
}
.login-form__button {
border: 1px solid #ddd;
background: rgb(5,93,228);
background: linear-gradient(0deg, rgba(5,93,228,1) 0%, rgba(76,145,255,1) 100%);
color: #fff;
display: inline-block;
font-size: 18px;
outline: none;
padding: 10px 30px;
width: 100%;
}
.login-form__button:disabled {
background: #eee;
}

20
resources/css/page-default.css
View File

@ -2,5 +2,23 @@
left: 50%; left: 50%;
position: absolute; position: absolute;
top: 50%; top: 50%;
width: 300px; transform: translate(-50%, -50%);
text-align: center;
}
.chimeverse-branding__img {
margin-left: 20px;
}
.chimeverse-branding__header {
font-size: 34px;
font-weight: normal;
color: #999;
margin: 0px;
}
.chimeverse-branding__version {
font-size: 12px;
color: #999;
margin-top: 10px;
} }