Changed caret: v1.5.0

TheWisker · TheWisker · commit 7eee9769be3e · 2023-06-27T19:23:36.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,19 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.5.0] - 2023-06-27
+ 
+Changed password caret so it is more symmetric
+ 
+### Added
+- Translations for the two new setting entries
+
+### Changed
+- Default caret to a custom scripted caret
+
+### Fixed
+- No fixes
+
 ## [1.4.3] - 2023-06-22
  
 Added LICENSE information to **Shikai**.
diff --git a/CITATION.cff b/CITATION.cff
@@ -3,6 +3,6 @@ message: "If you use this software in your work, or make a fork of it, please ci
 authors:
 - given-names: "TheWisker"
 title: "Shikai Project"
-version: 1.4.3
+version: 1.5.0
 date-released: 2023-03-31
 url: "https://github.com/TheWisker/Shikai"
diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
@@ -12,6 +12,7 @@
 
 These are the **Shikai** project **contributors**, ordered from most recent to least recent:
 
+- [Talin Sharma](https://github.com/TalinTheDev) => Opened an [issue](https://github.com/TheWisker/Shikai/issues/7) which resulted in an enhancement.
 - [Faisal Almalki](https://github.com/Faisal-beep22) => Added Arab language file in this [issue](https://github.com/TheWisker/Shikai/issues/5) and this [pull request](https://github.com/TheWisker/Shikai/pull/6).
 - [cidne](https://github.com/cidne) => Opened an [issue](https://github.com/TheWisker/Shikai/issues/3) which resulted in a bug fix.
 - [Tyler Schneider](https://github.com/teschnei) => Made this [pull request](https://github.com/TheWisker/Shikai/pull/1) fixing a bug related to the login process.
diff --git a/README.md b/README.md
@@ -19,6 +19,8 @@
   [Screenshots][screenshots]
   
   [Installation][installation]
+
+  [Updating][updating]
   
   [Dependencies][dependencies]
 
@@ -127,6 +129,10 @@ First, go to the `dist` **directory** located on the release folder and **open**
 
 Also, to set up a user **profile** image, copy the desired image to the user's **home** directory renaming it to `.face`.
 
+<h2 align="center">Updating [<a href="https://github.com/TheWisker/Shikai#index">↑</a>]</h2>
+
+When updating **Shikai** just keep in mind that if the **new** version contains **breaking changes** you must **delete localStorage** with the button in the settings panel **before** making the **update**. Apart from that, just update it as if you were [installing][installation] it *overwriting* in the case of a **manual** install.
+
 <h2 align="center">Dependencies [<a href="https://github.com/TheWisker/Shikai#index">↑</a>]</h2>
 
 <h3 align="left">Buildtime</h3>
@@ -221,6 +227,7 @@ We look forward to your translations!
 [livedemo]: https://github.com/TheWisker/Shikai#live-demo-
 [screenshots]: https://github.com/TheWisker/Shikai#screenshots-
 [installation]: https://github.com/TheWisker/Shikai#installation-
+[updating]: https://github.com/TheWisker/Shikai#updating-
 [dependencies]: https://github.com/TheWisker/Shikai#dependencies-
 [configuration]: https://github.com/TheWisker/Shikai#configuration-
 [discussions]: https://github.com/TheWisker/Shikai#discussions-
diff --git a/dist/LICENSE.shikai b/dist/LICENSE.shikai
@@ -6,7 +6,7 @@
 
 /*!
  * 
- * shikai 1.4.3 distribution
+ * shikai 1.5.0 distribution
  *
  * Copyright (c) 2023, TheWisker (https://github.com/TheWisker)
  * All rights reserved.
diff --git a/dist/index.css b/dist/index.css
diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/monitor.css b/dist/monitor.css
diff --git a/dist/monitor.js b/dist/monitor.js
@@ -1,5 +1,5 @@
 /*! 
-shikai 1.4.3 distribution
+shikai 1.5.0 distribution
             
 Copyright (c) 2023, TheWisker (https://github.com/TheWisker)
 All rights reserved.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "shikai",
-  "version": "1.4.3",
+  "version": "1.5.0",
   "description": "Modern lightdm webkit2 theme",
   "keywords": [
     "lightdm",
diff --git a/src/css/_bars.scss b/src/css/_bars.scss
@@ -126,7 +126,7 @@
         margin: 0 0 0 10px;
     }
 
-    input[type="text"] {margin: 0 0 0 15px;}
+    input[type="text"] {margin: 0 0 0 15px;}    
 }
 
 .colorsbar {
@@ -252,7 +252,7 @@
 
     margin: 15px auto;
 
-    input {
+    #password {
         @include general.box;
         @include general.font;
 
@@ -261,5 +261,6 @@
         padding: 0 15px;
         font-size: 1.2em;
         text-align: center;
+        caret-color: transparent;
     }
 }
diff --git a/src/js/Components/LoginWindow/Userbar/Password.jsx b/src/js/Components/LoginWindow/Userbar/Password.jsx
@@ -19,40 +19,48 @@ import {data} from "../../../../lang";
 class Password extends React.Component {
     constructor(props) {
         super(props);
-        this.state = {value: ""};
+        this.state = {value: "", active: false};
         this.update = this.update.bind(this);
-        this.submit = this.submit.bind(this);
         if (window.__is_debug != true) {this.auth_event = () => {lightdm.respond(this.state.value); setTimeout(() => {if (!lightdm.is_authenticated) {this.props.failure();}}, 250)};}
     }
 
     componentDidMount() {if (window.__is_debug != true) {lightdm.show_prompt.connect(this.auth_event);}}
     
     componentWillUnmount() {if (window.__is_debug != true) {lightdm.show_prompt.disconnect(this.auth_event);}}
 
-    update(e) {this.setState({value: e.target.value}); e.preventDefault();}
-
-    submit(e) {
-        if (e.which == 13) { //Enter key
-            if (window.__is_debug === true) {
-                if (this.state.value == "password") {
-                    notify(data.get(this.props.lang, "notifications.logged_in") + " " + this.props.user.username + "!", types.Success); this.props.success();
-                } else {notify(data.get(this.props.lang, "notifications.wrong_password"), types.Error); this.props.failure();}
-            } else {lightdm.cancel_authentication(); lightdm.authenticate(this.props.user.username);}
-        }; e.preventDefault();
+    update(e) {
+        if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Tab', 'Alt', 'Meta', 'Control', 'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12', 'OS'].includes(e.key)) {
+            if (e.which == 13) { //Enter key
+                if (window.__is_debug === true) {
+                    if (this.state.value == "password") {
+                        notify(data.get(this.props.lang, "notifications.logged_in") + " " + this.props.user.username + "!", types.Success); this.props.success();
+                    } else {notify(data.get(this.props.lang, "notifications.wrong_password"), types.Error); this.props.failure();}
+                } else {lightdm.cancel_authentication(); lightdm.authenticate(this.props.user.username);}
+            } else if (e.which == 8 || e.which == 46) { //Backspace key or Supr key
+                this.setState({value: this.state.value.slice(0, -1)});
+            } else {
+                console.log(e.key);
+                this.setState({value: this.state.value + e.key});
+            }; e.preventDefault();
+        }
     }
     
     render() {
-        return (<input id="password" disabled={this.props.inactive} value={this.state.value} type="password" onChange={this.update} onKeyUp={this.submit} className={
+        return (<div id="password" disabled={this.props.inactive} tabIndex="0" value={this.state.value} onKeyDown={this.update} onFocus={() => {this.setState({active: true})}} onBlur={() => {this.setState({active: false})}} className={
             cxs({
                 color: this.props.color,
                 borderTop: this.props.border.top,
                 borderBottom: this.props.border.top,
                 borderLeft: this.props.border.left,
                 borderRight: this.props.border.left,
                 borderRadius: this.props.border.radius,
-                background: this.props.background
+                background: this.props.background,
+                minHeight: "calc(1.2em + " + (+this.props.border.top.slice(0, 1) * 2) + "px + 1px)",
+                position: "relative",
+                "::before": {content: this.state.active ? '"' + this.props.caret.left + '"' : '""'},
+                "::after": {content: this.state.active ? '"' + this.props.caret.right + '"' : '""'}
             })
-        }/>);
+        }>{(this.state.value.length > 14) ? "*".repeat(14) : "*".repeat(this.state.value.length)}</div>);
     }
 }
 
@@ -64,6 +72,10 @@ export default connect(
             left: state.settings.style.userbar.password.border.left,
             radius: state.settings.style.userbar.password.border.radius
         },
+        caret: {
+            left: state.settings.style.userbar.password.caret.left,
+            right: state.settings.style.userbar.password.caret.right
+        },
         background: state.settings.style.userbar.password.background,
         inactive: state.runtime.events.inactivity,
         lang: state.settings.behaviour.language,
diff --git a/src/js/Components/SettingsWindow/Sections/Style.jsx b/src/js/Components/SettingsWindow/Sections/Style.jsx
@@ -54,6 +54,8 @@ class Style extends React.Component {
                     <Inputs.Textarea name={data.get(this.props.lang, "settings.style.sections.misc.options.horizontal")} action={(b) => this.props.set("userbar.password.border.left", b)} value={this.props.style.userbar.password.border.left}/>
                     <Inputs.Textarea name={data.get(this.props.lang, "settings.style.sections.misc.options.password")} action={(b) => this.props.set("userbar.password.border.radius", b)} value={this.props.style.userbar.password.border.radius}/>
                     <Inputs.Textarea name={data.get(this.props.lang, "settings.style.sections.misc.options.session")} action={(b) => this.props.set("userbar.session.radius", b)} value={this.props.style.userbar.session.radius}/>
+                    <Inputs.Textarea name={data.get(this.props.lang, "settings.style.sections.misc.options.caret.left")} action={(b) => this.props.set("userbar.password.caret.left", b)} value={this.props.style.userbar.password.caret.left}/>
+                    <Inputs.Textarea name={data.get(this.props.lang, "settings.style.sections.misc.options.caret.right")} action={(b) => this.props.set("userbar.password.caret.right", b)} value={this.props.style.userbar.password.caret.right}/>
                 </div>
             </div>
         </React.Fragment>);
diff --git a/src/js/Redux/Store.js b/src/js/Redux/Store.js
@@ -85,7 +85,11 @@ const default_state = {
                         radius: "18px"
                     },
                     color: "rgba(0,255,245,1)",
-                    background: "rgba(0,0,0,0.4)"
+                    background: "rgba(0,0,0,0.4)",
+                    caret: {
+                        left: "<",
+                        right: ">"
+                    }
                 }
             }
         }
@@ -154,7 +158,11 @@ const default_state = {
                                 "radius": "18px"
                             },
                             "color": "rgba(0,255,245,1)",
-                            "background": "rgba(0,0,0,0.4)"
+                            "background": "rgba(0,0,0,0.4)",
+                            "caret": {
+                                "left": "<",
+                                "right": ">"
+                            }
                         }
                     }
                 }
@@ -223,7 +231,11 @@ const default_state = {
                                 "radius": "18px"
                             },
                             "color": "rgba(255,0,0,1)",
-                            "background": "rgba(0,0,0,0.4)"
+                            "background": "rgba(0,0,0,0.4)",
+                            "caret": {
+                                "left": "<",
+                                "right": ">"
+                            }
                         }
                     }
                 }
@@ -292,7 +304,11 @@ const default_state = {
                                 "radius": "18px"
                             },
                             "color": "rgba(255,255,255,1)",
-                            "background": "rgba(255,255,255,0.4)"
+                            "background": "rgba(255,255,255,0.4)",
+                            "caret": {
+                                "left": "<",
+                                "right": ">"
+                            }
                         }
                     }
                 }
@@ -361,7 +377,11 @@ const default_state = {
                                 "radius": "18px"
                             },
                             "color": "rgba(0,255,245,1)",
-                            "background": "rgba(0,237,255,0.4)"
+                            "background": "rgba(0,237,255,0.4)",
+                            "caret": {
+                                "left": "<",
+                                "right": ">"
+                            }
                         }
                     }
                 }
@@ -430,7 +450,11 @@ const default_state = {
                                 "radius": "18px"
                             },
                             "color": "rgba(81,0,248,1)",
-                            "background": "rgba(145,0,255,0.2)"
+                            "background": "rgba(145,0,255,0.2)",
+                            "caret": {
+                                "left": "<",
+                                "right": ">"
+                            }
                         }
                     }
                 }
@@ -499,7 +523,11 @@ const default_state = {
                                 "radius": "18px"
                             },
                             "color": "rgba(195,78,254,1)",
-                            "background": "rgba(0,5,159,0.2)"
+                            "background": "rgba(0,5,159,0.2)",
+                            "caret": {
+                                "left": "<",
+                                "right": ">"
+                            }
                         }
                     }
                 }
diff --git a/src/lang/arb.js b/src/lang/arb.js
@@ -123,7 +123,11 @@ export default {
                             vertical: "حجم حدود كلمة المرور العامودية",
                             horizontal: "حجم حدود كلمة المرور الأفقية",
                             password: "حجم قطر خانة كلمة المرور",
-                            session: "حجم قطر خانة الجلسة"
+                            session: "حجم قطر خانة الجلسة",
+                            caret: {
+                                left: "تركت كلمة السر رمز زخرفي",
+                                right: "كلمة المرور رمز الزخرفة الصحيح"
+                            }
                         }
                     }
                 }
diff --git a/src/lang/eng.js b/src/lang/eng.js
@@ -123,7 +123,11 @@ export default {
                             vertical: "Password top bottom borders",
                             horizontal: "Password left right borders",
                             password: "Password border radius",
-                            session: "Session border radius"
+                            session: "Session border radius",
+                            caret: {
+                                left: "Password left decorative symbol",
+                                right: "Password right decorative symbol"
+                            }
                         }
                     }
                 }
diff --git a/src/lang/fre.js b/src/lang/fre.js
@@ -123,7 +123,11 @@ export default {
                             vertical: "Bordure supérieure inférieure du mot de passe",
                             horizontal: "Mot de passe bordures gauche droite",
                             password: "Rayon de la bordure du mot de passe",
-                            session: "Rayon de la bordure de la session"
+                            session: "Rayon de la bordure de la session",
+                            caret: {
+                                left: "Symbole décoratif gauche du mot de passe",
+                                right: "Mot de passe bon symbole décoratif"
+                            }
                         }
                     }
                 }
diff --git a/src/lang/ger.js b/src/lang/ger.js
@@ -123,7 +123,11 @@ export default {
                             vertical: "Passwörter oben unten Grenzen",
                             horizontal: "Passwort linke rechte Grenzen",
                             password: "Radius der Passwortgrenze",
-                            session: "Radius der Sitzungsgrenze"
+                            session: "Radius der Sitzungsgrenze",
+                            caret: {
+                                left: "Passwort hinterließ dekoratives Symbol",
+                                right: "Passwort rechts dekoratives Symbol"
+                            }
                         }
                     }
                 }
diff --git a/src/lang/jap.js b/src/lang/jap.js
@@ -123,7 +123,11 @@ export default {
                             vertical: "パスワードの上下の境界線",
                             horizontal: "パスワードの左右の境界線",
                             password: "パスワード境界半径",
-                            session: "セッション境界半径"
+                            session: "セッション境界半径",
+                            caret: {
+                                left: "パスワード左装飾記号",
+                                right: "パスワード右の装飾記号"
+                            }
                         }
                     }
                 }
diff --git a/src/lang/spa.js b/src/lang/spa.js
@@ -123,7 +123,11 @@ export default {
                             vertical: "Bordes superiores e inferiores de la contraseña",
                             horizontal: "Bordes laterales de la contraseña",
                             password: "Radio del borde de la contraseña",
-                            session: "Radio del borde de la sesión"
+                            session: "Radio del borde de la sesión",
+                            caret: {
+                                left: "Símbolo decorativo izquierdo de contraseña",
+                                right: "Símbolo decorativo derecho de contraseña"
+                            }
                         }
                     }
                 }

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`
`7`	`7`	`/*!`
`8`	`8`	`*`
`9`		`- * shikai 1.4.3 distribution`
	`9`	`+ * shikai 1.5.0 distribution`
`10`	`10`	`*`
`11`	`11`	`* Copyright (c) 2023, TheWisker (https://github.com/TheWisker)`
`12`	`12`	`* All rights reserved.`