AppGini Login Quickie: prepend icons for username and password

Got something cool to share with AppGini users? Feel free to post it here!
Post Reply
User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

AppGini Login Quickie: prepend icons for username and password

Post by jsetzer » 2020-02-22 12:14

Hi,

if you want to have icons before username and password, have a look here:

Result

LpjodKmUVR.png
LpjodKmUVR.png (6.44 KiB) Viewed 36151 times

Copy&Paste-Code

Code: Select all

<!-- file: hooks/header-extras.php -->
<script>
    prependIcons();
    function prependIcons() { $j(function() { prependIcon('username', 'user'); prependIcon('password', 'lock'); }); }
    function prependIcon(name, icon = "cog") { var f = $j("#" + name); var fg = f.closest(".form-group"); fg.prepend(jQuery('<div class="input-group"/>').prepend($j('<div class="input-group-addon">').append($j("<i/>").addClass('glyphicon glyphicon-' + icon))).append(f)); fg.prepend($j('label[for="' + name + '"]')); }
</script>


Default without icons

ImK73sv9lf.png
ImK73sv9lf.png (6.23 KiB) Viewed 36151 times


Best,
Jan
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
D Oliveira
AppGini Super Hero
AppGini Super Hero
Posts: 347
Joined: 2018-03-04 09:30
Location: David

Re: AppGini Login Quickie: prepend icons for username and password

Post by D Oliveira » 2020-02-22 17:27

nice touch ;) implemented! thank you jan

kanklovitch
Veteran Member
Posts: 159
Joined: 2019-02-03 17:26

Re: AppGini Login Quickie: prepend icons for username and password

Post by kanklovitch » 2020-04-13 13:25

Nice, I like it!

kerelov
Veteran Member
Posts: 42
Joined: 2020-04-17 21:20
Location: Bulgaria

Re: AppGini Login Quickie: prepend icons for username and password

Post by kerelov » 2020-04-25 22:39

Very good!

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: AppGini Login Quickie: prepend icons for username and password

Post by jsetzer » 2020-04-27 04:03

Thank you!

PS: next version (April 2020) of AppGini Helper JavaScript Library will contain a single function call for this:
new AppGiniLoginView().fix();
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools


User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: AppGini Login Quickie: prepend icons for username and password

Post by jsetzer » 2020-05-03 05:31

viewtopic.php?f=13&t=3329#p13261

April-2020 release is available for download since last Thursday, April 30th.
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools


sathukorala
AppGini Super Hero
AppGini Super Hero
Posts: 121
Joined: 2020-02-16 16:29

Re: AppGini Login Quickie: prepend icons for username and password

Post by sathukorala » 2020-05-03 09:25

jsetzer wrote:
2020-04-27 04:03
Thank you!

PS: next version (April 2020) of AppGini Helper JavaScript Library will contain a single function call for this:
new AppGiniLoginView().fix();
The single function has an alignment bug it seems. Long code is fine only the single function call

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: AppGini Login Quickie: prepend icons for username and password

Post by jsetzer » 2020-05-03 12:57

I am going to have a look on Monday
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: AppGini Login Quickie: prepend icons for username and password

Post by jsetzer » 2020-05-03 15:22

sathukorala wrote:
2020-05-03 09:25
The single function has an alignment bug it seems. Long code is fine only the single function call
Hi,
  • Could you please tell us what alignment bugs you see
  • It would be helpful if your bugreports would contain screenshots and some more information
  • Always ensure your browser has loaded latest version and not cached outdated version of JS and CSS
  • Always ensure that there is no other javascript bug which stops execution of code


This code works in testing environment with latest version 2020-04 of AppGini Helper Javascript Library and I cannot see any alignment problem:

Code: Select all

<!-- file: hooks/header-extras.php -->
<!-- ... your includes ... -->
<script>
new AppGiniLoginView().fix();
</script>
With fix
chrome_gyiw3mWUF5.png
chrome_gyiw3mWUF5.png (86.88 KiB) Viewed 32889 times

Default without fix
Zhydug2BGo.png
Zhydug2BGo.png (140.28 KiB) Viewed 32889 times
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

Post Reply