How to add the locale to the account page in Keycloak? - themes

We need to let our users to set the preferred locale.
I can see that the locale is editable by a select menu in the users' admin page but it is not present in the default theme account page.
In our custom theme we want to add the select menu for the locale, is there a standard way?
In the API UserRepresentation doesn't have a locale property, do we need to use an attribute?

We resolved adding this element in the account.ftl template of the account theme, just after the lastName div
<div class="form-group ${messagesPerField.printIfExists('locale','has-error')}">
<div class="col-sm-2 col-md-2">
<label for="user.attributes.locale" class="control-label">${msg("locale")}</label> <span class="required">*</span>
</div>
<div class="col-sm-10 col-md-10">
<select class="form-control" id="user.attributes.locale" name="user.attributes.locale">
<#list locale.supported as l>
<option class="kc-dropdown-item" <#if l.languageTag==account.attributes.locale!'en'>selected="selected"</#if> value="${l.languageTag}">${l.label}</option>
</#list>
</select>
</div>
</div>
We need also to add the locale label to messages_xx.properties files for the supported locales

Related

Wicket internationalization

I have a label which display a given text coming from a String variable.
This variable can have two different values and for each value I have a translated version from english to my native language stored in a property file.
I have the following code:
add(new Label("fruit", new PropertyModel(getModelObject(), "fruit.name")));
and HTML:
<wicket:panel xmlns:wicket="http://wicket.apache.org/">
<div>
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-5">
<wicket:message key="myBasket.fruit">
</wicket:message>
</div>
<div class="col-sm-7">
<span wicket:id="fruit"></span>
</div>
</div>
</div>
</div>
</div>
</wicket:panel>
This fruit can be either apple or pear.
In my property file I have a translation for both values:
apple=Apfel
pear=Birne
When I run my code, the content of my label displays in English.
How can I set the value coming from the property file based on the value of the variable?
Thank you!
take a look at class StringResourceModel. You should use it as model for your Label. See user guide.

Custom File upload with other form fields using dropzone js and laravel

This is the first time I'm using dropzone js. I've following requirement.
My form has following fields
Name
Category
Description
Images
Here Name is input field, Category is selector, Description is Textfield and Images is multiple file upload field.
{{ csrf_field() }}
<div class="form-group">
<label for="name" class="col-form-label">Name</label>
<div>
<input type="text" name="name" class="form-control"
required placeholder="Enter Name of the Package" value="#if(isset($package)) {{$package->name}} #else {{old('name')}}#endif" />
</div>
</div>
<div class="form-group">
<label for="category_id" class="col-form-label">Select</label>
<select class="form-control" name="category_id" required>
<option value="">Select Category</option>
#foreach($categories as $category )
<option value="{{$category->id}}"
#if(isset($package))
#if($package->category_id==$category->id)
selected
#endif
#else
#if(old('category_id') == $category->id)
selected
#endif
#endif
>{{$category->name}}</option>
#endforeach
</select>
</div>
<div class="form-group">
<label>Description</label>
<textarea name="description" class="form-control" required placeholder="Type something">{{isset($package) ? $package->description:old('description')}}</textarea>
</div>
<div class="form-group">
//here I need multiple file upload field with dropzone js
</div>
My problem is files are not attached when form is submitted as normal post request. Is there any way to make such custom form in laravel.
I've found a lot of solution with form having image upload field only but i didn't find solution for my case.
If you need further information, feel free to ask.
Thanks,
You could try using the .getAcceptedFiles() or similar to get the files that are uploaded and then pass that info in an ajax post or get.

How to understand Multitenancy is enabled or not in view?

We are not using multi-tenancy. When it is disabled most of the tenant related UI gets hidden but in the LinkedAccount page, the user can view the tenancy name(which is Default). We wanted to hide it in the UI. Tried to find a property like IsMultiTenancyEnabled but couldn't find(Actually it is in the IMultiTenancyConfig but not available to razor page). So, how can hide UI elements if Multitenancy is not enabled?
//This is the code we want to hide.
<div class="form-group">
<label>#L("TenancyName")</label>
<input type="text" name="TenancyName" class="form-control" value="#(ViewBag.TenancyName ?? "")" maxlength="#TurkKizilayi.RFL.MultiTenancy.Tenant.MaxTenancyNameLength">
</div>
And there is one thing more: What happens if we hide this code anyway? Should we change the model or app service (Yes)?
For MVC you can inject IMultiTenancyConfig into your view.
Here is the final code of what you want;
#inject IMultiTenancyConfig MultiTenancyConfig
#using Abp.Configuration.Startup
#using MyCompanyName.AbpZeroTemplate.Web.Areas.AppAreaName.Models.Common.Modals
#Html.Partial("~/Areas/AppAreaName/Views/Common/Modals/_ModalHeader.cshtml", new ModalHeaderViewModel(L("LinkNewAccount")))
<div class="modal-body">
<form name="LinkAccountModalForm" role="form" novalidate class="form-validation">
#if (MultiTenancyConfig.IsEnabled)
{
<div class="form-group">
<label>#L("TenancyName")</label>
<input type="text" name="TenancyName" class="form-control" value="#(ViewBag.TenancyName ?? "")" maxlength="#MyCompanyName.AbpZeroTemplate.MultiTenancy.Tenant.MaxTenancyNameLength">
</div>
}
<div class="form-group">
<label>#L("UserName")</label>
<input class="form-control" type="text" name="UsernameOrEmailAddress" required maxlength="#MyCompanyName.AbpZeroTemplate.Authorization.Users.User.MaxEmailAddressLength">
</div>
<div class="form-group">
<label>#L("Password")</label>
<input type="password" name="Password" autocomplete="off" class="form-control" required maxlength="#MyCompanyName.AbpZeroTemplate.Authorization.Users.User.MaxPasswordLength">
</div>
</form>
</div>
#Html.Partial("~/Areas/AppAreaName/Views/Common/Modals/_ModalFooterWithSaveAndCancel.cshtml")
There is already a service AbpMultiTenancyService in the Angular project. AppComponentBase already has definition for multiTenancy. so if your component class is inheriting from AppComponentBase then you can directly use this service.
You can define a property in *.ts file like below.
isMultiTenancyEnabled: boolean = this.multiTenancy.isEnabled
Then you can use the same in HTML like below.
*ngIf="isMultiTenancyEnabled"
Or you can simply use the following code.
abp.multiTenancy.isEnabled

view new div based on option value of select tag using laravel

i have a dropdown list when i select any one option from list i should display an another form with name of the teacher and subject of the teacher in textbox.The form is not displaying.when i select one item it should display the selected name and description box to add subjects of teachers that they interested please help me
view page
<div class="portlet light bordered row">
<h1>Add teacher subject</h1>
<div class="row">
<form action = "{{ url('subjectby/adding/process') }}" method = "POST">
{{ csrf_field() }}
<div class= "col-md-12">
<div class="form-group">
<h3>Choose Teachers </h3>
<div class="input-group">
<div class="ui-widget border-dropdown" style="margin-left:50px;">
<select id="teacher" name="teachers" placeholder="Select Teacher">
<option value="">Select Teacher</option>
#foreach($user as $tec)
<option value="{{$tec->id}}">{{$tec->name}}</option>
#endforeach
</select>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="new">
<div class="form-group">
<div class="col-sm-6">
<label for="inputFacebook">Teacher Name</label>
<input type=hidden value="{{$tec->id}}" name="id">
<input type="text" value="{{$tec->name}}" class="form-control" name="name">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<label for="inputDescription">Subject Interested</label>
<textarea class="form-control" rows="8" name="intr" placeholder="Enter Subject Interest"> </textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="submit" value="add" name=b1>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
This isn't a Laravel specific problem. You are taking about DOM manipulation and so you best bet is to use jQuery or Vuejs or even vanilla Javascript if you so choose. Basically, you will write a script to watch for when your <select> changes, and then based on it's new value, show the part of the form you want.
Keep in mind that Laravel is a backend framework and so the user will never interact with it on a page. After a page loads, Laravel has done all it can do until another request is made. This is why Javascript was born - to let the user change things without reloading the page.

How to populate selectbox based on selection of another selectbox using Spring 4 Boot + ThymeLeaf+Hibernate

I am creating a registration form where i am have to create three select box. First selectbox contains all the countries, based on selection the state select box become visible and only state available in particular selected country will be display. there is also city selectbox too, where by default city dropdown will not display until state been selected and based on selection only cities belongs to particular state selected in state selectbox will be displayed.
I am able to generate all select box, but how to filter based on selection, i really don't know.
Effort:
<div class="form-group">
<label th:text="#{register.label.country}" `class="col-md-4 control-label">Country:</label>
<div class="col-md-6">
<select class="form-control" th:field="*{address.country}">
<option value="-1">--- Select Country ---</option>
<option th:each="country : *{countries}" th:value="${country.configId}" th:text="${country.configName}"></option>
</select>
<strong th:if="${#fields.hasErrors('address.country')}" th:errors="*{address.country}">Country Error</strong>
</div>
</div>
<div class="form-group">
<label th:text="#{register.label.state}" class="col-md-4 control-label">State:</label>
<div class="col-md-6">
<select class="form-control" th:field="*{address.state}">
<option value="-1">--- Select State ---</option>
<option th:each="state : *{states.?[parentid = 1]}" th:value="${state.configId}" th:text="${state.configName}"></option>
</select>
<strong th:if="${#fields.hasErrors('address.state')}" th:errors="*{address.state}">Country Error</strong>
</div>
</div>
<div class="form-group">
<label th:text="#{register.label.city}" class="col-md-4 control-label">City:</label>
<div class="col-md-6">
<select class="form-control" th:field="*{address.city}">
<option value="-1">--- Select City ---</option>
<option th:each="city : *{cities}" th:value="${city.configId}" th:text="${city.configName}"></option>
</select>
<strong th:if="${#fields.hasErrors('address.city')}" th:errors="*{address.city}">Country Error</strong>
</div>
</div>
I am able to generate all the selectbox, but i really don't know how to generate based on selection in thymeleaf with Spring boot.
Please help me. I know i can do this by using jquery ajax, but i want to avoid, i am thing is it possible with thymeleaf itself or not.
Thymeleaf is a server-side web template engine.
Once it is rendered, and is displayed to client, Thymeleaf is no longer there.
The only way to handle it is through javascript; or by sending a new request to render new filtered options.

Resources