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)
console.log('Remove credential on logout')
remove.then(() => {
console.log('Switch to the login state')
AppStateService.set(AppStateService.APP_STATE_LOGIN)
})
})

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

@ -1,8 +1,8 @@
<div class="page-default">
<div class="chimeverse-branding">
<img src="./resources/images/logo.png" srcset="./resources/images/logo@2x.png 2x" alt="" />
<h3 class="uk-heading-small uk-text-muted uk-margin-remove">Chimeverse</h3>
<div class="uk-text-small uk-text-muted">v0.1.52</div>
<img src="./resources/images/logo.png" srcset="./resources/images/logo@2x.png 2x" alt="" class="chimeverse-branding__img" />
<h3 class="chimeverse-branding__header">Chimeverse</h3>
<div class="chimeverse-branding__version">v0.1.52</div>
</div>
<div class="conversejs-adoption">
<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>
<meta charset="UTF-8">
<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" 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/login-form.css">
</head>
<base href="./">
<body ng-app="app">
<div class="main-background"></div>
<div class="main-window" ng-controller="AppController" ng-cloak>
<div ng-show="state == 'default'">
<ng-include src="'./app/views/default/page.html'" onload="getCredentialsAndLogin()"></ng-include>
</div>
<div ng-show="state == 'login'" ng-controller="LoginController">
<form name="accountForm">
<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 ng-show="state == 'login'">
<ng-include src="'./app/views/login/page.html'"></ng-include>
</div>
<div ng-show="state == 'settings'">
settings

5
package-lock.json generated
View File

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

2
resources/css/app.css
View File

@ -12,6 +12,8 @@
body {
background: #f8f8f8;
font: normal 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
-webkit-text-size-adjust: 100%;
}
.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%;
position: absolute;
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;
}