Style login form with open ionic icons
This commit is contained in:
parent
2fb70a00bb
commit
d1d49a1d48
|
@ -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)
|
||||
})
|
||||
})
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
32
index.html
|
@ -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
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
});
|
||||
|
||||
|
|
|
@ -12,6 +12,8 @@
|
|||
|
||||
body {
|
||||
background: #f8f8f8;
|
||||
font: normal 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
.main-background {
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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;
|
||||
}
|
Loading…
Reference in New Issue